ホームページやブログを運営していると、「他サイトの画像や写真を自分のページで紹介したい」という場面がよくあります。
しかし、テキスト（文章）のHTML引用タグ blockquote で画像を転載していることがよくあります。
実は、画像の引用は文章の引用よりも扱いが厳しく、間違ったHTMLの書き方をしていると「無断転載（著作権侵害）」とみなされるリスクがあります。
正しく安全に画像を引用するためには、HTML5から導入された figure タグや figcaption タグ、さらには文章とセットで囲むための blockquote タグを適切に使いこなす必要があります。
ここでは、画像の無断転載トラブルを防ぐためのHTMLの正しい記述例はもちろん、コーダーが迷いがちな「alt属性とキャプションの書き分け」など、実務に直結するポイントを分かりやすく解説します。
HTMLで画像を引用する基本の書き方とタグの役割
ホームページで他サイトの画像を正しく「引用」する場合、単に画像を表示するだけでは不十分です。
HTMLには、画像とその説明（キャプション）が引用であることを検索エンジンやブラウザに正しく伝える必要があります。
また、画像を引用する際は、引用元や説明を適切に示すことが重要です。適切なHTMLタグを使用することで、画像と説明文の関係を明確にできるだけでなく、閲覧者や検索エンジンにも画像の意味や出典を伝えやすくなります。
特にSEOやアクセシビリティの観点からも、「figure」「figcaption」「img」などのタグを正しく使い分けることが重要です。」
画像引用の基本HTMLコード例
他サイトから画像を引用する際は、以下のHTMLコードの組み合わせが世界標準の正しい書き方です。まずはこのコードの形をそのまま覚えてしまいましょう。
● 基本のHTMLコード
| <figure> <img src=“https://example.com” alt=“引用画像の具体的な内容（グラフや写真の見た目）”> <figcaption>引用元：<a href=“https://example.com” target=“_blank” rel=“noopener noreferrer”>サイト名「記事タイトル」</a></figcaption> </figure> |
イメージ上記のようにコードを書くと、Webブラウザ上では以下のように表示されます。
 |
