最近、サークルページを作り直した話
はじめに
本記事は【まんてらスタジオ】みんなの闇鍋 Advent Calendar 2022 兼 完全に理解したTalk Advent Calendar 2022 18日目の記事になります。
今回は、手前味噌ではありますが、タイトル通りに最近サークルページをリメイクしましたので、そのときのお話を絵日記風に綴ろうと思います。いわゆるポエム記事です。
ポートフォリオサイトをリメイクしました！
ということで、先日サークルページ/ポートフォリオサイトをリニューアルしました。
以前に比べておしゃれになったので、この記事は読まなくてもいいので一度は訪問してみてもらえると嬉しいです。
2016年に作って以来、2021年、2022年と今回がバージョン３に当たります。
リニューアルしようと思ったきっかけ
ありがたいことに、ここ1,2年でいろいろなイベントに参加する機会が増えてきました。
そのときにサークルページのリンクを貼るのですが、これがダサいのなんの。
動作確認でリンク先に飛ぶたびに、ビミョーな出来のサイトを眺めては恥ずかしい思いでした。
どこがダサいのか
最初に作った当時は、ホームページの知識もなく、HTML/CSS/JS直書きのテンプレートを使っていました。
いかにも2000年代初頭を思わせる雰囲気のサイトでした。
2021年のリニューアルを経てもその古めかしさが残っていました。
そのほかにも
- 1ページに収まっていない
- スマホで見ると見切れる
- テキストが多く、視覚的に捉えづらい
- 単調で堅苦しい雰囲気で見ていて飽きる
- ボタンで押せることがわかりづらいなど、UIが直感的じゃない
- そもそもサークルページじゃない
などなどダサいポイントがたくさんありました。
これらのポイントを１つずつ直していくことがリニューアルの目標になります。
どこから手をつけるか
コンセプトを考える
最初にサイトの世界観を考えようとしました。
よくあるものだと、ドラクエ風やVim風など、好きなゲームやサービス、アプリケーションっぽいUI、雰囲気のサイトにしようといったものです。
世界観が決まっていると、自ずとパーツのデザインやページのレイアウトが決まってくるので、この先の作業がサクサク進みます。
ただ、今回は考えようとしたものの、私はそんなベースとしたいものが思いつきませんでした。
サークル名が「もちっとカフェ」なのでカフェっぽいイメージにしたいなと言うざっくりイメージだけ決めてスタートすることにしました。
イメージを膨らます
テーマが決まっているのであれば、
- 出かけて実物を見る
- ゲームのスクリーンショットをいっぱい撮る
- ウェブサイトを穴が空くほどじっくり観察する
など対象のものを研究するのが良いのでしょう。
しかし、ベースとしたいものが思いつかなかったので、色々な方の気に入ったパーツの寄せ集めで作ることにしました。
デザインやサイトの雰囲気は、好きなイラストレーターさんのサークルページから着想を得ることにしました。(超売れっ子さんでないとHTTPS対応したページがない...)
エンジニアのサイトっぽいパーツは、エンジニアさんのポートフォリオサイトを参考にしました。
幸いReactのようなモダンなフレームワークは、アトミックデザインがマッチすることからわかるよう、パーツパーツを組み合わせてコンポーネントやページを作りやすくなっています。
ありがたいことに、コードが公開されているので、動きと実装を紐づけやすくなっています。
一般的なディレクトリ構成の仕方を知っているとどの辺にお目当ての実装があるか見つけやすくなります。
おおまかな完成図を作る
なんとなくのイメージが膨らんできたら、並べたいコンテンツを洗い出すことにしました。
スライドもそうですが、足し算ではなく引き算で作っていくスタイルなので、最初は欲張りくらい挙げます。
そこから1ページにまとまるよう絞り込んでいきます。
ダサかった１つの理由が、大量に並べたタブでした。
ReactなどのフレームワークがSPA向きというのもありますが、たくさんページがあると読む側も作る側も息切れしてしまいます。
さらに、このタブの実装がイマイチでスマホで見たときにレイアウト崩れを招いていました。
頭の中で並べてもいいし、MiroやFigmaなどのデザインツールを使ってもいいでしょう。
可視化してみて、イラネってなったものを削ります。
今回だと、サイトポリシーやプライバシーポリシーを削りました。
スタティックなページを作る
まずは止まった状態でのサイトを作りきってしまいます。
配置したいものが決まったら、配置を考えていきます。
このとき、同じパターンを繰り返すように並べます。
スキルでもアプリでも、とにかくオブジェクトを並べます。
パターンを繰り返しすと、統一感が出ます。
私が良く参考にしているデザインのサイトにはこのほかにもいろいろなデザインアイディアがあるのでよかったら参考にしてみてください。
あと、できるのであれば、イラストや画像を用意しましょう。
中身は他愛のないものであっても、視覚情報があると単なる羅列でもグッとそれっぽく映えます。
自分の作ったものがズラっと並んだ様を見るとなんとも言えない達成感を味わえます。
このテクニックはインフォグラフィックスと呼ばれているようで、図にすることでテキストだけより短時間で多くの情報を見る人に伝えることができます。
動きを入れる
そのままでも、コンテンツが並んだ様子は壮観なのですが、遊びが欲しくなります。
ダサさの理由の1つが単調で飽きてしまうという事でしたので、コンテンツに動きを加えることにしました。
コンテンツタイトル以外に明確な線分けをしなかったので、コンテンツに到達した時点でフェードインやスライドインといった動きをつけました。
あとは参考サイトを真似て、ランディングアニメを追加してみました。
その他にもボタンである事がわかりやすいようマウスオーバーでボタンの色を変えるなどの工夫も入れています。
1つ1つはありきたりのものですが、ページトータルで見ると賑やかになりました。
その他の小細工
これでひとまずページとしてのレイアウトとモーションが完成しました。
残りはかゆい所への配慮をしておきます。
画面サイズに気を使う
一番気にしていたのが、スマホで見た時にレイアウト崩れしないかということです。
リメイク前のサイトの致命的な欠点が、パソコンでないとまともに見えないというものでした。
今やスマホ全盛期時代なので言うまでもないと思いますが、しっかりとレスポンシブデザインとなるよう調整しておきます。
実際にデプロイしながらスマホで見て確認するのでもいいのですが、今回は便利なChrome拡張があったので、これで動作確認をしました。
新しめの機種レイアウトにも対応しており、複数の画面サイズを一度に確認できるのでとても重宝しました。
ダークモードに対応する
最近のモダンなサイトは対応しているイメージがあるダークモードへの対応もしてみました。
対応してみたものの、手間のわりに需要がわからないので、個人的には正直最初はいらないかなという印象です。
具体的には、モードごとにCSSで背景色や文字色を分ける形になります。
よりよいサイトを目指して
ぶっちゃけカフェっぽくはないよね
ヘッダーバーの色とヘッダー画像はカフェを意識しましたが、それ以外はあまりカフェとは関係なくなってしまいました。
今後はきちんと世界観を練って行こうと思います。
なんかよさげなアイディアあれば教えてください。
パフォーマンスチューニング
凝った装飾をすると、その分ページの動きがもっさりすることでしょう。
実際、キャッシュが効いていない時はアニメーションが重くスライドインなどがきちんと見れないことがありました。
あと、結構致命的なのが、ヘッダー画像の読み込みに時間がかかることです。
本当はランディングアニメで時間を稼いでいる間に画像のプリロードをしようとしたはずが、ちゃんと機能しておらず、初めて訪れた時にスムーズにページが表示されていません。
原因がよくわかっていないので、今は、カーテンオープンアニメで無理矢理時間稼ぎをしている状態です。
これだとせっかく訪問してもらってもイライラさせてしまうことになるので、解消させた方がいいと思っています。
長くなりましたが、サークルページリニューアルにあたって考えたことを整理してみました。
少しでも読んでくれた皆さんの参考になると嬉しいです。
Discussion