
あまりの完成度の高さに開いた口が塞がらない Shopify のスペシャルサイトがすごすぎる
どうなってるのこれ?
今回ご紹介するのは、Shopify が公開しているスペシャルサイトです。
内容としては Shopify のさまざまな機能を印象的なビジュアルやインタラクションと共にわかりやすく解説する、というものだと思うのですがとにかく完成度がエグいことになっています。
純粋な見た目としてのおもしろさや興味深さもさることながら、その軽快な動作やモーションの巧みさなど、見どころが満載です。
リンク:
なにか語るよりもまず見てくれ案件
正直に書くと、今回のサイトについてわたしが言えることがあまりないというか……
普通にまず、そのサイトを見てみてほしいというのが率直な思いです。すごくよくできていて、人づてにその内容を聞くことにあまり意味がない感じがします。
WebGL は演出上重要な役割を担っていると思いますが、もうそれは全体としての完成度の高さを構成する1つの要素でしかありません。

まるで絵画のようなタッチで描かれるイラスト、どこか写実的な西洋絵画を思わせる絵柄ですがそれらがヌルヌルと動く様子はもうそれだけで圧巻です。
さらにはそこにポストエフェクト的な効果が加わり、2D 的な良さと 3D 的な良さをバランスよく組み合わせたモーションの心地よさも相まって、一気にサイトの世界観に引きずり込まれるように感じます。
驚くべきことに、情報をしっかり提示するということにも一切の妥協がなく、情報を摂取するという観点でもすごく気持ちよく閲覧ができます。

当たり前のように多言語対応もされているようで、日本語版もちゃんと存在するみたいですね。
さすがに、ベースとなるデザインや構造は英語圏を前提にしているとは思うのですが、グローバルにビジネスを展開するスタートアップ企業らしく最低限のところは押さえています。
コンテンツの量としても圧倒的な物量感なので、もうなにか壮大なストーリーを眼の前に突きつけられているかのような気持ちになります。
これ作ったひとたち本当にすごいですね……

今回のサイトのように、ウェブサイト上のさまざまな要素が目まぐるしく動く、変化する、というのが性に合わないという人もいるでしょう。
その気持ちはすごくわかりますし、生き生きと動いていればそれが絶対的な正解であるとも思いません。
ただ、とは言え、そうは言っても……
さすがにこのレベルにまでしっかりと作り込まれてしまうともうなんかあまり言う事も無いというか、なんか評することが野暮なようにさえ感じてしまいます。
WebGL の実装例としても、ウェブサイトとしての完成度という意味でも、一見の価値があるように感じます。
ぜひチェックしてみてください。