images-media

画像とメディア

すべての画像には目的が必要です。情報を伝える、感情を喚起する、方向を示す、またはブランドを強化する必要があります。目的のない画像は無駄な負荷です。

対象範囲

以下の場合に、このスキルを使用します。

• ウェブサイトの画像戦略を策定する
• ヒーローセクションや画像ギャラリーをデザインする
• 画像を技術的に最適化する（形式、圧縮、srcset）
• アイコンや SVG を使用する、またはアイコンシステムを構築する
• 代替テキストを作成またはレビューする
• ストック写真とカスタム画像のどちらを使うか決める

原則

1. 画像は装飾ではなくコンテンツです

すべての画像には目的があります。目的のない画像は無駄な負荷となり、ページの読み込みを遅くします。

2. 量より質を重視します

質の高い、本物らしさのある画像を少数使うほうが、一般的なストック写真を多数使うよりも大きな効果があります。

3. 画像を選ぶ前に戦略を立てます

まずビジュアルコンセプト（スタイル、雰囲気、カラーパレット）を定め、その後で画像を選びます。

4. パフォーマンスは妥協できません

画像はページ容量の50～70％を占めます。最適化によって、パフォーマンスを最も大きく改善できます。

5. 完璧さより本物らしさを重視します

演出されたストック写真のシーンよりも、実際の状況にいる本物の人々のほうが説得力があります。

ルール

すること：画像戦略を策定する

• 画像を選ぶ前に、ビジュアルコンセプトを定義します。
• ターゲット層、望ましい感情、ブランドイメージを選定基準として設定します。
• 一貫したスタイル（カラーパレット、トリミング、ライティング）の画像を選びます。
• ウェブサイト全体で一貫したビジュアル言語を保ちます。

すること：画像を機能的に使う

すべての画像は、次の4つの機能のうち少なくとも1つを果たします。

• レイアウト要素： ヘッダー画像、背景、雰囲気を演出するパターン。
• 方向づけの要素： 新しいセクションの目印や、テキストの多い領域の区切り。
• コンテンツ要素： 複雑なトピックの可視化、製品写真。
• 感情的な要素： ブランド構築、雰囲気の演出、認知度向上。

すること：人々を写す

• 実際の状況にいる、本物らしさのある人々を使います。
• 演出された、明らかにポーズを取ったシーンは避けます。
• 文脈に応じて、年齢、性別、民族の多様性を示します。

すること：画像を技術的に最適化する

• WebP（標準）または AVIF（段階的）で圧縮します。
• srcset を使い、少なくとも3種類（400px、800px、1200px）のサイズを配信します。
• アートディレクション（ビューポートごとに異なるトリミング）には picture を使います。
• CLS を防ぐため、width と height 属性を設定します。
• ファーストビューより下の画像には loading="lazy" を設定します。
• ファイルサイズは200KB未満にします（ヒーロー画像は最大400KB）。

すること：意味のある代替テキストを書く

• スクリーンリーダーと SEO のために、画像の内容を正確に説明します。
• 「画像：」などで書き始めないようにします。
• 装飾のみを目的とする画像に限り、alt="" を設定します。
• 説明的なファイル名を使います（IMG_4523.webp ではなく team-meeting-office.webp）。

すること：アイコンを一貫して使う

• アイコンには必ずテキストラベルを組み合わせます。
• ウェブサイト全体で一貫したアイコンセットを使います。
• 鮮明さとファイルサイズの小ささを重視し、SVG アイコンを優先します。

すること：SVG を優先する

• ロゴ、アイコン、イラスト、シンプルなグラフィックには SVG を使います。
• インタラクティブな要素（ホバー時の色変更、アニメーション）には SVG をインラインで記述します。
• 頻繁に使うアイコンには SVG スプライトを使います。

しないこと：ありきたりなストック写真を使う

• ありふれた画像（微笑むビジネスパーソン、握手、電球など）は避けます。
• カスタム撮影や、編集の一貫した厳選プレミアムストック素材に投資します。

しないこと：最適化されていない画像を埋め込む

• 元の解像度のまま画像を配信しないでください。
• WebP/AVIF が利用できる場合は、JPEG/PNG を使わないでください。
• ヒーロー画像やロゴを遅延読み込みしないでください（すぐに読み込む必要があります）。

