デザイナーがAIを使ってクリエイティブコーディングに挑戦してみた

こんにちは。普段はWebやUIのデザインをしつつ、UnityやBlenderを使って3Dコンテンツの制作にも取り組んでいるKONDOです！

ギャラリーサイトでいろんな企業のWebサイトを見ていると「このFVのアニメーションすごいな...」「こんなの作ってみたい...」と思うことがあります。

マウスの動きに合わせて3Dオブジェクトが反応したり、スクロールに合わせて画面が激しく変化したり、音や時間に合わせてビジュアルが変わったり...。
こうした表現は、静止画のデザインだけでは伝えきれない体験をつくることができる一方で、デザイナーにとってコーディングは少しハードルが高く感じる領域でもありますが...

今ならAIの力を借りて、ある程度のものは自分でも作れそうな気がする！
デザイナーも生成AIと上手に付き合っていくことが求められている昨今ですが、うまく活用しながらデザイン業務以外の領域に足を踏み入れてアスタスタのアウトプットの幅を広げていけたら...と思い挑戦してみました🚀

studioに埋め込んで使用するカルーセル

まず作ってみたのは、カードが横方向に流れ続けるカルーセルです。
アスタスタのサイトTOPにstudioの標準機能だけで実装したスライダーがあったのですが、動きが不安定で改善したいな...と思っていたので着手しました。

少し変化を出して、中央に近いカードほど大きく、端に行くほど小さくしてブラーを強めていき、擬似的な被写界深度の表現に挑戦📸

CSSでは perspective や transform-style: preserve-3d を使い、カードを少し立体的に傾けています。
このあたりはAIに相談しながら、「3Dっぽく見せるにはどうしたらいいか」を少しずつ試しました。

JavaScriptでは、画面外に出たカードを右端へ戻し、そのタイミングで画像を差し替えています。
他にいいやり方があるような気もしますが、これでカードが途切れずに流れ続けるループになりました！

さらに、カードごとに上下の揺れや回転量を少し変えて、動きにランダム感を加えていきました。動きの細かい作り込みはやはり楽しいです🎉

完全にAI様様ですが、脳内でイメージしていたものをかたちにすることができました！このカルーセルはアスタスタのTOPページで実際に使用しています。

全天球ビューアー

次に作ったのは、マウスドラッグで360度見回せるビューアーです。
ショールームをお持ちの建材メーカーさんや展示会などを対象に、提案に使えるようなサンプルができないかな...と思い制作しました。

全天球のJPEG画像を three.js で球体の内側に貼り込み、その中心にカメラを置いています。
仕組みとしてはシンプルですが、ドラッグで視点を動かせたり、ホイールでズームできたりすると、それだけでかなり「触れるコンテンツ」っぽくなりました。

画像の中に番号付きのUIも置いています。
この番号はただ画面上に固定しているわけではなく、3D空間上の位置をもとに、毎フレーム2Dの画面座標へ変換しているので、視点を動かしても対象の場所に自然についてきます。

番号をクリックすると、対応する詳細情報がモーダルで表示されるようにもしました。こうすると、案件や販促コンテンツなどにも流用できそうな体験になります。

フル3Dで空間を作るのは少し大がかりですが、静止画ベースなら比較的軽く動作しますね。
それでも、見回す・選ぶ・情報を見るという動きが入るだけで、普通の画像をただ見るのと比べると、かなりリッチな印象を受けました。

サイトのFVに使えそうなパーティクルアニメーション

次に作ったのは、ラインの上をパーティクルが流れていくWebサイトのファーストビュー用のアニメーションです。
Figmaで制作したコーポレートサイトのデザイン案に付け加えて「こんなアニメーションはどうですか？」と提案するためのサンプルとして使用しました。

スクロールに反応する動きにしたかったので、スクロール量に応じてパーティクルの速度が変わるようにしました。動きをリッチにするために慣性スクロールも入れています。

さらにインタラクティブ性を高めるために、スクロールに反応してライン上に光彩エフェクトが走るようにしました。マウスの位置に応じてライン全体の角度も変わるようにしています。

シンプルなビジュアルではありますが、動きありきでデザインを考えるのはあまり機会がないので、新鮮でとても楽しいです！

まとめ

一度自然言語にしてAIに伝えなければいけないので、自分1人で作るときよりも「想像力」と「言語化力」が問われるな...というのが印象的でした。

AIは聞けば返ってくるし、提案もしてくれますが、まずは「何をしたいか」がないと何も始まらない...。
その上で、出てきたものに対して、何を良しとするか、どこに違和感があるか、どんなものしていきたいかは、当然ですが自分で判断する必要があります。

「中央はくっきり、端はぼかしたい」
「スクロールに反応して、光が少し遅れて走ってほしい」
「ただ回るだけじゃなく、空間を見回している感じにしたい」

あいまいな感覚をクリティカルな言葉に変換したうえで、よりAIに伝わりやすい表現でプロンプトにしていく。AIとのやりとりにはデザイナーのライティング・思考スキルを活かせる場面がとても多いと感じました。

実装に関する知識もあればあるほど良いと思いますが、それ以前にゴールがイメージできているかが大事なんだなと痛感。
AIに作ってもらうというより、自分の中のイメージを形にするために、一緒に手を動かしてもらう感覚に近かったです。

これからも進化していくであろう生成AI。毎月のように新しいモデルや機能がリリースされていきますが、置いていかれないように喰らい付きつつ、激動の時代をこれからも楽しんでいきたいと思います！🎉