生成AIで複数ページのサイトを作るとき、ページ同士のリンクと画像をつなぐ書き方——フォルダ構成・相対パス・ファイル名の決まり

生成AIに「会社紹介サイトを3ページで作って」と頼むと、index.html・about.html・price.html のように、ページごとのファイルと、画像のフォルダが返ってくることがあります。ブラウザで開くと、メニューを押して別のページへ移れます。ところが、Studioに持ち込むために取り込んだら、メニューを押しても移動しない、画像が出ない——この相談は少なくありません。

原因の多くは、ファイル同士を結ぶ「パス（ファイルの住所）」の書き方にあります。この記事では、パスの基本と、取り込みでの扱い、最初に伝える指示、取り込む前の点検手順を整理します。

パスは「ファイルの住所」

リンクや画像は、別のファイルを「指す」ことで成り立っています。この「指し方」がパスです。住所にたとえると、「今いる場所から見た道順」で書くか、「ドメインや、サイトのいちばん上から見た住所」で書くか、「完全な住所」で書くかの違いです。MDNの解説では、次の3つに整理されています。

取り込みでは、どう扱われるか

SHITAJIで複数のファイルを取り込むときは、ページのファイルが入ったフォルダを「フォルダを読み込む」で選びます。そのとき、同じ取り込みに含まれるページ同士のリンクは、取り込み先でも移動できる形につなぎ直されます。書き方ごとの結果を、取り込みのしくみを実際に動かして確かめました。

画像も、同じ考え方

画像は、「フォルダを読み込む」のときだけ、その場で取り込まれます。「HTML/CSSファイルを読み込む」では、画像そのものは選べないため、外部のURL（https://…）で指定された画像だけが表示されます。

• 画像は、images フォルダにまとめ、「images/logo.png」のような相対パスで書く
• 取り込める画像の形式は、.png・.jpg（.jpeg）・.gif・.webp・.svg
• 画像のファイルを、フォルダに入れ忘れたり、選び忘れたりすると、その画像は表示されない

最初の指示で、つなぎ方を決めておく

あとから直すよりも、最初に書き方を指定しておくと、手戻りが少なくなります。次のような一文を、最初の指示に添えてください。

静的なHTMLとCSSで、複数ページのサイトを作ってください。
・ページごとに index.html、about.html、price.html のようなファイルを作る
・ファイル名は、半角の小文字と、ハイフンだけにする（日本語やスペースは使わない）
・ページ同士のリンクは、about.html のように、ファイル名まで書いた相対パスにする（先頭に「/」を付けない）
・リンク先が決まっていないリンクを「#」のままにしない。実在するページを指す
・画像は images フォルダに置き、images/logo.png のような相対パスで書く

取り込む前の、5つの点検

1. フォルダの中の index.html を、ブラウザで開く（ダブルクリックでよい）
2. メニューのリンクを、1つずつ押して、目的のページへ移動するか確かめる
3. すべてのページで、画像が表示されているか確かめる
4. ファイル名に、日本語やスペースが入っていないか確かめる（入っていれば、AIに直してもらう）
5. 取り込むときは、ページのファイルと、画像のフォルダが入った、フォルダを丸ごと選ぶ

うまくいかないときの直し方

よくある質問

まとめ

複数ページのサイトを取り込むときは、「ファイル名を半角の小文字とハイフンにする」→「ページ同士のリンクを、about.html のようなファイル名まで書いた相対パスにする」→「画像を images フォルダに入れて、相対パスで書く」→「ブラウザで確かめてから、フォルダごと取り込む」の順で進めます。リンクを「#」のままにしないことと、先頭に「/」を付けないことが、いちばんのポイントです。

AIごとの取り込み方はBoltで作ったWebサイトをStudioに取り込む手順やClaude CodeやCursorで作ったWebサイトをStudioに取り込む手順に、ヘッダーやフッターのずれは生成AIに複数ページのサイトを作らせると、ヘッダー・フッターが微妙にずれる理由と揃え方にまとめています。頼み方の基本はChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つへ。