見出し画像

bookmarks 2021.05.18

Takumi HASEGAWA (unshift Inc.)

まえがき

例によって間が空きまくってしまいましたが、このbookmarksの記事についてちょっと考え直しました。

今までは完全に自分用のブックマーク代わりとして使用しており、まぁついでだから公開してもいいか、くらいのノリでnoteに公開していましたが、せっかく公開しているのだから、もうちょっと自分の考察も言語化して載せたほうが自分のためになるなぁと思い、今回からメモも2~3行ではなく、できる限り考察を入れていきたいと思います。

また、考察も自分の強み (演出・開発) を生かした観点の考察を書いていきたいと思っています。

ではさっそく。かなり前に公開されたサイトもありますが。

01. EarCOUTURE - Any good music must be an innovation. 

いきなりかなり前のサイトではありますが、このクオリティは素晴らしいので改めてピックアップ。

WebGLを背面または全面に敷いて、HTMLの要素とWebGLのオブジェクトの位置を同期させる手法ですが、アニメーションの速度感・イージング、操作感、軽快さのクオリティがずば抜けて高いと感じました。このクオリティで実現できる人は国内でもそうそういないんじゃないかなと思います (知らないだけかとは思いますが)。

サイト公開当時、みんなこぞってSNSなどでいいねやシェアなどしていましたが、私は悔しくていいねもシェアもできませんでしたｗ

02. HTWKR - How to Talk to White Kids about Racism

WebGLで絵本を再現したサイト。絵本の折り目や、紙の質感・厚み、照明による反射などの表現が素晴らしく、本当にあのちょっと分厚い紙で作られた数ページの絵本を手にとっているよう。それに加え、実際の絵本ではできないようなインタラクション (ページをめくるときにイラストがずれるなど)があり、うまいWebGLの使い方だなと思いました。なかなかこういうサイトを作る機会はないですが。

03. Google Umami Land | Discover the joy of Japanese cuisine

イラストやCGの可愛さも目を引くんですが、個人的にはボタンやモーダルウィンドウの有機的な動きなど、細かいところまで手を抜かず気を使っており、全体の世界観をしっかり表現できているなと思いました。

モーダルの枠などのアニメーションはLottieを使っているみたいですね。最近良く目にします。

04. Martin Laxenaire | Creative front-end developer

フルWebGLサイト。サイト内のすべての要素をWebGLで描画して、マウスによってゆらゆらさせています。

この手のサイトはだいたいモバイルでは演出をカットしてシンプルな構成になることが多いですが、このサイトはスマホでもちゃんと全部WebGLです。

モバイルで全面WebGL + HTMLの要素と位置合わせの演出が敬遠される理由としては、スクロール時にHTMLの要素とWebGLの位置合わせのズレが起きやすいため。

PCではスクロールにスムーススクロールを採用し、ブラウザのscrollイベントとrequestAnimationFrameのループ内で行われるWebGLの描画のタイミングを同期させる事によってズレをわかりにくくしています。遅延さたスクロール挙動もそれに一役買っています。モバイル端末では、ブラウザのデフォルトの挙動としてすでに慣性スクロールになっているので、さらにJSでスクロールに遅延かけると操作感が著しく低下する印象を受けます (ねっとりもたつく印象)。

ただこのサイトではスクロール時に縦に伸びるような演出がかかっているため、スマホでもあまりストレスなく操作できるように感じました。これがスマホでWebGLを使用する際のベストアンサーなのでは、、

05. Prometheus Fuels

こちらもガッツリWebGLのサイト。スクロールによってCGのシーンが進んでいくギミック。ざらざらっとした質感がかっこよく、かつこのCGのクオリティでモバイルでもほぼPCと同じ体験ができるのが驚き。

ここまでくるとほぼCGの映像作品なのですが、どういうチーム構成でどいうアートディレクションで完成するのか気になります。

06. Yamauchi No.10 Family Office

もはや話題になりすぎてここで紹介しなくても良いレベルですが、やはり素晴らしいのでピックアップ。

表現もそうですが、シンプルモードを要しした抜かりなさ、かつ開発用のツールも開発してしまうという技術力の高さ。そしてコピーライティングは敬愛する渡辺潤平さん。

さらに注目すべきは、制作したmountさんのTwitterで制作裏話が公開されていること。太っ腹、、

07. One up Studio

PCで閲覧した際、トップから事例の詳細ページへの遷移、事例の詳細ページの最下部から次の事例への遷移が完全にシームレスになっていて、かつアニメーションの塩梅もちょうどいい感じで (完全に主観)完成度が高いです。

トップは全画面で横スクロールになっており、スクロール時に視差効果もあるため、非常に気持ちが良い動きになっています。モバイルでもトップページは同じ演出となっています。

事例の詳細ページはスクロールで画像が湾曲する演出で、やりすぎていなくて丁度いいなと感じました。

一つ不思議なのは、モバイルでも事例の詳細ページでスムーススクロールを採用しており、それならWebGLの演出を入れてもいいんじゃないかなと思ったんですが、湾曲しないですね。パフォーマンスが落ちたのか、なにかしら事情があったことが伺えます。

まとめ

という感じで、今回から考察をちゃんと書いてみましたが、結構長くなってしまいました。このスタイルがどれだけ続くかはわかりませんが。前よりも実になっていることを感じましたｗ

サポートいただければ、レッドブルを飲んでより頑張れると思います。翼を授けてください。