figcaption要素とは？図のキャプションを整える初心者向けガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

figcaption要素とは？

figcaption要素は、図や表の説明文を表示するためのHTML要素です。正しく使うと、視覚だけでなく意味情報も伝えられ、検索エンジンにも理解されやすくなります。

基本の使い方

figcaptionは通常、figure要素とセットで使います。figureは図や画像、グラフなどを包む容器で、figcaptionで説明を付けます。使い方の基本パターンは次のとおりです。<figure><img src='path/to/image.jpg' alt='代替テキスト'><figcaption>この画像の説明文です。</figcaption></figure>

実例と意味

上のコードは、画像とその説明を同じグループにまとめ、読者にも機械にも内容を伝えられるようにします。figcaptionのテキストは長くても短くても良いですが、画像が何を示しているかを明確に伝える内容にするとよいです。

アクセシビリティとSEOの観点

アクセシビリティの観点から、alt属性は画像そのものの内容を短く伝え、figcaptionは図全体の説明や補足情報を提供します。SEOの観点では、図に関連するキーワードを自然に配置することでページ全体の関連性が高まり、検索結果の品質が向上します。

表現の工夫とコツ

コツ1: すべての図にキャプションをつけると、読者が理解しやすくなります。

コツ2: figcaption は長すぎず、要点を簡潔に伝えるのがベターです。

コツ3: alt と figcaption の両方を活用して、情報の伝達を強化します。

表で覚えるfigcaptionの役割

要素	役割	ポイント
figure	図・グラフの全体を包む容器	アクセシビリティの基盤
img	視覚的な要素そのもの	alt 属性で代替情報を提供
figcaption	図の説明・補足情報	読者に追加の意味を伝える

figcaption要素の同意語

figcaption要素: HTMLのfigure要素内で図の説明を表示するための要素。図に対するキャプションとして機能します。
図のキャプション要素: 図の説明テキストを表示するためのHTML要素。
内に置かれ、図を説明します。
図のキャプション: 図に付ける説明文そのもの。HTMLでは通常figcaptionが担います。
図の説明要素: 図の説明文を格納・表示するためのHTML要素。図の説明を提供する役割。
図の説明文を格納する要素: 図の説明テキストを格納するための要素。
がこの役割を担います。
図の注釈要素: 図に対する補足説明を表示する要素。キャプションの一種として機能します。
キャプション要素: 図や画像の説明テキストを表示する要素。figcaptionの機能を指す一般名として使われます。
画像のキャプション: 画像に付ける説明文を表示するキャプションテキストを含む要素。
が該当します。
figure内の説明テキストを格納する要素: 要素内で図の説明文を格納・表示する役割を持つ要素。
図説要素: 図に対する説明文を提供する要素。特に教育的資料などで使われる表現の一つ。
図の説明テキスト要素: 図の説明テキストを格納して表示する要素。figcaptionとして機能します。

figcaption要素の対義語・反対語

キャプションなし: 図にはキャプションが付いていない状態。説明文が図に対して提供されていないことを指します。
figcaption要素なし: 図の中に figcaption 要素が存在しない状態。HTML上でキャプションの要素が使われていないことを指します。
図の見出しなし: 図に見出し・説明文が付いていない状態。キャプションが未設定の状態を指します。
図のキャプションなし: 図にキャプションが付いていない状態。上記と意味はほぼ同義です。
キャプションあり: 図にはキャプションが存在する状態。図の説明が付いており、情報補足が行われています。
figcaption要素あり: 図に figcaption 要素が含まれており、HTML上でキャプションが提供されている状態。
図の見出し付き: 図に見出し・説明（キャプション）が付いている状態。図を識別しやすくします。
キャプション付き図: キャプションが付いた図。

figcaption要素の共起語

