HTMLにおける画像とfigure要素 img・alt・figcaptionを使い分ける画像の意味論
画像を表示するだけならimg、意味のあるひとまとまりならfigure
HTMLで画像を掲載する場合、多くの人が最初に思い浮かべるのは`img`タグである。実際、Webページに画像ファイルを埋め込むための基本的な要素はimg要素であり、HTML文書の中に写真、イラスト、図版などを配置する際に利用される。 一方、HTML5以降では、画像を単に表示するだけではなく、「本文から独立した参照可能なコンテンツ」として扱うためにfigure要素を利用できる。 この違いは、単なるHTMLタグの書き方の問題ではない。Webページを「見た目の集合」として作るのか、それとも「意味構造を持った文書」として構築するのかという、HTMLマークアップそのものの考え方に関係している。 画像を表示するだけであれば、次のようなimg要素で成立する。 ```html <img src="/images/kyoto.jpg" alt="京都の町並み"> ``` しかし、その画像に説明文やキャプションが付随し、本文とは独立した図版として扱うのであれば、次のようなfigure要素を検討できる。 ```html <figure> <img src="/images/kyoto.jpg" alt="京都の町並み"> <figcaption>京都市内から見た町並み</figcaption> </figure> ``` つまり、imgは画像そのものを表現する要素であり、figureは画像などを含む「ひとまとまりの独立したコンテンツ」を表現するための要素である。imgタグは画像そのものをHTML文書に埋め込む
img要素は、画像をHTML文書に埋め込むための要素である。 基本形は次のようになる。 ```html <img src="/images/kyoto.jpg" alt="京都の町並み"> ``` src属性は画像リソースのURLを指定し、alt属性は画像の代替テキストを指定する。 ここで重要なのが、altは「画像について適当に説明する文章」ではないという点である。 代替テキストは、その画像を利用できない状況において、画像が担っている情報を代替するためのテキストである。 例えば、商品紹介ページで商品写真を掲載しているのであれば、 ```html <img src="/images/product.jpg" alt="木製の収納ボックス"> ``` のように、その画像が何を示しているのかを簡潔に伝えることができる。 一方、装飾目的だけの画像であれば、状況に応じて空のaltを使用する。 ```html <img src="/images/decoration.png" alt=""> ``` 重要なのは、「すべての画像に長い説明文を入れる」ことではなく、その画像がHTML文書の中でどのような情報的役割を持っているのかを判断することである。alt属性とSEOを混同しない
画像のalt属性はSEO施策として語られることが多い。しかし、キーワードを大量に詰め込む場所ではない。 例えば「京都 ホームページ制作 SEO Web制作会社」というキーワードを、画像とは無関係なのにalt属性へ詰め込んでも、適切なマークアップにはならない。 altの本質は、画像の情報をテキストで代替することである。 そのため、検索順位を意識する場合でも、まずアクセシビリティと文書構造を優先するべきである。 検索エンジンにページの内容を正確に理解してもらうためにも、画像周辺の本文、見出し、キャプション、altなどが、それぞれの役割を持って記述されていることが重要になる。 HTMLは装飾のための記号ではなく、コンテンツの意味を機械に伝えるためのマークアップ言語だからである。figure要素は「画像専用タグ」ではない
figureについて誤解されやすいのが、「画像を囲むためのタグ」という理解である。 確かに画像を囲む用途は非常に一般的だが、figureの役割は画像だけに限定されない。 HTMLの意味論としては、本文から参照される独立したコンテンツ、例えば図、写真、イラスト、グラフ、コード例などをひとまとまりとして扱う用途が考えられる。 例えばグラフであれば、次のような構造にできる。 ```html <figure> <img src="/images/access-chart.png" alt="月別アクセス数の推移を示すグラフ"> <figcaption>2026年1月から6月までのアクセス数推移</figcaption> </figure> ``` ここでは画像そのものだけではなく、「この図は何を示しているのか」というキャプションまで含めて一つの図版として扱っている。figcaptionは画像の説明文として重要な意味を持つ
figureと組み合わせて利用される代表的な要素がfigcaptionである。 figcaptionは、figureの内容を説明するキャプションを表す。 ```html <figure> <img src="/images/map.jpg" alt="店舗所在地を示した地図"> <figcaption>当社所在地へのアクセスマップ</figcaption> </figure> ``` ここで、altとfigcaptionは同じものではない。 altは画像を利用できない場合などに、画像が持つ情報を代替する役割を持つ。一方、figcaptionは、その図版について読者に補足情報を提供するキャプションである。 したがって、 ```html <img src="/images/store.jpg" alt="京都市内の店舗外観"> <figcaption>2026年8月撮影</figcaption> ``` のように、それぞれ異なる情報を担わせることができる。 この役割分担を理解せず、altとfigcaptionにまったく同じ文章を入れると、情報が重複する可能性がある。figureを使えばSEOが強くなるという単純な話ではない
Web制作では、HTML5のセマンティック要素を使用するとSEOに有利になるという説明がされることがある。 しかし、figureを使用しただけで検索順位が上昇するという考え方は適切ではない。 重要なのは、検索エンジンに対してページの構造やコンテンツの関係性を適切に伝えることである。 例えば、本文中で説明しているデータをグラフ化したのであれば、そのグラフをfigureとして整理し、figcaptionで内容を説明することで、文書としての構造を明確にできる。 このような意味論的なHTMLは、検索エンジンだけでなく、スクリーンリーダーなどの支援技術や、将来的なシステムによるコンテンツ解析にとっても意味を持つ。 セマンティックHTMLとは、見た目を変えるためにタグを選ぶのではなく、「このコンテンツは何なのか」という意味に応じてタグを選ぶ考え方である。divで囲むこととの違い
画像とキャプションをまとめるだけなら、divを使ってもCSS上は同じような表示を作ることができる。 ```html <div class="figure"> <img src="/images/example.jpg" alt="京都の町並み"> <p>京都市内の町並み</p> </div> ``` しかし、ここで使用されているdivには、それ自体に「この中身は図版である」という意味はない。 CSSによって見た目を同じにすることと、HTMLとして意味を正しく表現することは別の問題である。 ```html <figure> <img src="/images/example.jpg" alt="京都の町並み"> <figcaption>京都市内の町並み</figcaption> </figure> ``` と記述すれば、HTMLの構造としてfigureという意味を持たせられる。 この違いは、現在の画面上のデザインだけを見ていると分かりにくい。しかし、Webアクセシビリティ、コンテンツ解析、保守性などを考えると、意味のあるHTMLを記述することには価値がある。画像と本文の関係を考えてfigureを使う
すべての画像をfigureで囲む必要はない。 例えば、文章の途中に小さなアイコンを配置している場合や、単なる装飾画像である場合に、わざわざfigureを使用する必要はない。 一方、本文から切り離しても独立した図版として成立する写真やグラフ、図解などはfigureとの相性がよい。 例えばWebマーケティングの記事でアクセス解析のグラフを掲載するのであれば、図そのものが本文を補足する独立した情報となる。 ```html <figure> <img src="/images/analytics.png" alt="検索流入の推移を示すグラフ"> <figcaption>検索エンジンからの流入数の推移</figcaption> </figure> ``` このようにすると、「本文」と「本文を補足する図版」の関係をHTML上で整理できる。画像サイズとレイアウトもHTML設計の一部である
画像を適切にマークアップするだけでは十分ではない。Webページでは画像ファイルそのもののサイズも重要である。 高解像度の画像をそのままブラウザに読み込ませれば、画面上では小さく表示されていても、実際には大きなデータを通信することになる。 画像はテキストよりファイルサイズが大きくなりやすいため、Web用に適切なサイズへ最適化することが重要である。 また、画像の表示領域をHTML側で適切に示しておくことも重要になる。 ```html <img src="/images/example.jpg" alt="京都の町並み" width="1200" height="800" > ``` 幅と高さを明示しておけば、ブラウザが画像読み込み前から表示領域を把握しやすくなる。 これは画像読み込みによって周囲のコンテンツが移動するレイアウトシフトを抑えるうえでも重要である。loadingとdecodingは画像表示のパフォーマンスに関係する
画像が多いページでは、画像の読み込み方法についても考える必要がある。 例えばページ下部に配置された大量の画像を、ページを開いた瞬間にすべて読み込む必要はない。 そこで、次のような属性を利用する方法がある。 ```html <img src="/images/example.jpg" alt="京都の町並み" width="1200" height="800" loading="lazy" decoding="async" > ``` loading="lazy"は画像の遅延読み込みに利用でき、初期表示時に必要となるリソースを抑える考え方につながる。decoding="async"も画像のデコード処理に関係する属性である。 ただし、すべての画像に機械的にlazy loadingを付ければよいわけではない。 特にファーストビューの主要画像など、初期表示に重要な画像まで遅延読み込みにすると、かえって表示上の不利益が生じる可能性がある。 画像の位置と役割を見ながら、読み込み戦略を決める必要がある。figureとレスポンシブデザイン
現代のホームページでは、PCだけでなくスマートフォンやタブレットなど複数の画面サイズで画像を表示する。 そのため、figure自体の幅や余白だけでなく、内部の画像が親要素からはみ出さないように設計することも重要になる。 例えば、基本的なレスポンシブ対応として次のようなCSSが考えられる。 ```css figure { margin: 0; } figure img { max-width: 100%; height: auto; } ``` ただし、画像の表示サイズをCSSだけで縮小することと、通信する画像ファイルそのものを最適化することは別である。 10000px級の巨大画像をCSSで300pxに縮小して表示しても、通信時のデータ量が自動的に小さくなるわけではない。 したがって、画像ファイルの物理的なサイズ、圧縮率、フォーマット、表示サイズを総合的に考える必要がある。figureは「画像をきれいに配置するためのタグ」ではない
Web制作においてfigureを理解するとき、最も重要なのはCSS上の箱として考えないことである。 figureは、画像を中央揃えにするためのタグでも、画像の周囲に余白を付けるためのタグでもない。 それらはCSSの役割である。 figureの役割は、画像などのコンテンツを文書上の独立したまとまりとして意味付けることにある。 この区別を明確にしておくと、HTMLとCSSの役割分担も明確になる。 HTMLは「何であるか」を表現し、CSSは「どう見せるか」を担当する。 この原則を守ることは、セマンティックHTMLを考えるうえで基本的な発想である。figureの中身は画像だけとは限らない
figureは画像との組み合わせが圧倒的に多いが、その本質は「独立した参照可能なコンテンツ」をまとめることにある。 例えばコードサンプルを一つの図版的コンテンツとして扱ったり、データ表やグラフ、イラストなどをまとめたりすることも可能である。 そのため、「画像があるからfigure」「画像がないからfigureではない」という単純な判断ではなく、そのコンテンツが本文から独立した単位として扱えるかどうかを考えることが重要になる。 また、figureは記事本文から完全に切り離された無関係な要素を表すためのものでもない。 本文を補足する資料や、本文から参照される図版として機能することに意味がある。figureとfigcaptionの配置にも意味がある
figcaptionはfigureのキャプションを表すため、figure内に配置する。 例えば、 ```html <figure> <figcaption>施工事例</figcaption> <img src="/images/case.jpg" alt="住宅の外観を撮影した施工事例写真"> </figure> ``` のようにfigcaptionを画像の前に置くこともできる。 また、 ```html <figure> <img src="/images/case.jpg" alt="住宅の外観を撮影した施工事例写真"> <figcaption>施工事例：京都市内の住宅</figcaption> </figure> ``` のように画像の後に置くこともできる。 デザイン上の表示順はCSSで調整できるため、HTMLでは意味構造を優先して設計することが重要である。画像とfigcaptionに同じ情報を重複させない
アクセシビリティを考えるうえで、altとfigcaptionの役割を分けることは重要である。 例えば、 ```html <img src="/images/temple.jpg" alt="京都市内の寺院"> <figcaption>京都市内の寺院</figcaption> ``` とした場合、同じ情報が繰り返されることになる。 もちろん、状況によっては意図的な重複が必要になることもあるが、一般的には「画像の代替情報」と「図版の説明情報」を分けたほうが、より整理されたコンテンツになる。 例えば、 ```html <figure> <img src="/images/temple.jpg" alt="石造りの山門と境内を撮影した写真"> <figcaption>京都市内の寺院。2026年8月撮影。</figcaption> </figure> ``` とすれば、altでは画像そのものの内容を伝え、figcaptionでは撮影時期などの追加情報を伝えられる。装飾画像と意味のある画像を区別する
Webサイトでは、背景的に利用する模様やアイコン、単なる装飾画像なども数多く存在する。 こうした画像と、本文の理解に必要な画像を同じように扱うべきではない。 例えば、見出しの横に配置した装飾用アイコンに詳細なaltを設定すると、スクリーンリーダー利用者にとって不要な情報が増える可能性がある。 逆に、製品写真や施工事例写真のように、画像自体が重要な情報を持っている場合には、適切なaltを検討する必要がある。 したがって、画像を掲載するたびに「この画像は何のために存在するのか」を判断することが必要になる。 これはアクセシビリティだけではなく、HTML設計そのものに関わる問題である。画像中心のホームページほどHTMLの意味構造が重要になる
企業ホームページでは、写真、製品画像、施工事例、店舗写真、スタッフ写真、グラフ、図解など、大量の画像が使われる。 しかし、画像を多用するほど、Webページが「画像の集合」になってしまう危険性もある。 ホームページは本質的には情報を伝えるための文書である。画像はその情報を補足したり、具体化したり、視覚的に伝えたりする重要なメディアではあるが、画像だけで文書構造が成立するわけではない。 そのため、見出し、段落、リスト、リンク、画像、figureなど、それぞれの役割を適切に使い分ける必要がある。 特に画像の内容が重要な意味を持つ場合には、altによる代替テキスト、本文による説明、必要に応じたfigcaptionなどを組み合わせることで、視覚情報に依存しすぎないページを構築できる。 HTMLを「ブラウザに見た目を出すためのコード」とだけ考えると、この部分が抜け落ちやすい。 HTMLは文書構造を記述するためのマークアップであり、画像についても「表示する」だけでなく、「その画像が文書の中で何を意味するのか」を考えることが重要なのである。画像を「素材」ではなく「コンテンツ」として扱う
ホームページ制作では、画像を単なるデザイン素材として扱ってしまうことがある。 しかし、商品写真、施工事例、店舗写真、アクセスマップ、調査結果のグラフなどは、単なる装飾ではなくコンテンツそのものである。 だからこそ、img、alt、figure、figcaptionを適切に使い分けることが重要になる。 単純な画像表示ならimg。 画像などを独立した図版としてまとめるならfigure。 図版の説明やキャプションを付けるならfigcaption。 そして画像を利用できない環境でも意味を伝える必要がある場合にはalt。 このように役割を分解して考えると、画像に関するHTML設計は単純な「画像の貼り付け」から、文書構造、アクセシビリティ、パフォーマンス、SEO、保守性を横断する技術領域であることが分かる。 Webページの見た目を整えるだけなら、画像を置いてCSSでサイズを調整すればよい。しかし、長期的に運用される企業ホームページを構築するのであれば、それだけでは不十分である。 検索エンジン、支援技術、ブラウザ、スマートフォン、そして将来的なコンテンツ解析までを考えれば、画像一つについても「何を表示するか」だけではなく、「HTML上で何を意味するのか」まで設計する必要がある。 画像を適切に扱うことは、Webデザインの細部ではない。HTMLを文書として正しく構造化するための、非常に重要なマークアップ設計なのである。htmlタグ｜figure（フィギュア）・figcaption 画像や図表と説明文
ホームページ制作（Web制作）の日常
ホームページ制作（Web制作）の日常。制作業務からコンサルまで。ホームページ制作(Web制作)、ホームページ作成 ホームページ制作会社、Webマーケティング会社 SEO会社 ホームページ作成会社 京都 ホームページ制作(Web制作)ホームページ制作 京都 ホームページ新規制作、WordPressサイト制作、SEO、Webマーケティング、Webコンサルティング、SEO対策・ホームページ修正（サイト修正）
PR