画像ファイル名の命名規則

Web制作では必ずと言っていいほど画像を使います。

画像ファイル名の付け方には特に決まりはありません。

ただ、あとから修正したり管理したりすることを考えると、命名規則を決めておくべきですよね。

今回は画像ファイル名の命名規則についてのエントリーです。

 

基本ルール

 

ポイント

• ページごとに画像フォルダを分ける
• つなぎの記号は アンダースコア（ _ ）を使う
• 同じ用途の画像が複数あった場合には、連番を付ける
• 2文字目を大文字にする　例）gNav, goodsList, mainVisual

各要素の詳しい説明

位置

どの部分で使用しているかを判断するためにつけます。

例）

ヘッダーで使用している背景の場合 ⇒ header_bg.png

サイドバーで使用しているバナー画像の場合 ⇒ side_bnr01.png

 

よく使う "位置" の一覧

部位	命名規則
ページ全体	container
ヘッダー	header
メインビジュアル	mainVisual
メニュー	menu, menuList
ナビゲーション	nav
グローバルナビゲーション	gNav, globalNav
ローカルナビゲーション	lNav, localNav
メインコンテンツ	main
サブコンテンツ	sub
サイドバー	side, sideBar
フッター	footer

 

種類

どんな種類の画像なのかを判断するためにつけます。

例）
サイドバーに設置しているバナーの場合
sideBar_bnr01.png

ヘッダーで使用しているロゴ画像の場合
header_logo.png

種類	命名規則
レイアウトのためのボックス	unit, box, col, area
画像、図	img
写真	photo
サムネイル	thumb
バナー	bnr
ロゴ	logo
見出し	ttl
アイコン	icon
背景	bg
テキスト	txt
矢印	arrow
線	line
リスト	list

 

連番

同じ用途の画像が複数あった場合、連番で番号を付けて分けます。

連番は２桁でつけるようにします。

例）
サイドバーで使用するバナーAの場合
side_bnr01.png

サイドバーで使用するバナーBの場合
side_bnr02.png

 
以上です。

 

 

-周辺知識