CSSのCLASSやIDと同じく、これも最低限の命名方法があると仕事が捗りやすいかなと思ったのでメモ。
基本的にはよく使われている接頭辞つけて、ディレクトリを細かに切ってわかりやすくという感じ。
いろんなコーディング規約を見ると、枝に連番つく事が多いんだけど、私はイマイチそれが好きじゃない。
自分が最初から最後まで面倒見るなら変な名前つけても自業自得だけど、いつどこで担当変更になるかわからない事を考えると、画像名も手を抜かない方がいいだろうなと思ったりします。
基本的な事
- pngファイルはコミットする前に軽量化する
- mageOptim とか利用する
- スペース用透過画像は使用しない
- 単語をつなげる場合はハイフン(-)を使用する
- IDやCLASSの背景画像なら、IDやCLASS名と同じ名前つけるとわかりやすいかも
- 短縮する場合は、一般的に広く使われる名称を使う
画像につけるプレフィックス（接頭辞）
| 種類 | 画像プレフィックス(接頭辞) | 例 |
|---|---|---|
| タイトル(h1〜h6) | hx_ | h1_profile.png |
| サブタイトル(h以外) | ttl_ | ttl_nickname.png |
| 背景 | bg_ | bg_section.png |
| グローバルナビゲーション | gnav_ | gnav_profile.png |
| ローカルナビゲーション | local-nav_ | local-nav_profile.png |
| ナビゲーション | nav_ | nav_profile.png |
| バナー | bnr_ | bnr_ad.png |
| ボタン | btn_ | btn_submit.png |
| ロゴ | logo_ | logo_product.png |
| アイコン | icon_ | icon_profile.png |
| 矢印 | arrow_ | arrow_brown-left |
| ライン | line_ | line_brown.png |
| 写真 | pic_ | pic_goods.png |
| その他画像 | img_ | img_cut.png |
| テキスト | txt_, text_ | txt_nickname.png, text_nickname.png |
| メインビジュアル | visual-img_ | visual-img_index.png |
画像につけるサフィックス（接尾辞）
| 種類 | サフィックス（接尾辞）|
|:-----|:-----|:-----|
| マウスオーバー | _on |
| 現在位置 | _cr |
| 無効 | _disable |
| 注釈 | _caption |
プレフィックス（接頭辞）とサフィックス（接尾辞）が併用される場合
| 種類 | 画像プレフィックス(接頭辞)とサフィックス（接尾辞） | 例 |
|---|---|---|
| グローバルナビゲーション（マウスオーバー) | gnav_x_on | gnav_profile_on.png |
| グローバルナビゲーション（現在位置) | gnav_x_cr | gnav_profile_cr.png |
| ボタン（マウスオーバー） | btn_x_on | btn_submit_on.png |
| ボタン（無効） | btn_x_disable | btn_submit_disable.png |
| 写真の注釈 | pic_x_caption | pic_goods_caption.png |
| その他画像の注釈 | img_x_caption | img_cut_caption.png |
悩みどころ（良い方法があったら教えてほしい）
単語をつなげる場合、どういう順番にするか思案中。
名前で並べた時に、同じ色の矢印はひとかたまりで出てきてほしいので色を先に持ってきた。
arrow_brown-down.png
arrow_brown-left.png
arrow_brown-right.png
arrow_brown-up.png
arrow_red-down.png
arrow_red-left.png
arrow_red-right.png
arrow_red-up.png
…という感じで一覧表示したい。
また、 プレフィックスとサフィックスを併用する画像が出てきた。
微妙な単語の並びもあるけど、管理のしやすさを考えると今はこれがベストなのかなと思う。
その他、命名に連番使った方が悩まなくて済むという話も多いけど、コンテンツの順番が変わってしまうとimg_01.pngの前にimg_02.pngが来ちゃったりするのが個人的には気持ち悪いのでやめたい。
View側から見ると名前や連番云々はまったく関係ないのだけど、運用面側から見ると、少しでもきれいに並んでくれた方がうれしいなあと思ったりします。