画像の説明文を上下どちらに書くか問題

news-760984_1280

ブログを書いているととても迷うことがあります。

それは、画像の説明文を画像の上下どちらに書くべきかということです。

手順の説明をするためにスクリーンショットを連続して何枚も貼りつけているような記事だと、説明文が上と下のどちらの画像のものなのかわかりにくくなります。

僕はこういうのはきちんとルールを決めておかないと気になって仕方ないのですが、Googleで「画像 説明 上 下」などと検索してみてもこの問題に言及しているサイトがほとんどありません。

みなさん意外と気にならないのか適当に決めてしまっているんですかね?

もやもやしたままだと気持ち悪いので、今回はこの問題について考察してみたいと思います。

スポンサーリンク
レクタングル(大)

書き方を決めるうえで考えるべきこと

説明文が上下どちらの画像のものなのかすぐにわかる

これには簡単な方法として二つのアプローチが考えられます。

一つは説明文の先頭に「↑」などの矢印をつけること。

もう一つは画像と説明文の間に空白行を挿入することです。

具体的にどのような見た目になるかは後述します。

自然な視線の移動

人間がページを見るときには視線が左から右へ、上から下へ移動することが知られています。

視線の動きに沿ってコンテンツを配置し、読者のリーディングの妨げにならないようにしましょう。

その際、なるべく視線が行ったり来たりしないようにしたいものです。

悪い例を示します。

テスト

ソフトの機能を簡単に説明する場合にはこれでもいいですが、手順を細かく説明する場合にはあまりよくありません。

1枚の画像に説明を詰め込みすぎているため、説明文と画像を何度も行ったり来たりしなければならないのです。

視線の動きを可視化してみるとこうなります。

テスト

視線が上下左右に大きく移動しているのがわかると思います。

手順を説明する場合には1つの操作で1枚の画像を使用するようにすると視線の移動が少なくて済みます。ただし、スクロールが増えるという問題点はあります。

その辺はわかりやすさと視線の移動とスクロールの手間のバランスを考えて決定するとよいでしょう。

それから画像の上の説明文が長すぎる場合の問題点をもう一つ。

文章を上から読み進めていると以下の画像のように見える瞬間があります。

テスト

説明文ばかりが見えて画像が一向に見えてきません。

「『こちら』ってどちらだよ!」と思いませんか。

読者はなんのことを言っているのかわからず一瞬混乱してしまいます。

下にスクロールすればすぐに疑問は解決しますが、できるかぎりこのような混乱は避けたいものです。

書き方を統一する

サイト内では書き方を統一することも大切です。

矢印を使用するならどの記事でも矢印を使用し、画像の上に説明文を書くならどの記事でも画像の上に説明文を書くようにしましょう。

複数人で記事を書く場合には書き方を明確に定めて共有しておくことが必要です。

一人ですべての記事を書く場合でも書き方を忘れてブレないようにしましょう。

こちらの記事では画像の上に説明文があるのにあちらの記事では画像の下に説明文があるというような状況だと読者が混乱してしまいます。

ただし、画像や記事の性質によって方法を適切に使い分ける場合には話が別です。

そのほうが読者にとってわかりやすいのならば複数の方法を使用するのもありだと思います。

矢印を使用した場合

矢印を使用する場合には説明文を画像の下に配置するのがよいでしょう。

画像の上に配置すると説明文が複数行にわたる場合、矢印と画像との距離が離れてわかりにくくなります。

以下、少し長くなりますが矢印を使用した例です。

Tunacan_と_テスト

↑Tunacanを起動するとこのような画面が表示されます。

画像を結合するするためには真ん中の+ボタンをクリックするか、画像をドラッグアンドドロップします。

Tunacan_と_新規投稿を追加_‹_ヒキニートかく語りき_—_WordPress

↑1枚目の画像を追加してみたところです。

ちなみに、複数枚の画像を一度に追加することもできます。

Tunacan_と_テスト

↑2枚目の画像は右側に配置したいので、画像の右側に表示されている+ボタンを押して画像を追加しましょう。

Tunacan

↑すると、このようになります。

画像と説明文の間に空白行を挿入していませんが、矢印のおかげでわかりやすくなっています。

お好みで空白行を挿入してもよいでしょう。

空白行を挿入した場合

説明文が上の場合

Tunacanを起動するとこのような画面が表示されます。

画像を結合するするためには真ん中の+ボタンをクリックするか、画像をドラッグアンドドロップします。

Tunacan_と_テスト

1枚目の画像を追加してみたところです。

ちなみに、複数枚の画像を一度に追加することもできます。

Tunacan_と_新規投稿を追加_‹_ヒキニートかく語りき_—_WordPress

2枚目の画像は右側に配置したいので、画像の右側に表示されている+ボタンを押して画像を追加しましょう。

Tunacan_と_テスト

すると、このようになります。

Tunacan

説明文を上に配置する場合、説明文が長くなりすぎないように注意する必要があります。

説明文を上に配置するメリットは最初に説明文を読むことができるため、何についての画像なのかを知った状態で画像を見ることができる点です。

デメリットは長い説明文を書けないことです。

説明文が下の場合

Tunacan_と_テスト

Tunacanを起動するとこのような画面が表示されます。

画像を結合するするためには真ん中の+ボタンをクリックするか、画像をドラッグアンドドロップします。

Tunacan_と_新規投稿を追加_‹_ヒキニートかく語りき_—_WordPress

1枚目の画像を追加してみたところです。

ちなみに、複数枚の画像を一度に追加することもできます。

Tunacan_と_テスト

2枚目の画像は右側に配置したいので、画像の右側に表示されている+ボタンを押して画像を追加しましょう。

Tunacan

すると、このようになります。

