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

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

前回の記事では、生成AIを使いながらクリエイティブコーディングに挑戦した様子をご紹介しました。

その後も、業務の合間を見つけては「案件で使えそうな表現」を少しずつストックしています！

実案件だと、どうしても納期優先で新しい表現に挑戦する時間は限られます。だからこそ、普段から思いついたアイデアを小さく形にしておくと、「これ使えそう！」という引き出しが少しずつ増えていきます。

今回は、その中からいくつかご紹介します🚀

Kirari Effect ✨

まずはカードなどでよく見かける、キラッと光るエフェクトです。

もともとあるCSS表現をベースにしつつ、そのままでは少し物足りなかったので、自分なりにアレンジしてみました。

光彩はプリズムのような虹色に調整し、さらにマウス位置に合わせて画面全体が少し傾く演出も追加しています。

ほんの少し動きを足すだけでも、「触ってみたくなる」印象がぐっと強くなるのが面白いところです✨

Mesh Gradation 🌈

LPの背景として使えそうな、アニメーション付きのメッシュグラデーションも作ってみました。

色や動く速さ、グラデーションの大きさなどは少し変えるだけで雰囲気が大きく変わります。

毎回コードを書き換えるのは少し大変だったので、GUIから色や速度などを直感的に調整できるエディターも制作しました🎛️

SVG Mask Animation 🎨

ロゴの出現アニメーションも試してみました。

今回は2つのSVGを重ねて、それぞれ少し時間差を付けながら表示することで、シンプルだけど印象に残るアニメーションになっています。

Studioで制作する案件も増えてきたので、Lottieの代わりにもっと軽く扱える方法はないかな…と思って試していたものです。

Trail Effect Generator 🌟

こちらは光のラインを生成して、一度収束させてから発散させるアニメーションジェネレーターです。

最近はWebサイトのファーストビューだけでなく、動画制作のお仕事も少しずつ増えてきたので、「動画でも使える素材を作れないかな？」と思って制作しました。

こちらもGUIエディター付きで、ラインの本数や動きなどをリアルタイムに調整できます。

さらに派生として、ラインに奥行きを持たせた3Dっぽいバージョンも作ってみました🚀

こういうジェネレーター系は、一度作っておくと案件ごとに少し調整するだけで雰囲気を変えられるので、意外と活躍してくれます。

おわりに

こういう検証を続けていると、「この案件なら、あの時作った表現が合いそうだな」と思い出す場面が意外とあります。

クリエイティブコーディングというと、アート作品のような派手な表現を思い浮かべることもありますが、「実案件でちゃんと使えること」をいつも意識しています。

見た目が面白いだけではなく、調整しやすかったり、軽く動いたり、再利用しやすかったり。そんなことを考えながら作っていると、少しずつ"表現の引き出し"が増えていく感覚があります。

これからも時間を見つけて、案件の中だけでは試せないような表現を少しずつストックしていきたいと思います💡