流行にのらずにコンセプトに見合った技術を採用し素敵なサイトを構築しよう
クリエイティブのディレクター集団で、テクニカルディレクターという肩書でWebの技術面のディレクションをしています。
仕事ではCMSの実装やコーディング周りのチェック、サーバーのインフラ周りの提案など、Webのディレクションの中でもいわゆる「縁の下の力持ち」的な仕事を行っていますが、もともとははるか昔の大学時代アートアニメーションを作っていたりしたので（アードマンとノルシュテインは神）、Webサイトでもアニメーション表現やインタラクションの実装周りに特に興味があります。よくデザイン参考サイトなどに掲載されているサイトをインスペクタ上でどんな技術が使われているかをよく調べたりしています。
最近のWebアニメーションのトレンドはWebGL。世界的に有名なWebのコンペティションAwwwwards.で紹介されるようなサイトは、WebGLでインタラクションを実装しているサイトがほとんどです。
しかし、最近ディレクターとしてWebGLに注目しているうちに、webに実装されているアニメーションのすべてをwebGLで実装する必要はないのではないかと思えてきたので、初めてのnoteはアウトプットの練習も兼ねてその話を書きたいと思います。
WebGLってなに？
そもそも、WebGLって何というところから説明します。
素敵なインタラクションを実装しているサイトをインスペクタで確認すると、よくcanvasというタグが確認できます。このcanvasタグはJavaScriptを利用し、自由に文字や図形を柔軟に描きアニメーションすることができます。
WebGLはこのcanvasを利用し、3次元でブラウザ上に描写できる技術です（もちろん2Dもできます）。ブラウザ上で3Dアニメーションを表現するのは、以前はFlashなどのブラウザとは別のプラグインを利用しないと表示できなかったが、WebGLの登場によってブラウザのみで表示されるようになりました。また、ただの3Dアニメーションは動画でも作成できますが、WebGLはユーザーの操作でcanvas内に描写されたオブジェクトを動かすことが可能なため、擬似的なインタラクションをWebサイトに実装することが可能です。
WebGLの強み
前述の通り、WebGLを利用することにより擬似的なインタラクションを実装することができるので、Webサイトを通してユーザーは擬似的な体験をし、閲覧するだけのサイトより好奇心を刺激されながら情報を入手できます。そそのため、WebGLを導入することによって集客力の向上が期待できます。現在の大半の端末に搭載されているブラウザの標準仕様でWebGLは動くので、実装したインタラクションで期待通りの情報提供が可能なため、今後も更に普及していくことが見込まれます。
WebGLは開発工数がかかる
ここまでWebGLのいいことばかりを書いてきましたが、ここからは現時点でのWebGLの懸念点を説明します。
まず、WebGLは普及したといえども比較的難易度の高い技術です。クリエイティブなことがしたいからとオンラインスクールでHTMLとcssやJSと言ったフロントエンドの技術を学んだからと言ってWebGLでアニメーションが作ることができるというわけではありません。WebGLはさらにコンピューター・グラフィックスで3Dオブジェクトに陰影をつけるシェーダーというコンピュータープログラムの知識だったり、3Dアニメーションを行うためには物理演算や三角関数といった、数学的知識が必要になります。
さらに、いかにPC上で自然な動きを再現するために、以下に日常を過ごす上で、ものがどの様な動きをし、どんな動きが自然に見えるかなどの観察眼も必要になってきます。
コンピューター・グラフィックスとWeb全般の両方の知識がないと、WebGLの実装は難しいと言えます。学習コストがかかり、開発者自体も少ないとまだまだ少ないです。
また、動作が閲覧するマシンに依存するため、例えば低スペックのPCやGPUが古いマシンを利用しているなどの閲覧環境によっては、動きがカクついてしまったり、PCのファンが回りっぱなしになったりPCに負荷がかかるなど、無駄に実装すると逆にユーザビリティが下がる場合があります。一般的にページスピードが遅いと、ユーザーのサイト離脱率が高くなると言われています。
WebGLを導入する場合は、そのグラフィックでどんなターゲットにどのようなユーザー体験を提供したいか、きちんと定めて実装する必要があると言えます。
ではWebGLが必要な実装とは
前述の通り、WebGLの強みは3Dのコンピューターグラフィックに加えて、ユーザー操作でオブジェクトが動くというところにあります。
そのため、コロナ禍で需要が高まったデジタルショールームなどのコンテンツサイトはWebGLの実装が必要不可欠と言えます。
パナソニックが今年8月にリリースした電気設備BOXというサイトは、マウスをスクロールすることでショールームの中を回遊でき、部屋の中で展示されている商品の訴求ポイントをテキストで紹介しています。
また、サイト全体にWebGLを利用しなくても、一部のインタラクションとして、WebGLを実装する場合もあります。
演劇の祭典である東京芸術祭2022のサイトのトップページは、演劇のスポットライトのようなライトがマウスで動くような仕組みになっていますが、これも2DだがWebGLです。（具体的に言うとWebGLの実装するのによく利用されるライブラリthree.jsを利用している）。
情報量が多いサイトは全部WebGLで実装するとユーザーに提供したい情報がうまく届けられなくなる懸念もありますが、関連モチーフを利用し、遊び心をくすぐるようなUXを提供していると言えます。
WebGLが不要な場合の実装とは
WebGLはユーザー側でインタラクションを動かすことにメリットがある技術なので、言い換えればユーザがインタラクションを動かさない様なアニメーションは動画で対応することも一案だと思います。
例えば、デザインコンサル会社のGoodPatchの公式サイトはファーストビュー（FV）でサークルをモチーフにしたゴリゴリのアニメーションを表示していますが、実はこれはmp4、つまり動画です。
キャッチコピーの「Design to empower」の色がサイト表示時と変化があったり、スクロールしていくとモーショングラフィックと同じサークルをインタラクションでうまい具合に使っていて、一件ゴリゴリのWebGLのアニメーションを施しているように見えますが、重たい部分のアニメーションは動画、細かいインタラクション部分を実装することによって、作業工数やマシン負荷の軽減を考えて実装していると想像できます。
同じくIT企業のDeNAが展開しているAIの特設サイトは、8bit調のモチーフをイラストで起こし、画面のあらゆるところにgifアニメを施してメインビジュアルを楽しく演出させています。数枚の画像を組み合わせてアニメーションさせる古典的な技術の特性を活かし、WebGLを使わずに軽いタッチの仕上がりを実現しています。
メインビジュアルの背景はイラスト、必要最低限の箇所にgif画像をcssで設置することで、マシン負荷を削減、jsの記述も冒頭のロゴのみで工数も極力抑えられていると思います。
このように、WebGLを技術を回避して、Webのアニメーションを施すことはいくらでも可能です。最近はCSSのみでアニメーションが増えてきているので、WebGLを無理して採用しない方が極力素敵な実装ができることもあります。
無理して新しい技術を使う必要はない。けど使うことも必要だ。
新しい技術を採用することはデメリットが多い場合も多々あるので、極力必要だと判断した場合のみ採用するほうがコストも抑えられ、より良いサイトになる場合もあります。
とはいえ新しい技術は率先して採用し、どんどん実践していくことは技術の進化につながります。技術が進化することで新しい表現が生まれ、それはユーザーの好奇心を更に刺激することができる可能性は無限大にあります。また、技術が進化することでより豊かな人間の暮らしがそこには待っているかもしれません。
その塩梅がなんとも難しいと言えますが、なんとなくアニメーションが流行っているからと言ってフロントエンドエンジニアにアニメーションを依頼すると、工数も跳ね上がる場合もあるので、デザイナーが考えたインタラクションを実装するのにはどの技術を採用するのがいいのか、そこをうまくハンドリングするのがディレクターの仕事であると思います。
最後に、今年５月に話題になったWebGLを利用したサイトを紹介したいと思います。
マウススクロールで細かくサイトに花が咲くサイトですが、このサイトの実装方法を、開発元のMount Inc.さんがtwitterで共有してくれてます。Blenderでまず花を一つ一つモデリングしていき、花の動きをBlender上で複数作成、単調にならないようにJavaScripts側でブレンドしたとのことですが、Blenderで作成したファイルが肥大化してしまったため、モデルのposition/uvをjsonで書き出して軽量化したとこのことです（文字だけ並べるているだけであまり理解はしていない、、）。
Mount Inc.さんのTwitter
つまり、WebGLでも実装していくことによって軽量化の余地はまだあるということです。利用することで技術は成長し、進化し続けることを実証しているサイトとも言えます。
無理して技術を使うことはないけど、技術を使うことによってWebサイトの表現の幅が広がることをができるので、今後も必要に応じて利用するようにしたいと思っています。
この記事が気に入ったらサポートをしてみませんか？