ファイル・フォルダ整理術｜プロが実践するディレクトリ構造と命名規則

なぜファイル管理が重要なのか

Webプロジェクトは時間の経過とともにファイル数が膨大になります。ファイル管理が雑だと「あのファイルどこだっけ？」「古いファイルと新しいファイルが混在している」という問題が発生し、作業効率が著しく低下します。

基本的なディレクトリ構造

project/
├── index.html
├── css/
│   ├── style.css
│   └── reset.css
├── js/
│   └── main.js
├── images/
│   ├── common/
│   ├── top/
│   └── about/
└── fonts/

よく使われる基本構造です。WordPressの場合はテーマフォルダ内に同様の構造を持ちます。

命名規則の基本ルール

• 英小文字のみを使う：大文字は使わない（サーバーによって大文字小文字を区別する場合があるため）
• スペースの代わりにハイフンを使う：about-us.html ○、about us.html ×
• 日本語を使わない：URLになったときに文字化けする可能性があります
• 意味のある名前をつける：img001.jpg ではなく hero-main.jpg

画像ファイルの管理

画像は特にファイル数が増えやすいため、ページごとや用途ごとにサブフォルダを作成します。

ただ、これは好みにもよりますので必須ではありません。

• images/top/：トップページ用画像
• images/common/：サイト共通の画像（ロゴ、アイコン等）
• images/blog/YYYYMM/：ブログ画像は年月でまとめる

バージョン管理とバックアップ

ファイル名に日付を付けるバックアップ管理（style_20240101.css等）は混乱の元になります。Gitを使ったバージョン管理を導入することで、ファイルをすっきりとした状態で保ちながら変更履歴を管理できます。

まとめ

ファイル管理のルールはチームや案件の開始時に決めておくことが重要です。一人で作業する場合でも「半年後の自分が迷わないか？」を基準に整理しましょう。

作業中、自分がどのファイルを触ってるかわからなくなることもあります。
ファイル・フォルダを整理し、常に更新しているファイルは正しいかを確認しましょう。
修正内容が反映されているか定期的にブラウザで確認すれば間違ったファイルを更新していた、といったことは無くなります。

※ついでにデスクトップも綺麗に整頓しましょう。