figcaption要素: figcaption要素は、
要素内に置く図の説明文を表示するHTMLの要素です。
figure要素: figure要素は、画像や図をグループ化してキャプションと一緒に扱うHTML5の要素です。
キャプション: キャプションは図や表の説明文のことで、figcaptionと同義の説明を指すことが多いです。
図: 図は画像・図版を指し、figcaptionはその図の説明文を表示します。
画像: 画像は図の主題で、figcaptionはその画像に対する説明を補足します。
セマンティックHTML: 意味づけされたHTMLのこと。figcaptionはコンテンツの意味を伝える役割を果たします。
アクセシビリティ: 視覚に頼らず情報を伝える工夫のこと。figcaptionは読み上げ内容の一部として役立ちます。
スクリーンリーダー: 視覚障害者が端末で読み上げる支援技術。figcaptionの説明は読み上げられます。
SEO: 検索エンジンが図の説明を理解する手掛かりになり得ます。キャプションは関連キーワードを伝える助けになります。
alt属性: 画像の代替テキストとして機能する属性。figcaptionとは補完的な説明役割を持つことが多いです。
aria-describedby: figcaptionを aria-describedby で参照することで、追加の説明を支援技術に伝えられます。
HTML5: figcaptionはHTML5で導入された要素です。
可読性: キャプションをつけることで、ページの読みやすさ・理解しやすさが向上します。
読み上げ順序: 図とキャプションの表示順序は、スクリーンリーダーの読み上げ順にも影響します。
図表: 図や表の説明を指す総称として使われることが多く、figcaptionはその説明を担います。

figcaption要素の関連用語

figcaption: figure要素内のキャプションを提供するHTML要素。親のfigureの第一子または最後の子として置かれ、図やグラフなどの説明文を読者に伝えます。1つのfigureにつき基本的に1つのfigcaptionを用います。
figure: 図・画像・グラフとキャプションをひとつの論理的グループとしてまとめるセマンティックHTML要素。imgやfigcaptionを含み、視覚だけでなく意味的にも図を構成します。
img: 画像を表示する要素。alt属性で代替テキストを提供し、レスポンシブ対応にはsrcsetやsizesを使うことが多いです。figcaptionは画像の説明を補足する役割を持ち、両方を組み合わせて情報伝達が強化されます。
alt属性: 画像を読み上げソースに代替するテキスト。視覚障害者が画像の内容を理解できるようにし、SEOにも影響します。
セマンティックHTML: 意味を明確にするHTMLの設計思想。figureとfigcaptionの組み合わせは、コンテンツの構造を機械にも読み取りやすくします。
アクセシビリティ: WCAGなどの指針に沿って、すべての利用者が情報へアクセスできる設計。figcaptionを適切に使うと読み上げ順と文脈が向上します。
aria-labelledby: 別の要素をラベルとして参照する属性。figcaptionのidを指定してfigcaptionを図のラベルとして結びつけることで、支援技術での解釈を安定化します。
aria-describedby: 補足説明を参照する属性。図の追加情報や注意点を支援技術に知らせるのに使われます。
longdesc属性: 長い説明を別ページなどにリンクする属性。HTML5では非推奨となっており、代わりにfigcaptionや別ページへのリンクを用いるのが推奨です。
caption要素: 表要素で用いられるキャプションを提供する要素。表の説明のための要素であり、図のキャプションとして使われるfigcaptionとは別用途です。
読み上げ順: スクリーンリーダーが読む順序。figcaptionをfigure内で適切に配置することで、図の説明が画像の直後か前後に正しく読み上げられます。
検索エンジン最適化(SEO): figcaptionを活用すると図の内容が検索エンジンに伝わりやすくなり、画像検索や総合検索の理解を助ける可能性があります。ただしalt属性の方が優先される場面もある点に注意。
figcaptionの配置ルール: figcaptionはfigureの子として、先頭または末尾に置くことができ、1つのfigureにつき基本的に1つだけ含めます。
図とキャプションの関係: 図そのものと説明文の結びつきを意味的に強化する概念。図の意味を補足するテキストとして機能し、読み手と検索エンジン双方に有利です。
SVGとfigcaption: SVG画像を含む場合でもfigcaptionを用いて図の説明を与えることができます。SVGはimg要素の代替として運用でき、captionと組み合わせて意味を伝えます。
使い方のベストプラクティス: 図には必ずalt属性を設定し、可能ならfigcaptionで説明を提供。長い説明は別ページへのリンクなどで補足します。