「AIでホームページが作れる」は本当です。ClaudeやChatGPTに指示を出せば、保存すればそのまま開けるHTMLファイルが返ってきます。サーバー代以外は無料。ただし、指示の出し方で結果の差がとても大きいのも事実です。
この記事では、お店や会社の1ページサイトをAIに作らせる実践手順をまとめます。
手順1：material（材料）を先に揃える
AIへの指示より先に、次の材料をメモ帳に書き出してください。ここが曖昧だと、AIは無難で嘘っぽい文章を埋めてきます。
- 業種と店名
- 一番伝えたいこと（例：カット＋髪質改善が得意。駅3分）
- 強み3つ・営業時間・住所・予約方法
- ブランドカラー（無ければ「おまかせ」でOK）
手順2：プロンプトは「役割＋材料＋制約」の型で
そのまま使える型を置いておきます。
あなたはシニアWebデザイナーです。
以下の店の1ページサイトを、1つのHTMLファイルで作ってください。
【店の情報】
（手順1の材料をここに貼る）
【守ること】
- スマホ対応
- 文章はサンプルではなく、この店の実物として書く
- 画像が必要な場所は <img src="★ここに写真"> と印を付ける
- 予約ボタンを同じ色で2〜3箇所に置く
- 完成品は保存すればそのまま開ける1ファイルにする
ポイントは「1ファイルで」と明示すること。分割されると初心者は組み立てられません。
手順3：返ってきたHTMLを保存して開く
AIの返答のコードを丸ごとコピーし、メモ帳に貼って index.html という名前で保存（文字コードはUTF-8）。ダブルクリックすればブラウザで開けます。修正したいところは、そのまま会話で「◯◯の文章をもっと短く」と頼めば直してくれます。
よくある失敗3つ
- デザインが「AIっぽく」単調になる — 紫グラデ＋角丸カードの見慣れた画面になりがち。参考サイトのURLやスクショを渡すと改善します。
- 動きが無い・動きが壊れる — アニメーションをゼロから指示で作らせると、タイミングが不自然だったり、スマホで崩れたりします。動きは人間が調整済みのコードを渡して「これを使って、数値は変えるな」と指示する方が確実です。
- 嘘の実績を書かれる — 「お客様の声」などをAIが創作することがあります。公開前に必ず実物と差し替えてください。
近道：調整済みの「動くパーツ」をAIに渡す
上の失敗のうち2つは、完成済みのパーツをAIに渡す方式で回避できます。人間が調整したアニメーションのコード＋「動きの数値は変えず、文言・色だけ差し替えよ」という指示をセットでAIに送ると、動きのクオリティを保ったまま自分の店仕様になります。
motionAETHERはこの方式を製品化したもので、500点の動くパーツ全部に「AIに貼るだけのプロンプト」が付いています。たとえばこんな完成サイトのテンプレートも、AIプロンプトで丸ごと自分の店に差し替えられます。
気に入ったパーツを積んで店の情報を入れると、足りないセクションをAIが同じ雰囲気で補完する「サイトまるごとプロンプト」も作れます。
公開までの残り作業
- サーバー（月数百円のレンタルサーバーでOK）を契約して
index.htmlをアップロード - 独自ドメインを設定
- 特定商取引法の表記やプライバシーポリシーが必要な業態は忘れずに
AIで作るホームページは「試しに1回作ってみる」コストがほぼゼロです。まず1枚作って、家族や常連さんに見せてみるところから始めてみてください。