FIRST PAGE / HANDS-ON

AIで、最初の1ページを作ってみる。

情報確認・更新：2026年11月6日

契約する前に、まずは1ページの形を見てみましょう。無料のサンプルをブラウザで開けます。HTMLは、ページの内容や構造を書いたテキストファイルです。

外部サービスへの登録は不要。このページのサンプルにはフォーム、通信処理、広告タグはありません。ダウンロード操作はブラウザによって確認画面が出る場合があります。

01 最初に、書く内容を決める

目的を整理する指示文を使い、「届けたい相手」「困りごと」「提供できる内容」「次の行動」を決めます。ここが曖昧なら、先に文章を直します。

02 AIに、ページにしてもらう

次の指示文に、自分の文章を続けて貼り付けます。実際の顧客情報・認証情報は入れないでください。

次の原稿を、初心者が確認しやすい1ページのHTMLにしてください。
スマホ対応、日本語、CSSは同じHTMLの中に入れてください。
外部スクリプトや外部フォントは使わないでください。
目的・対象・提供内容・次の行動が順番に伝わる構成にしてください。
フォームや送信処理は付けず、問い合わせ先が未定なら「要確認」としてください。
実績、料金、お客様の声などを補って作らないでください。
出力後、未確認の箇所と、自分で確認すべき点を説明してください。

【ここから自分の原稿を貼る】

03 手元で開いて確かめる

パソコンでは、出力されたコードをUTF-8のテキストとして index.html の名前で保存し、ブラウザで開けます。保存時に .txt が付いていないか確認します。

スマホだけで作業する場合は、HTMLを表示できる編集・プレビュー環境が必要です。iPhoneの「ファイル」で開けることと、インターネットに公開できたことは別です。まず上の練習ページで、完成形のイメージを確認してください。

04 直したい箇所を、ひとつずつ伝える

「もっとよくして」より、「スマホで見出しが読みづらいので、文字の大きさと改行だけ直して」「提供内容は変えず、次の行動がわかるボタンを追加して」のように、場所と目的を指定します。直す前のファイルも残しましょう。

05 公開方法を選ぶ

ブラウザで開けたら、次に置き場所を選びます。すでにサーバーを持っている場合は、その環境を確認。公開機能付きの制作サービスを使う場合は、別のサーバー契約が必要かどうかも確認します。