figureタグとfigcaptionタグの正しい使い方：アクセシビリティを高めるHTMLマークアップ解説

Webアクセシビリティの重要性が高まる現代のWeb開発において、適切なHTML要素の選択は、検索エンジン最適化（SEO）だけでなく、すべてのユーザーに情報を正しく伝えるために不可欠な要素です。

特に画像や図表、プログラムのコードといった独立したコンテンツを扱う際、<figure>要素と<figcaption>要素の活用は、文書構造を明確にする上で極めて重要な役割を果たします。

本記事では、2026年現在の最新Web標準に基づいたこれらのタグの正しい使い方から、アクセシビリティを最大化するための実装テクニックまで、具体的な例を交えて詳しく解説します。

セマンティックなHTMLマークアップをマスターすることで、より堅牢で使いやすいWebサイトの構築を目指しましょう。

figureタグとfigcaptionタグの基本概念

<figure>要素は、本文の流れから参照されるものの、それ自体が独立した一つのまとまりとして成立するコンテンツを示すために使用されます。

例えば、記事の中で解説している図、写真、図表、あるいはソースコードの断片などがこの要素の対象となります。

この要素の最大の特徴は、その内容がドキュメントのメインフローから切り離されても、コンテンツとしての意味が損なわれないという点にあります。

一方、<figcaption>要素は、<figure>要素の中に含まれるコンテンツに対して、説明的なタイトルや注釈（キャプション）を付与するために使用されます。

これまで、画像のキャプションを<p>タグや<span>タグで代用していたケースが多く見られましたが、セマンティックな観点からは<figcaption>を用いるのが正解です。

<figure>と<figcaption>をセットで活用することで、ブラウザやスクリーンリーダーは「この画像とこのテキストは関連している」という親子関係を正確に認識できるようになります。

HTML5から導入されたこれらの要素は、2026年の今日においても、構造化データとしての価値を維持し続けています。

正しい記述方法とシンタックス

<figure>要素を使用する際は、その内部に画像や動画、あるいはコードブロックを配置し、必要に応じて<figcaption>を1つだけ記述します。

基本的な構造は以下のコードのようになります。

<!-- 基本的なfigureタグの構成 -->
<figure>
  <img src="example-image.jpg" alt="富士山の山頂から見たご来光の様子">
  <figcaption>図1：山頂から望む美しい日の出</figcaption>
</figure>

上記のコードでは、画像とその説明がセットになっており、文書構造として非常に明確です。

<figcaption>要素は、<figure>内の最初、もしくは最後のいずれかに配置することが推奨されています。

どちらに配置しても文法上は問題ありませんが、視覚的なデザインやユーザー体験に合わせて選択してください。

また、一つの<figure>要素の中に、複数の画像を含めることも可能です。

<!-- 複数の画像に一つのキャプションを付ける例 -->
<figure>
  <img src="image-a.jpg" alt="フロントエンドの開発画面">
  <img src="image-b.jpg" alt="バックエンドの設計図">
  <figcaption>システム開発における各レイヤーの構成図</figcaption>
</figure>

このように記述することで、複数の視覚情報に対して一つの共通した説明を与えることができます。

注意点として、<figcaption>は<figure>要素の中に2つ以上含めてはいけません。

アクセシビリティを高めるマークアップのポイント

アクセシビリティを考慮する場合、スクリーンリーダーがどのようにこれらの要素を解釈するかを理解しておく必要があります。

多くのスクリーンリーダーは、<figure>を「グループ」や「図」として認識し、<figcaption>の内容をそのラベルとして読み上げます。

これにより、視覚障碍を持つユーザーも、画像が何を意味しているのかを正確に把握できるようになります。

さらに明示的に関連付けを強化したい場合は、aria-labelledby属性を使用する方法もあります。

<!-- ARIA属性を用いたアクセシビリティの強化 -->
<figure aria-labelledby="caption-01">
  <img src="chart.png" alt="2025年度の売上推移グラフ">
  <figcaption id="caption-01">2025年度の月別売上レポート</figcaption>
</figure>

現代のブラウザでは標準的なタグだけで十分に解釈されますが、複雑なレイアウトを組む場合にはこうした支援技術への配慮が効果的です。

また、figure要素を単なる装飾目的で使用しないことも重要なアクセシビリティ指針の一つです。

本文の理解に不可欠な情報が含まれる場合にのみ、これらのタグを適用するようにしましょう。

alt属性とfigcaptionの使い分け

初心者の方が迷いやすいポイントとして、<img>タグのalt属性と、<figcaption>の役割の違いが挙げられます。

alt属性は、画像が表示されない場合の代替テキストであり、画像そのものが伝えている視覚情報を言語化するものです。

一方で<figcaption>は、その画像に対する補足説明やタイトルであり、画像と一緒に表示されることを前提としたテキストです。

以下の表で、それぞれの役割の違いを確認してみましょう。

もし<figcaption>で画像の内容を詳細に説明している場合、alt属性の内容をあえて簡潔にしたり、空（alt=""）にしたりすることも検討されます。

