AIにWebサイトモックを頼むときの、構成と確認の進め方

1. 見た目より先に、読者と到達点を書く

最初に決めるのは「誰が読み、何を理解し、次に何をするか」です。今回なら、コーヒーに興味がある初心者が体験内容を知り、開催情報を確認すること。「おしゃれなサイト」だけでは、写真を大きくするべきか、説明を厚くするべきか判断できません。

Promptonでは、やりたいことに1ページの案内モック、ゴールに開催情報への誘導、読み手に初心者と入力します。背景には、専門知識を前提にしないこと、日程などが未確定であることを記載。出力形式は「Webサイトモック」を選び、AIに渡す指示を組み立てます。

2. ページ構成は、読み手の疑問に沿って並べる

構成は、ページを開いた人の疑問に答える順番で考えます。今回の例なら「何の案内か」「何を体験するか」「どう進むか」「いつ、どこで参加できるか」の順です。各セクションの役割を一文で指定すると、似た説明の繰り返しを防ぎやすくなります。

主なボタンは「開催情報を見る」にそろえ、ページ内の開催情報へ移動させます。情報が未確定なのに「予約する」と書くと、操作後の期待が合いません。見出し・本文・ボタンの文言を固定したい場合は、そのまま使う文章として依頼に含めます。

• 冒頭：何の体験かを短く伝え、開催情報への入口を置く。
• 体験内容と当日の流れ：初心者が参加のイメージを持てるようにする。
• 開催情報：日時・会場・料金の欄を置き、未確定の値は角括弧で残す。

3. HTMLモックの完成条件を決める

この段階の納品物は、HTML・CSS・必要なJavaScriptを含む1ファイルにします。基本表示に外部ライブラリや通信を必要としない条件を付ければ、受け取ったファイルを手元で開いて確認できます。画像を別ファイルで使う場合は、保存場所と相対パスも指定します。

モックで確認する操作は、ページ内リンクなど必要なものに絞ります。予約受付・決済・メール送信は別の実装範囲です。公開に進める際は、実情報への差し替え、送信処理、運用先での動作を別途確認します。画面が表示できたことだけで、本番の受付機能まで完成したとは扱いません。

4. 素材は、使用場所と扱い方を添えて渡す

Promptonは指示文を作るツールで、AIの実行や画像のアップロードは行いません。指示文をコピーした後、使用するAIへ写真やロゴを直接添付します。「この写真を冒頭に使う」「ロゴの色は変えない」のように、ファイル名と用途を対応させましょう。

使用予定の写真がまだない場合は、受け取りを待つのか、写真なしで組むのかを決めます。今回の入力例は素材を使わず、文字とCSSで構成します。画像を使う際は、W3C WAIの整理に沿って、情報を伝える画像には説明を、純粋な装飾画像には空の代替テキストを指定します。

5. 幅を変え、キーボードでも確認する

生成されたHTMLは、自分のブラウザーで開いて確認します。幅390pxと1280pxなどを観察の起点にし、その間も連続して縮めます。MDNが説明するように、レイアウトの切り替え位置は内容が窮屈になる幅から考えます。指定した2つの幅だけで問題がなくても、途中で見出しやボタンが重なることがあります。

W3C WAIの初期チェックを参考に、Tabキーで操作対象へ移動できるか、現在位置が見えるか、文字を拡大しても読めるかを確認します。文字と背景のコントラストも確認対象です。これらは最初の点検であり、アクセシビリティ全体の適合を保証するものではありません。

6. 修正依頼は、場所・症状・期待する状態をセットにする

「もう少し見やすく」ではなく、「幅390pxで冒頭の見出しが4行になり、ボタンが画面外へ出る。文言を保ち、余白と文字サイズで調整してほしい」と伝えます。画面幅、対象箇所、症状、変えたくない条件があれば、次の案を比較する基準が明確になります。

一度の修正では、情報の順番、文字の読みやすさ、ボタンの操作といった論点を絞ります。AIには変更内容と確認手順を添え、実行した検証と未実施の項目を分けて報告するよう依頼します。以下の入力例は編集できる出発点です。実際の読者・原稿・実行環境に置き換えてから、指示文を生成してください。