htmlタグ｜figure（フィギュア）・figcaption｜画像や図表と説明文

ホームページ（ウェブサイト）制作において、文章だけで情報を伝えるのではなく、写真や図表、イラストなどの視覚的なコンテンツを組み合わせてユーザーの理解を深めることは非常に重要です。その際、画像や図表と、それに付随する説明文（キャプション）をひとつのグループとして構造化するために使用されるのが、HTMLの「figure」タグと「figcaption」タグです。

「figure」タグは、メインの文章から参照される独立したコンテンツ（図表、写真、グラフ、コードのまとまりなど）を囲むために使用します。そして、その「figure」タグの中に「figcaption」タグを配置することで、その図表に対するキャプション（説明やタイトル）を記述します。かつてのホームページ（ウェブサイト）制作では、画像の下に単なる段落（pタグ）としてテキストを並べる手法が一般的でしたが、現在ではこれら2つのタグを組み合わせることで、画像と説明文が明確に紐づいていることを検索エンジンやブラウザへ正確に伝えることができます。

このマークアップ手法はSEO（検索エンジン最適化）とWebアクセシビリティの両面で大きなメリットをもたらします。検索エンジンのクローラーは、ページ内の画像を解析する際、imgタグのalt属性（代替テキスト）だけでなく、周囲のテキストやfigcaptionの内容も重要な手がかりとして読み取ります。figureとfigcaptionを用いて画像の意味づけを強化することで、画像検索などからの流入を増やし、ページ全体のコンテンツ品質を高く評価させることが可能になります。また、音声読み上げソフト（スクリーンリーダー）を利用しているユーザーに対しても、画像とその説明がセットであることを明確に伝達できるため、すべての人にとって分かりやすい情報提供が実現します。

事業用のホームページ（ウェブサイト）において、製品の細部を伝える写真や、サービス内容を図解したコンテンツは、ユーザーの購買意欲や問い合わせへのモチベーションを大きく左右します。本ページでは、「figure」タグと「figcaption」タグの基本的な記述ルールから、CSSを活用した美しいキャプションのデザイン手法、そして集客に強いサイトを構築するための適切な画像配置について詳しく解説します。

figure（フィギュア）

<figure></figure>

ホームページ制作（ウェブサイト制作）の際に使用する<figure>タグについてのご説明です。

ホームページ制作において<figure>（フィギュア）タグは、ページ内のタグで囲まれた箇所が「参照図表」として図表（イラスト・図・写真・ソースコードなど）であることを示す場合に使用します。

<figure> 図表

figure。フィギュア。<figure>タグは、ホームページ（ウェブサイト）の文書（ウェブページ）の本文から参照される図表（イラスト・図・写真・ソースコードなど）であることを示します。

<figure>により、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。

figure（フィギュア）は、おもちゃのフィギュアのイメージがありますが、外観、図などという意味があります。HTMLにおいては、参照図表という意味になります。

<figure>要素は、デフォルトで「figure」という暗黙のARIAロールを持っています。そして、内部に<figcaption>を配置することで、そのテキストが自動的に図表のアクセシブルな名前（Accessible Name）として音声読み上げソフトなどに伝達されます。もしデザインの都合で<figcaption>を配置できない場合は、「aria-label」や「aria-labelledby」属性を用いて代替の説明を指定することで、同等のアクセシビリティを確保できます。

読み方　フィギュア

<figure></figure>

この<figure>タグおよび<figcaption>タグは、現在のウェブ標準であるHTML Living Standardにおいて、図表とそのキャプションを構造化するための標準的な要素として定義されています。現代の主要なウェブブラウザや、標準的なテーマを採用したWordPressなどのCMSでは、すべて標準でサポートされています。過去の古い規格（HTML4等）で構築された非常に古いホームページ（ウェブサイト）を除き、現在の事業用ホームページ制作においては積極的に活用していくべき重要なタグです。

