はじめに

AIへ「会社のホームページを作って」と頼めば、数分で見栄えのよい画面が出てきます。

ところが、そのまま公開しようとすると次の問題が起きがちです。

誰向けのサイトなのか伝わらない
スマートフォンで崩れる
問い合わせがどこにも届かない
料金・実績・会社情報が仮データのまま
修正を頼むたびに別の場所が崩れる

原因はAIの性能だけではありません。作る前に決めるべきことが、決まっていないからです。

この記事では、小さな会社や個人事業のサイトをAIと一緒に作るとき、コードを書く前に決める7項目と、公開前の確認方法をまとめます。

0. 最初に「サイトの役割」を1つ選ぶ

サイトに全部を求めると、内容がぼやけます。まず主目的を1つ決めます。

主目的	最重要ページ	最重要CTA
問い合わせ獲得	サービス・実績	無料相談
店舗集客	店舗情報・メニュー	予約・地図
採用	仕事・文化・社員紹介	応募
信頼確認	会社情報・実績	資料請求
商品販売	商品・FAQ	購入

たとえば問い合わせ獲得が目的なら、PVより「相談ボタンを押した人数」「送信完了数」を見るべきです。

1. 誰の、どの悩みを解決するか

「中小企業向けITサービス」だけでは広すぎます。AIへ渡す前に、次の1文を埋めます。

[誰] が [どんな状況] で困ったとき、
[どんな方法] で [どんな結果] を得られるサービス。

例：

予約や顧客情報をExcelで管理している小規模店舗が、
現在の業務を大きく変えずに、転記時間と入力ミスを減らせるサービス。

この1文が、見出し、実績の選び方、CTAの言葉を決めます。

2. 掲載する事実を先に集める

AIは不足情報を自然な文章で補ってしまうことがあります。公開できる事実を facts.md にまとめます。

# 会社情報
- 正式名称: Example Studio
- 対応地域: 日本全国（オンライン）
- 返信時間: 2営業日以内

# サービス
- Webサイト制作
- 予約業務の自動化

# 料金
- 個別見積もり
- 「月額0円」など未確認の表現は禁止

# 実績
- 公開許可済みの案件だけ記載

# CTA
- 無料相談フォーム

AIへの指示には「facts.md にない数字・実績・顧客名を作らない」と書きます。

3. ページ構成を決める

最初はページ数を増やしすぎないほうが完成します。

/
├── ファーストビュー
├── よくある悩み
├── サービス
├── 選ばれる理由
├── 実績
├── 進め方
├── FAQ
└── 問い合わせ

/privacy   プライバシーポリシー
/thanks    送信完了

会社情報、特定商取引法表示、利用規約などは、事業内容に応じて追加します。

4. デザインを5つのルールへ縮める

AIに「おしゃれにして」と頼むより、ルールを固定したほうが崩れません。

:root {
  --color-bg: #f7f6f2;
  --color-text: #17201b;
  --color-primary: #176b4d;
  --color-border: #d9ddd8;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;

  --radius: 0.75rem;
  --content-width: 1120px;
}

決めるのは次の5つで十分です。

背景・文字・アクセントの色
見出しと本文の文字サイズ
余白の段階
ボタンの形
コンテンツ最大幅

AIへ修正を頼むときも「新しい色や余白値を増やさない」と指定できます。

5. 技術構成は必要な機能から選ぶ

流行している技術ではなく、更新方法と必要機能で決めます。

状況	構成例
数ページ、更新は開発者	静的HTML / 静的サイト生成
ブログを担当者が更新	CMS + Next.jsなど
予約・会員・決済が必要	アプリ + DB + 認証
まず需要を確認したい	1ページ + フォーム + Analytics

Next.jsは便利ですが、すべてのサイトに必要ではありません。更新頻度が低い小規模サイトなら、静的構成のほうが安く、運用も簡単な場合があります。

6. AIへ渡す「完了条件」を書く

プロンプトだけでなく、確認できる条件を用意します。

# 受け入れ条件

- 360px幅で横スクロールが発生しない
- キーボードだけでメニューとフォームを操作できる
- 全画像に適切なaltがある
- 見出し順序が h1 → h2 → h3 になっている
- フォーム成功・失敗・送信中の状態がある
- 存在しない実績、料金、顧客名を書かない
- title、description、canonical、OGPが設定されている
- 404ページがある
- 秘密鍵をクライアントへ含めない
- Lighthouseの主要な警告を確認する

AIへの依頼例です。

facts.md と acceptance-criteria.md を先に読んでください。
まず実装計画と不明点を出し、勝手に事実を補わないでください。
Heroセクションだけ実装し、完了条件を自己確認してください。
既存の色・余白・フォント以外を追加しないでください。

ページ全体ではなく、セクション単位で実装・確認すると修正範囲が小さくなります。

7. 問い合わせが本当に届くところまで試す

見た目が完成しても、次を実際に操作します。

必須項目が空のとき送信できない
間違ったメール形式を検出する
二重クリックで2件送信されない
送信中に状態が分かる
失敗時に再試行できる
成功後に管理者へ通知される
スパム対策がある
個人情報の保存先と保持期間が決まっている

自分のメールアドレスで1件送るだけでなく、スマートフォン、遅い回線、失敗時も確認します。

公開前チェックリスト

内容

誰向けか最初の画面で分かる
料金または見積もり方法が分かる
実績は掲載許可を確認した
仮の文章・画像が残っていない
CTAが1種類に整理されている

技術

独自ドメインとHTTPS
title / description / canonical
OGP画像
sitemap.xml / robots.txt
404ページ
フォーム送信テスト
Analyticsのイベント確認
バックアップと更新手順

表示

360px / 768px / 1440pxで確認
Chrome / Safariで確認
キーボード操作
文字と背景のコントラスト
画像サイズと表示速度

公開後に見る数字

最初の1か月は、細かい指標を増やしすぎません。

どこから来たか
サービス・実績を見たか
CTAを押したか
問い合わせを完了したか

訪問が少なければ集客を改善し、訪問はあるのに問い合わせがなければ内容や導線を改善します。この切り分けができるだけでも、やみくもなデザイン変更を減らせます。

まとめ

AIでサイトを速く作るコツは、より長いプロンプトを書くことではありません。事実、対象ユーザー、デザインルール、完了条件を先に固定することです。

まずは1ページと1つのCTAから、ぜひ自分で作って公開してみてください。実際のアクセスや問い合わせから得られる学びは、画面を作り続けるより大きいです。

本業が忙しく、要件整理・実装・公開後の計測まで手が回らない場合は、Tact Worksでも小さなサイトからご相談いただけます。