Claude CodeやCodexでのwebデザインのプロンプトがムズい

日々のメモから仕事まで、Claude CodeやCodexといった、AIエージェントを使う、というのが日常になってしばらく経つ。

とても便利でありつつ、まだまだ試行錯誤しながら使っている状態でもあったりする。

web制作が本業でもあるので、そこに対しても使っていて、htmlやcssにJavaScriptなんかを出力、ということもやってはいる。

基本的にはディレクションだし、ワイヤーフレームはよく作るけれど、そこまで細かいことはやってなかったりするので、そろそろ何かAIエージェントでやってみよう、と。

で、しばらく、しっかりとしたwebデザインというものをしていない、というのもヘンだが、AIエージェントを駆使したデザインは行ってないので、自分のサイトから、何か作ってみよう！と思い立つ。

グリッドレイアウトはお手のもの

自分の個人サイトってことで、何でも好きにデザインすれば良い。

元々、グリッドレイアウトが大好きなので、そういうものを指示してみると、AIらしい、スッキリしたものを出してくれた。

そこから、色々と改良していけば、全然イイ感じなデザインは仕上がるはずではあるけれど、それだと面白くない。

モーションサイト的なもの

そこで、スクロールに伴ってダイナミックに動きのある、モーションサイト的なものを作ってみようと考える。

パララックス的に、項目ごとに動きを付け、スクロールするごとにカラフルに場面が変わっていくような、ダイナミックなやつ、という指示をしてみる。

それだけだと、イイ感じになったりならなかったりなので、参考に出来そうなサイトを出したりして、色々と動きを考えならが、たくさんのサンプルを生成してもらった。

しかし、良い部分とヘンテコな部分が混ざり合ってたり、イイ感じの動きになっても、思ってたのと違う、ということが頻発する。

上手く説明出来ない

結局、自分の頭の中に浮かんでいる、モーションサイト的な動きというものを、的確にプロンプトとして落とし込めない、これに尽きる。

単なるレイアウト的な部分であれば、言葉はもちろん、図解的に、Photoshopなんかで簡単に描いて見せる、ということも可能。

しかし、動きとなると、例えば「上から下に向けて波打つように」みたいな書き方をしただけでは、AIなりの動きを示してくれはするものの、自分のイメージする波打ちの仕方と一致させることがとても難しい。

コマ割り的な図を描けば良いのかも知れないが、それも遠回りな感じもするし、数値で細かい指定をするのも時間がかかる。

トライ＆エラーあるのみ

自分の個人サイト用だからこそ、自分の思うままに、やりたいようになるまで、プロンプトを色々と試していくしかない。

色んなスキルとか、参考となるプロンプトも試してみたけれど、なかなか、思ったようには動いてくれない。

トライ＆エラーを積み重ねて、蓄積されたもので、サクサクと、モーションサイト的なものはもちろん、グリッドレイアウト的なシンプルなサイトもサクッと生成出来るように鍛えよう。

メモとか企画とかみたいな感じで、スムーズにはなかなか進まないが。