Web制作における画像の命名方法を考える

結論から

Web制作において、以下のルールで画像を命名しています。

[名前][連番].[拡張子]

例1：header_logo.jpg
例2：mainVisual_slide2.png

詳細

各項目について、以下で詳しく見ていきます。

名前

画像の名前に当たる部分です。以下のルールに従って命名しています。

• 構造の区切りはアンバースコア（_）を使用する
• 構造内の単語の区切りはキャメルケースを使用する

実はこのルールは、CSS設計のPRECSSにおけるclassの命名と同じです。PRECSSを使って制作しているうちに、「これって画像の命名にも使えるんじゃね？」と思ったので、PRECSSの方法を画像の命名にも流用することにしました。

連番

連番です。以下のルールに従って運用しています。

• 1番目の画像には連番はつけない
  • 良くない例：mainVisual_slide1.png、mainVisual_slide2.png
  • 良い例：mainVisual_slide.png、mainVisual_slide2.png

このルールもPRECSSの連番のルールです。

個人的には、このルールはかなり理にかなっていると思います。連番を1からつけるようにしてしまうと、実質的にすべての画像に連番が必要になってしまいます。必要でないときはつけず画像がシリーズになったら改めて連番をつける、という運用も考えられますが、連番がついていなかった画像に番号を付与する手間が必要です。対して、上記の方法ならあとから追加した画像の命名時に2から順に番号を付与していけばよいだけなので、そのような手間を省くことができます。

拡張子

画像の拡張子です。

画像を格納するディレクトリの構造

imgディレクトリのさらに下にcommonやtopといったディレクトリを作成します。共用の画像ならcommonに、トップページでしか使用しない画像ならtopに、といった感じで画像を格納します。

このあたりはプロジェクトの規模や個人の好みに応じて自由にすればいいと思います。

まとめ

ここでは私なりの画像の命名方法を紹介しました。

しかし、この方法が絶対的な正解というわけでは決してありません。あくまで一例です。より優れた方法もきっとあるでしょう。

今後も必要に応じてブラッシュアップしていく必要がありますね。