[Qiita] 画像ファイルの命名規則
命名規則の必要性
ボリュームの少ない単発のページや、1名の専任で済んでしまうようなプロジェクトでは自分の裁量でどうとでもなりますが、継続性のあるプロジェクトや複数人で制作する必要のある、ある程度の規模のサイト（サービス）を構築する場合、画像ファイル名に一定のルールがあると、ファイル管理が容易になり、また、名前を付けるのに悩む時間を短縮できます。
命名規則を考える上では
- ファイル名からどのページ（要素）で使っているのか、また、どのような意図の画像であるのかをファイルを開かなくても名前から想定できる
- ファイル名ソートをした時に場所-用途-内容ごとにファイルが混在せずに整列される
- 上記要件を保持しつつも制約は緩めで命名時の作業コスト、可用性を維持する
となっていることが重要です。
ここでは今まで自分が使ってきた命名規則をまとめました。
2つのサイト構成パターン
ウェブサイトを構築するにあたり、以下の大きく2つのパターンに分類します。
静的サイト
ディレクトリのツリー構造で構成されている HTML ファイルベースのサイトです。主にコーポレートサイトやランディングページなど、ファイル単位でページが管理されているサイトです。
動的サイト
実ファイルが存在せず、プログラムがルーティングをコントロールするようなサイトです。ブログやCMS、ウェブサービスやアプリ等のページがファイルとして管理されていないサイトです。
命名基本ルール
静的サイトの場合
画像を格納するディレクトリは HTML ファイルと同階層に特定の名前（例えば images など） で置きます。
格納する画像ファイル名は
[HTMLファイル名]_[識別子]_[内容]_[連番]_[状態].[拡張子]
の書式で構成されます。
動的サイトの場合
画像を格納するディレクトリは トップディレクトリに集中して置く（例えば /assets/images 等）ようなケースを想定しています。
格納する画像ファイル名は
[コンポーネント名]_[内容]_[連番]_[状態].[拡張子]
の書式で構成されます。
静的サイトでもコンポーネントベースで画像管理をしたければこちらのパターンでも OK です。
各項目解説
画像ファイルの各項目の書式を以下に解説します。
HTML ファイル名【必須】
画像ファイルが使用される HTML ファイルの名前を指定します。
index.html であれば index になりますし、outline.html であれば outline です。
格納ディレクトリ以下、複数の HTML から参照される場合は 予約語として cmn を適用します。
コンポーネント名【必須】
動的サイトの場合は HTML ファイル名がないため、代わりに掲載箇所を特定できる情報を付与します。HTML/CSS のコンポーネントと同期しておくと分かり易いと思います。
識別子【必須】
画像の用途を示す識別子を適用します。チームで認識を共有できる識別子ルールを決める必要があります。
大雑把に分けると、ファイル名から用途の類推が難しくなり、細かく分けすぎると制作時の識別子の選択判断が難しくなるので、よい塩梅の粒度を考慮する必要があります。
また、コンポーネントベースでファイル名を決める場合、情報が被るので識別子は省略します。
以下、識別子の設定例です。
| 識別子 | 説明 |
|---|---|
| pt | Page Title の略。そのページのタイトル画像に使われます。 |
| hd | Heading の略。見出し画像に使われます。 |
| mv | Main Visial の略。キャッチーな情報を含んだ大きな画像などに使われます。 |
| btn | Button の略。ユーザーがクリックすることでアクションが起きることを想像させる UI の画像などに使われます。 |
| bnr | Banner の略。バナー画像に使います。btn と判断が分かれるところですが、UI というよりは単独である程度の情報を持っている画像、といったニュアンスで使います。 |
| menu | ナビゲーション画像に使います。 |
| ico | Icon の略。定型的な情報を記号化したマークやシンボル画像等に使われます。 |
| logo | 企業や商品などをシンボル化した画像に使われます。 |
| txt | Text の略。上記識別子以外に利用される文字情報が主体の画像に使われます。 |
| img | Image の略。上記識別子以外に利用される画像一般に広く使われます。 |
| spr | CSS スプライト用の画像に使われます。 |
内容【任意】
ページの中で使われてる内容を示す任意の文字列を指定します。
コンテンツボリュームのあるページでは、識別子と連番のみの管理はが画像の用途が把握しにくくなるので、「内容」を示して分かりやすくしておきます。識別子と連番のみで管理可能な簡素なページでは省略してしまっても良いです。
また、内容に親子関係がある場合は_parent_child のようにアンダースコアで繋いで重ねての記述もOKです。
連番 【任意】
数字の連番を二桁で01から1ずつカウントアップします。
ファイル名の最初から「内容」までの文言が同一のもので続いた場合に連番をカウントアップします。
作成当時は一つしかないと分かっていても、後々の運用で二つ目が発生する可能性もあるので、基本は連番を付けるようにしますが、明らかに連番で管理しない要件では省略も可能です。
状態 【任意】
画像の状態を示す文字列を使用します。
以下、状態の設定例です。
| 状態 | 説明 |
|---|---|
| off | 画像がポインタに反応して切り替わる際のポインタが載っていない画像に使用します。 |
| on | 画像がポインタに反応して切り替わる際のポインタが載っている画像に使用します。 |
| here | メニュー画像などで、現在地を示す画像に使用します。 |
| disabled | 現在は使用できない画像（グレーアウトしたようなもの）に使用します。 |
| selected | フォームのラジオボタンなど選択状態の画像に使用します。 |
| bg | BackGround の略。CSS などで背景として表示される画像に使われます。 |
| zoom | 拡大画像に使用します。 |
他の項目と違って _here_off のように複数の状態を重ねて定義できます。
適用例
静的サイトの場合
index.htmlの場合
<!--メインビジュアル-->
/images/index_mv_01.png
/images/index_mv_02.png
<!--ピックアップセクションのイメージ画像-->
/images/index_img_pickup_01.png
/images/index_img_pickup_02.png
サイト共通パーツの場合
<!--グローバルナビゲーション-->
/images/cmn_menu_global_about.png
/images/cmn_menu_global_about_here.png
/images/cmn_menu_global_service.png
/images/cmn_menu_global_service_here.png
<!--検索ボタン-->
/images/cmn_btn_search_01_off.png
/images/cmn_btn_search_01_on.png
/images/cmn_btn_search_01_disabled.png
<!--リンクマーク-->
/images/cmn_ico_link_01.png
/images/cmn_ico_link_02.png
service/technology.htmlの場合
<!--見出し-->
/service/images/technology_hd_01.png
/service/images/technology_hd_02.png
service 以下の共通パーツの場合
<!--コンテンツの背景画像-->
/service/images/cmn_img_contents_bg_01.png
/service/images/cmn_img_contents_bg_02.png
動的サイトの場合
ここでは FLOCSS で管理されたサイトを想定して画像ファイル名の定義をしてみます。
<!--グローバルナビゲーション-->
/assets/images/c-globalnav_about.png
/assets/images/c-globalnav_about_here.png
/assets/images/c-globalnav_service.png
/assets/images/c-globalnav_service_here.png
<!--検索ボタンアイコン-->
/assets/images/c-button_search_icon.png
/assets/images/c-button_search_icon_disabled.png
<!--リンクマーク-->
/assets/images/c-link_icon_01.png
/assets/images/c-link_icon_02.png
最後に
最近は CSS スプライトやウェブフォント、もしくは CSS3 によるデザインが全盛で、昔ほど画像を多用しなくなってきましたが、それでも画像を一切使わないウェブサイトはほぼないので、画像ファイル管理はどんなプロジェクトにも常に付いて回ります。
把握しやすくコストがかからない命名規則で運用が少しでも楽になると良いですね。
※この記事はQiitaとのマルチポストになります。