WebサイトやWebアプリケーションの画像ファイル命名規則

携わるプロジェクトによって変わることはありますが、自分メインで制作しているWebサイトやアプリケーションの場合、どのようにフォルダを整理し、画像ファイルに対して命名を行っているかをまとめました。

結論

以下のような命名規則にしています。各要素をアンダーバーで繋げて1つのファイル名としています。

assets/img/[ページ名]/[セクション・役割]_[用途]_[連番]_[状態].[拡張子]

連番、状態に関しては任意の要素ですので、必ずすべての要素を揃えて命名しなくてはいけないというわけではありません。

例

assets/img/ 
  - common
    - logo.svg
    - logo_white.svg
    - icon.png
    - ogp.png
    - button_icon.jpg
  - page
    - top
      - hero_img_01.jpg
      - intro_img_bg_01.jpg
      - about_icon_bg_01.jpg
      - about_icon_bg_02.jpg
      - company_logo.jpg
      - service_banner_pc.jpg
      - service_banner_sp.jpg
    - about
      - hero_img.jpg
      - hero_bg.jpg
    ︙

それぞれの要素に対して説明します。

[ページ名]

ex: common, top, about, contact
ロゴやアイコン、ファビコンなど、プロジェクト全体で繰り返し使用される画像に関してはcommonフォルダにまとめて入れています。
それ以外の、特定のページでしか使用されない画像はページごとのフォルダに格納します。

[セクション・役割]

ex: hero, overview, about, global-nav
画像が使用されるページ内のセクションや、ボタンなどのパーツの名前にします。
commonフォルダの場合はない場合もあります。

[用途]

ex: heading, banner, icon, text, button, img
その画像がどのように使用されるか、 用途を示す名前にします。

heading

見出しに使用される画像（テキストのsvgが多い）

button

buttonタグやaタグで使用される画像など

banner

バナー画像に使います。buttonとの違いですが、bannerは単独である程度の情報を持っている画像、といったニュアンスで使います。

icon

アイコン。svgが多い

logo

企業や商品のロゴに対して使用します

text

heading以外の文字情報に対して使用します。

bg

セクションに対しての背景画像などに使用。場合によっては他の用途と併用する場合もあります。global-nav_icon_bgなど

img

上記どれにも当てはまらない場合、こちらを使用します。

[連番]

ex: 01, 02, 03…99
数字の連番を二桁で01から1ずつカウントアップします。ファイル名の最初から「用途」までの文言が同一のもので続いた場合に連番をカウントアップします。作成当時は一つしかないと分かっていても、後々の運用で二つ目が発生する可能性もあるので、基本は連番を付けるようにしますが、明らかに連番で管理しない要件では省略も可能です。

[状態]

ex: hover, disabled, selected, active, white
画像の状態を示す名前。BEMにおけるModifier的な、状態変化がある場合に使用します。