[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"/api/social-links:{}":3,"/api/blogs/ai-web-dev-05-design-and-animation:{}":9},{"links":4},[5],{"platform":6,"url":7,"icon":8},"note","https://note.com/morinoupa2020","simple-icons:note",{"post":10,"relatedPosts":40,"prevPost":120,"nextPost":123},{"id":11,"slug":12,"title":13,"date":14,"excerpt":15,"content":16,"thumbnail":17,"categories":18,"tags":23,"difficulty":36,"tldr":37,"readingTime":38,"relatedTech":39},244,"ai-web-dev-05-design-and-animation","【AI×Web制作 #5】人間の感性 × AIの実装力 — デザイン・演出編","2026-02-25T14:00:00","デザインやアニメーション——人間の感性が一番試される領域でのAI協働。「こういう雰囲気にしたい」を伝えるコツと、試行錯誤のリアルを語ります。","\u003Cp>シリーズ第5回。今回のテーマは\u003Cstrong>「デザインとアニメーション演出」\u003C/strong>——人間の感性が一番試される領域でのAI協働です。\u003C/p>\n\u003Cp>結論から言うと、このフェーズが一番面白くて、一番難しかったです。\u003C/p>\n\u003Ch2>最初の壁——「こういう感じにしたい」を言葉にする\u003C/h2>\n\u003Cp>デザインの話をAIとするとき、最初にぶつかる壁があります。それは\u003Cstrong>「言語化」\u003C/strong>です。\u003C/p>\n\u003Cp>「ダークテーマで、洗練された感じで、でも冷たすぎなくて、エンジニアっぽいけど親しみやすくて……」\u003C/p>\n\u003Cp>こういう曖昧な感覚って、ありますよね。頭の中にはイメージがあるのに、言葉にするのが難しい。でも、AIに実装してもらうためには、これを\u003Cstrong>AIが理解できるレベルまで具体化する\u003C/strong>必要があります。\u003C/p>\n\u003Cp>僕がやったのは、\u003Cstrong>先にデザインガイドライン（設計の指針）を文書にまとめる\u003C/strong>ことでした。\u003C/p>\n\u003Cul>\n\u003Cli>色: 暗めのグレーをベースに、アクセントカラーはシアン（青緑系）\u003C/li>\n\u003Cli>文字: 本文は「Noto Sans JP」、コード部分は等幅フォント\u003C/li>\n\u003Cli>余白: 8pxの倍数でそろえる\u003C/li>\n\u003Cli>アニメーション: 控えめだけど存在感がある、なめらかな動き\u003C/li>\n\u003C/ul>\n\u003Cp>この文書が、AIへの「デザインブリーフ（設計指示書）」になりました。\u003Cstrong>曖昧な感覚を、できるだけ具体的な言葉に落とす\u003C/strong>。これだけでAIの出力精度が格段に上がりました。\u003C/p>\n\u003Ch2>CSS設計——数値はAI、感覚は人間\u003C/h2>\n\u003Cp>このサイトでは、色やサイズをすべて\u003Cstrong>CSS変数（一箇所で定義して使い回せる仕組み）\u003C/strong>で管理しています。「ここの色を変えたい」と思ったら、変数の値を一つ変えるだけでサイト全体に反映される、便利な仕組みです。\u003C/p>\n\u003Cp>この設計をAIと一緒に進めました。\u003C/p>\n\u003Cp>AIが得意だったのは、\u003Cstrong>数値的な正確さ\u003C/strong>です。たとえば、「WCAG AAA準拠（Webアクセシビリティの最高基準）のコントラスト比を確保して」と言えば、背景色とテキスト色の組み合わせを計算してくれます。\u003C/p>\n\u003Cp>人間が目で見て「たぶん大丈夫かな？」と判断するより、はるかに正確。\u003C/p>\n\u003Cp>一方で、\u003Cstrong>「この色の組み合わせ、なんかしっくりこないな」という感覚的な判断は、AIにはできません\u003C/strong>。数値上はOKでも、見た目の印象は別物なんです。ここは人間の目で確認して調整しました。\u003C/p>\n\u003Ch2>ヒーロー演出の方針変更——計画通りにいかないこともある\u003C/h2>\n\u003Cp>当初の計画では、トップページのヒーロー（最初に目に入る大きなビジュアル部分）に\u003Cstrong>Canvas/WebGLを使ったジェネラティブアート\u003C/strong>——プログラムで生成される幾何学的な映像を表示する予定でした。\u003C/p>\n\u003Cp>でも実際に試作してみると、「技術的に面白い」ことと「サイトの雰囲気に合う」ことは別だと気づきました。結果的に、\u003Cstrong>WordPressで設定した画像やYouTube背景動画をフェードで切り替える演出\u003C/strong>に方針を変更しています。\u003C/p>\n\u003Cp>こういう\u003Cstrong>「やってみたけど違った」という方針変更は、AIとの協働でもやっぱり起きます\u003C/strong>。大事なのは、早めに判断して切り替えること。AIが作ってくれるスピードが速い分、「試して、やめて、別のアプローチ」のサイクルも速く回せるのは利点です。\u003C/p>\n\u003Ch2>アニメーション——作って、壊して、また作る\u003C/h2>\n\u003Cp>このサイトの特徴の一つが、\u003Cstrong>GSAP（アニメーションライブラリ）+ ScrollTrigger（スクロール連動の仕組み）\u003C/strong>を使ったスクロールアニメーションです。ページをスクロールすると要素がふわっと現れたり、動いたりする、あの演出ですね。\u003C/p>\n\u003Cp>ここが一番AIとの試行錯誤が多かった部分です。\u003C/p>\n\u003Ch3>うまくいった例: フェードインアニメーション\u003C/h3>\n\u003Cp>「スクロールするとコンテンツがふわっと表示される」という汎用的なアニメーション。これはAIが一発で良いものを作ってくれました。パターンが決まっている処理なので、AIの得意分野です。\u003C/p>\n\u003Ch3>苦労した例: セクション間の装飾——「感覚」が伝わらない\u003C/h3>\n\u003Cp>一方で、セクションとセクションの間に入れる装飾的な演出には苦労しました。ここが一番\u003Cstrong>「人間の感覚とAIの解釈がかみ合わない」\u003C/strong>と感じた部分です。\u003C/p>\n\u003Cp>最初は「波のアニメーションを入れたい」とAIに頼みました。技術的には動くものができたんですが……実際にブラウザで見ると、\u003Cstrong>全体的にぎこちない\u003C/strong>。なんというか、気持ちいい感じのスムーズさが出ない。「もっと滑らかに」「もうちょっと自然な感じで」と何度伝えても、自分が頭の中でイメージしている「あの気持ちよさ」にたどり着かないんですよね。\u003C/p>\n\u003Cp>次に「じゃあ3Dっぽいズーム効果は？」と試しました。スクロールに合わせてスムーズに奥行きが変わる演出をイメージしていたんですが、AIが出してくるものはどれも動きの途中で\u003Cstrong>「ガクッ」と引っかかる\u003C/strong>ような仕上がりになってしまう。「もっと滑らかにして」「途中で止まる感じをなくして」と何度お願いしても、その\u003Cstrong>「ガクッと感」がどうしても直らない\u003C/strong>。結局、求めているスムーズさにたどり着けず、取り消しました。\u003C/p>\n\u003Cp>これは「AIが悪い」という話ではなくて、\u003Cstrong>感覚的なニュアンスを言葉だけで正確に伝える難しさ\u003C/strong>なんだと思います。「スムーズに」「ぎこちなく感じる」「ここが引っかかる」——こうした表現は人間同士でも認識がズレることがありますが、AIとの間ではそのギャップがより大きくなる印象です。\u003C/p>\n\u003Cp>最終的には、\u003Cstrong>技術スタックのアイコンがスクロールに合わせて横に流れる、シンプルなマーキー演出\u003C/strong>に落ち着きました。控えめだけど楽しい、サイトの雰囲気にぴったりの演出です。\u003C/p>\n\u003Ch2>この試行錯誤から学んだ「判断のコツ」\u003C/h2>\n\u003Cp>たくさん試して、たくさんやめて。その経験から、デザイン判断のコツが見えてきました。\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>考える前に作ってもらう\u003C/strong>——頭で想像するより、実物を見たほうが早い\u003C/li>\n\u003Cli>\u003Cstrong>必ずブラウザで確認する\u003C/strong>——コードだけ見ても、良し悪しは分からない\u003C/li>\n\u003Cli>\u003Cstrong>「これ、見た人は楽しいかな？」\u003C/strong>と自分に問いかける\u003C/li>\n\u003Cli>\u003Cstrong>迷ったら引き算\u003C/strong>——やらない方がマシなことは、意外と多い\u003C/li>\n\u003Cli>\u003Cstrong>「感覚」は言葉にしきれないと割り切る\u003C/strong>——何度伝えてもズレるなら、別のアプローチに切り替える勇気も大事\u003C/li>\n\u003C/ol>\n\u003Cp>AIは「足し算」が得意です。「もっとリッチに」「もっと動きを」とお願いすれば、どんどん足してくれる。\u003C/p>\n\u003Cp>でも、\u003Cstrong>良いデザインは「引き算」で作る\u003C/strong>ものなんですよね。「技術的にできるけど、あえてやらない」という判断。そして「言葉で伝えきれない感覚的なこだわり」を最終的にジャッジするのは、やっぱり人間の役割だと思います。\u003C/p>\n\u003Ch2>アクセシビリティ——「漏れなく対応」はAIの得意分野\u003C/h2>\n\u003Cp>アクセシビリティ（誰にとっても使いやすいサイトにすること）の対応では、AIの力が大いに役立ちました。\u003C/p>\n\u003Cp>たとえば、\u003Ccode>prefers-reduced-motion\u003C/code>（「動きを控えめにしてほしい」というユーザー設定）への対応。アニメーションが苦手な方や、めまいを起こしやすい方のための配慮です。\u003C/p>\n\u003Cp>「すべてのアニメーションコンポーネントで、この設定を尊重するようにして」とAIに依頼すると、\u003Cstrong>全部のコンポーネントに漏れなく対応\u003C/strong>してくれます。\u003C/p>\n\u003Cp>こういう「やるべきことは明確だけど、数が多くて人間がやると漏れやすい作業」は、AIの独壇場です。\u003C/p>\n\u003Ch2>まとめ——感性を言語化して、AIの力に変える\u003C/h2>\n\u003Cp>デザイン・演出でのAI協働のポイントをまとめます。\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>ビジョン・方向性・「やめる」判断\u003C/strong> → 人間の仕事\u003C/li>\n\u003Cli>\u003Cstrong>数値計算・網羅的な対応\u003C/strong> → AIの仕事\u003C/li>\n\u003Cli>\u003Cstrong>アニメーションの実装\u003C/strong> → AIが作って、人間がジャッジ\u003C/li>\n\u003Cli>\u003Cstrong>ブラウザでの最終確認\u003C/strong> → 必ず人間の目で\u003C/li>\n\u003C/ul>\n\u003Cp>AIは忠実で優秀な実装者です。でも、「何がかっこいいか」「何が気持ちいいか」を最終的に判断するのは、人間の感性。\u003C/p>\n\u003Cp>\u003Cstrong>「こういう雰囲気にしたい」という感覚を言語化して、AIの実装力に変換する。\u003C/strong>これがデザイン領域でのAI協働のコツだと感じています。\u003C/p>\n\u003Cp>次回は、品質管理の話。テスト、コードレビュー、デプロイ——地味だけど大事な部分をAIとどう進めたかをお伝えします。\u003C/p>\n","",[19],{"id":20,"name":21,"slug":22},35,"サイト構築","site-building",[24,28,32],{"id":25,"name":26,"slug":27},78,"AI協働","ai-collaboration",{"id":29,"name":30,"slug":31},7,"CSS","css",{"id":33,"name":34,"slug":35},12,"GSAP","gsap","intermediate","デザインの言語化がAI協働の鍵。AIは実装力、人間は感性と「やめる判断」を担う。良いデザインは引き算。","7",[],[41,73,98],{"id":42,"slug":43,"title":44,"date":45,"excerpt":46,"thumbnail":17,"categories":47,"tags":52,"difficulty":70,"tldr":71,"readingTime":72},254,"ai-markup-horizontal-expansion","AIエージェントが一番確実に活躍できるフロントエンドの仕事 — マークアップの横展開","2026-03-25T19:01:28","AIにコードを書かせる場面は増えてきました。ただ、「結局どこに使うのが一番効くの？」という問いに対して、まだ手探りの方も多いんじゃないかと思います。 自分はフリーランスのフロントエンドエンジニアとして、日常的にAIエージ […]",[48],{"id":49,"name":50,"slug":51},44,"技術深掘り","deep-dive",[53,54,58,62,66],{"id":25,"name":26,"slug":27},{"id":55,"name":56,"slug":57},81,"Claude Code","claude-code",{"id":59,"name":60,"slug":61},84,"フロントエンド","%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89",{"id":63,"name":64,"slug":65},85,"マークアップ","%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97",{"id":67,"name":68,"slug":69},86,"実務","%e5%ae%9f%e5%8b%99","beginner","フロントエンドの実務でAIエージェントが最も確実に力を発揮するのはマークアップの横展開。レイアウトパターンごとに数ページ人間が作り、残りをAIに任せると圧倒的に速い。完璧ではないが、単純作業の負担を大幅に減らせる。","6",{"id":74,"slug":75,"title":76,"date":77,"excerpt":78,"thumbnail":17,"categories":79,"tags":81,"difficulty":36,"tldr":96,"readingTime":97},252,"wordpress%e3%83%90%e3%83%83%e3%82%af%e3%82%a8%e3%83%b3%e3%83%89%e3%82%92ai%e3%81%ab%e5%85%a8%e4%bb%bb%e3%81%9b%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f-%e6%84%9f%e6%80%a7%e3%81%8c%e8%a6%81","WordPressバックエンドをAIに全任せしてみた — 感性が要らない領域こそAI向きなのか検証する","2026-03-15T02:38:53","WordPressのバックエンド——カスタム投稿タイプの定義、REST APIの設計、管理画面のカスタマイズ。こうした作業は、仕様が明確でパターン化しやすい。 前回までの連載で「デザインやアニメーションなど、人間の感性に […]",[80],{"id":49,"name":50,"slug":51},[82,83,84,88,92],{"id":25,"name":26,"slug":27},{"id":55,"name":56,"slug":57},{"id":85,"name":86,"slug":87},82,"PHP","php",{"id":89,"name":90,"slug":91},83,"REST API","rest-api",{"id":93,"name":94,"slug":95},31,"WordPress","wordpress","ポートフォリオサイトのWordPressバックエンド（テーマ・REST API・管理画面）をAIに全任せで実装。定型的なバックエンド作業はAIの得意領域だが、実際に使い始めると「キー名の不一致」「運用を想定していない設計」など、細かい修正が必要になる場面があった。","8",{"id":99,"slug":100,"title":101,"date":102,"excerpt":103,"thumbnail":17,"categories":104,"tags":106,"difficulty":36,"tldr":119,"readingTime":38},112,"free-spam-protection-turnstile-honeypot","お問い合わせフォームのスパム対策を無料で実装する — Cloudflare Turnstile × ハニーポットの2層防御","2026-02-28T02:12:59","お問い合わせフォームのスパム対策、後回しにしていませんか？Cloudflare Turnstileとハニーポットを組み合わせた2層防御を完全無料で実装する方法を、本番環境でのハマりポイントも含めて解説します。",[105],{"id":49,"name":50,"slug":51},[107,111,115],{"id":108,"name":109,"slug":110},20,"Nuxt","nuxt",{"id":112,"name":113,"slug":114},26,"TypeScript","typescript",{"id":116,"name":117,"slug":118},80,"セキュリティ","security","Cloudflare Turnstile（無料）とハニーポットの2層防御でお問い合わせフォームのスパム対策を実装。本番環境ではNitroが.envを読まない問題やPM2の環境変数反映に注意が必要。",{"slug":121,"title":122,"thumbnail":17},"ai-web-dev-04-pair-programming","【AI×Web制作 #4】AIエージェントとペアプログラミングする現場",{"slug":124,"title":125,"thumbnail":17},"ai-web-dev-06-quality-and-deploy","【AI×Web制作 #6】AIと品質を守る — レビュー・テスト・デプロイ"]