本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事
みなさんこんにちは、私のほうでは
簡単に自己紹介します。池田泰延といいます。株式会社ICSの代表をやっています。経歴としてはFlashからCanvas、WebGLと渡り歩いてきました。
今日はWebの演出技法にフォーカスして紹介していきたいと思います。
Color Pallet Visualizer ―マテリアルデザインの”色の定義”をデータビジュアライゼーションで解き明かす
まずデモを用意してきたのでそれを紹介したいと思います。
こちらはColorPalletVisualizerというサイトで、このTechFeed Conferenceのために作成したサイトになってます。
![TechFeed Conferenceのために用意したデモサイト「ColorPalletVisualizer」](/assets/images/article/2022/09/tf006-csstech/001.png)
マテリアルデザインやヒューマンインタフェースガイドラインなどデザインシステムが各社に存在していて、その中に
![デモサイト「ColorPalletVisualizer」](/assets/images/article/2022/09/tf006-csstech/002.png)
たとえばマテリアルデザインのカラーパレットを表示し、HSLの色空間上、どのように色相が配置されているのか、また明度が配置されているのか、といったことをビジュアルで表現しています。
![カラーパレット(左)を表示し、HSL色空間上でどのような色相/明度/輝度に配置されているかを表現している](/assets/images/article/2022/09/tf006-csstech/003.png)
スクロールと連動し、テキストが流れるように出てきたり、うしろのデータビジュアライゼーションもインパクトのある形で演出を伴って表示するといったように作ってあります。
![スクロールすると連動してテキストが流れたり、データビジュアライゼーションがインパクトある演出で表示される](/assets/images/article/2022/09/tf006-csstech/004.png)
スクロールと連動し、3Dの表現で自由に物が動いたり…みたいなことをしているわけです。
![スクロールに連動して、3Dな表現で物が自由自在に動く](/assets/images/article/2022/09/tf006-csstech/005.png)
今回は、このテキストのアニメーションにフォーカスして説明していきたいと思っています。
![今回はテキストアニメーションにフォーカスして解説](/assets/images/article/2022/09/tf006-csstech/006.png)
DOMでテキストアニメーションを実現する
どういった技術で作られているのかというと、WebGLで3Dの部分、Vue.
![Color Pallet Visualizerを構成する技術](/assets/images/article/2022/09/tf006-csstech/007.png)
DOMでアニメーションをさせようとするとどんな選択肢があるのかというと、CSS Transitions、CSS Animations、Web Animations API、トゥイーン系JSライブラリが考えられます。
今回は、Web Animations APIを使って説明します。これはCSSの純粋なtransitionと比べてタイミングの制御を行いやすかったり、CSSに似た記述もできるといったところがポイントです。
![DOMをアニメーションさせる方法はいくつかあるが、今回はWeb Animations APIを使用](/assets/images/article/2022/09/tf006-csstech/008.png)
流れるような表現のポイントは”矩形のあしらい”と”遅延”
ライブコーディングをして説明していきましょう。
以下に先ほど紹介していた演出部分を切り出したものを示します。
![ライブコーディング1](/assets/images/article/2022/09/tf006-csstech/009.png)
<h1>タグや<p>タグでシンプルにマークアップしてします。これに演出を加えてみたいと思います。
見出しが光って表示されるのですが、四角の矩形を配置して、左から右に動かすということをやっています。これは単純に疑似要素を使って、position:absolute;で配置したものを左から右に動かしています。左から右に動かすというのはDOMにanimateというメソッドが生えているので、これを使って始点と終点を設定してあげると、その通りに動きます。
![ライブコーディング2](/assets/images/article/2022/09/tf006-csstech/010.png)
これだと四角の矩形がまだ邪魔なので、演出としてはこのテキストの端で切れるようにoverflow:hidden;を指定して見切れるように指定しています。なおかつ、もう少し演出にインパクトを持たせたいので、流れる矩形が順番に表示されるように遅延を挟みます。
![ライブコーディング3](/assets/images/article/2022/09/tf006-csstech/011.png)
そして、始めの状態でまだ文字が見えていると、ちょっとダサいので、始めは透明にしておいて
![ライブコーディング4](/assets/images/article/2022/09/tf006-csstech/012.png)
演出が再生されるときに、この矩形が重なったときに白い文字が出てくるようにしてあげると、出現演出が整います。
![ライブコーディング5](/assets/images/article/2022/09/tf006-csstech/013.png)
もう少し作り込んでみたものがこちらのものになります。
![ライブコーディング6](/assets/images/article/2022/09/tf006-csstech/014.png)
ほかの要素も演出を加えていて、始めは少し左側にtranslateXでずらし、透明度ゼロにしておいて元の状態にするというのを、遅延で順番に表示している形になっています。document.
こういった演出は、Chromeのデベロッパーツールズのアニメーションパネルを使うと簡単に確認ができます。
![Chromeデベロッパーツールズのアニメーションパネルで確認](/assets/images/article/2022/09/tf006-csstech/015.png)
アニメーションパネルは便利で、倍速再生もできるので、アニメーションが正しく実装されているのかの確認に役立てることもできます。スクラブもできます。
今回のデモのポイントとしては、あしらいとしての矩形を用意したことと、モーションのタイミングをずらしたところになります。
![デモのポイント](/assets/images/article/2022/09/tf006-csstech/016.png)
Web制作をより楽しむために
今回はWeb Animations APIで作ったんですけども、こういった演出はJSライブラリで作るというのも手です。GSAP
![演出はJSライブラリで](/assets/images/article/2022/09/tf006-csstech/017.png)
ここまで紹介したように、Web制作でクリエイティブコーディングが役立つ場面というのはたくさんありますので、ぜひみなさん楽しんで作っていきましょう。ICSではそんなWebサイトを作りたいという方を募集しています。
発表は以上となります。ご清聴ありがとうございました。