独立したばかりの個人事業主や、Web担当者がいない会社でも、会社案内を中心としたホームページならAIを使って自作できます。
ただし、AIがHTMLやCSSを生成した時点では、まだ「公開できる会社ホームページ」ではありません。会社情報が正しいか、公開フォルダーに秘密情報が入っていないか、静的ファイルとして配信できるかを確認する必要があります。
この記事では、次の範囲を扱います。
- 会社情報を整理する
- 1ページの静的サイトを作る
- AIと事業者で公開前チェックを分担する
- MCPを使って一時公開し、実物を確認する
実際の企業案件を使った成果報告ではありません。2026年7月31日時点のMCP公式資料、Sakupaの公開資料とソースを確認して構成した資料型ガイドです。端末上で一連の操作を完走した検証記事ではないため、実測値や成功結果は記載しません。
想定読者は、小規模事業者のWeb制作を兼任する人と、その作業を支援するエンジニアです。
まず静的サイトで足りるかを判断する
今回対象にするのは、次の情報を載せる1ページから数ページのサイトです。
- 会社や事業者の紹介
- 提供するサービス
- 営業時間、所在地、対応地域
- 電話、メール、外部フォームなどの問い合わせ先
このような会社案内は、HTML、CSS、JavaScript、画像をあらかじめ生成して配信する静的サイトと相性がよい用途です。閲覧者ごとにサーバーでページを作り変える必要がなく、公開対象のファイルも確認しやすくなります。
一方、次の要件がある場合は、静的サイトだけでは足りません。
- 会員ごとに異なる情報を表示する
- 独自の決済や予約処理を実行する
- 顧客情報や在庫をデータベースへ保存する
- 管理画面から頻繁に記事を更新する
- 厳格な監査、可用性、復旧時間が求められる
これらには認証、サーバー処理、データベース、監視、バックアップなどの設計が必要です。最初にこの境界を決めておくと、AIが見た目だけ動くコードを生成し、公開段階で作り直す事態を避けやすくなります。
会社情報を整理してからAIに渡す
最初から「会社サイトを作って」と頼むと、不足している実績、料金、資格などをAIが自然な文章で補ってしまうことがあります。
先に必要なのは、掲載してよい事実と不足資料の切り分けです。
私は小規模事業者です。会社案内のための静的サイトを作ります。
会社名：
業種：
主な顧客：
提供するサービス：
顧客がよく困っていること：
同業他社との違い：
所在地と営業時間：
問い合わせ方法：
サイトを見た人に最後にしてほしい行動：
この情報から、サイトの目的、想定読者、必要なページ、
不足している資料を整理してください。
会社の実績、価格、資格、事例、顧客評価は推測しないでください。
まだコードは書かないでください。
AIの回答をそのまま制作指示に使うことは避けます。元資料と照合する項目は次のとおりです。
- 会社名、住所、電話番号
- 営業時間、対応地域
- 料金、資格、実績
- サービスの範囲と約束
- 写真、ロゴ、事例、顧客の声を公開できる権利
不明な項目は空欄のままにするか、「要確認」として残してください。
最初は1ページだけ作る
会社情報を確認した後の制作対象は、トップページだけです。
確認済みの会社情報だけを使って、静的な企業サイトを作ってください。
最初はトップページ1ページにします。
次の内容を含めてください。
- 何を提供している会社か分かる見出し
- 主なサービス
- この会社を選ぶ理由
- 営業時間または対応地域
- 問い合わせ方法
- 会社情報
不足情報は作り話で埋めず、「要確認」として残してください。
スマートフォンでも読みやすい構成にしてください。
最初の目標は豪華なデザインではありません。初めて会社を知った人が、次の三つを判断できる状態です。
- 何を提供している会社か
- 自分が対象になるか
- どう連絡すればよいか
ヒーロー、情報、導入メリット、行動ボタン、フッターを1列に並べた構成例。筆者側で制作し、掲載権利を持つWebサイト作成ガイドの素材です。
ページを増やすのは、この1ページをスマートフォンとパソコンで読み、足りない情報が分かってからでも遅くありません。
公開前チェックをAIと本人で分ける
公開前の確認には、AIが機械的に調べやすい項目と、事業者にしか判断できない項目があります。
| AIや開発ツールで確認する | 事業者本人が確認する |
|---|---|
| 画面幅ごとの表示 | 会社情報、価格、営業時間 |
| リンク切れ | サービス上の約束 |
| キーボード操作 | 写真やロゴの使用許可 |
| 画像の代替テキスト | 事例や顧客の声の掲載許可 |
| 静的ビルドの成否 | 問い合わせ先と個人情報の扱い |
| 公開フォルダーの内容 | 公開後の更新担当者 |
AIには、確認結果を二つに分けて出力させます。
現在の企業サイトを公開前に確認してください。
結果を「AIが確認した技術項目」と
「事業者本人が確認する項目」に分けてください。
AIは、画面幅375、768、1024、1440での表示、リンク、
キーボード操作、文字の読みやすさ、画像の代替テキスト、
静的ビルド、公開フォルダーを確認してください。
公開フォルダーにソースコード、.env、秘密鍵、顧客資料、
契約書、アーカイブ、動画、社内用ファイルが入っていないことも
確認してください。
会社情報、価格、業務上の約束、素材の使用許可、
問い合わせ先、個人情報の扱いは本人確認として残してください。
まだ公開しないでください。
「AIが問題なしと答えた」だけでは、公開前チェックの記録になりません。静的ビルドのコマンド、出力先、検出したファイル、未確認項目まで表示させます。
公開フォルダーには、通常 index.html と、それが参照するCSS、JavaScript、画像などが含まれます。Next.jsの静的出力ならout、Viteならdistが候補ですが、プロジェクト設定によって変わるため、フォルダー名だけで決めません。
MCPで公開前分析と一時公開を行う
ローカルで完成したファイルを外部URLにするには、ホスティングサービスへの送信が必要です。今回は、その操作をAIツールから実行する例としてSakupa MCPを使います。
MCP（Model Context Protocol）は、AIアプリケーションを外部のデータやツールへ接続するためのオープンな標準です。Sakupaは筆者が開発に関わっているサービスです。
Sakupa MCPはローカルのstdioサーバーとして動きます。公開対象をローカルで分析し、ビルド済みの静的ファイルをアップロードするため、ローカルMCPサーバーに対応したAIツールとnpxを実行できる環境が必要です。
MCPクライアントへ登録する基本設定は次のとおりです。
{
"mcpServers": {
"sakupa": {
"command": "npx",
"args": ["-y", "@sakupa/mcp"]
}
}
}
設定ファイルの場所はAIツールごとに異なるため、一律には示せません。設定変更をAIへ依頼する場合も、変更先と差分を表示させてから許可してください。
現在のAIツールへ、提示した設定でSakupa MCPを追加してください。
設定を変更する前に、変更するファイルと差分を説明してください。
接続後は利用可能なツール名を表示してください。
まだサイトは公開しないでください。
接続後は、先にanalyze_siteで公開可否を調べます。ローカルでフレームワークと出力先を検出し、サーバー側でページを生成するSSR、データを受け取るAPIルート、秘密情報など、静的公開に合わない要素を見る処理です。
Sakupaのanalyze_siteを使って、このプロジェクトを分析してください。
静的ビルドが必要なら、実行するコマンドを先に説明してください。
公開対象フォルダー、検出した問題、警告、未確認項目を表示し、
まだdeploy_siteは実行しないでください。
分析結果と事業者本人の確認がそろった段階で、deploy_siteへ進みます。その前に、公開対象をもう一度確認してください。
分析済みの静的出力を一時公開する準備をしてください。
deploy_siteを実行する前に、対象フォルダー、
公開されるファイルの種類、除外される項目を説明し、
私の確認を待ってください。
Sakupaの無料リンクは短期確認用で、通常は24時間有効です。同一の公開元ネットワークで同時に利用できる有効な無料サイトは3件までです。上限時には、既存の無料URLを明示的に選んでサイトを引き継ぐため、別プロジェクトのURLを選ばないよう注意が必要です。
無料リンクは本番サイトとして放置せず、実物を確認するための一時プレビューとして扱います。
公開URLで確認する
URLが発行されたら、AIの完了報告だけで終わらせず、スマートフォンとパソコンで開いてください。
- 会社名、住所、営業時間は正しいか
- 電話、メール、外部フォームのリンクは動くか
- 画像が欠けていないか
- 小さい画面でも文字とボタンを読めるか
- 「要確認」の仮文言が残っていないか
- 公開してはいけないファイルへアクセスできないか
第三者にURLを送る前の会社情報と公開権利の最終確認は、事業者本人の仕事です。
更新用の認証情報をバックアップする
初回公開後、Sakupa MCPはプロジェクト内の.sakupa/site.jsonにサイト管理認証情報を保存します。同じプロジェクトから再度公開すれば、既存サイトを更新可能です。
このファイルはサイトを管理するための鍵です。
- 内容をAIとの会話へ貼り付けない
- 公開リポジトリへコミットしない
- 公開フォルダーへコピーしない
- プロジェクト内のパスを保ったまま、アクセスを制限した場所へバックアップする
Gitを使う場合は、少なくとも次の除外を確認します。
.sakupa/
Sakupaはソースコードの保管場所や復元保証付きバックアップではありません。元のプロジェクト、画像、静的出力、ドメイン設定、.sakupa/site.jsonは利用者側でも保管します。
この手順を使う判断基準
AIを使った自作が向いているのは、掲載内容を事業者自身が確認でき、静的サイトの範囲で足り、公開後の元ファイルと認証情報を管理できる場合です。
反対に、ログイン、決済、顧客データ、複雑な予約、法務判断、高い可用性が必要なら、最初から専門家を含めて設計した方が安全です。AIは制作と機械的な確認を手伝えますが、会社情報の正しさ、公開する権利、個人情報の扱い、業務上の約束までは決められません。
まずは確認済みの会社情報だけで1ページを作り、一時URLで実物を見る。そこで不足が分かってから、ページや機能を増やすのが、この手順の最小単位です。
参考資料
- Model Context Protocol公式ドキュメント（2026年7月31日確認）
- Sakupa Webサイト作成ガイド（2026年7月31日確認）
- Sakupa 公開ガイド（2026年7月31日確認）
- Qiita コミュニティガイドライン（2026年7月31日確認）
本文の構成と推敲には生成AIを使用しました。製品仕様、設定、制限事項は公開資料と現行ソースで確認しています。実行していない操作を実測結果としては記載していません。