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

【コーダー / 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の大分類をつけます。

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

背景画像
bg
ロゴlogo
ヘッダーheader
ナビゲーションnav
メインビジュアルhero
タイトルtitle
見出しheading
文字text
一般的な画像img
ボタンbtn
OGP画像ogp      

詳細 + 連番

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

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

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

ヘッダーのロゴlogo_header
ナビゲーションのアイコンicon_nav
カルーセルで複数枚あるメインビジュアルhero01
hero02
タイトルの背景画像bg_title
タイトルの文字text_title
○○セクションの見出しheading_○○           
メニュー開閉のアイコンicon_menu 
記事中の挿し画像img01
img02

状態

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

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

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

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

ヘッダーのロゴ(通常時)logo_header_off.png
ヘッダーのロゴ(マウスオーバーで切り替え)logo_header_on.png
ナビゲーションのアイコンicon_nav.png
メインビジュアルhero.png
タイトルの背景画像bg_title.png
タイトルの文字text_title.png
メニュー開閉のアイコン(クローズ時)icon_menu_close.png
メニュー開閉のアイコン(オープン時)icon_menu_open.png
メニュータブのボタン(選択時)btn_menuTab_selected.png
メニュータブのボタン(カレント時)btn_menuTab_current.png       
モバイル用の画像img01_sp.png
img02_sp.png
Retina用のメインビジュアルhero_x2.png

まとめ

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

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

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

web制作カテゴリの最新記事

ページトップへ戻る