目次
- figureタグとは？
- なぜ figure を使うの？
- ① 画像と説明文の関係が明確になる
- ② アクセシビリティ向上
- ③ デザインしやすい
- figure の基本構造
- figure を使うべき場面
- ① ブログ記事の中の写真・図解
- ② グラフ・統計データ
- ③ 商品ページの画像＋キャプション
- ④ 図・説明図・UI説明など
- figure を使わない方がよい場面
- 単なる装飾画像（説明不要）
- ボタン画像やバナー画像
- 画像の説明が本文で完結している場合
- figcaption の書き方のコツ
- 画像を補足する一言を入れる
- 画像の内容と違うことを書かない
- alt と重複しすぎない
- 実務でよく使う CSS 例
- figure を使ったコンテンツ例（ブログ版）
- まとめ
figureタグとは？
<figure> タグは、画像・図・イラストなどの“まとまり（セット）”を表すセマンティック要素です。
そのセットに対して説明文が必要な場合に使います。
セットは通常、以下の2つで構成されます。
- figure：画像（または図）を包む枠
- figcaption：その説明文
例：
<figure>
<img src="room.jpg" alt="活動ルームの写真">
<figcaption>活動ルームの様子</figcaption>
</figure>なぜ figure を使うの？
① 画像と説明文の関係が明確になる
Googleに
「この説明文はこの画像に対するものですよ」
と伝えられるため、SEO・構造化に有利。
② アクセシビリティ向上
スクリーンリーダーが読み取りやすくなる。
③ デザインしやすい
画像と説明をセットで扱えるため、CSSがすっきりする。
figure の基本構造
<figure>
<img src="photo.jpg" alt="説明文">
<figcaption>画像の説明文</figcaption>
</figure>figcaption は 必須ではない ですが、
説明が必要な画像では付けるのがベスト。
figure を使うべき場面
① ブログ記事の中の写真・図解
<figure>
<img src="event.jpg" alt="夏祭りイベントの様子">
<figcaption>夏祭りイベントでの制作活動</figcaption>
</figure>記事本文とは独立した説明が適切な場合に最適。
② グラフ・統計データ
<figure>
<img src="graph.png" alt="年度別利用者数のグラフ">
<figcaption>年度別利用者数の推移（2020〜2025）</figcaption>
</figure>データと説明をセットにできる。
③ 商品ページの画像＋キャプション
<figure class="product-photo">
<img src="pen.jpg" alt="本革ペンケースの外観">
<figcaption>本革ペンケース／ダークグリーン</figcaption>
</figure>商品名や説明を付けるのに最適。
④ 図・説明図・UI説明など
<figure>
<img src="layout.svg" alt="ページレイアウト図">
<figcaption>トップページのレイアウト構造</figcaption>
</figure>figure を使わない方がよい場面
単なる装飾画像（説明不要）
区切り線・背景・飾りアイコンなどは意味がないので不要。
<img src="deco.svg" alt="">figure で包む意味も alt 説明文も不要。
ボタン画像やバナー画像
説明が要らないケースが多い。
<a href="/contact/">
<img src="btn.png" alt="お問い合わせはこちら">
</a>figure で包む必要はない。
画像の説明が本文で完結している場合
本文と画像が密接で説明文が不要なら figcaption も figure も不要。
figcaption の書き方のコツ
画像を補足する一言を入れる
長文説明は不要。短くてOK。
画像の内容と違うことを書かない
事実を簡潔に。
alt と重複しすぎない
- alt → “画像そのものの説明”
- figcaption → “画像に対する補足説明”
実務でよく使う CSS 例
figure {
margin: 24px 0;
text-align: center;
}
figure img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
figure figcaption {
margin-top: 8px;
font-size: 0.9em;
color: #666;
}figure を使ったコンテンツ例（ブログ版）
<article class="post">
<h1>春の活動レポート</h1>
<p>今日は公園での活動を行いました。</p>
<figure>
<img src="spring.jpg" alt="公園で遊ぶ子どもたち">
<figcaption>春の日差しの中での公園活動</figcaption>
</figure>
<p>午後は室内で制作活動を行いました。</p>
</article>記事の読みやすさと構造性が大きく向上します。
まとめ
- figure＝画像と説明文の“セット”を表すタグ
- figcaption＝説明文（必要なときだけ使う）
- ブログ、商品ページ、図解、グラフに最適
- 装飾画像やボタンには不要
- alt＝画像の説明／figcaption＝補足説明
→ 役割が違うので併用がベスト
まずは記事中の重要な写真を
<figure> で包むところから始めると、
読みやすさとSEOが大きく改善します。