レシートが印字されていくような表現が楽しい！ デザインスタジオ SILENCIO のウェブサイトがすごい！
とにかくセンスが良すぎて引くレベル
今回ご紹介するのは、Silencio というデザインスタジオのウェブサイトです。
デザインスタジオといってもブランディングやウェブ制作も手掛けているようなので、ウェブの制作会社というのが表現としては近いのかもしれません。
今回のサイトは白いシンプルな外観の食品が 3D 表現に用いられており、それらの製品をレジに通して、レシートが印字されていくような表現がなされています。
すごくユニークで、めちゃくちゃかっこいいです。
リンク：
WebGL の表現力も高い
今回のサイトには、前述のとおりいくつかの食品の形をしたオブジェクトが登場します。
それは食品や飲料缶の形をしており、いわゆる日常のありふれた風景のなかにあるグッズです。ありふれたオブジェクトではあるのですが、それが逆にすごく今回のサイトの印象に強く寄与していますね。
ウェブサイトのロードが完了した直後、イントロの演出時は 3D シーン全体にブラーが掛かったようになっています。
イントロシーンでクリック操作を行うと、ゆっくりとブラーが剥がれてシーンが鮮明になっていき、そのままスクロール可能なコンテンツの本体が出てきます。
スクロールするだけでスイスイと見ていくことができるため、閲覧性も高いですね。
食品のそれぞれになにかしらのメッセージや理念のようなものが添えられており、ここでは結構しっかりと文章を使って多くのことが語られます。
ビジュアル一辺倒という感じではなく、読ませるコンテンツもほどよく混ざっているのがよいですね。
また、スクロールしていくと自然とわかることではあるのですが……
各食品に紐づいたセクションを最後まで読み進めると、ここでピッと効果音が鳴って、レシートが印字されているような音がそれに続きます。
このとき、画面の右下にあるレシートが音に合わせてせり出してくるんですよね。この演出がめちゃくちゃいい！
すごくおしゃれでセンスがあり、3D シーンに赤外線が当たったような赤い光源が出てきたりとビジュアル面でも抜かり無く演出されているのがこれまた憎いです。
これ、日本人だったら初見では「無印良品のウェブサイトかな？」と思うような、白を基調にしためちゃくちゃシンプルでおしゃれなデザインだと思います。
見た目におしゃれなだけでなく、妥協なく作り込まれた質感のよい 3D シーン、レシートが印字されていくような個性的なインタラクションなどなど、とにかくすごくよくできています。
こういうの作れる才能が欲しかった…… と思わず頭のなかでつぶやきたくなる、そんなウェブサイトだなと感じました。
ぜひチェックしてみてください。
