index ページは「予告」ではなく「案内役」です。
まだ中身がないのに先に index ページを作ると、空っぽな案内になりやすいです。 先に詳細ページがあれば、index ページは自然に強くなります。
セクション index ページとは何ですか？
セクション index ページは、あるカテゴリ全体の入口になるページです。 たとえば:
/ja/tools/index.html
/ja/training/index.htmlのようなページです。
役割は:
- そのセクションが何のための場所か説明する
- 中にある詳細ページを案内する
- どこから読めばよいかを示す
つまり、セクション index は「まとめ役」であり「入口」です。
詳細ページが中身、index ページが案内役です。
だから、この順番では詳細ページを先に作る方が自然です。
なぜ詳細ページのあとに作るのですか？
このステップの一番大事な考え方はここです。
1. 本当にあるページを紹介できる
すでに完成している詳細ページを、そのまま案内できます。
2. 説明が具体的になる
「このセクションには何があるか」を実際の内容に基づいて書けます。
3. 空っぽな index になりにくい
先に index だけ作ると、「これから充実させます」だけのページになりやすいです。
4. トップページも作りやすくなる
後でトップページを作るときに、各セクションがすでに整理されています。
index ページを先に作りすぎると、あとで書き直しが増えやすいです。
まず詳細ページを先に作る方が、あとで index ページがずっと自然に仕上がります。
たとえば Tools セクションなら
すでに:
/ja/tools/putty-basics.html
/ja/tools/winscp-basics.html
/ja/tools/vi-basics.htmlがあるとします。
そうすると、/ja/tools/index.html では:
- PuTTY とは何か
- WinSCP とは何か
- vi とは何か
- どの順番で読むと理解しやすいか
を本当にあるページに基づいて案内できます。
たとえば Training セクションなら
すでに:
/ja/training/step-01-build-locally-first.html
/ja/training/step-02-define-the-site.html
/ja/training/step-03-decide-filenames.html
/ja/training/step-04-make-images.html
...
があれば、/ja/training/index.html では:
- この学習パスの全体像
- どこから始めるべきか
- 各ステップが何を教えるか
- 順番の意味
を整理して案内できます。
よい index ページの役割
よいセクション index ページは、次のことをしてくれます。
| 役割 | 意味 |
|---|---|
| 紹介する | このセクションが何のためのものか伝える |
| 整理する | 中にある詳細ページをまとめる |
| 導く | どこから読むべきかを示す |
| つなぐ | トップページや他セクションとの流れを支える |
つまり index ページは「中身の代わり」ではなく、「中身へつなぐ役目」です。
index ページは主役ではなく、案内役です。
だからこそ、先に案内される中身がある方が、index ページも強くなります。
どうやって作ればよいですか？
セクション index ページを作るときは、次の流れがおすすめです。
対象のセクションを決める
例: /ja/tools/ または /ja/training/
その中の詳細ページを並べる
本当にあるページを一覧にします。
このセクションの役割を一言で決める
何のためのセクションかを短く言えるようにします。
紹介文とリンク一覧を作る
読む人が迷わないように整理します。
共通の site.css と site.js に乗せる
他のページと見た目を揃えます。
ChatGPT にどう頼むとよいですか？
たとえば /ja/tools/index.html なら、次のように頼めます。
/ja/tools/index.html を作ってください。
このセクションの詳細ページ:
- /ja/tools/putty-basics.html
- /ja/tools/winscp-basics.html
- /ja/tools/vi-basics.html
条件:
- 日本語
- 初心者向け
- まず何を読めばよいか案内する
- /site.css と /site.js を使う
- 使う画像は Tools セクションに合うものだけ
- このセクションが何を学べるか明確にするこうすると、index ページがかなり整理された形になりやすいです。
index ページに入れるとよいもの
すべて必須ではありませんが、次の要素があると強いです。
- そのセクションのタイトル
- 何のセクションかの短い説明
- 中にある詳細ページのカードや一覧
- どこから読むのがよいかの案内
- 関連セクションへの導線
学習サイトでは、「最初にどこを読めばよいか」があると特に親切です。
index ページでやりすぎない方がよいこと
index ページは便利ですが、何でも詰め込みすぎない方が強いです。
- 詳細ページの全文を繰り返す
- 長すぎる説明を入れる
- 内容のない飾りだけ増やす
- 存在しないページへのリンクを作る
index ページは「全部説明するページ」ではありません。
本当の役目は、整理して、案内して、次のページへつなぐことです。
このステップがトップページにも効く理由
セクション index が整うと、あとでトップページを作るときにかなり助かります。
- 各セクションの役割が明確になる
- 紹介文がまとまる
- トップページからの導線を作りやすくなる
- サイト全体の構造が見えやすくなる
つまり、index ページはトップページの前段階としてもとても大事です。
詳細ページ → セクション index → トップページ の順が自然です。
この順にすると、上から空っぽに作るのではなく、下から中身を積み上げられます。
よくある失敗
1. 中身がないのに先に index を作る
結果として、説明だけ立派でリンク先が弱いページになりやすいです。
2. 存在しないページへリンクする
まだ作っていないページを並べすぎると、信頼感が落ちます。
3. index ページ自体を長くしすぎる
詳細は詳細ページへ任せた方が、読みやすくなります。
4. セクションの役割があいまい
何のためのセクションかを一言で言えないと、index もぼやけます。
5. 共通CSSを使わない
他のページと見た目が揃わないと、サイト全体の一体感が弱くなります。
index ページは「まとめ役」であって「中身そのもの」ではありません。
だからこそ、先に中身がある方が index ページも自然に強くなります。
このステップのゴール
Step 10 のゴールは、次の状態になることです。
- 各セクションの index ページを作れる
- 詳細ページを自然に案内できる
- 存在するページだけを整理できる
- セクションの役割を明確にできる
- あとでトップページを作るための整理が進んでいる
最小チートシート
index ページを作る前に:
- 詳細ページを先に作る
- セクションの役割を決める
- 中にあるページ一覧を整理する
index ページの役割:
- 紹介する
- 整理する
- 案内する
- 次へつなぐ
詳細ページ先行
index はあと
トップページはさらにあとこの6つができれば次へ進めます。
完了: 0/6