しないこと：代替手段なしで画像にテキストを配置する

• 重要な情報を画像のみに含めないでください。
• 画像内のテキストはアクセシブルでも検索可能でもなく、画面サイズにも対応しません。

パターン

オーバーレイ付きヒーロー画像

ホームページやランディングページでは、大きな画像に半透明のオーバーレイを重ねてテキストを読みやすくします。見出し、サブ見出し、CTA をその上に配置します。ヒーロー画像は遅延読み込みしません。

画像ギャラリー／プロジェクト紹介

アスペクト比（16:9または4:3）をそろえた均一なグリッドです。ホバーすると追加情報を表示します。詳細表示にはライトボックスを使用します。スクロールして表示範囲に入るまで、画面下部の画像の読み込みを遅延させます。

画像カード

上半分に画像、下半分にタイトル、抜粋、CTAを配置したカードです。アスペクト比を統一します。object-fit: coverを使用して、均一に表示します。

アートディレクションを適用したレスポンシブ画像

picture要素と複数のsource要素を使用します。モバイルでは縦長にタイトにトリミングし、デスクトップでは横長の全体が見えるようにトリミングします。コード例については、references/responsive-images.mdを参照してください。

アイコンシステム

アイコンが10個以上ある場合は、一貫したセット（線画または塗りつぶしのいずれかに統一し、混在させない）を使用します。パフォーマンス向上のため、SVGスプライトを使用します。サイズ（例：基準サイズ24px）を統一します。アイコンには必ずテキストラベルまたはaria-labelを付けます。

アンチパターン

ストックフォトの単調さ

すべての画像が同じプラットフォームのもので、ありきたりで互いに差がありません。ユーザーはストックフォトだとすぐに気づきます。**解決策：**カスタム写真を使用するか、編集スタイルを統一した厳選済みの高品質なストックフォトを使用します。

最適化されていない巨大な画像

カメラで撮影した元画像（3～10MB）をそのまま埋め込みます。**解決策：**自動圧縮、リサイズ、フォーマット変換を行うビルドパイプラインを導入します。

装飾画像の過剰な使用

情報価値のない画像を多用します。**解決策：**すべての画像に「何のためか」というテストを適用します。余白のほうが効果的な場合もよくあります。

代替テキストの欠落

alt属性がない画像や、「image1.jpg」のような代替テキストが設定された画像です。アクセシビリティ違反となり、SEOにも不利です。**解決策：**コンテンツ画像には説明的な代替テキストを設定し、装飾画像にはalt=""を設定します。

一貫性のないビジュアル表現

スタイルや品質の異なる写真を混在させます。**解決策：**色調、スタイル、品質基準を定めた画像戦略を立てます。

チェックリスト

戦略

• スタイル、雰囲気、カラーパレットを定めた画像戦略がある
• すべてのページでビジュアル表現に一貫性がある
• すべての画像に少なくとも1つの役割がある
• ありきたりなストックフォトを避けている

技術的な最適化

• 主要フォーマットとしてWebPまたはAVIFを使用している
• srcsetに少なくとも3つのサイズを指定している
• スクロールして表示範囲に入るまで、画面下部の画像の読み込みを遅延させている
• ヒーロー画像の読み込みを遅延させていない
• width属性とheight属性を設定している
• ファイルサイズが200KB未満（ヒーロー画像は最大400KB）
• ロゴ、アイコン、イラストにはSVGを使用している

アクセシビリティ

• すべてのコンテンツ画像に代替テキストを設定している
• 装飾のみを目的とする画像にはalt=""を設定している
• 重要なテキストを画像だけに含めていない
• 画像上のテキストに十分なコントラストがある

法務

• 使用権とライセンスを確認している
• 画像クレジットを適切に明記している

関連項目

• responsive-design -- レスポンシブ画像、srcset、picture要素
• ui-design -- ビジュアル階層と画像の配置
• branding-identity -- ブランドアイデンティティの一部としてのビジュアル表現
• accessibility -- 代替テキスト、コントラスト、画像内のテキスト
• color-theory -- カラーコンセプトとの関連における画像のカラーパレット