AIで作ったウェブサイトが安っぽく見えてしまう理由とは？ | Claude Design, Claude Code, Codex

概要

Web制作歴14年のエンジニアが、AIでプロ級のウェブサイトを作るための15のコツを解説する動画。AIの性能不足ではなく「ディレクション不足」が素人っぽさの原因だとし、決める・伝える・検品するというディレクターの役割をAIとの協業に当てはめる方法を紹介している。Claude Design・Claude Code・Codexを用途別に使い分ける具体的なワークフローが中心。

主なポイント

• 参考サイトを2〜3個用意し、スクリーンショットとURLの両方をAIに渡す（画像は見た目、URLはアニメーションやコードの読み取りに使える）
• デザインの指示は「ヒーローイメージ」「パララックス」「イージング」などの専門用語で伝えると精度が上がる
• デザインルールをまとめた「デザインMD」、掲載テキストをまとめた「コンテンツMD」を作り、AIに常時参照させる（デザインMDはURL入力で自動生成するサービスも利用可能）
• 最初のファーストビュー案は最高性能モデルで3案作らせ比較検討する。それ以外の実装工程は軽量モデルでコストを抑える
• 設計・コーディングはClaude Code/Claude Design、実写・イラスト系画像素材はChatGPT、SVGやアイコンはClaude Codeというように用途ごとにAIを使い分ける
• frontend-design、UI Pro Max、GSAP MCP、Playwright、デプロイ用MCPなど拡張プラグイン・MCPを導入すると品質が上がる
• デザイン担当AIとコーディング担当AIを分ける場合は、initコマンドでデザインMD・コンテンツMDを引き継がせる
• スマホでの表示（可読性・タップしやすさ・表示速度）を優先して設計・確認する
• ファビコン設定、フリー素材不使用、HTTPS化、レスポンシブ対応、メタタグ設定など細部を詰めることでプロ品質に近づく
• 公開前にチェックリスト（SEO・OGP・アクセシビリティ・セキュリティなど）をAIに検品させる工程を設ける

実践に使えること

• サイト制作前に参考サイトのスクショ＋URLをセットでAIに渡す運用を試す
• プロジェクトに「design.md」「content.md」を作成し、AIに常時参照させる仕組みを導入する
• 重要な最初の1案だけ最高性能モデルを使い、以降の実装は軽量モデルに切り替えてコストを最適化する
• frontend-design・Playwright・GSAP MCPなどのプラグインをコーディングエージェントに導入する
• 公開前チェックリストをAIに実行させ、SEO・レスポンシブ・メタタグなどを自動検品する