駆け出しフロントエンドエンジニア画像の命名規則を考えてみた

入社してから3ヵ月が過ぎました。
先月は、本格的にwebサイトを実装を担当していたのですが、さまざまことに苦戦しました。

特に戸惑ったのが、画像ファイルの命名です。そこで、様々なサイトを参考にしつつ、AIの助けも借りながら、自分流の画像ファイルの命名規則を考えてみました。

私はエンジニア歴３か月の初学者であるため、今回考えた規則には不十分な点も多くあると思います。そのため、今後の実装でこの規則を使いつつ、適宜アップデートしていきたいと考えています。

なお、本記事ではファイル構成についても軽く触れますが、Sassなどはまだ未履修であるため、Sassを使用した本格的なファイル構成までは想定していません。

参考にしたサイト

以下のサイトを参考に規則を考えました。大まかな骨組みとして採用しつつ、細かいルールなどを追加しています。
https://qiita.com/manabuyasuda/items/675586be79c4a8eebbfc

使用できる文字・記号

ファイル名に使用できる文字と記号は以下に限定します。

• 半角英字（小文字のみ）
• 半角数字
• アンダースコア（ _ ）
• ハイフン（ - ）

ディレクトリ構造

基本の構造は以下の通りです。

assets
├── image/
│    ├── common/　/* ファイル名はあくまでも例。ページ毎にフォルダを分ける */
│    └── page/
├── css/
├── js/
├── index.html

動画や音声ファイどは、imageフォルダとは別のフォルダで保存します。

命名規則

ファイル名は共通して以下の規則で名づけます。

[役割]_[詳細]_[連番]_[状態].[拡張子]

以下、角括弧で囲まれた規則を、「セクション」とします。
各セクションの内容は以下の通りです。

1. 種類：画像の大まかな分類
2. 詳細：その画像が何を表しているものか
3. 連番：任意。種類と詳細だけでは区別がつかない場合につける
4. 状態：任意。ユーザーの操作やページの状態で画像を切り替える場合

各セクションには半角英数字を、セクションごとの区切りにはアンダースコアを使います。
また、セクションが複数の単語から成る場合は、ハイフンで単語を区切ります。
単語の省略については、現状推奨してません（検討の余地あり）。

以下、各セクションの具体的な規則を説明します。

1. 種類

画像のおおまかな分類を示します。種類は以下の10個の中から一つを選択して名づけます。
数を制限することで、選択肢を狭め、命名にかける時間を無くすためです。

種類名	英単語
ロゴ	logo
テキスト	text
UI	ui
バナー	banner
リストや図	chart
背景画像	bg
アイコン	icon
ファビコン	favicon

上記８つの分類に加えて、それらに当てはまらない画像を以下二つに分類します。

種類名	英単語
写真	photo
イラスト	illust

2. 詳細

画像が具体的に何を表しているのか（役割や内容）を示します。
2つ以上の英単語から成る場合、ハイフンで単語を区切ります。
ローマ字表記は、ローマ字表記が仕様上正しい場合を除き、原則禁止とします。
以下の表は、詳細の一例です。

種類名	英単語（例）
ロゴ (logo)	会社や企業（company, inc）、商品（product）
テキスト (text)	見出し（title, subtitle）、ルビ（ruby）、キャプション（caption）、本文（body）
UI (ui)	ボタン（btn）、スライダー（slider）、トグル（toggle）
バナー (banner)	広告（pr）、関連商品（link, related-product）
リストや図 (chart)	円グラフ（chart）、棒グラフ（bar）、フロー図（flow, process）※1
背景画像 (bg)	header, section, fotter　※2 内容ではなく置き場所を明記
アイコン (icon)	SNS（x, instagram, facebook）、連絡先（tel, mail）
ファビコン	※3 不要

◇補足説明

• ※1 リストや図については、[図の種類]もしくは[図の種類]-[図の内容]を明記します
  　例えば、人口の比率を示した円グラフでは、pie-peopleとします。
• ※2 背景画像については、その画像の置き場所を明記します（ヘッダー、body全体など）
• ※3 ファビコンについては使用用途が限定的なので詳細は不要とします

◇画像 (photo)と写真 (illust)について
[被写体]もしくは[使用場所]-[被写体]、を明記します。
また、詳細が同じ場合、連番を使って区別します。

3. 連番

上記の種類と詳細が同じである場合、01から始まる2桁の連番をつけて管理します。

例 ）
ヘッダーに使う商品写真の場合 ➡ photo_header-goods_01

4. 状態

マウスオーバー、スマホとPCなどで画像の切り替えを行い場合などに明記します。
以下に一例を示します。

種類名	英単語（例）
ホバー時の切り替え	hover, hover-on/off
モバイルで表示	sp
PCで表示	pc

その他、active, open/close, disableなど

さいごに

今回、自分のチェックシート用に、画像ファイルの命名規則についてまとめてみました。

まとめる中で、まだ曖昧と感じる点や不安点も多く出てきました。
ただ、まずは今回考えた規則に従って画像ファイルを命名していこうかなと思います。実装の中で使いつつ、より良いもかたちアップグレードしていきたいと考えています。

皆さんが普段使っている命名規則や、意識しているルールなどがあれば、教えていただけると幸いです。
また、改善点やアドバイスなどがあれば、ぜひご意見をいただけますと幸いです。