Markdown 画像キャプションの書き方完全ガイド：簡単手順と活用事例

導入

Markdownでは画像を挿入するのが非常に簡単ですが、画像に**キャプション（説明文）**を付ける方法は、基本の仕様に明示的にはありませんでした。
そのため、執筆者は「画像の下にテキストを並べる」「htmlタグを使う」など様々な折衷策を取ってきました。この記事では、Markdownにおける画像キャプションの書き方を網羅的に解説し、初心者でもすぐに実践できる「簡単手順」を紹介します。さらに、キャプションを付けることで得られるメリットと、実際の活用事例を挙げて、実務での使い方を具体的に示します。

h2: 画像とキャプションの基本概念

• 画像: <img src="…"> に相当する Markdown 構文 ![alt テキスト](URL "タイトル")
• キャプション: 画像の下に配置する補足説明・注釈。
• Alt テキスト: 画像が表示できないときに代わりに表示されるテキスト。検索エンジンにとっても重要。

ポイント

1. alt テキストは「画像の内容を簡潔に」記載
2. キャプションは「画像の位置・意味・情報源を補足」

h2: Markdown でキャプションを実装する 3 つの主な方法

1. シンプルなテキスト行 (推奨)

最も簡単かつ互換性の高い方法。画像直後に空行なしでテキストを書きます。

![サンプル画像](https://example.com/sample.png)

画像は「サンプリングデータ」です。

メリット

• ほとんどの Markdown パーサー（GitHub、GitLab、Vimeo など）でそのまま表示。
• ブラウザ閲覧でも、テキストが画像の下に続く形で自然に読める。

デメリット

• キャプションが画像幅に合わせて縦に並ぶ形になるので、レイアウト調整が必要な場合は不便。

2. Markdown テーブルでキャプションを揃える

列幅を統一できるため、キャプションを画像の下部に正しく配置できます。

| ![サンプル画像](https://example.com/sample.png) |
| ---------------------------------------------- |
| 画像は「サンプリングデータ」です。           |

注意
一部 Markdown クラスター（Jekyll、Hugo）ではテーブル内で画像が正しくブロック表示されにくいことがあります。
その場合は ![alt](URL){: .center } などのカスタムクラスを使うと対処できます。

メリット

• 画像とキャプションを縦に揃えた見た目でレポートや学術論文に近い印象。

デメリット

• テーブル構造を使うため、CSS で細かい調整が必要となるケースがある。

3. HTML タグを併用（拡張が必要な場合）

一部 Markdown エンジンは <figure> と <figcaption> をサポートします。サポートされていれば、Semantic HTML でキャプションを付けることが可能です。

<figure>
  <img src="https://example.com/sample.png" alt="サンプル画像">
  <figcaption>画像は「サンプリングデータ」です。</figcaption>
</figure>

ポイント

1. GitHub の README.md などは <figure> を許容しません。
2. Jekyll などの静的サイトジェネレーターなら | figure | を有効にするプラグインが必要。

メリット

• alt 属性と figcaption が明示的に分離され、スクリプトや CSS でのカスタマイズが容易。

デメリット

• カスタムパーサーでない場合はレンダリングが失敗する可能性。

h2: 画像キャプションを使ったベストプラクティス

h2: 具体的な活用事例

1. 技術文書・API ドキュメント

• サンプルコード+図
  ![コードスニペット](code.png)

  ```python
  import numpy as np
  np.arange(5)
  

  画像は NumPy の配列生成例です。  
  

  効果: 読者はコードと図を並べて確認でき、理解が速まる。

2. ブログ記事のビジュアル化

• 「before / after」画像

  ![ビフォー](before.png) ![アフター](after.png)
  ビジュアル比較です。  
  

  • figure を使うとタイトル付きで美しく表示。

3. 学術論文やレポート

• 図表

  図1. データ分布のヒストグラム

  • 画像のキャプションに図に関する解析説明を書くと、読者が結果の背景を素早く把握。

4. ウェブサイトのスライドショー

• 画像＋キャプションでスライド

  <figure>
    <img src="slide1.png" alt="スライド1">
    <figcaption>スライド1: イントロダクション</figcaption>
  </figure>
  

  • スライド管理システム（Reveal.js など）で使用すると、自動的にキャプションが表示される。

h2: よくある質問 (Q&A)

Q1: GitHub でキャプション付き画像を表示したいが、テーブルが崩れる。
A1: GitHub は <figure> をサポートしないので、Markdown 読み込み前に変換するツール を使うか、単に「画像 + 直後のテキスト」で対応するとよい。

Q2: 画像サイズを自動で調整したい。
A2: CSS を使って img { max-width: 100%; height: auto; } とすると、レスポンシブ対応。

Q3: 画像の下に小さめのキャプションだけを入れたい。
A3: figcaption のフォントサイズを small に設定。

figcaption { font-size: 0.9em; color: #555; }

Q4: 画像ごとに別々の alt 文とキャプションが必要な場合、どう管理すればよい？
A4: JSON などでメタ情報を外部管理し、スクリプトで Markdown を生成する。こうすると作業量を大幅に削減できます。

h2: まとめ

• Markdown でキャプションを付けると ユーザビリティとSEO が向上します。
• 「シンプルなテキスト行」＝最も一般的で互換性が高い方法。
• テーブルや <figure> の併用は、レイアウト制御が必要な場面で有効。
• alt テキストとキャプションを書き分けることで、アクセシビリティと閲覧体験を両立。

最後に、実際に自分の Markdown ファイルに試してみることをおすすめします。手を動かすことで、これらの手順が自然と身につき、プロジェクト全体の文書品質を高める一助になるでしょう。 Happy Writing!