シリーズ第5回。今回のテーマは「デザインとアニメーション演出」——人間の感性が一番試される領域でのAI協働です。
結論から言うと、このフェーズが一番面白くて、一番難しかったです。
最初の壁——「こういう感じにしたい」を言葉にする
デザインの話をAIとするとき、最初にぶつかる壁があります。それは「言語化」です。
「ダークテーマで、洗練された感じで、でも冷たすぎなくて、エンジニアっぽいけど親しみやすくて……」
こういう曖昧な感覚って、ありますよね。頭の中にはイメージがあるのに、言葉にするのが難しい。でも、AIに実装してもらうためには、これをAIが理解できるレベルまで具体化する必要があります。
僕がやったのは、先にデザインガイドライン（設計の指針）を文書にまとめることでした。
- 色: 暗めのグレーをベースに、アクセントカラーはシアン（青緑系）
- 文字: 本文は「Noto Sans JP」、コード部分は等幅フォント
- 余白: 8pxの倍数でそろえる
- アニメーション: 控えめだけど存在感がある、なめらかな動き
この文書が、AIへの「デザインブリーフ（設計指示書）」になりました。曖昧な感覚を、できるだけ具体的な言葉に落とす。これだけでAIの出力精度が格段に上がりました。
CSS設計——数値はAI、感覚は人間
このサイトでは、色やサイズをすべてCSS変数（一箇所で定義して使い回せる仕組み）で管理しています。「ここの色を変えたい」と思ったら、変数の値を一つ変えるだけでサイト全体に反映される、便利な仕組みです。
この設計をAIと一緒に進めました。
AIが得意だったのは、数値的な正確さです。たとえば、「WCAG AAA準拠（Webアクセシビリティの最高基準）のコントラスト比を確保して」と言えば、背景色とテキスト色の組み合わせを計算してくれます。
人間が目で見て「たぶん大丈夫かな？」と判断するより、はるかに正確。
一方で、「この色の組み合わせ、なんかしっくりこないな」という感覚的な判断は、AIにはできません。数値上はOKでも、見た目の印象は別物なんです。ここは人間の目で確認して調整しました。
ヒーロー演出の方針変更——計画通りにいかないこともある
当初の計画では、トップページのヒーロー（最初に目に入る大きなビジュアル部分）にCanvas/WebGLを使ったジェネラティブアート——プログラムで生成される幾何学的な映像を表示する予定でした。
でも実際に試作してみると、「技術的に面白い」ことと「サイトの雰囲気に合う」ことは別だと気づきました。結果的に、WordPressで設定した画像やYouTube背景動画をフェードで切り替える演出に方針を変更しています。
こういう「やってみたけど違った」という方針変更は、AIとの協働でもやっぱり起きます。大事なのは、早めに判断して切り替えること。AIが作ってくれるスピードが速い分、「試して、やめて、別のアプローチ」のサイクルも速く回せるのは利点です。
アニメーション——作って、壊して、また作る
このサイトの特徴の一つが、GSAP（アニメーションライブラリ）+ ScrollTrigger（スクロール連動の仕組み）を使ったスクロールアニメーションです。ページをスクロールすると要素がふわっと現れたり、動いたりする、あの演出ですね。
ここが一番AIとの試行錯誤が多かった部分です。
うまくいった例: フェードインアニメーション
「スクロールするとコンテンツがふわっと表示される」という汎用的なアニメーション。これはAIが一発で良いものを作ってくれました。パターンが決まっている処理なので、AIの得意分野です。
苦労した例: セクション間の装飾——「感覚」が伝わらない
一方で、セクションとセクションの間に入れる装飾的な演出には苦労しました。ここが一番「人間の感覚とAIの解釈がかみ合わない」と感じた部分です。
最初は「波のアニメーションを入れたい」とAIに頼みました。技術的には動くものができたんですが……実際にブラウザで見ると、全体的にぎこちない。なんというか、気持ちいい感じのスムーズさが出ない。「もっと滑らかに」「もうちょっと自然な感じで」と何度伝えても、自分が頭の中でイメージしている「あの気持ちよさ」にたどり着かないんですよね。
次に「じゃあ3Dっぽいズーム効果は？」と試しました。スクロールに合わせてスムーズに奥行きが変わる演出をイメージしていたんですが、AIが出してくるものはどれも動きの途中で「ガクッ」と引っかかるような仕上がりになってしまう。「もっと滑らかにして」「途中で止まる感じをなくして」と何度お願いしても、その「ガクッと感」がどうしても直らない。結局、求めているスムーズさにたどり着けず、取り消しました。
これは「AIが悪い」という話ではなくて、感覚的なニュアンスを言葉だけで正確に伝える難しさなんだと思います。「スムーズに」「ぎこちなく感じる」「ここが引っかかる」——こうした表現は人間同士でも認識がズレることがありますが、AIとの間ではそのギャップがより大きくなる印象です。
最終的には、技術スタックのアイコンがスクロールに合わせて横に流れる、シンプルなマーキー演出に落ち着きました。控えめだけど楽しい、サイトの雰囲気にぴったりの演出です。
この試行錯誤から学んだ「判断のコツ」
たくさん試して、たくさんやめて。その経験から、デザイン判断のコツが見えてきました。
- 考える前に作ってもらう——頭で想像するより、実物を見たほうが早い
- 必ずブラウザで確認する——コードだけ見ても、良し悪しは分からない
- 「これ、見た人は楽しいかな？」と自分に問いかける
- 迷ったら引き算——やらない方がマシなことは、意外と多い
- 「感覚」は言葉にしきれないと割り切る——何度伝えてもズレるなら、別のアプローチに切り替える勇気も大事
AIは「足し算」が得意です。「もっとリッチに」「もっと動きを」とお願いすれば、どんどん足してくれる。
でも、良いデザインは「引き算」で作るものなんですよね。「技術的にできるけど、あえてやらない」という判断。そして「言葉で伝えきれない感覚的なこだわり」を最終的にジャッジするのは、やっぱり人間の役割だと思います。
アクセシビリティ——「漏れなく対応」はAIの得意分野
アクセシビリティ（誰にとっても使いやすいサイトにすること）の対応では、AIの力が大いに役立ちました。
たとえば、prefers-reduced-motion（「動きを控えめにしてほしい」というユーザー設定）への対応。アニメーションが苦手な方や、めまいを起こしやすい方のための配慮です。
「すべてのアニメーションコンポーネントで、この設定を尊重するようにして」とAIに依頼すると、全部のコンポーネントに漏れなく対応してくれます。
こういう「やるべきことは明確だけど、数が多くて人間がやると漏れやすい作業」は、AIの独壇場です。
まとめ——感性を言語化して、AIの力に変える
デザイン・演出でのAI協働のポイントをまとめます。
- ビジョン・方向性・「やめる」判断 → 人間の仕事
- 数値計算・網羅的な対応 → AIの仕事
- アニメーションの実装 → AIが作って、人間がジャッジ
- ブラウザでの最終確認 → 必ず人間の目で
AIは忠実で優秀な実装者です。でも、「何がかっこいいか」「何が気持ちいいか」を最終的に判断するのは、人間の感性。
「こういう雰囲気にしたい」という感覚を言語化して、AIの実装力に変換する。これがデザイン領域でのAI協働のコツだと感じています。
次回は、品質管理の話。テスト、コードレビュー、デプロイ——地味だけど大事な部分をAIとどう進めたかをお伝えします。