figureタグによる検索エンジンへのコンテキスト伝達

検索エンジンは日々進化していますが、テキスト情報と比較して、画像そのものの内容を完全に理解することはまだ発展途上の段階にあります。そのため、画像の周囲にあるテキスト、特に画像に直接関連付けられたキャプションを重要な判断材料として利用しています。SEOの観点からfigureタグがどのように機能するのかを紐解きます。

画像検索の順位を左右する文脈の明示化

従来のdivタグやpタグで画像を囲む方法では、画像とテキストの関係性がプログラム的に明確ではありませんでした。しかし、figureタグ内に画像とfigcaptionタグを配置することで、「このテキストは間違いなくこの画像の説明である」と検索エンジンに強くアピールできます。
結果として、Google画像検索などにおいて、狙ったキーワードで適切にインデックスされやすくなります。これは、事業に関連する写真や図解を検索結果に露出させる上で非常に有効な手段です。画像と関連テキストをひとつの意味的なブロックとして認識させることで、検索エンジンのクローラーはページの内容をより正確に把握するようになります。

ホームページ制作・SEOの1ポイント

HTML5からは、各要素の属性の指定が細かくできるようになったため、検索エンジンの理解を深めるのに役立ちます。外観としてはそれほどの変化は感じられないため、こうした細かな figure などの設定のタグは省略されがちですが、きちんと設定すればするほど、検索エンジンからの評価も高まり、検索結果順位の上昇に貢献してくれるでしょう。

figcaption

<figcaption></figcaption>

ホームページ制作（ウェブサイト制作）の際に使用する<figcaption>タグについてのご説明です。

ホームページ制作において<figcaption>（フィグキャプション）タグを使用することにより図表のキャプションを指定することができます。

<figcaption> 図表のキャプション

<figcaption>タグは、ホームページ（ウェブサイト）内の図表のキャプションを示します。ホームページ制作においてウェブページに設置されたフィギュア（図表）に対してキャプションを設置します。

<figure>～</figure>に<figcaption>タグを配置すると、図表にキャプションを付けることができます。

HTML Living Standardの仕様において、<figure>タグの内部に<figcaption>タグを配置する場合、その位置は<figure>要素内の「最初の子要素」または「最後の子要素」のいずれかでなければなりません。複数の画像やテキストが<figure>内に含まれる場合でも、途中にキャプションを挟み込むことは仕様違反となります。

また、ひとつの<figure>要素に対して配置できる<figcaption>は1つだけです。事業の魅力を伝えるために複数の画像をグループ化する際も、全体のタイトルや説明として1つの<figcaption>を最初か最後に配置する構成を徹底します。

<figcaption></figcaption>

alt属性とfigcaptionタグの明確な役割分担

画像をマークアップする際によく混同されるのが、imgタグのalt属性（代替テキスト）とfigcaptionタグの違いです。alt属性は、画像が表示されなかった場合や、音声読み上げソフトを使用しているユーザーに対して、画像が「何であるか」を説明するためのものです。一方でfigcaptionタグは、画像が表示されている前提で、その画像が文脈において「何を意味しているか」を補足する役割を持ちます。例えば、グラフの画像に対して、alt属性には「2026年度の売上推移グラフ」と客観的な事実を記述し、figcaptionタグには「図1：前年比120%の成長を記録した第3四半期の売上推移」といった具体的な分析や解説を記述します。両者を正しく使い分けることで、検索エンジンにもユーザーにも質の高い情報を提供できます。

ホームページ制作・SEOの1ポイント

図表のキャプションは、このタグを付けなくても画像のすぐ下などにテキストを加えることで、ユーザーとしては、キャプションとしての意味を捉えることができるでしょう。しかしながら、きちんとSEOを意識して画像に関連したテキストとしてキャプションを設定することで、画像検索などでの関連性が高まりやすくなります。

複雑なコンテンツをグループ化する高度な実装例

