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

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

種類 命名規則
画像、図 img
写真 photo
サムネイル thumb
バナー bnr
ロゴ logo
見出し ttl
アイコン icon
背景 bg

 

連番

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

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

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

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

 
以上です。

本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

-周辺知識