◀ 3.

HTML5 figcaption の使い方（figure とのセット / SEO / アクセシビリティ / コード/グラフ/動画）

▶
編集
この記事の要点
  • は
    内に書く図の説明。HTML5 で追加
  • 図とキャプションを意味的に紐付ける → スクリーンリーダーは「図: …」と読み上げ
  • img の alt 属性とは別物。alt は「画像が見えない人への代替」、figcaption は「全員に見える説明」
  • 画像だけでなくコード / 表 / 動画 / 引用 / グラフ も
    +
    の対象
  • SEO 直接効果は限定的だが、本文外の補足コンテンツとして Google に認識される（記事の Featured Image 認識を助けることがある）

figure / figcaption の基本


  2025年の月次売上推移を示す棒グラフ
  
図1: 2025年 月次売上推移（単位: 百万円）

ポイント:

  • が「図のブロック」を表す
  • は figure の最初か最後に 1 つだけ置ける
  • 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;
}

よくある間違い

  • を
    の外に書く → 仕様違反、ARIA 関連付けが効かない
  • 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。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. figure要素
  2. template要素
  3. figcaption要素で図に説明を付ける
  4. canvas要素
  5. iframe要素
  6. script要素
  7. noscript要素
2026-06-11 03:30:47 guest 210

人気ページ

最近更新/作成されたページ