ただし、基本的には「altは画像の内容を」「figcaptionは図としてのラベルを」書くという使い分けを推奨します。

画像以外のコンテンツへの応用

<figure>タグは画像専用の要素ではありません。

セマンティックなマークアップとして、プログラムのソースコードや引用文にも活用できます。

特に技術ブログなどでは、コードブロックに説明を付ける際に非常に役立ちます。

<!-- プログラムコードにキャプションを付ける例 -->
<figure>
  <figcaption>リスト1：JavaScriptによる配列のソート処理</figcaption>
  <pre><code data-lang="javascript">
const numbers = [5, 2, 8, 1];
numbers.sort((a, b) => a - b);
console.log(numbers);
  </code></pre>
</figure>

上記のコードを実行した際の結果も、同様に表現することができます。

[1, 2, 5, 8]

このように、コードの断片に対して「何を示しているのか」を明確に提示することで、読者の理解を助けることができます。

また、長い引用（<blockquote>）に対して、その出典を明記する際にも<figure>が適しています。

<figure>
  <blockquote cite="https://example.com">
    <p>Webの力は、その普遍性にあります。</p>
  </blockquote>
  <figcaption>— ティム・バーナーズ＝リー, <cite>W3C公式声明</cite>より</figcaption>
</figure>

この構成にすることで、引用内容と出典情報が論理的に結合され、非常に美しいHTML構造となります。

CSSによるスタイリングの基本

デフォルトの状態では、<figure>要素にはブラウザ固有の余白（margin）が設定されています。

意図したデザインを実現するためには、CSSでリセットまたは適切な調整を行う必要があります。

特に、モダンなレイアウトでは、display: flex; や display: grid; を用いてキャプションの位置を柔軟に制御することが一般的です。

/* figureのスタイル調整例 */
figure {
  margin: 2rem 0;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #f9f9f9;
}

/* キャプションのスタイル */
figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  font-weight: bold;
}

また、レスポンシブデザインにおいては、画像が親要素からはみ出さないように max-width: 100%; を設定しておくことが重要です。

<figcaption>に対しても、長いテキストが入った場合に備えて line-height を適切に設定すると、読みやすさが向上します。

視覚的な装飾を施すことで、ユーザーはどこが補足説明なのかを一目で判断できるようになります。

実装時に避けるべき一般的なミス

<figure>を使用する上で、避けるべき間違いがいくつか存在します。

まず、すべての画像を一律にfigureで囲んでしまうことは推奨されません。

例えば、文章の途中に挿入される小さなアイコンや、純粋な装飾用の背景画像などは、<figure>の対象外です。

それらはあくまで「文章の一部」または「装飾」であるため、通常の<img>タグのみを使用するか、CSSで処理すべきです。

次に、<figcaption>を<figure>の外に記述してしまうミスも散見されます。

キャプションは必ず親要素である<figure>の中に含まれていなければならず、外に出すと親子関係が解消されてしまいます。

また、キャプションの中身が空のまま放置されることも、アクセシビリティの観点からは望ましくありません。

意味のあるラベルを付けることができないのであれば、<figcaption>自体を記述しないという選択をすべきです。

さらに、<figure>をレイアウトの目的（単に余白を作りたいなど）で使用することも避けてください。

HTML要素は見た目のためではなく、常にそのコンテンツの「意味」に基づいて選択されるべきだからです。

SEOへの影響とメリット

適切なHTML構造は、検索エンジンがコンテンツの内容を理解する際の手助けとなります。

Googleなどの検索エンジンは、<figcaption>の内容を、その画像に関連する重要なキーワードとして認識する傾向があります。

これにより、画像検索結果でのランキング向上や、ページ全体のテーマ性の強化が期待できます。

また、構造化されたデータは、将来的なAIによるコンテンツ解析においても有利に働きます。

2026年のWeb検索環境では、情報の信頼性と正確な構造化がより厳しく評価されるようになっています。

正しいタグ使いを徹底することは、長期的なWebサイトの価値を高める投資と言えるでしょう。

ユーザーにとっても、画像に適切なタイトルが付いていることは、情報の取捨選択を容易にする大きなメリットとなります。

まとめ

<figure>要素と<figcaption>要素は、Webページ内の独立したコンテンツを論理的に構造化するための強力なツールです。

画像、図表、コード、引用といった多様な要素に適用でき、アクセシビリティとSEOの両面で大きな効果を発揮します。

実装の際は、<figcaption>を正しく親子関係の中に配置し、alt属性との役割の違いを意識することが大切です。

また、単なるデザインパーツとしてではなく、情報のまとまりを示すセマンティックな意味を重視して活用してください。

本記事で紹介したルールと実践例を参考に、より正確でユーザーフレンドリーなHTMLマークアップを日々の開発に取り入れていきましょう。

正しいマークアップの積み重ねが、誰にとってもアクセスしやすく、価値のあるWebサイトの実現につながります。