Claude Code で作る Webサイト作成・ホームページ作成 12レッスン完全コース/カリキュラム/第3章: 複数ページのサイトに拡張/3-2 Claude Code でページを追加する

3-2 Claude Code でページを追加する

無料

Claude Code を使ってメニュー・お店紹介・お問い合わせの 3 ページを HTML 自動生成し、トップページからリンクで結びます。複数ページのホームページに育てる具体的な指示の出し方を解説します。

第3章: 複数ページのサイトに拡張20分

このレッスンのゴール

3-1 でサイト全体の設計図を作りました。このレッスンでは設計図を実際の HTML ファイルに落とし込んでいきます。トップページ (index.html) を出発点として、メニュー (menu.html)、お店紹介 (about.html)、お問い合わせ (contact.html) の 3 ページを順に作り上げます。

このレッスンで意識してほしいことは次の通りです。

まずは「1 ページずつ完成させる」気持ちで進める
ヘッダーやフッターの重複は気にしない (3-3 で共通化する)
各ページに「そのページにしかない情報」を必ず入れる

レッスン後半では Google マップの埋め込み、ページ間リンクの貼り方、プレビュー確認の手順まで一気通貫で扱います。

ページ追加の基本パターン

新しいページを作るときの一番ラクな方法は、既存の index.html を複製して中身だけ入れ替えることです。Claude Code に依頼するときも、この発想を伝えると意図どおりのファイルが出てきます。

> index.html をコピーして menu.html を作って。
> ヘッダーとフッターはそのまま残し、中央のメインコンテンツだけ
> 「メニュー一覧」用に作り替えて。

このやり方の良いところは次の通りです。

既にあるデザインを再利用できるのでレイアウトが揃う
ヘッダー・フッターのコードを毎回書き直さなくて済む
ナビゲーションリンクの構造が崩れにくい

ポイント

複製してから中身を変えるのは、コードを書く人にとっても定番のテクニックです。「ゼロから書き始めない」ことが時短のコツです。

メニューページを充実させる

メニューページはお店の顔の 1 つです。情報量が少ないと「この店、ちゃんと営業しているのかな」と不安にさせてしまいます。カテゴリ分け、価格、説明文、写真、注文導線まで揃えて、見ただけで来店したくなる構成を目指しましょう。

> menu.html のメニューページを充実させて。
> カテゴリ (ホットドリンク、アイスドリンク、フードメニュー、スイーツ) に分けて、
> 各メニューに以下を付けて。
>   - 商品名
>   - 写真 (今は placeholder の灰色ボックスで OK)
>   - 60-80 文字の説明文
>   - 価格 (税込)
>   - 「人気」「新作」などのバッジ (任意)
> 一番下に「ご来店をお待ちしております」のボタンを置いて、
> contact.html へリンクして。

メニューカードを作るときは、グリッドレイアウト (1 行 3 カラム、スマホでは 1 カラム) が定番です。Claude Code に「3 カラムのカードレイアウトで」と一言添えるだけで、CSS Grid を使ったきれいな配置にしてくれます。

ポイント

メニュー数が 10 個以上ある場合は、「カテゴリごとにセクションを分けて、見出しを大きめに」と指示すると一覧性が上がります。

価格表の見せ方バリエーション

価格表はフォーマットによって印象が大きく変わります。お店の業態によって使い分けましょう。

カード型は写真と価格を並べる定番スタイル。カフェ・レストラン・雑貨店向き
テーブル型はサービス名と料金が縦に並ぶリスト形式。サロン・整骨院・修理業向き
プラン型は 3 段組で「松・竹・梅」を比較させる構成。サブスク・コンサル・コーチング向き

> menu.html の価格表を「テーブル型」に変更して。
> 列は「メニュー名 / 所要時間 / 料金」。
> 偶数行に薄い背景色を入れて読みやすく。
> モバイルではテーブルが横スクロールできるように。

画像の準備とフリー素材サイト

実際の写真を入れると一気にプロっぽくなります。撮影が難しい場合は無料素材サイトを使いましょう。

Unsplash (unsplash.com) — 高品質な写真が豊富、商用利用 OK
Pexels (pexels.com) — 写真と動画の両方がある
Pixabay (pixabay.com) — イラストや音楽素材まで揃う
O-DAN (o-dan.net) — 海外サイトを日本語で横断検索できる

ダウンロードした画像は images/ フォルダにまとめて入れます。Claude Code に整理を頼むこともできます。

> images フォルダを作って、画像ファイルの命名規則も決めて。
> 例えば hero-main.jpg、menu-coffee-01.jpg のような形式で
> 命名規則を README.md にまとめて。

About (お店紹介) ページ

About ページはサイトのなかでも「人柄」が出る場所です。商品情報ではなく、ストーリー、こだわり、店主の言葉を載せます。来店を迷っているお客さんの背中を押す役割があります。

About ページに入れたい要素は次の通りです。

