画像・図・コードサンプル・グラフなどに、説明文（キャプション）を付けたい ときに使うのが、figure（フィギュア） と figcaption（フィグキャプション） です。
HTML5で導入されたセマンティックタグ（意味のあるタグ）であり、アクセシビリティ・SEO・読みやすさ の面で非常に効果があります。
この記事では、figure と figcaption の役割／書き方／よくある使い方／注意点 を初心者向けにわかりやすく解説します。
figure の役割
figureタグは、画像や図表など “単体として意味があるコンテンツ” を表すタグです。
普通の画像は <img> だけでも表示できますが
説明文付きで1セットにしたい場合は figure が最適 です。
例：
- 画像
- 図解
- スクリーンショット
- グラフ
- コードサンプル
- 地図
- 表（table）
figcaption の役割
figcaption は figure に属するキャプション（説明文）を表します。
<figcaption>画像の説明文</figcaption>
つまり：
- figure → 図のまとめ
- figcaption → 図の説明
という関係です。
figure＋figcaption の基本構造
正しい構造
<figure>
<img src="image.jpg" alt="説明画像">
<figcaption>この画像は○○を説明しています。</figcaption>
</figure>
ポイント
- figcaption は figure の 最初 or 最後 に置くのが原則
- 関連する画像や図を一つのまとまりとして扱える
- “画像＋説明文” が論理的に強化される
具体的な使い所
① 画像＋説明文（もっとも一般的）
<figure>
<img src="example.jpg" alt="HTML構造の図">
<figcaption>HTMLの基本構造を示す図</figcaption>
</figure>
② 図解・イラスト
<figure>
<img src="semantic-diagram.png" alt="セマンティックタグの図解">
<figcaption>HTML5セマンティックタグの関係図</figcaption>
</figure>
③ コード例（実は相性が良い）
<figure>
<pre><code>
body {
margin: 0;
}
</code></pre>
<figcaption>CSSで margin をリセットする例</figcaption>
</figure>
④ グラフ・統計データ
<figure>
<img src="chart.png" alt="アクセス推移のグラフ">
<figcaption>KEN-BLOGの月間アクセス推移</figcaption>
</figure>
⑤ 写真＋出典（引用）
<figure>
<img src="photo.jpg" alt="海の写真">
<figcaption>撮影：KEN（2025年）</figcaption>
</figure>
SEO とアクセシビリティのメリット
figure/figcaption を使うメリット
① Google が「画像＋説明」を正しく理解
Google は figure 内の画像と figcaption をセットで把握します。
結果 → 画像SEOに良い影響。
② alt と figcaption の両方で情報補強
- alt＝画像が表示されない場合の説明
- figcaption＝読者向けの説明文
SEOでもアクセシビリティでも二重にプラス。
③ スクリーンリーダー（音声読み上げ）が読みやすくなる
意味として「図＋説明」と伝わるため、
視覚障害者にも優しい構造。
④ コードが整理されて可読性UP
div 連発より意味タグを使う方が綺麗。
よくある間違い
figcaption を figure の外に置く
→ 意味づけが壊れる（HTMLの構造ミス）。
デザイン目的だけで figure を乱用
→ 意味がないとセマンティクスが壊れる。
figcaption を alt の代わりに使う
→ alt は画像の“代替テキスト”、 figcaption は“説明文”。
→ どちらも必要。
画像が1つだけでも div を使う（機会損失）
→ figure を使うと論理的に正しい。
まとめ
- figure = 画像・図をひとつのまとまりとして扱うタグ
- figcaption = その説明文
- 画像＋説明文がセットの場合は必ず使うと◎
- SEO・アクセシビリティに強い
- デザイン目的だけで使わない（意味が大事）
初心者が最初に覚えておくと、画像を丁寧に扱える “見える化HTML” にレベルアップします。
著者からのひと言
figure・figcaption は、初心者が意外と知らない「本当に使うべきタグ」です。
特にブログや教材サイトでは“画像＋説明”の組み合わせが多いため、正しく使えるとHTMLの品質もSEOも一段階アップします。
ぜひ今日から実戦で使ってみてください！
次回の記事は「表（table）の基本構造と見やすい書き方」です。
おすすめ関連記事
- HTML5セマンティックタグとは？意味と使い方
- header・main・footerの構造的な役割
- articleとsectionの違いを初心者向けに解説
- nav・asideでページ構造を整理する方法
