AIでホームページを作る方法：最初のプロンプトから公開まで

AIでホームページを作るには、まずサイトの目的と必要なページを書き出し、それを数文の普通の言葉でAIのウェブサイトビルダーまたはアプリビルダーに伝えます。するとライブプレビューで確認できる最初のバージョンが生成されます。そのあと文章を直し、スマホで表示を確認し、検索エンジンに必要な基本設定を加えて、ドメインに公開します。企業サイト、ポートフォリオ、ランディングページ、簡単なブログといった小規模なサイトなら、アイデアから公開まで一度の作業で終えられることがほとんどです。

どんな種類のホームページを作りますか？

「ホームページ」といっても中身は大きく異なり、どのタイプを選ぶかで依頼する内容も変わります。

最後の行に当てはまるなら、実際にはマーケティング用の入口がついたウェブアプリを作ることになります。AIアプリビルダーはどちらにも対応していますが、アプリ部分は別に計画してください。詳しくはAIでアプリを作る方法のガイドをご覧ください。

AIウェブサイトビルダー、テンプレート、AIアプリビルダーの違い

よくある方法は3つあり、それぞれ向いている人が異なります。

• AI機能付きのテンプレート型ビルダー（Wix、Squarespace、Framerなど）。デザイン済みのテンプレートから始めてビジュアルに編集し、AIが文章作成やレイアウト提案を手伝います。実績あるデザイン、ビジュアルエディタ、ブログや予約ウィジェットなどの標準機能がほしいときに向いています。
• AIアプリビルダー（Mythex、Lovable、Boltなど）。チャットでサイトを説明すると、AIがゼロからコードを書き、ライブプレビューで動かします。自分向けに仕立てたい場合、ボックスをドラッグするより会話で変更したい場合、後からアプリ機能を加える予定がある場合に向いています。
• 自作または制作会社によるサイト。 コンテンツの運用フローが複雑な大規模サイト、厳格なブランドルール、全ページの法務チェックが必要な場合は、今も最適な選択肢です。

個別のツールを並べて比べたい方は、おすすめのAIウェブサイトビルダーをご覧ください。

ステップ1：サイトの計画を1ページにまとめる

ツールを開く前に、次の5つの質問に答えましょう。10分で済み、あとのやり取りが何時間も減ります。

1. 訪問者は誰で、何をしてほしいか？「見積もりの電話をくれる地元の住宅オーナー」は計画になりますが、「みんな」は計画になりません。
2. どのページが必要か？ 書き出します。小規模サイトなら4〜5ページが普通です。
3. 各ページに何を載せるか？ 1〜2行ずつで構いません。例：「サービス：3つのサービスそれぞれに短い説明と開始価格」。
4. 何が本物の情報か？ 実際の事業名、サービス、価格、住所、営業時間、使用許可のある写真やお客様の声を集めます。渡さなかった部分は、AIが仮の内容で埋めてしまいます。
5. どんな雰囲気にしたいか？ 2〜3語（「落ち着いた、すっきり、余白多め」）か、好きなサイトのリンク。

ステップ2：最初のプロンプトを書く

良い最初のプロンプトは、コードではなく事業とページについて説明します。

海沿いの小さな町にある理学療法クリニック、Harbor Physio のウェブサイトを作ってください。ページ構成：ホーム（「評価を予約する」ボタン付きのヒーロー、選ばれる3つの理由、お客様の声の短いセクション）、サービス（スポーツ障害、腰痛、術後リハビリ。それぞれ説明文と1回の施術時間つき）、会社概要（2人の理学療法士。写真はプレースホルダー）、お問い合わせ（住所、営業時間、電話番号、お問い合わせフォーム）。落ち着いたすっきりした見た目で、やわらかい青をアクセントに。モバイルファースト。本物らしい文章を使い、lorem ipsum は使わず、レビューや受賞歴は作り上げないでください。

最後の一文が重要です。AIツールは空いた場所を、でっち上げのお客様の声、「利用者1万人突破」といったバナー、偽の受賞歴で埋めたがります。やらないよう伝え、それでも自分で確認してください。

ロゴ、ブランドカラー、好きなサイトのスクリーンショットがあれば添付しましょう。ほかのパターンはAIアプリビルダー向けプロンプトの書き方をご覧ください。

ステップ3：訪問者の目線で見直す

最初のバージョンが表示されたら、まずフォントをいじるのではなく、訪問者になったつもりで一通り見てください。

• 開いて5秒以内に、何の事業か分かりますか？
• 主要なボタンは目立っていて、きちんと移動先がありますか？
• メニューにあるページはすべて存在し、正しくリンクされていますか？
• スマホサイズの表示に切り替えます。訪問者の多くはスマホで来るため、窮屈な文字や大きすぎる画像はここで見つかります。

変更は1つずつ行いましょう。「もっと良くして」より、「ヒーローの見出しを短くして、ヘッダーに電話番号を入れて」のほうがよい結果になります。変更がうまくいかなかったら、会話で何とかしようとせず、以前のバージョンに戻してください。

ステップ4：仮のものを本物のコンテンツに置き換える

最初の下書きには、仮の画像と一般的な文が入っています。ページごとに進めましょう。

