よく使っている画像の命名規則

ファイルの命名規則を定めておくことは効率的に制作を進める上で大切です。
一人でコーディングをするときもそうですし、複数人で制作するときでも同様です。運用フェーズに入ってから、ファイル名がバラバラになってしまうことを防止するという役割もあります。

以下の命名規則は、僕が画像のコーディングルールを設定するときの標準的なものです。

最新データはGitHubにあります。

ファイル名とフォルダ名に使う文字と記号

ファイル名に使うのは半角英数字とハイフンとアンダースコアのみとします。

• 半角英数字
• -ハイフン
• _アンダースコア

これ以外の文字・記号はファイルのやりとりで文字化けしたり、サーバーが対応していない可能性がある、見落としやすい、機種依存文字といった理由で使用しません。

フォルダ名とディレクトリ構造のルール

画像ファイルはルートディレクトリにassetsディレクトリを作り、CSSやJavaScriptと同じ階層に保存します。

root
├── assets/
│   ├── css/
│   │   └── icon/
│   ├── img/
│   │   ├── common/
│   │   └── page/
│   ├── js/
│   └── svg/
├── index.html
└── page/
    └── index.html

• 画像フォルダ名はimgとします。
• 画像は基本的に/assets/imgディレクトリに保存します。
• /assets/imgディレクトリ以下にページのディレクトリ構造にあわせてフォルダを作り、画像を保存します。トップページの画像は/assets/imgディレクトリ直下に保存します。
• サイト共通の画像は/assets/img/commonディレクトリに保存します。
• 各ディレクトリ共通の画像は/assets/img/page/commonのようにcommonディレクトリを作って保存します。
• アイコンフォント用のSVGファイルは/assets/css/iconディレクトリに保存します。
• インラインSVG用のSVGファイルは/assets/svgディレクトリに保存します。
• img要素で表示させるSVGファイルは/assets/imgディレクトリにJPGなどと同じように保存します。
• PDFファイルのようなブラウザ上に表示させないファイルも、JPGなどと同様に扱います（pdfディレクトリなどは作らない）。
• ファイル名とフォルダ名は適切な英単語を使用し、ローマ字を使いません。ただし、ローマ字表記が仕様上正しい場合は使用します。
• 英単語は半角英数字を使います。
• 英単語はハイフンで区切ります。
• ブログの投稿画像のような数が増えていくものは2016と01のように西暦4桁と月2桁でフォルダを分けます（更新数が少ない場合は西暦だけで管理）。

ただし、CSSをstylesheet、JSをJavaScriptと省略表記にしていない場合は、imgではなくimageとします。

画像のパス指定

画像のパスは以下のようなルート相対パスで指定します。

• /assets/img/common/logo.svg
• /assets/img/page/image01.jpg

ルート相対パスのメリットとデメリット

ルート相対パスには以下のようなメリットがあります。

• どの階層からでも同じパスで参照できるため、パーツを共通化した場合でも扱いやすい。
• CMSでは絶対パスで出力されることが多いので、CMS化が容易。
• パスから階層構造をつかみやすい。
• ルートディレクトリ近くにまとめておけばパスが短く保てる。

ルート相対パスにはデメリットもあります。以下の点に注意して制作をします。

• フォルダ名を変更するとリンク切れになってしまう。
• サーバーを通さないと、ローカル環境で画像が表示できない。
• テキストエディタでパスの補完機能を使うには、若干の設定が必要。
• 階層の深いファイルへのパスが長くなる。

ファイル名のルール

画像ファイルは以下のような順番で名前をつけていきます。ファイル名は画像の役割や連番などを示すようにします。
どこで使われるかはファイル名ではなく、ファイルを格納するディレクトリ名で示します。

1. 種類（UIの大分類）
2. 詳細（どのような場面で使うのか）
3. 連番（2桁もしくは3桁）
4. 状態（ユーザーの操作やページの状態で画像を切り替える場合）

ファイル名の共通ルールとして、ファイル名には半角英数字を、単語の区切りにはハイフンを、分類の区切りにはアンダースコアを使用します。

単語の省略

backgroundやnavigationのような長い単語でなければ基本的に単語の省略はしません。
省略する単語は以下にリストアップしてください。

• background → bg
• navigation → nav

1. 種類

ボタンやタイトルのようなUIの種類（大分類）をつけます。

• メインビジュアル → hero
• 一般的な画像 → image
• 地図 → map
• リストやグラフ → chart
• バナー・広告 → banner
• アイコン → icon
• ロゴマーク → logo
• タイトル → title
• 見出し → heading
• テキスト（見出し以外のテキスト画像） → text
• 背景画像 → bg
• ファビコン → favicon
• OGP画像 → ogp

2. 詳細

種類_詳細 もしくは
種類

「種類」につけた名前に対して、どのような場面で使うのかを示します。「種類」との間にアンダースコアをつけます。特定のシチュエーションを限定できない場合は省略します。

• メインビジュアルの画像 → hero ※「詳細」の省略
• 一般的な画像 → image ※「詳細」の省略
• アバウトセクションの画像 → image_about
• オープンアイコン → icon_open
• クローズアイコン → icon_close
• ブランドのロゴ → logo_brand-name
• タイトル → title ※「詳細」の省略
• 導入部分の見出し → heading_intro
• タイトルの背景画像 → bg_title
• グローバルナビゲーションの背景画像 → bg_global-nav

「詳細」が2つ以上の英単語からなる場合はハイフンで区切ります。
pankuzuのようなローマ字表記は禁止とします。ただし、ローマ字表記が仕様上正しい場合は使用します。
button_redのような見た目を直接あらわしているような名前は極力避けてください。

画像を書き出す段階でデザインが終わっていなどの理由で適切な単語をつけられない場合は、無理に「詳細」をつけずに、このあとの「連番」だけで管理をします。

3. 連番

種類_詳細+連番 もしくは
種類+連番

ボタンのように数が多かったり、サムネイル画像のように頻繁に追加されるものに関しては、「種類」と「詳細」のあと、もしくは「種類」のあとに01から始まる2桁の連番をつけます。「連番」の前にはアンダースコアをつけません。「詳細」がない場合は必ず連番をつけます。

• メインビジュアルの1つ目（カルーセルで使用） → hero01 ※「詳細」の省略
• 一般的な画像の1つ目 → image01 ※「詳細」の省略
• アバウトセクションの画像の1つ目 → image_about01
• 「詳細」をつけるのが難しい見出し → heading01 ※「詳細」の省略

4. 状態

種類_詳細+連番_状態 もしくは
種類_詳細_状態 もしくは
種類+連番_状態 もしくは
種類+連番_状態_状態

マウスオーバー、モバイルとPC、解像度などで画像の切り替えをする場合などには状態を示します。状態の前にはアンダースコアをつけます。

• マウスオーバーで切り替わる前の画像 → image01_off
• マウスオーバーしたときの画像 → image01_on
• モバイルで表示する画像 → image01_sp
• PCで表示する画像 → image01_pc
• 2倍の解像度で表示する画像 → image01_2x