イメージとメディアシステム
目的
イメージとメディアシステムは、ビジュアルアセットがWebサイトのデザインにどのように統合されるかを管理する方法論を提供します。画像、イラスト、動画を単なる「装飾」ではなく、ユーザー体験の機能的な一部として扱うことを保証します。このシステムはアスペクト比、レスポンシブアートディレクション、テキスト可読性（オーバーレイ）のルールを確立し、画面サイズやコンテンツの複雑さに関わらず、メディアが高いインパクトとアクセシビリティを維持できるようにします。
ユースケース
- 新しいWebサイトのアートディレクションとビジュアルスタイル基準の確立。
- UIコンポーネントライブラリ（カード、ヒーローセクションなど）向けの一貫したアスペクト比マトリックスの定義。
- 背景画像や動画に対する高コントラストテキストオーバーレイの設計。
- 「アートディレクションされた」メディアのレスポンシブなトリミングと焦点の維持の管理。
- ギャラリー、機能ハイライト、ケーススタディなどメディア中心のセクションの構成の標準化。
使用すべきでない場合
- 技術的なアセット最適化: 圧縮、ファイル形式、遅延読み込みなどの技術的な懸念事項には、
website-developmentのresponsive-imagesを使用してください。 - ロゴとブランディングデザイン: 主要なブランドアイデンティティ（ロゴ、シンボルマークなど）のデザインは、通常Webデザインの外部で確立されます。
- アイコン: 小さな機能的なUIシンボルには
iconography-systemを使用してください。 - 装飾のみのパターン: コンテンツと相互作用しない、純粋に抽象的な意味を持たない背景テクスチャには使用しないでください。
入力
- ブランドアートディレクション: 意図されたビジュアルの「声」（例：カジュアル、テクニカル、ハイコントラスト、ミニマリスト）。
- コンテンツインベントリ: 必要なメディアの種類（例：商品写真、ポートレート、抽象的な背景）。
- レスポンシブグリッドシステム: メディアが配置されるレイアウトコンテキスト。
- タイポグラフィシステム: メディアと相互作用したり、メディアの上に配置されたりするテキストスタイル。
出力
- アスペクト比マトリックス: 特定のコンポーネントタイプにマッピングされた定義済みの比率セット（例：16:9、1:1、4:3）。
- オーバーレイ可読性仕様: テキストのコントラストを確保するためのスクリム、グラデーション、ブラー処理の基準。
- アートディレクションマップ: モバイル、タブレット、デスクトップ向けに定義された焦点ルールとトリミング戦略。
- コンポジションブループリント: メディアが隣接するコンテンツとどのように関連するかについてのルール（例：50/50分割、インセットメディア、フルブリード）。
ワークフロー
1. ビジュアルランゲージを定義する
すべてのメディアに一貫した「フィルター」またはスタイルを確立して、まとまりを確保します：
- 処理: 彩度、色温度、コントラストのルールを定義します。
- 密度: 画像を賑やか/詳細にするか、ミニマル/スペースを広くとるかを決定します。
- 構成: 画像内の「余白」の基準を設定します（例：「すべての商品写真には10%のネガティブスペースのマージンが必要」）。
2. アスペクト比基準を確立する
一貫した比率のセットを使用して、レイアウトの「ジャンプ」を防ぎ、リズムを維持します：
- シネマティック (16:9 / 21:9): ヒーローセクションや没入型動画に最適。
- 標準 (4:3 / 3:2): 記事プレビューや一般的な写真に最適。
- スクエア (1:1): 商品一覧、アバター、ソーシャルグリッドに最適。
- ポートレート (3:4 / 9:16): モバイルファーストのコンテンツや縦長の機能ハイライトに最適。
3. テキスト可読性（オーバーレイ）のために設計する
メディアの上にテキストを配置する場合は、「可読性レイヤー」を使用します：
- スクリム: 微妙な半透明の黒または白のオーバーレイ（通常10～40%の不透明度）。
- グラデーション: テキストの背後にある領域を暗くしながら、画像の残りの部分をクリアに保つ方向性のあるフェード（例：下から上）。
- ブラー: テキストの背後にある領域に
backdrop-filterブラーを適用して、視覚的なノイズを低減します。 - テキストの配置: 画像の最も「静かな」部分にテキストを配置します。
4. レスポンシブアートディレクションを設定する
画像はさまざまな画面形状に合わせて「トリミング」を変更する必要があります：
- 焦点の維持: 画像の「被写体」を特定し、コンテナの形状が変わってもそれが表示されたままになるようにします（例：
object-position設定）。 - モバイルピボット: 水平なデスクトップクロップ（16:9）から、モバイルではスクエアまたはポートレートクロップ（1:1または4:5）に切り替えて、ビューポートの使用率を最大化します。
- 伸縮よりも拡大縮小: 画像がアスペクト比を失うことを決して許可しません。
object-fit: coverを使用してコンテナを埋めながら縦横比を維持し、CSSのaspect-ratioプロパティでスペースを予約して、アセットが読み込まれる前にレイアウトがずれないようにします。 - アートディレクションされたクロップ: ビューポートごとに異なるクロップ（単なるサイズの変更ではなく）が必要な場合は、複数の
<source>ブレークポイントを持つ<picture>要素を使用します。構成が変わらず解像度のみが変わる場合は、単一の<img>にsrcset/sizesを使用します。
5. コンポジションパターンを定義する
メディアが周囲のレイアウトとどのように相互作用するかを決定します：
- フルブリード: メディアがビューポートの端まで広がります。インパクトのある導入セクションに最適。
- インセット / コンテインド: メディアをグリッドカラム内に収めます。補助的な画像に最適。
- レイヤードエフェクト: メディアが他の要素（カードやテキストなど）と重なって、奥行きを生み出します。
決定ルール
- 可読性ルール: テキストが画像の上に配置される場合、WCAG AAコントラスト（4.5:1）を満たす必要があります。満たさない場合は、より暗いスクリムを適用するか、テキストを移動します。
- 比率の一貫性: 単一の行またはグリッド内のすべてのカードは、位置揃えを確保するために同じアスペクト比を使用する必要があります。
- 被写体優先のクロッピング: モバイル用にアスペクト比が変更される場合、常に画像の被写体（人物の顔や商品など）を優先します。
- 空の状態のフォールバック: 画像の読み込みに失敗した場合や提供されなかった場合に備えて、ブランドカラーのブランドニュートラルなグラフィックを使用した「プレースホルダースタイル」を定義します。
- 動画のインタラクション: 常に「再生/一時停止」コントロールを提供し、音声付き動画を自動再生しないでください。
- スペースの予約: すべてのメディアコンテナには、ブラウザがアセットのダウンロード前にレイアウトスペースを予約できるように、定義された
aspect-ratioまたは明示的なwidth/heightが必要です。
制約
- アクセシビリティ: 画像上のテキストはスクリーンリーダーで読み取れる必要があります（画像にフラット化しないでください）。すべての意味のある画像には
altテキストが必要です。 - パフォーマンス（デザイン側）: アバターのように常に小さく表示される要素に対して、超高解像度を要求しないでください。
- レスポンシブ性: メディアは水平スクロールを引き起こしてはいけません。レイアウトシフト（CLS）を防ぐために、アスペクト比は安定している必要があります。
よくある失敗パターン
- 「コントラスト失敗」: 明るい/賑やかな画像の上にスクリムなしで白いテキストを配置し、テキストが読めなくなる。
- 「デカピテーション」: 不適切なレスポンシブクロッピングにより、モバイルで頭部や主要な被写体が切り取られる。
- 「比率スープ」: 同じページで5つの異なるアスペクト比を使用し、断片的で乱雑なビジュアルリズムを生み出す。
- アセットの不一致: 高品質の写真と「クリップアート」スタイルのイラストを混在させ、ブランドのまとまりを壊す。
- 「ストレッチ」: 画像の比率に合わないコンテナに画像を無理に配置し、歪みを引き起こす。
検証基準
- テキストオーバーレイのあるすべての画像がWCAG AA（4.5:1）コントラストを満たしている。
- アスペクト比が類似したコンポーネントタイプ内で一貫している（例：すべてのブログカードが4:3）。
- 焦点がモバイル、タブレット、デスクトップのビューポート全体で維持されている。
- すべての意味のある画像に説明用の
altテキストが定義されている。 - メディアが水平方向のオーバーフローやレイアウトの歪みを引き起こしていない。
- すべてのアセットにわたって明確なビジュアルスタイル（アートディレクション）が維持されている。
- すべてのメディアコンテナが、累積レイアウトシフト（CLS）を防ぐために、
aspect-ratioまたは明示的な寸法によってスペースを予約している。