過去バージョン

figure / figcaption の基本

<figure>
  <img src="/img/chart-2025.png" alt="2025年の月次売上推移を示す棒グラフ">
  <figcaption>図1: 2025年 月次売上推移（単位: 百万円）</figcaption>
</figure>

ポイント:

• <figure> が「図のブロック」を表す
• <figcaption> は figure の最初か最後に 1 つだけ置ける
• alt は画像が読み込めない / スクリーンリーダー向けの説明、figcaption は全員が見える説明

alt と figcaption の使い分け

典型例

<!-- ✅ 良い例: alt と figcaption の役割分担 -->
<figure>
  <img src="/img/london-bridge.jpg"
       alt="霧の中に浮かぶロンドンブリッジの夜景">
  <figcaption>
    撮影: 山田太郎 / 2025年 ロンドン旅行にて
  </figcaption>
</figure>

<!-- ❌ 悪い例: 同じ内容を二重に -->
<figure>
  <img src="/img/london.jpg" alt="ロンドンブリッジの写真">
  <figcaption>ロンドンブリッジの写真</figcaption>
</figure>
<!-- → スクリーンリーダーで「画像 ロンドンブリッジの写真 図 ロンドンブリッジの写真」と二重読み上げ -->

画像以外の用途

コードリスト

<figure>
  <pre><code class="language-js">
function hello() {
  console.log("Hello");
}
  </code></pre>
  <figcaption>Listing 1: 最小のあいさつ関数</figcaption>
</figure>

引用

<figure>
  <blockquote cite="https://example.com/article">
    成功とは、情熱を失わずに失敗から失敗へ歩むことである。
  </blockquote>
  <figcaption>― ウィンストン・チャーチル</figcaption>
</figure>

動画

<figure>
  <video src="/video/demo.mp4" controls></video>
  <figcaption>動画1: 新機能のデモ（再生時間 1分20秒）</figcaption>
</figure>

表

<!-- table の caption と figure の figcaption は使い分け -->
<!-- 通常の表 -->
<table>
  <caption>表1: 月次売上</caption>
  ...
</table>

<!-- 表が大きく figure として独立させる場合 -->
<figure>
  <table>...</table>
  <figcaption>表2: 全店舗別の売上集計</figcaption>
</figure>

グラフ（SVG / Canvas）

<figure>
  <svg viewBox="0 0 400 200" role="img" aria-labelledby="cap1">
    <!-- グラフ要素 -->
  </svg>
  <figcaption id="cap1">図2: 各部門の四半期売上比較（2025 Q4）</figcaption>
</figure>

SEO 観点

Google は figcaption を以下のように扱います:

• 画像の周辺テキストとして認識し、画像検索のランキング材料に使う（参考程度）
• 本文の流れから独立した補足コンテンツとして扱われる
• Featured Image の特定に役立つ（記事の代表画像をクローラーが推測しやすくなる）
• alt が無くても画像内容を補完できる手段の 1 つ（ただし alt は別途必須）

SEO 目的でキーワードを詰め込むのは逆効果。あくまで読者に図を理解させる説明として書きます。

ARIA との関係

ブラウザは <figcaption> を自動的に aria-labelledby 相当として扱います:

<!-- 暗黙の関連付け（モダンブラウザでは自動） -->
<figure>
  <img src="..." alt="グラフの代替テキスト">
  <figcaption>図3: 月次推移</figcaption>
</figure>
<!-- → スクリーンリーダーは「グラフの代替テキスト、図3 月次推移」と読む -->

<!-- 明示的に role / aria を付ける場合（より堅牢） -->
<figure role="group" aria-labelledby="fig3-cap">
  <img src="..." alt="...">
  <figcaption id="fig3-cap">図3: 月次推移</figcaption>
</figure>

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;
}

よくある間違い

• <figcaption> を <figure> の外に書く → 仕様違反、ARIA 関連付けが効かない
• 1 つの figure に 2 つ以上の figcaption → 仕様違反、最初の 1 つ以外は無効
• alt と figcaption を完全に同一文字列で重複 → スクリーンリーダーが二重読み上げ
• 装飾画像にまで figure を使う → 装飾は img alt="" のみで OK

FAQ

Q: figure 内に複数の画像を入れて figcaption 1 つは？
A: 仕様上 OK。「関連する一連の図」として 1 つの figcaption で説明できます。

Q: figcaption は必須？
A: いいえ。<figure> 単体でも有効（説明不要な場合）。

Q: img 単体と figure + img + figcaption の使い分けは？
A: 本文の流れに完全に組み込まれた装飾画像 → img 単体。「図1」と参照したくなる独立した図 → figure。