はじめに
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でも小さなサイトからご相談いただけます。