タイトル: figcaption要素で図に説明を付ける
SEOタイトル: HTML5 figcaption の使い方（figure とのセット / SEO / アクセシビリティ / コード/グラフ/動画）
| この記事の要点 |
|
figure / figcaption の基本
図1: 2025年 月次売上推移（単位: 百万円）
ポイント:
altは画像が読み込めない / スクリーンリーダー向けの説明、figcaptionは全員が見える説明
alt と figcaption の使い分け
| 属性 / 要素 | 誰のため | 表示 | 内容 |
|---|---|---|---|
alt | スクリーンリーダー / 画像読込失敗時 | 非表示 | 画像の内容そのものの説明 |
figcaption | 全員 | 表示 | 画像の文脈・出典・補足 |
title | マウスホバー時 | ツールチップ | 補足（推奨されない） |
典型例
撮影: 山田太郎 / 2025年 ロンドン旅行にて
ロンドンブリッジの写真
画像以外の用途
コードリスト
function hello() {
console.log("Hello");
}
Listing 1: 最小のあいさつ関数
引用
成功とは、情熱を失わずに失敗から失敗へ歩むことである。
― ウィンストン・チャーチル
動画
動画1: 新機能のデモ（再生時間 1分20秒）
表
表1: 月次売上
...
...
表2: 全店舗別の売上集計
グラフ（SVG / Canvas）
図2: 各部門の四半期売上比較（2025 Q4）
SEO 観点
Google は figcaption を以下のように扱います:
- 画像の周辺テキストとして認識し、画像検索のランキング材料に使う（参考程度）
- 本文の流れから独立した補足コンテンツとして扱われる
- Featured Image の特定に役立つ（記事の代表画像をクローラーが推測しやすくなる）
- alt が無くても画像内容を補完できる手段の 1 つ（ただし alt は別途必須）
SEO 目的でキーワードを詰め込むのは逆効果。あくまで読者に図を理解させる説明として書きます。
ARIA との関係
ブラウザは aria-labelledby 相当として扱います:
図3: 月次推移
図3: 月次推移
CSS スタイル
figure {
margin: 1.5em 0;
text-align: center;
}
figure img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
figcaption {
margin-top: .6em;
font-size: .9em;
color: #555;
line-height: 1.5;
}
/* 左に画像 / 右にキャプションのレイアウト */
figure.side {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
align-items: center;
}よくある間違い
- 1 つの figure に 2 つ以上の figcaption → 仕様違反、最初の 1 つ以外は無効
- alt と figcaption を完全に同一文字列で重複 → スクリーンリーダーが二重読み上げ
- 装飾画像にまで figure を使う → 装飾は
img alt=""のみで OK
FAQ
Q: figure 内に複数の画像を入れて figcaption 1 つは？
A: 仕様上 OK。「関連する一連の図」として 1 つの figcaption で説明できます。
Q: figcaption は必須？
A: いいえ。
Q: img 単体と figure + img + figcaption の使い分けは？
A: 本文の流れに完全に組み込まれた装飾画像 → img 単体。「図1」と参照したくなる独立した図 → figure。