シンプルなデザインと滑らかなインタラクションが癖になる! プロダクトデザイン企業 TM のウェブサイト
シンプルでシックな風合い
今回ご紹介するのは、プロダクトデザインを手掛ける TM という企業のウェブサイトです。
こちらの企業は、Airbnb の創業期に同社のメンバーだった方々が独立して作った組織のようで、取引先もかなり大手の企業が多く実績もたくさんあるようですね。
ウェブサイトはシンプルかつオシャレに仕上がっていて、WebGL の使い方も実に上手です。
リンク:
TM. A product design innovation group
レイアウトの直線、インタラクションの曲線
今回のサイトは、すごく個人的な意見になってしまうのですが……
レイアウトは直線的に、インタラクションで曲線的な動きやシルエットに、というようにかなり動と静にメリハリのあるデザインになっているように感じました。
もちろん、デザイン上の理由で曲線が使われているところが皆無ということではないのですが、大きく全体を俯瞰で見たときに、そんな棲み分けがされているのかなと素人ながらに感じました。
ページの冒頭部分では、右側にレイアウトされた画像が一定時間ごとにアニメーションするのですが、このとき布が波打つような感じで画像が動きます。
2つの異なる画像間の補間が発生すると同時に波打つアニメーションが起こります。
この波打ちアニメーションは他の場所でも使われていて、たとえば事例集のページでは、やや大きめにレイアウトされたサムネイル画像をクリックした際など、同様のアニメーションを見ることができます。
サムネイルの状態からアニメーションしながらそれが画面全体に広がっていく演出は、最近結構目にすることの多い演出かなと思います。
さらに今回のサイトではインタラクティブ性のある要素に対するアプローチが、実に巧妙でよく考えられており面白いなと感じる部分がありました。
それが Campany のセクションにある横方向にスライドできるインターフェースの部分です。
ここでは、スワイプの要領で横方向にスライドさせながらコンテンツを見ることができるのですが……
スワイプ操作を行うためにマウスボタンを押し込んだその瞬間、表示されている画像がグッと拡大されます。この拡大される様子を目にすることで、この部分になにか仕掛けがあるんだよ~ ということがユーザーに非常に伝わりやすくなっていますね。
横に動かした際に波打つように動くさりげない演出なども組み込まれていて、非常に手が込んだ見事な実装だと感じました。
カーソルの位置に応じて画像が歪むような、比較的スタンダードな演出がされている場所もある。
今回のサイトは直線的なエッジの利いたレイアウトでシンプルな構図のようにも見えるのですが、細部にまで工夫の凝らされた、考え抜かれたデザインだなと感じました。
WebGL の使い方も素晴らしくて、さりげないユーザーの操作に対する「きちんと意味のある演出や応答」がなされており、めちゃくちゃ勉強になりますね。
とても完成度の高いサイトだと思います。
ぜひチェックしてみてください。