【コーダー / webデザイナー向け】わかりやすい画像ファイルの命名規則を考える

こんにちは。

みなさん、classやファイルの命名に悩んで無駄に時間をかけてしまうことってありませんか？

チーム開発などをしている際にも、命名ルールが設けられていないとどんな名前にしようか迷ってしまうことがあると思います。

今回は画像の命名に着目し、自分が普段使っているルールをご紹介します。

ディレクトリ構造のルール

/
├── assets/
│       ├── css/
│       ├── img/
│       │       ├── common/
│       │       └── page1/
│       ├── js/
│       └── svg/
├── index.html
└── page1/
          └── index.html

画像ファイルは全て、cssやjsと同じ階層に作ったimgフォルダに保存します。

imgフォルダ以下にページのディレクトリ構造にあわせてフォルダを作り、該当のページでのみ使う画像はそこに保存しておきます。
トップページの画像はimgディレクトリ直下に保存するようにします。

サイト共通の画像はimg/commonディレクトリに保存します。

このようにサイトの構造に合わせてフォルダ分けすることで、運用フェーズに入った際も画像ファイルを管理しやすくしています。

ファイル命名のルール

自分はBEMを参考に、

1. UIの大分類
2. 要素の詳細 + 連番
3. 状態（ユーザ操作やページの状態で画像を切り替える場合に使用）

の順にアンダースコアで区切って命名をしています。
BEMについてはこちらをどうぞ。

どのページに使うかをファイル名で示す方もいますが、自分はそれをファイル名ではなくファイルを格納するディレクトリ名で示しています。

大分類

まずはボタン(btn)やタイトル(title)のようなUIの大分類をつけます。

よく使う言葉としてはこんな感じでしょうか。

詳細 + 連番

大分類_詳細 もしくは
大分類_詳細 + 連番 のように命名していきます。

「大分類」に対して、どんなシチュエーションで使うのかをアンダースコアをつけて示します。
シチュエーションが限定されない場合は省略します。

よく使う組み合わせとしては、こんな感じでしょうか。

状態

大分類_詳細_状態 もしくは
大分類_詳細 + 連番_状態 のように命名していきます。

メニューの開閉やマウスオーバー、スマホとPC、解像度などで画像を切り替えるときに状態をアンスコで繋いで示します。
こちらももちろん省略可能です。

注意点としては、〇〇_red や 〇〇_bold のように見た目を直接表すのは避けるようにします。
画像に変更が入った途端に意味不明な命名となってしまうからです。

最終的な書き方としてはこんな感じになります。

まとめ

厳密とは言わずとも、一定の命名規則を定めておくことは、特にチーム開発などを行う上で非常に大切です。

開発側にデータを渡す際に余計な混乱を防ぐことができますし、運用フェーズに入ってから、ファイル名がバラバラになってしまうことを防止するという役割もあります。

ぜひこれを機に、命名規則を考えてみてはいかがでしょうか。それでは。