目線の流れをデザインする
サイトを訪れたときに、どこに目がいくか。
どう動いて、どこでちょっと止まるか。
実はこういう“流れ”が、印象に大きく影響しています。
印象は、情報量ではなく、視線の設計で決まります。
今回のリニューアルでは、three.jsを使ったアニメーションで、動きのある体験をつくりました。
といっても、すべてを動かすのではなく、見せたいポイントだけにしっかりと動きをつけて、
他の部分は余白や構成でバランスを取りました。
リズムと統一感のバランス
スクロールに合わせて3Dのモチーフが大きく登場するシーンでは、その前後のセクションで色や動きのテンポを変化させ、より印象づけられるように構成しています。視線が自然と流れるように設計し、動きやリズムに変化をつけながらも、全体の統一感は保っています。
動きは目立たせるためではなく、区切るために使っています。強調したい場面にテンポを与え、それ以外は緩やかに流す。その対比があることで、全体の世界観はぶれずに保たれます。
アイコンで表現する“唯一無二”
サービス紹介のアイコンも今回大きく見直しました。
以前は「パッと見てわかること」を重視していましたが、
今回は直感的な分かりやすさよりも、印象に残ることを優先しています。
分かりやすさは記憶に残るとは限りません。
今回は、意味を説明する形ではなく、形そのものが記憶に残る設計を選びました。
それぞれのサービスごとに違った形を持たせつつも、
全体としてはサイト全体の世界観に馴染むように設計しました。
“オンリーワン”の印象を目指して
すべてを語らなくても、立ち位置は伝わる。
そのための構成と動きです。
細部まで整えた結果として、残る印象があります。