説明文を下に配置するメリットは画像を先に見ているので、続く説明文の内容が頭に入ってきやすいことです。

デメリットは画像が先に表示されるので、何についての画像なのかを理解するのがワンテンポ遅れることです。

ハイブリッド

画像の上に簡単な説明を、画像の下に詳細な説明を配置するパターンです。

起動画面

Tunacan_と_テスト

Tunacanを起動するとこのような画面が表示されます。

画像を結合するするためには真ん中の+ボタンをクリックするか、画像をドラッグアンドドロップします。

1枚目の画像を追加してみたところ

Tunacan_と_新規投稿を追加_‹_ヒキニートかく語りき_—_WordPress

ちなみに、複数枚の画像を一度に追加することもできます。

2枚目の画像を追加

Tunacan_と_テスト

2枚目の画像は右側に配置したいので、画像の右側に表示されている+ボタンを押して画像を追加しましょう。

完成図

Tunacan

すると、このようになります。

何についての画像かが最初に示され、説明文も長くすることができます。

デメリットとしては冗長になることと、説明文が短い場合でも上下に説明文を書かなければならないことです。

その他の方法

枠で囲む

Tunacan_と_テスト

Tunacanの起動画面です。
中央のプラスボタンで画像を追加できます。
「Distance between images」で画像間の距離を調整することができます。

画像が小さい場合にはこういうこともできます。

画像を横に配置

Tunacan_と_テスト

Tunacanの起動画面です。

中央のプラスボタンで画像を追加できます。

「Distance between images」で画像間の距離を調整することができます。

画像が小さい場合には画像をfloatで回り込ませることもできますが、指定したり解除したりが面倒ですね。

まとめ

どの方法にも一長一短があるので、最終的には個人の好みで決めるとよいと思います。

様々なサイトを見てみても使用している方法はバラバラです。

使われている頻度でいうと「説明文が画像の下>説明文が画像の上>矢印」の順番のようです。

どのような画像を説明するのか、どのような記事を作成するのかにもよりそうですね。

この記事の「自然な視線の移動」という項では、ここで紹介したどの方法とも違う書き方をしています。

手順の説明のように大量の画像を使用し、簡潔な説明を付与する記事の場合にはここで紹介した方法をとるとよいと思います。

しかし、「自然な視線の移動」のように通常の文章を書いてそれに関係する画像を参照し、また元の話に戻る場合には視線は上から下に流れるように進んでいくので、スペースを空けずにおくとリズムが途切れなくてよいかと思います。

今回こうしていくつかの方法をまとめてみましたが、どの方法をとるべきか非常に悩みますね。

このブログではこれまで画像の上に説明文を配置する方法をとってきましたが、この記事で書いたものを見ていると画像の下に配置するのも定番でよさそうな気がします。

なかなか奥が深い問題です。このブログでの書き方もそのうちに変えることになるかもしれません。

 追記

この問題について考えの発展があったので説明したいと思います。

一般的に文章の構造として、あとに配置されたものが前に配置されたものを説明したり補足したりする役割を持ちます。

つまり、説明文が前、画像があとの場合には説明文が実際にはどのような状況なのかを画像によって補足することになります。

「(手順の)説明文→(説明文を補足する)画像」という関係です。

一方、画像が前、説明文があとの場合には画像がどのような状況であるかを説明文が説明します。

「画像→(手順と画像の)説明文」という関係です。

どちらの場合にも使用する画像と説明文はほとんど同じになりますが、それらが持つ意味合いがやや異なってくるというわけです。

そしてもう一つの発見ですが、文を読むより画像を見るほうが理解に必要な時間が短くて済むということです。

あまりにも当たり前なことなので発見というより気づきと言ったほうが正しいですが。

説明文を前に書くとそれが実際にはどのような状況であるかがわかりにくい、画像を前に置くとそれが何を指しているのかわかりにくいという問題があります。

しかし、画像は一瞬で見てとれるので、画像を前に置いたほうが「わかりにくい」という感覚を抱く時間が短くて済むのです。

画像が前ならば「わかりにくい」と思ってもすぐに文章に移ることができますが、説明文が前の場合には「わかりにくい」という感覚を抱いたまましばらく文を読み続けなければならないのです。

というわけで、画像が前、説明文があとのほうが読者にとってわかりやすい配置になるのではないかと今は思っています。

さらに追記(2017/02/22)

この記事を書いてから7か月が経ちました。画像と説明文についての考え方がまた変わりつつあるので、それをここに記しておきます。

有名なサイトを見ていると、本記事の「自然な視線の移動」という項と同様の書き方をしているところが多いようです。図で説明すると次のようになります。

どんな画像かについての簡単な説明

画像

(画像の補足説明)

操作手順あるいは次の画像についての簡単な説明

画像

個人的にはこの書き方が一番自然に読めるように思います。

この書き方ですと画像と説明文の間に空白行を挿入する必要がないので、思考が分断されずスムーズに読み進めることができます。

本記事では空白行を挿入する方法を説明しましたが、そもそも空白行を挿入しなければならないという時点で画像と説明文の関係がわかりにくいものだったということですね。

途中、矢印を使用した方法や空白行を挿入した方法について長々と説明した文章を読んでもらって申し訳ないのですが、本記事の最初と最後に説明した方法が僕のオススメになります。

「ハイブリッド」も似たような方法ですが、こちらの方がより自然な書き方だと思います。

というわけで、これからはなるべく画像と説明文の連続性を保つように気をつけて記事を書きたいと思います。

スポンサーリンク
レクタングル(大)
レクタングル(大)
ヒキニートかく語りき
画像の説明文を上下どちらに書くか問題
この記事をお届けした
ヒキニートかく語りきの最新ニュース情報を、
いいねしてチェックしよう!