ファイル名を先に決める

なぜファイル名を先に決めるのですか？

ホームページは、ページが増えるほど整理が大事になります。 先にファイル名を決めると、次のことが楽になります。

• どんなページが必要か見える
• どのフォルダに何を置くか決まる
• ChatGPT に具体的に指示しやすくなる
• リンクの設計が楽になる
• あとで sitemap を作りやすくなる

このステップで決めること

Step 03 では、主に次のことを決めます。

強いファイル名と弱いファイル名

強い例

/ja/training/step-01-build-locally-first.html
/ja/training/step-02-define-the-site.html
/ja/training/step-03-decide-filenames.html
/ja/tools/putty-basics.html
/ja/tools/winscp-basics.html
/ja/tools/vi-basics.html

弱い例

/ja/page1.html
/ja/newpage.html
/ja/final.html
/ja/tools/stuff.html
/ja/tools/test2.html

上の強い例は、見ただけで内容が想像できます。 下の弱い例は、あとで自分でも何のページかわからなくなりやすいです。

よいファイル名の基本ルール

• できるだけ内容がわかる名前にする
• 小文字でそろえる
• 単語の区切りはハイフンにする
• 日本語より英語・ローマ字ベースの方が管理しやすいことが多い
• 意味のない番号だけにしない

よい例

build-locally-first.html
define-the-site.html
putty-basics.html
save-image-urls.html

あまりよくない例

page1.html
new.html
aaa.html
putty2.html
final-final.html

なぜ index.html も先に考えるのですか？

各セクションには「入口ページ」が必要になることがあります。 たとえば:

/ja/training/index.html
/ja/tools/index.html

こうしたページは、そのセクション全体を案内する役目です。

ただし、このサイトの流れでは:

index.html の位置は先に決める。でも中身はあとで作る。

という考え方がとても大切です。

website.co.jp の例

このサイトなら、たとえば次のようなファイルツリーが考えられます。

index.html

/ja/index.html
/ja/about.html
/ja/faq.html
/ja/training/index.html
/ja/training/step-01-build-locally-first.html
/ja/training/step-02-define-the-site.html
/ja/training/step-03-decide-filenames.html
/ja/tools/index.html
/ja/tools/putty-basics.html
/ja/tools/winscp-basics.html
/ja/tools/vi-basics.html
/ja/about-webbie.html

/en/index.html
/en/about.html
/en/faq.html
/en/training/index.html
/en/tools/index.html

/images/...
/site.css
/site.js
/sitemap.xml
/robots.txt

まだ中身がなくても、これだけでかなりサイトの形が見えます。

このステップの大きな利点

ファイル名が先に決まると、次のステップが強くなります。

• 必要な画像の種類を考えやすい
• どのページを先に作るか決めやすい
• ChatGPT に「このファイルを作って」と言いやすい
• サイト全体の見通しが立つ

つまり、ここは「後の工程を整理する」ためのステップです。

ChatGPT にどう頼むとよいですか？

たとえば、次のように言うと強いです。

サイト定義はできました。
次に、HTML を作る前にファイル名とフォルダ構成を決めたいです。
以下の条件で、きれいなファイルツリーを作ってください。

- 日本語と英語の両方
- セクションごとに整理
- 小文字とハイフン中心
- site.css と site.js は共通
- index.html の場所も含める

この聞き方なら、あとでそのまま使いやすい一覧になります。

ファイル名一覧は保存しておくべきです

ここで決めたファイルツリーは、あとで何度も使います。

• ページを1つずつ作るとき
• 画像を考えるとき
• sitemap を作るとき
• トップページを作るとき

だから、決めたらメモとして保存しておくのがおすすめです。

よくある失敗

1. ページを作ってから名前を考える

後から名前を変えると、リンクや整理がどんどん面倒になります。

2. 意味のない名前をつける

page1.html や new.html だと、後で混乱しやすいです。

3. セクションごとの整理をしない

すべてを同じ場所へ置くと、サイトが大きくなったときに苦しくなります。

4. index ページをいきなり大量に作る

まずは場所を決めておいて、あとで中身を作る方が自然です。

5. 毎回ルールが変わる

途中からハイフンをやめたり、大文字小文字が混ざると、きれいさが崩れます。

このステップのゴール

Step 03 のゴールは、次の状態になることです。

• フォルダ構成が見えている
• 必要なページ名が決まっている
• index.html の位置が決まっている
• 共通ファイルの位置が決まっている
• あとで再利用できるファイルツリーが保存されている

最小チートシート

HTML を作る前に決める:
- フォルダ
- ページ名
- index.html の場所
- site.css / site.js の位置

よいファイル名:
- 内容がわかる
- 小文字
- ハイフンで区切る

先に名前
あとで中身