画像ファイル名の命名規則：Web制作での効率化と管理方法

はじめに

Web制作において、画像ファイルの命名は実装者の悩みの種です。
そこで本記事ではプロジェクトの効率化を目指し、画像ファイル名の命名規則をまとめることにしました。
「ファイルが見つからない」「似たような名前が多すぎて混乱する」といった悩みを、しっかりとした命名規則を設定することで解消できます。

なお本記事は下記の参考文献をもとに作成しております。
ぜひこちらの記事もご覧いただき、使いやすい命名規則を採用してください。

画像ファイルの命名規則
もうページで分けない！　画像ファイルの命名規則 | WebNAUT by Beeworks
よく使っている画像の命名規則 #コーディング規約 – Qiita
画像ファイルの命名規則 #コーディング規約 – Qiita

命名規則

画像の命名規則は、「一貫性」と「明確さ」を意識することがポイントです。以下に、わかりやすいルールを順を追って解説します。

ルールその１：基本構造を明確にする

カテゴリ_名前_番号_状態.拡張子

各要素の意味

• カテゴリ：画像の用途や種類（例：アイコン、背景画像、バナー画像）。
• 名前：画像の内容や役割を具体的に記述。
• 番号：複数バリエーションがある場合の連番（2桁推奨）。
• 状態：デバイスや要素の状態ごとのバリエーション（例：pc、sp、on、off、open）。
• 拡張子：ファイル形式（例：.jpg、.png）。

ルールその２：小文字を徹底する

ファイル名はすべて小文字で統一します。大文字と小文字の違いを区別するOSやサーバーがあるため、トラブルを防止できます。

ルールその３：ハイフンとアンダースコアを使い分ける

画像ファイル名は、「セクション間の区切り」と「単語間の区切り」を明確に分けることで、可読性を向上させます。

• アンダースコア（_）：カテゴリ、名前、番号、状態など、異なるセクションを区切る。
• ハイフン（-）：単語間の区切りに使用。

ルールその４：番号は2桁で統一

番号は2桁のパディング（例：01～99）を推奨します。これにより、ファイルがアルファベット順に並びやすく、視覚的にも整然とします。

• バリエーションが1つしかない場合は番号を省略しても良い。
  • 単一ファイル：logo_main.svg
  • 複数ファイル：img_gallery_01.jpg, img_gallery_02.jpg

ルールその５：カテゴリで分類する

カテゴリは、Web制作で頻繁に使う要素を網羅する形で設計します。

使用例

具体例をいくつか挙げてみます。これらを参考にすると、実際の制作現場での運用がスムーズになります。

まとめ

適切な画像ファイルの命名規則は、プロジェクト全体の効率化に直結します。一貫したルールを設定することで、以下のようなメリットを得られます。

• 管理が簡単：どの画像がどの用途に使われているか一目瞭然。
• 混乱を防止：複数人で作業する場合も、命名基準があるとスムーズ。
• 拡張性が高い：新しい画像を追加しても規則に沿って整理できる。

この記事で紹介した命名規則を参考に、自分のプロジェクトに合ったルールを設計してみてください。Web制作の現場でのストレスが大きく軽減されるはずです！