figureタグは画像専用のタグと思われがちですが、HTMLの仕様では「自己完結したコンテンツ」をグループ化するためのものと定義されています。ソースコード、表（テーブル）、引用文、動画など、本文の流れから少し独立しつつも関連性のあるコンテンツに対して幅広く活用できます。

ソースコードとキャプションを美しくまとめるマークアップ

IT系やWeb制作関連のホームページ（ウェブサイト）において、ソースコードの解説を行う場面は頻繁に発生します。この際、preタグとcodeタグの組み合わせをfigureタグで囲み、figcaptionでファイル名やコードの概要を記述することで、非常に整理された構造を作ることができます。以下は、ソースコードを扱う際のマークアップ例です。

<figure class="code-block">
<figcaption>style.css - フッターのレイアウト調整</figcaption>
<pre>
<code>
.site-footer {
display: flex;
justify-content: space-between;
padding: 2rem 0;
}
</code>
</pre>
</figure>

このように記述することで、ユーザーにとってどのファイルのコードなのかが一目でわかるようになります。デザインを調整する際も、figureタグを基準にしてボーダーを引いたり、背景色を設定したりできるため、CSSによるスタイリングも容易になります。

表組み（テーブル）に補足情報を付与する適切な手法

事業の料金表やスペック比較表など、tableタグを使用する際にもfigureタグは活躍します。tableタグ自体にもcaptionタグという専用のタイトル付け要素が存在しますが、table要素全体をfigureタグで囲み、figcaptionを使用することで、表の下部に補足説明を加えたり、レスポンシブデザイン時の横スクロール領域を明確に定義したりすることが容易になります。

<figure class="table-wrapper">
<table>
<tr>
<th>プラン名</th>
<th>料金</th>
</tr>
<tr>
<td>スタンダードプラン</td>
<td>月額10,000円</td>
</tr>
</table>
<figcaption>※料金はすべて税抜き表示です。別途初期費用が発生します。</figcaption>
</figure>

この構造であれば、表に対する注意事項をfigcaption内にすっきりと収めることができ、情報のまとまりが視覚的にもプログラム的にも保たれます。スマートフォンでの閲覧時にも、表と注釈が分離してしまうトラブルを防ぐ効果があります。

WordPressにおけるfigureタグの扱いの最適化

WordPressを使用してホームページ（ウェブサイト）を構築・運用する場合、figureタグの扱いは非常に重要になります。特に現在の主流となっているブロックエディタ（Gutenberg）では、このタグがシステムの中核的な要素として利用されています。

テーマ機能によるHTML5マークアップの有効化

WordPressでfigureタグやfigcaptionタグをシステムレベルで正しく出力させるためには、使用しているテーマがHTML5の機能要件をサポートしている必要があります。多くの最新テーマでは標準で対応していますが、独自で制作したテーマや古いテーマを使用している場合、functions.phpに特定のコードを追記して、HTML5形式の出力を明示的に許可しなければなりません。以下は、テーマに対してHTML5のギャラリーやキャプションのサポートを追加するPHPの記述例です。

