ファイル命名規則

開発において画像ファイルの命名規則を統一することで、管理や運用の効率化、チーム間の認識齟齬防止につながります。 以下のルールに従って、画像ファイルの命名を行ってください。

• 接頭辞を使用: 画像の種類を明確にするため、接頭辞を必ず使用します。
• 小文字のみ使用: icon-arrow.svg
• ハイフン区切り: bg-pattern-main.webp
• 連番の場合: img-gallery-01.webp, img-gallery-02.webp
• レスポンシブ用: banner-hero-desktop.webp, banner-hero-mobile.webp

接頭辞ルール

ファイル名は以下のような接頭辞のいずれかで始める必要がありますが、特定の要件やデザインシステムにより、プロジェクト内で一貫性を保つことを前提に上記以外の接頭辞を使用しても構いません。

• icon-: アイコン画像
• bg-: 背景画像
• img-: 一般的な画像
• figure-: 図版・説明画像
• banner-: バナー・ヒーロー画像
• text-: テキスト画像・ロゴタイプ
• logo-: ロゴ画像

例:

• icon-menu.svg - メニューアイコン
• bg-pattern.webp - パターン背景
• img-product.webp - 商品画像
• figure-diagram.webp - 図解画像
• banner-hero.webp - ヒーロー画像
• text-heading.webp - テキスト画像
• logo-company.svg - 会社ロゴ

命名パターン(例)

images/
├── common/ # 共通画像
│   ├── logo-company.svg
│   ├── icon-menu.svg
│   └── bg-pattern.webp
├── pages/ # ページ固有画像
│   ├── top/
│   │   ├── banner-hero.webp
│   │   └── img-feature-01.webp
│   └── product/
│       ├── img-main.webp
│       └── img-gallery-01.webp
└── ui/  # UI要素画像
    ├── bg-button.webp
    └── icon-decoration.svg

!WARNING 例外ケース システムの制限や、サイトリニューアルなどの際にパスを変更したくない場合、既に同名のディレクトリが存在する場合などは、この限りではありません。

ファイル名の構成要素

基本構成

[接頭辞]-[詳細]-[連番].[拡張子]

例:

• banner-hero-main.webp - メインのヒーロー画像
• img-product-gallery-01.webp - 商品ギャラリーの 1 枚目
• icon-arrow-right.svg - 右矢印アイコン

レスポンシブ対応時

[接頭辞]-[詳細]-[ブレークポイント].[拡張子]

例:

• banner-hero-desktop.webp - デスクトップ用ヒーロー画像
• banner-hero-tablet.webp - タブレット用ヒーロー画像
• banner-hero-mobile.webp - モバイル用ヒーロー画像

連番使用時

• 2 桁でゼロ埋め: 01, 02, 03...
• 3 桁の場合: 001, 002, 003...

例:

• img-gallery-01.webp, img-gallery-02.webp
• figure-step-001.webp, figure-step-002.webp

禁止事項

• 日本語ファイル名: 画像.jpg ❌
• スペース: icon menu.jpg ❌
• アンダースコア: icon_menu.jpg ❌ (ハイフンを使用)
• 大文字: Icon-Menu.jpg ❌
• 特殊文字: icon@menu.jpg ❌
• 接頭辞なし: menu.svg ❌ (必ず指定の接頭辞を使用)
• 不適切な接頭辞: pic-gallery.jpg ❌ (規定の接頭辞以外は使用禁止)