画像（<img>）のすぐ下に出典元のリンク（<figcaption>）が配置され、一目で「これは他サイトからの引用画像である」と分かる状態を作ることができます。
では、なぜわざわざこのようにいくつかのタグを組み合わせて書く必要があるのか、それぞれの具体的な役割を紐解いていきます。
figure（グループ化）と figcaption（キャプション）の役割
<figure> タグと <figcaption> タグは、HTML5から導入された「画像とその説明文を一つのまとまり（グループ）」として扱うための専用タグです。
画像を引用する際には、画像そのものだけでなく、説明や出典情報も合わせて管理できるため、SEOやアクセシビリティの観点からも重要な役割を果たします。
figureタグの役割
「figure」タグは、写真・イラスト・図表・グラフなど、本文から参照される独立したコンテンツをグループ化するためのタグです。
例えば、記事内で引用画像を掲載する場合は、画像と出典情報をfigureタグの中にまとめることで、HTMLの構造を明確にできます。
figcaptionタグの役割
「figcaption」タグは、figureタグ内に配置し、その画像に対する説明文（キャプション）やタイトル、出典情報を記載するためのタグです。
figcaptionに記載した内容は、通常のブラウザでは画像の下または上に表示されるため、サイト閲覧者も画像の説明や引用元を確認できます。
なぜfigcaptionで出典を書くのか
他人が作成した画像を引用する場合は、引用元を明示することが重要です。
日本の著作権法第48条では、著作物を引用する際に「出所の明示」が求められています。そのため、画像を引用する場合も、閲覧者が引用元を確認できる状態にしておく必要があります。
figcaptionを利用すると、画像と出典情報を近い位置に配置できるため、
・どの画像の出典なのか分かりやすい
・閲覧者が引用元を確認しやすい
・HTML構造としても適切に管理できる
といったメリットがあります。
ただし、出典を記載しただけで自由に画像を利用できるわけではありません。画像引用が適法と認められるためには、引用の必要性や主従関係など、著作権法上の引用要件を満たす必要があります。
blockquoteとciteとの関係に似ている
figureとfigcaptionの関係は、文章引用で使われるblockquoteとciteの関係に似ています。
文章の引用では、
<blockquote>
引用文
</blockquote>
<cite>引用元サイト名</cite>
のように出典を示します。
画像の引用では、
<figure>
<img src=”sample.jpg” alt=”引用画像”>
<figcaption>
出典：〇〇公式サイト
</figcaption>
</figure>
のように画像と出典を関連付けます。
厳密にはfigcaptionとciteは異なるHTML要素ですが、「引用したコンテンツに対して出典や補足情報を示す」という意味では共通する役割を持っています。
「画像を引用するときはfigureとfigcaptionをセットで使う」と覚えておくと理解しやすいでしょう。
imgタグで引用する際の注意点
<figure> の中で画像を表示させる <img> タグですが、他サイトの画像を引用する際にはいくつかの重要な注意点があります。
1. 画像の直リンク（直URL参照）は絶対NG
他サイトの画像URL（https://xn--eck7a6c192zevv.com?.jpg）をそのまま src 属性に読み込む行為は「直リンク（インラインリンク）」と呼ばれ、重大なマナー違反です。
相手サーバーの帯域（通信量）を勝手に消費してしまうため、必ず許可を取った上で画像をダウンロードし、自身のサーバーに保存して自社URLから出力してください。
また、引用元が画像を削除・変更した場合、自サイトでも画像が表示されなくなるリスクがあります。
画像を利用する場合は、利用規約や権利関係を確認したうえで、必要に応じて許諾を得て適切な方法で掲載することが重要です。
2. cite 属性の活用
必須ではありませんが、<figure> または <img> タグに cite 属性を付与することで、検索エンジンなどのロボットに対して引用元のURLを機械的に伝えることができます。
html
<figure cite=”https://example.com”>
画像の「alt属性」と「キャプション」の正しい扱い方・書き分け
画像引用時によく混同されるのが、「alt属性」と「キャプション（figcaption）」です。
両者は、画面に見えるか見えないかという点で、役割がまったく異なります。
| 属性・タグ | 主な役割 | 記述する内容の目安 | 閲覧者への見え方 |
|---|---|---|---|
| alt 属性 | 画像が表示されない時の代わり。検索エンジンへの説明。 | 「何が写っているか」を客観的に説明する（例：alt=”2026年度の国内EC市場規模の推移グラフ”） | 原則、見えない（音声読み上げやエラー時のみ） |
| figcaption | 著作権法上の「出所の明示」。 閲覧者への補足。 | 「引用元情報」や「画像への注釈」（例：引用元：○○省「電子商取引に関する市場調査」） | 画面上に常に表示される |
・alt属性は「ロボットや音声読み上げ」のため：
視覚障害のある方が使うスクリーンリーダーや、画像がリンク切れした際に表示される文章です。そのため、画像の見た目をそのまま言語化します。ここにいくら「引用元：〇〇」と書いても、通常の閲覧者の目には触れないため、著作権法上の「出所の明示」としては認められません。
・figcaptionは「人間の目（著作権対策）」のため：
画面上に常にテキストとして表示され、一般の読者が「これは引用画像なんだな」と理解するために使います。法律に則って正しく画像を引用するためには、必ず alt ではなく、この <figcaption> の中に著作権者名や出展元へのリンクを明記してください。
画像と説明文章をまとめて引用する場合
画像と説明文をセットで引用する場合はblockquoteとfigureを組み合わせる
他サイトから「画像」だけでなく、その画像に付随している「元サイトの解説文章」もセットで同時に引用したい場合があります。このように、画像と文章を一括で囲い込んで引用する場合は、<blockquote> タグの中に <figure> タグを配置するのが正しいHTMLの構造です。
読者と検索エンジンの両方に「ここからここまでが、他サイトのコンテンツを丸ごと引用したエリアである」と正しく伝えるための書き方を解説します。
HTMLコード例
| <blockquote cite=“https://example.com”> <! -- 先に元サイトの解説文章を引用 --><p>「ここに元サイトに掲載されていた解説文章をそのまま記述します。文章の引用ルールに則り、一言一句変更せずに掲載してください。」</p> <! -- 続けて、画像と出典元リンクをセットで配置 --><figure> <img src=“https://example.com” alt=“引用画像の具体的な内容”> <figcaption>画像・文章引用元：<a href=“https://example.com” target=“_blank” rel=“noopener noreferrer”>サイト名「記事タイトル」</a></figcaption> </figure> </blockquote> |
なぜ<blockquote>の中に<figure>を入れるのか？
HTMLのルールにおいて、<blockquote> は「他サイトからの長文の引用ブロック」を定義するタグです。
画像と文章を別々に引用してしまうと、それらが「元サイトで地続きの解説だった」という文脈が切れてしまいます。
全体を <blockquote> で大きく囲むことで、「この文章も、この画像も、すべて同じページからセットで持ってきたものです」という範囲を明確に示すことができます。
記述する際の注意点
1．URLの二重明示
検索エンジンのために <blockquote> の cite 属性に引用元URLを記述し、さらに人間の読者のために <figcaption> の中のリンク（<a>タグ）でも同じ引用元URLを明記します。
これにより、法律面（出所の明示）とデータ面（HTML仕様）の両方を完璧に満たせます。
2．デザイン（CSS）の配慮
多くのWordPressテーマやCSSテンプレートでは、<blockquote> を使うと枠線や背景色が変わるよう設計されています。
画像と文章がその枠の中に綺麗に収まるため、読者にとっても「ここが他サイトからの引用エリアだな」と視覚的に理解しやすくなります。