お店のキャッチコピー (1 文で何屋さんか伝える)
創業のストーリー (200-400 文字)
大切にしている価値観 (3 つくらい箇条書き)
店主の写真と一言メッセージ
店舗情報 (住所・電話・営業時間・定休日)
Google マップの埋め込み

> about.html に以下のセクションを順番に作って。
>   1. ヒーロー (大きなキャッチコピー + 背景画像 placeholder)
>   2. ストーリー (見出し「私たちのはじまり」+ 本文 placeholder)
>   3. 3 つのこだわり (アイコン + タイトル + 説明のカード 3 枚)
>   4. 店主紹介 (左に写真 placeholder、右に名前と一言)
>   5. 店舗情報 (住所、電話、営業時間、定休日のテーブル)
>   6. アクセス (Google マップ埋め込み用の枠だけ)
> 文章は仮置きで OK、後で差し替える前提で書いて。

仮文 (lorem ipsum や placeholder テキスト) でいったん枠を作ってもらうのがコツです。レイアウトが固まってから、自分の言葉で書き直すほうが圧倒的に進みやすくなります。

ストーリーテリングのコツ

「私たちのはじまり」のような物語セクションは、読まれるかどうかで信頼感が変わります。読みやすいストーリーには共通の型があります。

きっかけ — なぜこの仕事を始めたのか (1-2 文)
困難 — 立ち上げで苦労したこと、転機 (2-3 文)
いま — どんな思いで続けているか (1-2 文)
約束 — お客さんに何を届けたいか (1 文)

400 文字くらいで十分です。長すぎると最後まで読まれません。Claude Code に下書きを頼むときも、「上記の 4 ブロックでそれぞれ 100 文字程度」と指定するとバランス良く仕上がります。

> about.html のストーリーセクションを、以下の 4 ブロック構成で
> 仮文を生成して。後で自分の言葉に差し替える前提。
>   1. きっかけ (100 文字)
>   2. 困難 (120 文字)
>   3. いま (100 文字)
>   4. 約束 (80 文字)
> 業種は「街の小さなコーヒースタンド」を想定。

お問い合わせフォーム

お問い合わせページの中心はフォームです。フォームの 3 大要素は 項目 (input)、送信ボタン (submit)、送信先 (action) です。最初のうちは送信先を設定せず、アラート表示で動作確認するだけで十分です。

> contact.html に問い合わせフォームを追加して。
> 項目は次の通りで。
>   - お名前 (必須、テキスト入力)
>   - メールアドレス (必須、email 入力)
>   - 電話番号 (任意、tel 入力)
>   - お問い合わせ種別 (セレクトボックス、「ご予約・ご相談・その他」)
>   - メッセージ (必須、複数行テキスト、5 行ぶん)
> 送信ボタンを押したら「送信しました。3 営業日以内にご連絡します」と
> アラートを表示して、フォームをクリアして。

フォームの体裁が整ったら、入力欄の見た目を整えます。

> フォームの入力欄を以下のスタイルに揃えて。
>   - 角丸 8px
>   - 枠線は薄いグレー、フォーカス時はブランドカラー
>   - パディングは縦 12px / 横 16px
>   - ラベルは入力欄の上に配置、太字
> 送信ボタンはブランドカラーで横幅いっぱい、フォーカス時に少し濃くなる。

ポイント

本番運用ではフォーム送信を Formspree、Google Forms、Cloudflare Workers などのサービスにつなぎますが、レッスン段階ではアラート表示で十分です。「動く形」を先に作ることが大事です。

フォーム項目を増やしすぎない

「あれもこれも聞きたい」と項目を増やすと、送信率が大きく下がります。一般的に項目数が 1 つ増えるごとに完了率が 5-10% 下がると言われています。本当に必要な項目だけに絞りましょう。

必須項目を判断する基準は次の通りです。

返信するために絶対に必要か (メールアドレスはほぼ必須)
このタイミングで聞かないと困るか (来店日時など)
任意で OK ではないか (電話番号、住所などは任意で十分なことが多い)

迷ったら「任意」にしておくのが安全です。送信のハードルを下げることが優先です。

バリデーション (入力チェック) の基本

最低限のチェックは HTML だけでもできます。Claude Code に頼むときも以下を伝えれば付けてくれます。

required 属性 — 空欄で送信できなくする
type="email" — メール形式でないと送信できなくする
maxlength="500" — 文字数の上限
pattern="..." — 電話番号などの形式チェック

> contact.html のフォームに以下のバリデーションを追加して。
>   - 必須項目は赤いアスタリスク (*) を表示
>   - メールアドレスは email 形式チェック
>   - メッセージは最大 500 文字、現在の文字数を入力欄の下に表示
>   - エラー時はその項目だけ枠を赤くする

Google マップを埋め込む

About ページとお問い合わせページにはアクセス情報として Google マップを埋め込むのが鉄板です。手順は以下のとおりです。

