Markdownの画像で壊れやすいのは画像ではなく、場所と説明文

Markdownで画像を出す記法は一行で覚えられます。壊れるのは、その一行のうち画像そのものではなく、場所と説明文の二か所です。場所は書いた人のパソコンの事情を前提にしていて、説明文は画像が表示されないときに唯一残る中身だからです。この記事では、基本の書き方を押さえたうえで、この二か所がなぜ壊れやすいのか、AIに画像入りの下書きを書かせるときに何を指定するかを考えます。

画像の記法は、三つの部品でできています

Markdownの画像は、次の三つを間を空けずに続けて書きます。

部品	書き方	役割
印	!	ここが画像であることを示す
説明文	[ ] の中	画像の代わりに読まれる文字
場所	( ) の中	画像のURLかファイルパス

![かわいい猫](https://example.com/cute-cat.jpg)
![山並みの風景](./images/landscape.jpg)

文章へのリンクの書き方の先頭に、半角の ! を一つ付けた形だと覚えると忘れません。

場所は、書いた環境を前提にしています

Web上の画像なら、場所にURLを書きます。手元の画像なら、ファイルパスを書きます。Markdownファイルと同じ場所やその下のフォルダにあれば、./images/landscape.jpg のような相対パスで参照できます。

相対パスは、多くの表示環境で、そのMarkdownファイルが置かれた場所から数えて解釈されます。つまり、ファイルを別のフォルダへ動かした、画像のフォルダを付けずに人に送った、ブログやチャットに本文だけを貼った、のどれでも、画像は消えます。自分の画面ではちゃんと出ています、という確認は、自分のパソコンの中の地図で道案内をしているのと同じで、相手の手元にはその地図がありません。書いたときの前提が、送った先で成り立つかどうかを確かめるには、送った先で開いてみるしかありません。

説明文は、画像が届かないときの本文です

説明文は、画像が表示できないとき、読み上げソフトで読まれるとき、そして文章を読む機械に渡されるときに使われます。画像が届かない場面では、説明文が画像の代わりにそのまま本文になります。

説明文に「画像」「図1」「スクリーンショット」とだけ書くのは、会議の議事録に「資料のとおり」とだけ書くのと同じです。その場にいた人には通じても、資料を見ていない人には何も伝わりません。説明文を書くときは、画像が見えない人に、この画像から何を受け取ってほしいかを一文で書きます。「かわいい猫」と「設定画面で保存のボタンが右下にある」では、伝わるものがまるで違います。

とはいえ、良い説明文の正解は一つではありません。読み上げで聞く人に要る情報と、画像を探す人に要る情報と、AIに文脈として渡したい情報は、それぞれ違うことがあります。誰に向けて書くかが決まらない限り、説明文の良し悪しも決まりません。飾りの画像のように、中身を伝える必要がないものまで長い説明を付けると、読み上げで聞く人にはかえって邪魔になる、という逆の問題もあります。

サイズとリンクは、Markdownの外の書き方を借ります

Markdownそのものには、画像のサイズを指定する標準の書き方がありません。サイズを変えたいときは、HTMLの img タグを混ぜて、width と height で調整します。

<img src='https://example.com/cute-cat.jpg' alt='かわいい猫' width='300' height='200'>

ここでも説明文は消えません。alt の中身が、Markdownの [ ] の中身にあたります。HTMLを受け付けない表示先では、このタグは表示されないか、文字のまま見えることがあるので、混ぜる前に表示先を確かめます。

画像をクリックすると別のページへ移るようにしたいときは、リンクの角括弧の中に、文字の代わりに画像の記法をまるごと入れ、丸括弧にリンク先のURLを書きます。

[![GitHubのロゴ](https://example.com/github-logo.png)](https://github.com/)

AIに書かせるなら、場所と説明文を指定します

ChatGPTなどに資料の下書きをMarkdownで書かせると、画像の位置は「ここに図を入れる」のような一文になりがちです。前提を渡されないAIは、手持ちの知識で空白を埋めるので、どこに何の画像を置くかも、説明文の中身も、それらしい一般論で済ませます。だから、場所と説明文の決め方を指示に入れます。

見出しごとに、入れるべき画像の位置を、Markdownの画像記法で示してください。
説明文には、画像が見えない人がこの画像から何を受け取るべきかを一文で書いてください。
場所には images フォルダ内の仮のファイル名を書いてください。

こう頼むと、どこに、どんな画像を、どの名前で用意すればよいかが、下書きの段階で一覧になります。ただ、AIが書いた説明文が本当にその画像の中身と合っているかは、画像を用意した後で人が見比べるまで分かりません。説明文が先にできて、画像が後から来る順番には、その危うさが残ります。

あなたの手元の文書にある画像の説明文を、画像を見ずに読んだとき、何が伝わるでしょうか。その文書を別の人のパソコンで開いたら、画像はいくつ残るでしょうか。

この記事の背景にある考え方は、拙著『ChatGPT はじめてのプロンプトエンジニアリング』の2章2節「プロンプトの基本要素」の、ターゲットの話に書きました。誰向けの回答かを指定すると、AIはその人の目線に合わせて専門の度合いや言葉を選ぶ、という話で、そこには「文章で言えば、ターゲットは「目的語」に相当します。」とあります。この節を読むと、画像の説明文の目的語が、画像を見られない読み手になっているかを、AIに頼む前に自分で確かめられるようになります。