AIでWebサイトの初稿を作ることは、以前よりかなり身近になりました。
Claude Designのようなデザイン生成ツール、Claude CodeやCodexのようなコーディングエージェント、NetlifyやVercelのようなホスティング基盤を組み合わせれば、会社サイト、LP、簡単なサービス紹介ページのたたき台は短時間で形にできます。
ただし、実務で問題になるのは「作れるか」ではありません。
問題は、作ったページが会社の目的、読者、導線、ブランド、公開条件に合っているかです。
AIにいきなり「いい感じのサイトを作って」と頼むと、見た目は整っていても、読者が誰なのか、何を伝えるのか、どこから問い合わせるのか、どの表現を避けるのかが曖昧になりやすいです。
この記事では、AIでWebサイトを作る前に用意したいディレクション資料を整理します。ポイントは、プロンプトを長くすることではなく、AIが迷わない材料を先に分けることです。
最初に決めるのは、サイトの役割
AI制作で最初に決めるべきなのは、デザインテイストではありません。
まず、サイトの役割を1文で書きます。
このサイトは、誰に、何を理解してもらい、どの行動につなげるためのものか。たとえば、同じ会社サイトでも目的は分かれます。
- 新規問い合わせを増やす
- 採用応募につなげる
- 新サービスの需要を検証する
- 既存顧客に営業時間や料金を伝える
- 営業資料の補足として使う
目的が曖昧なままデザインに入ると、AIは雰囲気のよいページを作れます。しかし、事業の導線は弱くなります。
公開後に見る数字も変わります。問い合わせが目的ならフォーム送信、採用なら応募クリック、検証なら資料請求や待機リスト登録です。どの数字を見るのかを先に決めるだけで、AIに依頼する内容がかなり具体化します。
content.mdには、載せる情報と載せない情報を書く
次に作るのが content.md です。
これは、ページに載せる情報をまとめた原稿台帳です。完成した文章でなくても構いません。AIに渡すための材料として、次のように整理します。
サイトの目的:
想定読者:
主なCTA:
ページ構成:
各セクションで伝えること:
必ず載せる情報:
載せない情報:
使える素材:
確認が必要な情報:
公開前に人間が見る項目:大事なのは、載せる情報だけでなく、載せない情報も書くことです。
AIは、足りない情報を自然に補おうとします。その補い方が便利な場面もありますが、会社サイトでは危険になることがあります。
たとえば、まだ提供していないサービス、未確定の料金、実績に見える表現、使ってよいか分からない写真、過去の古いサービス説明が混ざると、公開後に修正が必要になります。
「これは未確定」「これは使わない」「この表現は避ける」と先に書いておくと、AIの速度を保ったまま事故を減らせます。
design.mdには、見た目の好みではなく判断基準を書く
次に design.md を作ります。
これは、デザインの好みを並べる資料ではありません。AIが画面を作るときに迷わないための判断基準です。
最低限、次を入れます。
全体トーン:
配色:
文字サイズと見出しの階層:
余白:
ボタンの扱い:
写真やイラストの扱い:
モーションの強さ:
PCとスマホで優先する情報:
避けたい表現:
参考にしてよい雰囲気:参考サイトを使う場合は、丸写しを避けます。
同業他社のサイトをそのまま近づけるのではなく、複数の参考から「余白の広さ」「写真の使い方」「見出しの見せ方」など、抽象化したルールだけを取り出します。
AIにスクリーンショットを見せる場合も、「この見た目を再現して」ではなく、「この余白感と情報密度を参考に、別の構成として作って」と伝える方が安全です。
いきなり全ページを作らせない
AIは一度に多くのことを頼めます。
でも、Webサイト制作では、一括依頼が必ずしも速いとは限りません。
最初からトップページ、下層ページ、スマホ対応、フォーム、画像、公開設定までまとめて頼むと、途中で方向性がずれたときに直す範囲が大きくなります。
おすすめは、段階を分けることです。
1. ファーストビューを複数案作る
2. 1案に絞ってトップページ上部だけ作る
3. トップページ全体を作る
4. 下層ページを1つだけ作る
5. 残りページを同じルールで展開する
6. スマホ表示を別工程で直す
7. 公開前チェックを通すこの順番にすると、人間が判断する場所が残ります。
AIは作業を進める係です。どの案を残すか、何を削るか、どこまで公開できるかを決めるのは人間です。
デザインからコードへ渡すときは、正本を同梱する
デザイン生成ツールで作った画面を、コーディングエージェントへ渡す場面も増えています。
このとき、画面だけを渡すと、コード側のAIは背景事情を知りません。
そこで、content.md と design.md を同梱します。さらに、プロジェクト内に短い作業ルールを置きます。
このサイトの目的:
絶対に変えない文言:
仮素材として扱う画像:
本番公開しないファイル:
確認コマンド:
公開前チェック:AIコーディングでは、前の会話にあった判断が次の作業で抜けることがあります。だからこそ、チャット上の会話ではなく、ファイルとして残すことが重要です。
AIにとっても、人間にとっても、後から見返せる正本がある方が直しやすくなります。
公開前チェックは、最後の作業ではなく最初の条件
AIで作ったサイトほど、公開前チェックを後回しにしない方がよいです。
最初の依頼時点で、公開条件を書きます。
メタタイトルと説明文:
スマホ表示:
フォーム通知先:
リンク切れ:
画像の権利:
代替テキスト:
コントラスト:
表示速度:
CTA:
公開後の修正担当:
ロールバック方法:LighthouseやCore Web Vitalsのような指標は、技術者だけのものではありません。読み込み、操作性、レイアウトの安定は、そのまま読者の体験に影響します。
中小企業のWebサイトでは、全部を完璧にする必要はありません。しかし、公開してよい最低ラインは決める必要があります。
AIに「最後に公開前チェックをして」と頼むより、最初から「この条件を満たす形で作って」と頼む方が、手戻りは少なくなります。
Optiensの見方
Optiensでは、AIによるWeb制作を「外注費を下げる方法」だけでは見ません。
本当に大事なのは、会社の判断基準を見える形にすることです。
誰に向けたページなのか。何を載せ、何を載せないのか。どこまでAIに作らせ、どこから人間が確認するのか。どの状態なら公開できるのか。
この整理ができる会社は、AIで作ったページを一度きりの成果物ではなく、改善できる事業資産として扱いやすくなります。
AI活用をどこから始めるべきか迷っている場合は、まず AI活用診断 で、既存業務のどこがAIパッケージ化しやすいかをご確認ください。実装まで進めたい候補が見えた場合は、導入前スコープ整理 で対象業務、含む範囲、費用感、5営業日で初期版にできるかを整理します。