
良いなと思ったサイト #3

光がアクセントの写真がたくさん載っていて、エモい雰囲気

①ファーストビューのスクロールが綺麗

写真の上にアルファベットが重なっているデザインになっていて、
よく見ると写真と文字でスクロール時の移動が異なっています。
下にスクロールした場合:
写真:上下にさりげなく動く
文字:上にゆっくり動く
上にスクロールした場合:
写真:上下にさりげなく動く
文字:下にゆっくり動く
という、本来のスクロールとは違ったアニメーションを加えることで、
画面に奥行きが出ているように感じました。
②ハンバーガーメニューのボタンが分かりやすい

多くのハンバーガーメニューは、ユーザーの操作に合わせて=と×が切り替わるようなデザインになっていますが、このサイトでは=と×がそれぞれのボタンとして並列しています。
=はハンバーガーメニューを表示・非表示させる
×は現在開いているものを閉じる(メニューを開いている場合はメニューを閉じ、プロフィールなどの他ページを開いている場合はページを閉じてトップページに遷移します。)
という操作に統一されているため、よく見るメニューよりも直感的に操作できると感じました。
また、行きたい場所に素早くアクセスするというメニューの目的がきちんと達成できているように思いました。
③プロフィールのレイアウトが面白い


スマホ版よりもよりパズル要素の強いレイアウト
よく見るプロフィールページは、名前・生年月日・身長・血液型・出身地などがひとつにまとめて配置されている印象なのですが、このサイトでは、プロフィール情報があらゆる場所に散りばめられています。
なぜこのようなレイアウトにしたのかなと考えてみたのですが、トップページから一貫して、写真を見せるサイト になっているため、プロフィールページの場合も、写真と文字を一緒に見て読んでほしいという意図があるのかなと思いました。
④その他感想
白黒を基調とし、イラスト的な装飾を使わないシンプルな設計の中で、画面遷移時に文字をぼかしていたり、パーツごとにインアウトの移動方向を変えるなど、アニメーションに工夫を入れることで、全体的になんかオシャレでエモい雰囲気が出ていると思いました。