• 文章。 実際のサービス説明、価格、営業時間を貼り付けます。AIに文章を整えてもらってもよいですが、事実はご自身のものを使います。
• 画像。 可能なら自分の写真をアップロードします。背景ならストックフォトでも構いませんが、仕事ぶり、スタッフ、店舗の本物の写真のほうが信頼につながります。
• 実績。 裏づけのあるお客様の声、ロゴ、数字だけを使います。
• 法的ページ。 フォームで個人情報を集めるなら、通常はプライバシーポリシーが必要です。AIにページを作ってもらい、事業を行う地域の法令に照らして確認してください。生成されたポリシーは出発点であり、法的助言ではありません。

ステップ5：フォーム、予約などの「アプリ」部分

お問い合わせフォームには、送信内容の送り先が必要です。簡単なものから手の込んだものの順に紹介します。

本格的な予約や決済が必要な場合は、予約アプリの作り方とアプリに決済を追加する方法をご覧ください。

ステップ6：公開前に押さえたいSEOの基本

AIは美しいページを書けても、検索エンジンにはほとんど伝わらないことがあります。公開前に、次を依頼しましょう。

• すべてのページに固有のタイトルとメタディスクリプション
• ページごとに明確なメイン見出しを1つ、適切な小見出し
• 画像の説明的なaltテキスト
• SNSやメッセージで共有したときに正しく表示されるOpen Graphタグ
• サイトマップとrobotsファイル

技術的に知っておきたい点がひとつあります。多くのAIビルダーは、ブラウザがJavaScriptでページを組み立てるシングルページアプリを作ります。検索エンジンもインデックスできますが、上位表示したいページには、静的またはサーバーで描画されたHTMLのほうが確実です。検索からの流入が重要なら、静的サイトか、サーバー側でページを描画するフレームワークを依頼してください。詳しくはAI製ウェブサイトのSEOのガイドをご覧ください。

ステップ7：公開してドメインを接続する

公開すると、プレビューが一般に見られるサイトになります。多くのビルダーはまず無料のサブドメインを用意してくれ、テストや友人への共有にはそれで十分です。事業用なら独自ドメインを接続しましょう。ビルダー経由で購入するか、すでに持っているドメインをDNSレコードでサイトに向けます。DNSの部分は独自ドメインの接続方法で説明しています。

公開後は、無料のGoogle Search Consoleアカウントを設定して、ページがインデックスされているか確認できるようにしましょう。

よくある間違い

• 一度にすべてを頼む。 12ページ、ブログ、ショップ、会員エリアをひとつのプロンプトで頼むと、どれも中途半端になります。まず中心となるページから作りましょう。
• 仮のテキストのまま公開する。 公開前に、すべてのページで「Lorem」「Your Company」や作り話の数字を検索してください。
• モバイルを無視する。 ホームだけでなく、すべてのページをスマホ幅で確認します。
• 行動を促す表現があいまい。 どのページでも、次の行動（電話、予約、購入、問い合わせ）がはっきり分かるようにします。
• 誰が更新するかを忘れる。 他の人が毎週編集するなら、同じビルダーとチャットするか、ビジュアルエディタのあるツールを選ぶかして、その人が更新できるようにしておきます。

費用の目安

AIで作る簡単なサイトは、デザインから制作まで依頼するよりずっと安く済むのが普通です。見込んでおくべき継続的な費用は次のとおりです。

• ビルダー。 多くは試用向けの無料プランと、独自ドメインや利用量の多さに対応した有料プランがあります。
• ホスティング。 プランに含まれる場合と、使用量に応じた課金の場合があります。
• ドメイン名。 年間の登録料がかかり、名前と末尾によって変わります。
• オプション。 フォーム通知用のメールサービスや、予約・ニュースレター用の有料ツールなど。

ウェブサイトビルダーのほうが向いている場合

必要なものを正直に見極めましょう。昔ながらのパンフレット的なサイト、技術に詳しくない同僚向けのビジュアルエディタ、予約投稿つきの標準ブログ、在庫や配送を任せられるオンラインショップがほしいなら、テンプレート型のウェブサイトビルダーやShopifyのような専用プラットフォームのほうが、AI生成のコードより向いていることがあります。AIアプリビルダーが強みを発揮するのは、サイトが特殊な場合、頻繁に変わる場合、アプリのように動くものの入口になる場合です。

Mythexで作る

MythexはAIアプリビルダーで、ウェブサイトは最もよく作られているもののひとつです。サイトを説明するとライブプレビュー（スマホサイズ表示を含む）で作られ、yourname.mythex.app のアドレスに公開できます。Proならドメインを Mythex で購入するか、お持ちのものを接続できます。検索順位が重要なら、標準のReactアプリではなくシンプルな静的サイトを依頼することもできます。ドキュメントの静的ウェブサイトと公開したアプリのSEOをご覧ください。

MythexはCMSではありません。マーケティングチーム向けの別のエディタ用ログインはなく、変更はビルダーとのチャットかコードの編集で行います。白紙から始めたくない場合は、ウェブサイトのテンプレートやポートフォリオのテンプレートから始めてください。どちらも、スタート用のプロンプトが入力された新しいプロジェクトが開きます。

よくある質問