画像 （ 概要 ）
HTMLの<img>に対応した、ページ中に画像を埋め込むためのコンポーネントです。画像キャプションと組み合わせて使うこともできます。
ユースケース
- 写真・イラスト・図版（ダイアグラム）などでコンテンツを示すとき
- 施設の外観写真、イベントの様子、製品の写真など、視覚的な情報として画像を提示する場合に使用します。また、グラフ、図表、フローチャート、地図など、本文の説明を視覚的に補完する画像を配置する場合にも使用します。
- 画像にキャプションを追加するとき
- 画像とともに読むことができる補足説明を画像キャプションで提供できます。このとき、画像に関連したリンクを画像キャプション内に含めることもできます。
- 画像自体をリンクにするとき
- 画像から直接、関連するページやコンテンツにリンクしたい場合に使用します。
注意が必要なケース
- 画像だけで重要な情報を伝えない
- 重要な情報は必ず本文のテキストでも提供してください。画像が表示されない環境や、スクリーンリーダーを使用しているユーザーにも内容が伝わるようにします。
- 文字画像を使わない
- フォントを変更させないことを企図して、文字画像を使ってはなりません。ただし、ロゴタイプのように、文字画像であることが必要不可欠な場合を除きます。詳しくはタイポグラフィ（アクセシビリティ）を参照してください。
各種リソース
| 種別 | リソース | 状態 |
|---|---|---|
| デザイン | Figmaデザインデータ（v2） | 提供中 |
| HTML版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 | |
| React版実装 | ソースコード（GitHub） | 提供中 |
| サンプル（Storybook） | 提供中 |