目線の流れをデザインする
サイトを訪れたときに、どこに目がいくか。
どう動いて、どこでちょっと止まるか。
実はこういう“流れ”が、印象に大きく影響しています。
今回のリニューアルでは、three.jsを使ったアニメーションで、動きのある体験をつくりました。
といっても、すべてを動かすのではなく、見せたいポイントだけにしっかりと動きをつけて、
他の部分は余白や構成でバランスを取りました。
リズムと統一感のバランス
スクロールに合わせて3Dのモチーフが大きく登場するシーンでは、その前後のセクションで色や動きのテンポを変化させ、より印象づけられるように構成しています。視線が自然と流れるように設計し、動きやリズムに変化をつけながらも、全体の世界観は崩さずにまとめました。
全体に同じような動きが続くと単調に見えてしまうので、動きのパターンを変えながら、全体としては一貫性があるように、リズム感と統一感のバランスを大切にしています。
アイコンで表現する“唯一無二”
サービス紹介のアイコンも今回大きく見直しました。
以前は「パッと見てわかること」を重視していましたが、
今回は直感的な分かりやすさよりも、印象に残ることを優先しています。
それぞれのサービスごとに違った形を持たせつつも、
全体としてはサイト全体の世界観に馴染むように設計しました。
“オンリーワン”の印象を目指して
一言では伝わらないけれど、なぜか気になる。
そんな“オンリーワン”の印象を残せるように、細部まで丁寧に組み立てたトップページです。