様々なオブジェクトが形状変化する様子に思わず驚く! 株式会社 LIFULL のデザインがテーマのウェブサイト
ダイナミックなアニメーション処理
今回ご紹介するのは、株式会社 LIFULL が提供するデザインをテーマにした特設サイトです。
こちらのページでは「デザイン」というキーワードを軸に、様々な観点から多角的にデザインについて扱うコンテンツがいくつか用意されています。
各コンテンツへと移動するためのハブの役割を担うトップページ部分が WebGL で実装されています。
リンク:
フォーカスする動きが随所に登場
今回のサイトでは、メインテーマをデザインとしつつも、LIFULL 社の持つビジョンはしっかりと反映されています。
LIFULL の社名の由来は「あらゆるLIFEを、FULLに。」というところから来ているそうです。
福祉事業、教育事業、不動産関連事業など、とにかく多彩な事業を行っており、さらにはテクノロジーやクリエイティブといったことにも妥協がなく、とにかく勢いがすごい会社……というイメージがあります。(個人の印象です)
今回のサイトでは、コーポレートカラーであるオレンジ色と白をベースに、ロゴマークにも取り入れられているフォーカスする動きを活用したデザインがなされています。
トップページでは、上のキャプチャ画像にもあるように、不思議な形態をしたオブジェクトが横に並べられたようなビューが登場します。
これらのオブジェクトは各コンテンツへの導線の役割を持っていて、マウスカーソルをオブジェクトの周辺に持っていくと、それに反応して 3D オブジェクトが変形するアニメーションを見ることができます。
この変形アニメーションが滑らかかつダイナミックで非常に面白くて、思わず何度も変形アニメーションを行いながら観察したくなりますね。
折りたたまれたキューブ状のオブジェクトが徐々に開いていく様子。
このような変形するアニメーションを備えたオブジェクトは、いくつか種類がありどれも独特な動きを与えられています。
紙をクシャクシャに丸めたような形をしているもの、まるで渦を巻くように動き続けるもの、短冊状に細かく区切られたものなど……
とにかく多彩なビジュアルを持っており、アニメーションも当然オブジェクトごとに違っているので見ていて飽きないですね。
LIFULL さんのロゴからも想像できる「フォーカスする」という動作が印象的に表現されていると思います。
白を基調にしたスッキリ美しいデザインと、3D のオブジェクトがぐいぐいと動くトップページ部分では、サイトに訪れたユーザーの気持ちをまず最初にグッと掴むことに成功していると思います。
当サイトは WebGL 部分しか紹介していませんが、その他のサイト全体の動きやデザインも非常にスムーズです。
コンテンツページなどでも、やはりコーポレートカラーやロゴ等を上手に取り入れた作りになっていて、ギミックも面白いものが多いですね。
非常に完成度の高いサイトになっていると思います。
ぜひチェックしてみてください。