シンプルな幾何学形状だけで多彩な情景を描き出す積水ハウスのスペシャルサイトがすごい
アブストラクトだがわかりやすいビジュアル
今回ご紹介するのは、積水ハウスが提供している戸建て住宅に関するスペシャルサイトです。
特定の製品をプロモーションするような性質のものではなく、アンケートなどのデータをまとめた見て楽しめるコンテンツになっていて、ウェブサイトとしてのデザインからグラフィックス、インタラクティブ性まで、とことん作り込まれていてめちゃくちゃ見応えがあります。
3D 表現は比較的アブストラクトな感じで幾何学的な形状のオブジェクトが中心ですが、驚くほど表情豊かに、情景を描き出しています。
リンク：
家づくりのあるあるFACT BOOK 2022 | 戸建住宅 | 積水ハウス
多彩でバリエーション豊かな表現を可能にする確かな技術
今回のサイトの驚きポイントはたくさんありすぎてどう紹介するのか、若干迷いますね……
トップページがロードされたあと、まるでカード状のオブジェクトが次々現れるようにアニメーションするイントロ演出に始まり、スクロールするたびに切り替わるグラフィックスとテーマ性、さらには下層ページで見られる豊富な情報や楽しいコンテンツの数々、本当にあらゆる面で完成度が高いです。
WebGL の表現としてはリアル系ではなく抽象的な表現を軸にしたものとなっています。
それぞれのシーンはマウスカーソルの動きに対するインタラクティブな要素も実装されていて、その反応の仕方も場面により様々です。
物理演算のようなものもあれば、プルプルと震えるようなアニメーション、カーソルホバーさせたときにバウンドするように反応するものなどなど、本当にいろんなパターンがあります。
カラーバリエーションもいろいろあり、とにかく各場面ごとに新しい発見があり、ワクワクしながら飽きずに読み進めていくことができるようなビジュアルです。
個人的にすごく驚いたのは各場面がシームレスにつながっているサイト全体としての構造の見事さです。
近年では SPA 自体はもはや珍しくもないので、ブラウザでページがパッと切り替わるのではなく、ユーザーの操作に応じてページがどんどん変化していくというのは割りと当たり前のように目しますよね。
ただ今回のサイトの場合、シーンの転換に凝ったアニメーションが使われていたり、CG のレンダリングのテイストが急に変化してうっすらドット模様として描かれるようになったりと、コンテンツ自体はシームレスにつながっているのですがとにかく個性的な演出がたくさん使われていて、場面が切り替わったことが視覚的にも感覚的にもしっかり伝わるようになっています。
ほんとにすごいです……
かなり私個人のバイアスが掛かった意見になっちゃうかもしれないですが、今回のサイトはいい意味で日本的と言いますか、海外ではあまりこういう作り方はしないだろうなと思うような部分がたくさんあるように感じました。
デザインも日本語がとても美しく映えるようなテイストになっていますし、図版を含めたコンテンツのレイアウトやカラーリングも本当に見事です。
WebGL を使った表現もそうですが、それ以外のあらゆるサイト内に配置されている要素に対してもなにかしらインタラクティブな仕込みがされていたりします。
メニューを開くバーガーボタンの部分などがわかりやすいかと思いますが、とにかくどこを触っても楽しい、そんなウェブサイトです。
ぜひチェックしてみてください。
