Edited at

画像名について考える

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側から見ると名前や連番云々はまったく関係ないのだけど、運用面側から見ると、少しでもきれいに並んでくれた方がうれしいなあと思ったりします。