もう迷わない！画像ファイルの命名規則を紹介【非エンジニアにも必読】

Web制作を進めていく上で、ファイル名などの命名で悩む機会はたくさんあると思います。

命名規則（ルール）をあやふやなままで進めてしまうと、追加・更新の際に重複してしまったり、複数人が携わる案件だとファイル名がごちゃごちゃしてしまいます。

この記事では、画像ファイル・フォルダの命名規則の1つを紹介していきます。本記事では、ページの種類によって分ける命名規則ではありません。

前提事項

まず前提事項として、命名規則に絶対的な答えはありません。

プロジェクトの性質や、管理方法はもちろん、今までの制作スタンスで培ってきた命名規則があります。

今回紹介する内容はあくまで1つの例として参考にしていただければと思いますし、もちろん使いやすいように工夫されるのもアリです。

今回紹介する命名規則

• アルファベット小文字・数字・ハイフン(-)・アンダースコア(_)のみを使用
• カテゴリー_名前_連番_端末.拡張子の順番でファイル名を構成
• 複数単語は必ず区切る
• imagesフォルダにまとめる（フォルダを複数分けしない）

ファイル名に大文字を使わない理由

大文字を使わない理由としては、大文字と小文字が混在すると管理ミスなどのトラブル発生に繋がるからです。

例えば、logo.pngとLOGO.pngというファイルがあったとします。

これらがサーバーやローカル環境の仕様によって、上書きされてしまうという想定外を避けるための工夫になります。

またシンプルながらファイル名だけではどちらが正式な画像と判断ができないため、2択を作らせないためにも必須のルールです。

多くの制作現場で採用されていたルールです！こだわりがなければ大文字は使わないというのがベター。

カテゴリー_名前_連番_端末.拡張子が完成形

カテゴリー_名前_連番_端末.拡張子
が最大に命名した場合になります。

カテゴリー・名前・連番・端末の4種類を_（アンダースコア）で連結しています。
名前・連番・端末は必要に応じて省略する場合もあります。

以下、参考例です。

区分としているカテゴリーや名前、連番は_（アンダースコア）で連結し、複数単語にの単語区切りには-（ハイフン）と使い分けることになります。

カテゴリーの使い分け

カテゴリーの使い分けにも実はルールがあります。

mv（メインビジュアル）・bg（背景画像）など、Webサイトの構成上必須と思われる素材群に関しては、頻出されている名称で良いと思います。

その他には、ページの区分などでカテゴリー部分を活用して管理しやすいようにもします。

以下、参考例です。

複数単語は必ず区切る

複数単語を区切るかどうかは、考え方によって異なる部分です。ですが、私は複数単語は必ず区切ることにしています。

複数単語をそのまま繋げてしまうと、単語の区切りがわかりにくくなったり、スペルチェッカーでスペルミスと判断されてしまうため、-（ハイフン）で区切るようにしています。

imagesフォルダにまとめる

大規模WebサイトやECサイトでない限りは、画像素材は1つのフォルダにまとめてます。

imagesフォルダを複数使い分けるのは得策なケースもありますが、一般的なコーポレートサイト規模ならフォルダは1つで対応させていただくケースが多いです。以下が具体的な理由になります。

画像素材の管理をしやすく

Webサイトで使用している画像はさまざまなタイミングでチェックする必要性があります。

社内に詳しい者がいれば良いのですが、フォルダを複数に分けた結果、画像素材の管理が行き届かないなんてケースも多数あります。

例えば、フォルダを複数分けにしていた場合

top/sample_image_01.png
company/sample_image_01.png
と、同じ名前の別ファイルが存在する可能性があります。

この状態ですと、

と、ここではどのフォルダに入っているsample_image_01.pngなのかを確認するラリーが発生してしまっています。

1つのフォルダに画像素材をまとめていると、必然的にファイル名は異なる名前になります。

sample_image_01.pngがWebサイト全体で1つしか存在しない

sample_image_01.pngと検索することで特定が簡単

伝達内容も簡潔でミス防止にもなる

伝達ミスなどを防ぐためにも画像フォルダは1つにまとめるのがおすすめです！

まとめ：もう迷わない！画像ファイルの命名規則を紹介

画像ファイルの命名ルールを事前に適切に決めておくことで、運用のしやすい画像ファイル環境を作り上げることができます。

これは何も制作者サイドだけの話ではありません。

これから依頼される方も、今回の命名ルールを参考にして独自のルールを作っておき、画像素材を集めて、制作者にも共有することで整備された管理体制を作ることができます。

もちろん、プロジェクトや考え方によっては改良する部分もあると思います。ですが、今回紹介したルールをベースに考えていくことは必ずヒントになるはずです。

そして最後に忘れてはいけないのは、ルールは必ず共有することが大切です！