AIでホームページを作る方法｜初心者向けの指示・プロンプトの例

AIでホームページを作る最初の指示は、構成の相談から

足りない情報をAIに挙げてもらい、営業時間、料金、写真、連絡先など、実際の情報を自分で用意します。

個人で運営する［ブログ／お店／仕事紹介］のホームページを作りたいです。
見る人：［具体的な読者］
その人が知りたいこと：［3つまで］
サイトでしてほしいこと：［読む／予約／問い合わせ］
用意できる素材：［写真、文章など］
まずトップページの見出しと、必要なページの案を出してください。各項目がなぜ必要かも短く説明してください。分からない事実は作らないでください。

ホームページのデザインをAIに頼むときは、読む順番も伝える

「おしゃれに」と頼むだけでは、読んでほしい内容の順番が決まりません。最初に何を伝え、次に何を見せるかを指定します。色や雰囲気は、その後に足しましょう。

参考サイトは、余白、文字の大きさ、写真の使い方など、参考にしたい点を説明します。文章や画像をそのまま流用しないようにします。

トップページを作ってください。
読む順番：①何をしているか ②具体例 ③料金や利用方法 ④問い合わせ
見た目：落ち着いた緑、広めの余白、読みやすい文字
条件：スマホでも文字が小さくならない。見出しとリンクは通常のHTMLで読める。動きを止める設定でも使える。
最初はトップページ一枚を作り、ブラウザで表示と操作を確認してください。

AIが作ったサイトを確認する3つのポイント

AIが出した文章には、用意していない実績や、決めていないサービス内容が混ざることがあります。自分が提供できる内容かを一つずつ読みます。

次に、スマホで文字を読み、リンクやボタンを押します。最後に、更新するときに触るファイルや画面、元へ戻す方法を説明してもらいます。自分が続けられるかどうかまでが、制作の確認です。

内容：料金、営業時間、実績、写真を使う権利は正しいか。
操作：メニュー、問い合わせ、フォーム、キーボード操作が使えるか。
運営：自分で更新できるか。変更前の状態へ戻せるか。

AIへのサイト修正の指示は、一度に一つずつ

「もっとよくして」を繰り返すより、困っている画面と望む状態を伝えた方が、修正を確認しやすくなります。まず一か所を直し、他の場所を壊していないか見てから次へ進みます。

このページの例は、AIへの頼み方を考えるためのたたき台です。使うサービスによってファイル編集やブラウザ確認ができる範囲は違います。AIが実行できない作業は、自分が操作して確かめましょう。