function mytheme_setup() {
add_theme_support( 'html5', array(
'gallery',
'caption',
'style',
'script'
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

この設定を行うことで、WordPressは画像を挿入した際に古い仕様のマークアップではなく、正しいfigureタグとfigcaptionタグを使用してHTMLを出力するようになります。ホームページ（ウェブサイト）の基盤部分でこの設定が漏れていると、最適なHTML構造になりません。

ブロックエディタによる自動マークアップとCSSスタイリング

ブロックエディタの「画像ブロック」や「埋め込みブロック」を使用すると、WordPressは自動的にfigureタグを用いてマークアップを行います。画像ブロックの下部に入力したキャプションは、そのままfigcaptionタグとして出力されます。これらのタグには通常「wp-block-image」などの固有のクラス名と、キャプション部分には「wp-element-caption」というクラス名が付与されます。以下は、WordPressが出力する画像ブロックを想定したCSSの調整例です。

/* WordPressの画像ブロック全体の調整 */
.wp-block-image {
margin-bottom: 2.5em;
text-align: center;
}

/* 画像自体の調整 */
.wp-block-image img {
max-width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* キャプションの調整 */
.wp-block-image .wp-element-caption {
margin-top: 0.8em;
font-size: 0.85em;
color: #666666;
line-height: 1.6;
text-align: center;
}

このように独自のクラス名に対してスタイルを定義することで、管理画面のエディタから入力された画像とキャプションが、常に美しいレイアウトで表示されるようになります。

YouTubeや外部メディアの埋め込みにおける活用

WordPressでは、YouTubeの動画やX（旧Twitter）の投稿を埋め込む際にもfigureタグが自動的に使用されます。「wp-block-embed」というクラスが付与されたfigureタグが生成され、その中にiframeなどの外部コンテンツが格納されます。外部プラットフォームのコンテンツであっても、自社のホームページ（ウェブサイト）の文脈においてどのような意味を持つのかをfigcaptionタグで補足することは非常に重要です。動画の下にfigcaptionで動画の目次やポイントを記載することで、動画を視聴できない環境にいるユーザーにも情報が伝わり、アクセシビリティが向上します。

事業の成果を最大化するコンテンツ構造の設計

ホームページ（ウェブサイト）を単なる情報の置き場にするのではなく、事業の売上や集客といった具体的な成果へとつなげるためには、コンテンツの構造設計が極めて重要になります。情報のグループ化が事業の信頼性にどう貢献するかを解説します。

事例紹介ページにおけるビジュアルと解説の統合

BtoB事業や建築、デザイン関連の事業において、過去の施工実績や納品事例を掲載するページは、見込み客が最も重視するコンテンツの一つです。こうしたページで事例の写真を羅列するだけでは、ユーザーに十分な価値を提供できません。

それぞれの写真に対してfigureタグを適用し、figcaptionタグで「どのような課題を解決するための施策だったのか」「どのような工夫が施されているのか」といった具体的な解説を加えることがポイントになります。テキストとビジュアルが意味的に強く結びつくことで、ユーザーの理解度が深まり、事業に対する信頼感が高まっていきます。

ユーザーの直帰率を防ぐ視覚的なフックとしての役割

ホームページ（ウェブサイト）にアクセスしたユーザーは、最初の数秒でそのページを読むか離脱するかを判断します。直帰率を下げるためには、テキストの合間に適切なタイミングで視覚的な引っ掛かりを配置することが効果的です。単に装飾のための画像を置くのではなく、ユーザーの疑問に対する回答となるような図解やインフォグラフィックを配置し、そこに端的なキャプションを添えます。

キャプションでユーザーの興味を引きつけることができれば、再び本文へと視線を戻し、結果としてページへの滞在時間が延びます。滞在時間の延長はユーザー行動データとして検索エンジンに良いシグナルを送り、間接的なSEO効果も期待できます。

スクリーンリーダーへの配慮とWAI-ARIAの視点

視覚に障害を持つユーザーが利用するスクリーンリーダー（音声読み上げソフト）にとっても、figureタグとfigcaptionタグの組み合わせは大きな意味を持ちます。これらのタグが正しく使われている場合、多くのスクリーンリーダーは「ここから図表が始まります」「図表のキャプションは以下の通りです」といった音声ガイダンスを提供します。これにより、ユーザーはページ内のどこに視覚的な情報が配置されているのかを音声情報から構造的に理解できるようになります。

すべてのユーザーに対して等しく情報を届けるというWebアクセシビリティの観点からも、単なるデザインの都合ではなく、意味を持ったHTMLタグの選択が求められます。事業としての社会的責任を果たす上でも、正しいマークアップの実践は欠かせません。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法