【脱・AIデザイン】AI生成でもプロ級のデザインを上手く作るには？【徹底検証】

概要

AIにウェブサイトを作らせると紫グラデーションと絵文字だらけの「いかにもAI」なデザインになりがちという問題に対し、約30パターンの検証を通じて「AI感」を消すための具体的アプローチを7つのカテゴリに整理して紹介する動画。すべて同じ一言プロンプト（「タスク管理の積み木のLPを作って」）から出発し、作り方だけを変えて比較している。

主なポイント

• デザインシステムを移植する：IBMカーボンやデジタル庁デザインシステムなど公開されたデザインシステム、または自社ブランドのデザインシステムをAIに読み込ませるだけで劇的にAI感が消える
• スキルで判断力を与える：Hallmarkスキルやテイストスキルなど、GitHub等で公開されているデザイン用スキルをAIに使わせると特徴的で洗練された表現が可能になる（特にテイストスキルが高評価）
• 順番と参照先を変える：Figmaで先にデザインしてから実装させる、または実在サイトのUIをレイアウト参考として部分的に移植する、という従来の制作フローに近づける
• 技術の流儀に乗る：Next.js／Vue.js／WebGLシェーダーなどを使った動きのある表現を1つ加えるだけでオリジナリティが増す
• 様式と質感を指定する：タイポグラフィ、ネオブルータリズム、紙とインクの質感などAIが多用しない様式を明示的に指定する
• 動きで見せる：Three.jsのスクロール駆動3D、GSAP、Matter.js物理エンジン、P5.jsジェネレーティブアート、D3.jsのデータ駆動表現などでリッチさを演出する
• 写真と動画で実在感を出す：AI生成画像でなく本物の写真・動画（背景ループ動画、フォトコラージュ、スクロール連動写真ストーリー、ショーリール）を使うのが最も再現性が高く手軽
• 複数の手法（自社デザインシステム＋動き＋固定画像＋テキストのふわっと表示など）を組み合わせることで、AI制作と判別困難な完成度に到達できる

実践に使えること

• ウェブサイトをAIに作らせる前に、公開デザインシステム（デジタル庁デザインシステムなど）や自社ブランドのデザインシステムを事前にAIへ読み込ませる
• GitHub等で公開されているデザイン系スキル（例：テイストスキル）を導入し、AIの出力に判断基準を持たせる
• Figmaでラフデザインを作ってからAIに実装させる、または参考サイトのレイアウトを部分的に組み合わせて発注する
• Three.js／GSAP／WebGLシェーダーなどの動きを1点だけでも加えて「作り込まれている感」を出す
• ストック素材ではなく実写の写真・動画を積極的に使い、AI生成画像を避ける