画像などの命名規則

ファイル名の基本ルール

拡張子を含め半角英数255文字以内としてください
- Linux、Microsoft Windows、Mac OSで255バイトがおおよその制限となっています
kebab-case（単語をハイフンで結合）で命名してください
- Googlebotは単語の区切りをハイフンで理解します。アンダースコアでは単語の区切りを考慮しません
- 画像名がSEO上考慮不要であれば単語のつなぎ方はsnake_case（単語をアンダースコアで結合）でも構いません
ファイル名からどの様な画像なのかが推察できるようにしてください
可能な限りシンプルなファイル名にします（ページURLと同じ様なものであると考えてください）
規則よりも普遍性を考慮してください（子犬の画像にkittyとつけないように）

ファイル名の運用ルール

プロジェクト内で接頭辞・挿入辞や命名規則を揃えてください
- 画像の量やどの様に使用されるか（更新性、ディレクトリをまたいだ共有）によって、ページ名やカテゴリー名を接頭辞に入れることを検討してください
画像の用途によって接頭辞・挿入辞や命名規則を揃えてください
ロゴなどウェブサイト内で共通して使用する画像にはナンバリングを控え、より具体的な名前を使用してください
ベクター画像以外は拡張子の前に横✕縦のサイズ表記することで画像の管理が容易くなります（例：banner-campaign-640x90.avif）
- パフォーマンスを気にする必要がある場合にファイル名に盛り込むことを検討してください
状態やデバイスの出し分けをする画像は、アルファベット昇順のファイルツリーで隣接するようにしましょう（例：icon-arrow-down.svg、icon-arrow-left.svg）
- もし命名がシンプルなためにアイコンがファイルツリーで隣接しない場合は使用されるUI（ユーザーインターフェース）などを挿入辞として使用して下さい
- アイコン名に状態（open、close、hoverなど）を付ける場合でもアイコンの形状は画像名に含めてください（例：icon-plus-drawer-open.svg、icon-minus-drawer-close.svg）
  
  命名規則によるファイルツリーでの表示順の比較。
  上の画像は用途-状態-内容.拡張子という命名規則になっているために同じコンポーネントの状態変化で使用する予定のチェックマークのファイルが隣接していない。
  対して、下の画像では用途-内容-状態.拡張子となっているため、同一コンポーネント内で使用するファイルが隣接しており、用途に応じた整理ができている。
コンテンツの中で複数の画像が同じようなレイアウトで出現する場合、一貫した名前をつけてください（例：product-review-01-pc-900x600.avif、product-review-01-sp-360x480.avif、product-review-02-pc-900x600.avif、product-review-02-sp-360x480.avif）

プロジェクト内で揃っていればどの様な規則で制作しても構いません。必ずリポジトリのREADMEに命名規則を記載してください。

使用されうる接頭辞、挿入辞、接尾辞

以下は一例です。わかりやすい命名かどうかはプロジェクト内で相談してください。

用途

単語名	意味
fill,bg	背景画像、単色や模様などあまり意味を含まないもの
graph	グラフ
thumb	サムネイル
logo	ロゴ
icon	アイコン
hero,mv	メインビジュアル
banner	カルーセル内の広告や単一の接客バナーなど
pict	写真、イラストなど
text	複数文字テキスト
mark	記号（フォントやサーバーの制限などでユニコード文字の記号を画像化する必要がある場合）

デバイス、サイズ,傾向

単語名	意味
sp,pc,tb	デバイス
small,medium,large	大きさ（同じ画像でサイズ違いを管理するときなど）
darken,lighten,brighten	色味の傾向
on_dark,on_light	カラーテーマ

状態

単語名	意味
hover	マウスオーバー時
open,close,expand,expanded	開閉状態
active,disabled	活性状態
warn,error,success	登録状況や成功、失敗など