> about.html のアクセスセクションに、以下の iframe を埋め込んで。
> 親要素の幅にフィットさせて、高さは 400px に。スマホでは 280px に。
> (ここに Google マップからコピーした iframe を貼る)

埋め込みコードは <iframe src="..."> 形式の HTML です。長くて目がチカチカしますが、Claude Code はちゃんと読み解いて適切な場所に配置してくれます。

共通ヘッダー・フッターは「いまは重複してよい」

新規ページを作るたびに、ヘッダーとフッターのコードがコピーされていきます。「同じコードが 4 ファイルにある状態」を見ると気持ち悪くなるかもしれませんが、いまは気にしないでください。3-3 で共通化のテクニックを学びます。

ここで先回りして共通化を始めると、レッスン全体の流れが崩れます。まずは動くものを 4 ページぶん揃えることを優先します。

ポイント

プログラミングでよく言われる「DRY (Don't Repeat Yourself / 同じことを繰り返さない)」は最終的に大事な原則ですが、最初から守ろうとすると手が止まります。まず重複させてから整理する、の順序がおすすめです。

ページ間リンクの貼り方

各ページを作ったら、ヘッダーのナビゲーションから相互に行き来できるようにします。リンクは「相対パス」で書きます。

> 4 ページすべてのヘッダーナビゲーションを以下の順番で統一して。
>   - ホーム → index.html
>   - メニュー → menu.html
>   - お店紹介 → about.html
>   - お問い合わせ → contact.html
> 現在表示中のページは色を変えて (アクティブ表示)。

相対パスと絶対パスの違いは次の通りです。

相対パスは menu.html や ./menu.html のように、現在のファイル位置を基準にしたパス
絶対パスは https://example.com/menu.html のように、URL の頭から書くパス

ローカル開発中は相対パスを使うのが基本です。ドメインが変わっても壊れません。

プレビューで確認する

ページが揃ったら、ブラウザで実際に開いて確認します。確認方法は 2 種類あります。

方法 Aは HTML ファイルを直接開く方法です。

> open menu.html

Mac なら open、Windows なら start コマンドでブラウザが立ち上がります。手早く確認するときはこれで十分です。

方法 Bは簡易サーバーを立てる方法です。お問い合わせフォームのテストや画像読み込みのテストでは、こちらのほうが本番に近い挙動になります。

> Python の簡易サーバーで起動して、と Claude に頼んだら
> 「python3 -m http.server 8000」を実行することを教わった。
> ブラウザで http://localhost:8000/menu.html を開けば見られる。

ポイント

保存してもブラウザに変更が反映されないときは、画面を「強制再読み込み」してください。Mac は ⌘ + Shift + R、Windows は Ctrl + Shift + R です。

Claude Code への指示テンプレ集

このレッスンでよく使うパターンをまとめます。コピペで使えるようになっています。

1. ページ複製

> index.html をコピーして {新ファイル名}.html を作って。
> ヘッダー・フッターはそのまま、メインコンテンツだけ差し替えて。

2. セクション追加

> {ページ名} に「{セクションタイトル}」セクションを追加して。
> 中身は {要素1}、{要素2}、{要素3}。
> 既存セクションの {挿入位置} に入れて。

3. フォーム追加

> {ページ名} にフォームを追加。項目は {項目リスト}。
> 送信ボタン押下時はアラート表示でクリア。

4. iframe 埋め込み

> {ページ名} の {セクション} に以下を埋め込んで。
> 幅 100%、高さ {高さ}px。
> (iframe コード)

5. リンク一括修正

> 4 ページすべてのナビゲーションリンクを以下の順番に揃えて。
> {リンク一覧}

6. プレースホルダー文章の差し替え

> {ページ名} の placeholder テキストを、私が用意した以下の本文に置き換えて。
> (本文)

ミニクイズ

<Quiz items={[{"question":"新しいページを作るとき、最初にやるべきことは何ですか","options":[{"text":"ゼロから HTML を書き始める","correct"

},{"text":"既存ページを複製して中身を入れ替える","correct"

},{"text":"先に CSS だけ書く","correct"

},{"text":"いきなり本番サーバーにデプロイする","correct"

}],"explanation":"既存ページを複製すればヘッダー・フッターやデザインがそのまま流用でき、作業が圧倒的にラクになります"},{"question":"ローカル開発中、ページ間リンクで使うべきパスはどちらですか","options":[{"text":"絶対パス (https://example.com/menu.html)","correct"

},{"text":"相対パス (menu.html)","correct"

},{"text":"フルパス (/Users/me/site/menu.html)","correct"

},{"text":"URL 短縮サービスのリンク","correct"

}],"explanation":"相対パスならドメインが変わってもリンクが壊れません。ローカル → 本番への移行もスムーズです"}]} />

このレッスンのチェックリスト

次のレッスン 3-3 では、いまは重複している共通パーツ (ヘッダー・フッター・ナビゲーション) を 1 ファイルにまとめて、デザインの統一感を一気に底上げします。