食材を小さなポリゴンの集合で表現！貝印のやさしい切りかた辞典は触って楽しいウェブサイト

doxas : 2022-09-02 13:43:08

平易なわかりやすいビジュアルに高い機能性

今回ご紹介するのは、調理器具や刃物製品などを扱うメーカーとして日本では名前を広く知られている、貝印のスペシャルサイトです。

食材を無駄にせず、食べられる部分を捨てずに活用できる切りかたを、ここでは「環境にも家計にもやさしい切りかた」として紹介しています。

ドット絵のような独特なテイストを持ったビジュアルと、インタラクティブにユーザーの操作に応じて変化するダイナミックなアニメーションが見事に融合した完成度の高いウェブサイトとなっています。

今回のサイトでは、三角形を組み合わせて食材を表現する独特なタッチのビジュアルが特徴的です。

よく観察してみると、右上がりの三角形と左上がりの三角形がうまく組み合わさって食材のシルエットを表現していて、一見すると単純そうに見えて結構複雑な構造になっています。

実装された @_unshift さんの解説によると、これらは専用のツールを自作するところから取り組まれたものらしく、制作過程も含めて興味深い事例だなと思います。

色使いがなんともキレイですよね。

これらの小さな三角形の集合で表現された食材たちは、ことあるごとに、それらを構成する小さな三角形が個別に動いたり、拡大縮小したりすることで、ユーザーに反応を返してくれます。

たとえば食材の一覧ページでは画面をつかんでドラッグ操作ができるのですが、三角形がバラバラに崩れるように動く様子はとても見た目にインパクトが強く、見ていて新鮮な驚きや楽しさを感じるような面白い演出となっています。

個々の食材にフォーカスした下層ページでは、画面の左側にはこれまでと同じポリゴンで構成された食材のイラスト、右側には動画や文章が表示されるといったレイアウトに変化します。

ここでもやはり、同じようにポリゴンがインタラクティブに変化する様子を見ることができるようになっています。

食材の切りかたを扱ったサイトらしく仕上がっているというか、細切れになるポリゴンの表現が本当にちょうどいいポップな温度感になっていますよね。

ポリゴンをこんなふうに表現に使うという発想、ありそうでなかったというか、思わず感心してしまう見事なアイデアだなと思います。

食材を構成する細かなポリゴン以外にも、サイトの背景部分の表現や、いわゆる CSS を活用した一般的なウェブサイトとしての作り込みの部分も抜かり無く、とても緻密に組み立てられたウェブサイトになっていると思います。

こういうウェブサイトってなんかうまく言語化できないのですが、すごく日本的というか、あまり海外で見ないようなテイストだなと個人的には感じました。

企業が伝えたいメッセージやテーマは損なうこと無く、わかりやすさ、操作しやすさ、そして何より触って楽しいということをしっかり意識して作られたレベルの高いウェブサイトだと思います。