画像・メディアリソースガイドライン

🔰 当ドキュメントは「コーディングガイドライン」の一部です。 基本的なガイドライン・ルールについては先にそれから確認してください。

📄 ファイル名

基本的には命名規則に準拠します（👉識別子の命名規則）

📂 ディレクトリ

メディアによってディレクトリを分け、それぞれは基本的にドキュメントルート直下に設置します。

メディア	ディレクトリ名
画像（svg や gif アニメ含む）	img
動画	video
音声	audio
フォント	font

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

サブディレクトリ

ファイル（主に画像について）をページやコンポーネントごとにディレクトリにわけることは推奨しません。 理由は、共通で使いまわすファイルかどうか将来的にわからないからです。

システムの制限や、サイトリニューアルなどの際にパスを変更したくない場合などは、この限りではありません。

🎨 画像

命名規則

画像ファイルは[種類]-[修飾語・詳細]-[連番]@[解像度].[拡張子]のように組み立てます。[種類]と[拡張子]は必須です。

[種類]は次のような識別子を参考にして決定してください。

種類	識別子	説明
背景画像	bg	繰り返し画像の場合はrepeatを[修飾語・詳細]の先頭につけます（つまりbg-repeat-fooのようになります）。繰り返しの方向が一方であることが明確な場合はbg-repeat-x-foo bg-repeat-y-fooとしてください。CSSのborder-imageで使用する画像も対象です。
写真・イラスト	pict	写真やイラストを区別しません。photoなどは種類として曖昧になるため使用しないでください。原則としてimg要素として埋め込まれる画像でありalt属性（代替テキスト）が必要な画像が対象です。（背景写真はあくまで背景なので種類はpictではなくbgになります）
サムネイル画像	thumb	pictに対応するオリジナルの画像が存在する場合のみに使用します。
メインビジュアル用画像	hero
バナー	banner	コンポーネントの一部ではなく、独立してその画像一枚でバナー画像として成立するものに使用します。（ARIAのbannerロールとは関係はありません）
テキスト	text	テキストの代替となる画像に対して使用します。特殊なフォントでの表現が必要な場合やUnicodeに無い漢字などを扱う場合に使用します。見出しやタイトルなどはtitleという種類でなくtext-titleというようにする。
ロゴ	logo	画像独立してサービスや商品、組織、ブランドを表すものに使用します。
アイコン	icon
オブジェクト	obj	上記以外でコンポーネントの一部となる装飾的画像。

5.0で廃止された識別子

• btn: ボタン画像に使用していましたが、状況によってbg、icon、objを併用することで代替可能です。
• label: ラベル関連に使用していましたが、textを使用してください。

命名例

• bg-stripe.webp
• pict-animal-01.webp pict-animal-02.webp
• thumb-animal-01.webp thumb-animal-02.webp
• hero-home.webp hero-home@2x.webp

ファイル形式

Cloudflareを利用しているサイトでは画像の自動圧縮機能を利用することができます。その場合ファイルのフォーマットについてはクオリティを重視して書き出してください。そうでない場合は、ファイルサイズとのバランスを考慮してフォーマットを選択する必要があります。

AVIF・WebP

可能であればAVIF・WebPを採用します。

PNG

優先的に検討します。ただし、色数が多いもの（写真・イラストなど）はJPEG形式（圧縮率は劣化の程度で調整する）と比べてください。色数を調整できるツール（ImageAlphaなど）を使用して、クオリティに問題がない程度にファイルサイズを極力減らすようにしてください。

JPEG

PNG画像と比べてファイルサイズが少なくなる場合に採用します。その際、圧縮率は視覚的な劣化を極力抑えます。

SVG

オリジナルのベクターデータがある場合はSVGを採用します。ただし、オブジェクトの数やアンカーポイントが少なくファイルサイズやレンダリングパフォーマンスが極端に悪い場合はビットマップ形式を検討してください。

🎬 動画

現在決まった規定はありません。必要な要件は都度検討します。

🔊 音声

現在決まった規定はありません。必要な要件は都度検討します。

ƒ フォント

現在決まった規定はありません。必要な要件は都度検討します。