テック技報最新号へ →
デザイン

AIで作るサイトが実案件でショボくなるのは、ディレクターがいないから：決める・伝える・検品するの14項目

自分がディレクター、AIがデザイナー兼エンジニア。参考サイト・DESIGN.md・CONTENTS.mdで伝え、まず上半分だけ3案を作らせて選び、最後はチェックリストで全ページを検品させる。

@seito_horiguchi · 2026-11-02
#AI×デザイン#Webサイト制作#DESIGN.md#プロンプト#ClaudeCode#検品

どんな問題を解決するか / いつ使うか

「かっこいいサイトを作って」なら数分でそれらしいものが出るのに、ページ構成・文章・雰囲気が決まっている実案件だと安っぽくなるとき。Claude Code、Codex、Claude Designのどれでも考え方は同じ、と筆者は書いている。

やり方（14項目から要点）

決める・伝える

  1. 参考サイトを1〜3つ選び、スクショとURLの両方を渡す（スクショで見た目、URLでフォントや色の値や動きを読ませる）。日本語サイトなら日本語の参考を選び、雰囲気が近いものだけにする。同業・競合のサイトは避ける。
  2. 「上のほうのデカい画像」ではなく、ヒーローイメージ、カルーセル、パララックス、イージングなどの用語で指示する。
  3. 色・フォント・余白・イメージの言葉をDESIGN.mdにまとめる（参考サイトのスクショを渡してAIに作らせてよい）。特に余白のルールを決める。
  4. 載せる全テキストはCONTENTS.mdにまとめる。資料を渡して「この資料からCONTENTS.mdを作って。ページごと、セクションごとに分けて構成して」と頼む。
  5. 最初は3案、それもページの上部50%だけを作らせ、比べて1つ選んでから残りを仕上げさせる。
プロのWebデザイナーとしてコーポレートサイトを作成してください。
見比べたいのでまずは3案作成してください。
# 参考データ
* CONTENTS.md: サイト内に記載する全テキストの情報
* DESIGN.md: デザインのトンマナを言語化したもの
# 3案の内容
1. デザイン優先でシンプル寄り。CONTENTS.mdのテキストは必要に応じて改変OK
2. 情報に忠実寄り。CONTENTS.mdのテキスト優先で必ず要素を入れる
3. 1と2の中間
まずはページ全体の上部50%だけ作成してください。
最も良いものを残して残りを仕上げてもらいます。
  1. ロゴや図形は画像生成でなくSVGなどのコードで描かせる。予算と手間はヒーローイメージに集中させる。
  2. 実装の前に道具をそろえる：Frontend Design、UI UX Pro Max、GSAPの公式スキル、Playwright（AIにブラウザで表示崩れを確かめさせる）、デプロイ用のMCP。
  3. デザインを作るAIとコードを書くAIが分かれるなら、DESIGN.mdとCONTENTS.mdを docs/ に置き、/init でCLAUDE.mdを作らせて引き継ぐ。

検品する

  1. スマホ幅での文字の読みやすさ・ボタンの押しやすさ・表示の速さを、PlaywrightでAIに確かめさせる。
  2. ファビコン、どこかで見たフリー素材写真、https、metaタグ（OGP）など、素人感が出る細部を直す。人物や商品の写真はAI生成でなく実物を使う。
  3. 公開前チェックリスト（メタ情報・SEO、OGP、パフォーマンス、アクセシビリティ、計測、フォーム、リンク切れ、404、法務など）を添付し、「全ページで全項目に合格しているか確認して。追加素材なしで直せるものは直し、直せないものは項目を挙げて」と頼む。

注意点

  • 筆者の48項目チェックリストとDESIGN.mdのひな形はLINE登録で配布されている（ここには含めていない）。項目の分類を参考に自作できる。
  • 紹介されているプラグインやスキルは第三者製。入れる前に中身を確認する。

関連

出典

X の元の投稿を開く