画像ファイルの命名規則

はじめに

Webサイト、Webアプリケーション、Blog などで利用する画像ファイルのファイル名の命名規則を考えます。
もちろん、これが正解というわけではありませんが、提案の一つとして受け取ってもらえたらうれしいです。

今回、この案を作成するために以下のページを参考にさせていただきました。
こちらの命名規則を参考にしつつ、情報を追加する形で作成しています。

https://webnaut.jp/technology/20210910-3953/

命名規則

• アルファベット小文字・数字・ハイフン・アンダースコアのみをファイル名に使う.
• {カテゴリ}[_{名前}][_{連番}][_res{幅}x{高さ}][_ar{アスペクト比}][_{状態}].{拡張子} の形式で命名する
• /assets/images フォルダに入れる（使用ページで分けない）。Next.jsで開発しているのであれば、/public/images に入れる。

ファイル名にアルファベット大文字を使用しない

理由は参考にさせていただいたサイトに記載してあるものとまったく一緒です。
WebサイトやWebアプリケーションでは、大文字と小文字を区別するのかしないのかでトラブルの可能性があるので、小文字のみに統一します。

カテゴリ

ファイル名の先頭にカテゴリをつけます。
カテゴリは画像がどのようなものか、すなわち写真なのか、文字なのか、バナーなのかを表現します。

• figure 図版
• photo 写真
• banner バナー
• text 画像化したテキスト
• icon アイコン
• logo ロゴ
• favicon ファビコン
• image 上記に当てはまらない画像全般

参考にさせていただいた案に、photo を追加し、mv、bg、opgを取り除きました。
取り除いたものは、画像の分類というより「想定される用途」なのであえて外しました。
画像を見た時に、どこで使用されるかは全く考えずに、判断できるものとしました。
（icon、logo、faviconは場合によっては判断が難しい場合があるかもしれませんが、あえて残しました）

figure

グラフ、組織図、地図などの図版。
単なる絵としての画像ではなく、数字や文字などの情報を含む画像として区別しています。

photo

人物や風景写真です。

banner

リンクとして使用される画像。
単体でボタンの役割を持つものです。

text

特殊なフォントを使っていたり、装飾などの加工をしていて、画像化したテキスト。
altには書かれている文字を反映する必要があります。

icon/logo/favicon

それぞれ、アイコン、ロゴ（企業ロゴ、サービスロゴ、ブランドロゴなど）、ファビコンです。

image

上記以外の画像全般。
メインビジュアル、ヒーローイメージ用に作成された画像もここに分類します。

名前

画像の内容やコンテキストを説明します。例えば、「summer-sale」「product-A」など。
複数単語からなる名前はハイフンでつなぎます。

連番

2桁で0パディングをつける、 01 の形式としています。
一つのカテゴリ_名前で登場するのは多くても数十件、と想定しています。

解像度

解像度を表現します。"res"(resolutionの略)を先頭につけて、"res{幅}x{高さ}"の形式でピクセル単位で画像の解像度を記述します。

アスペクト比

縦横比を簡単に表現するために「16:9」「4:3」などを記載すると、アスペクト比の把握がしやすくなります。
"ar_{横}x{縦}"の形式で記述します。

プロジェクトなどでは、使用するアスペクト比は

例

バナー用の1920x1080の16:9画像： banner_summer-sale_res1920x1080_ar16x9.jpg
プロフィール写真用の800x800の1:1画像： photo_profile-userA_res800x800_ar1x1.png