キャプションの配置位置から

今日は、昔よくみていたFlashの先生のWebページをたまたま見て思ったことを書きます。

 

図や写真の下に「キャプション」って入れますよね?

WordPressもメディア挿入時にキャプション欄がありますもんね。

エクスマの藤村先生から、「キャプションは本文の3倍読まれるよ。だから必ず入れることと、内容に注意しよう。」と学びました。

これは知っている人も多いかと思います。実際、キャプションが入っていたら読みますもんね。

 

僕は、印刷会社に入社し、DTPオペレーターをやって、拙いながら印刷物制作をしたことがあるのですが、当然キャプションを設置したことは数知れずあります。

その時、当たり前のように図版の下に配置していました。文字サイズは本文より小さくしてね。

そしてWebページでも、そのルールをなんとなく踏襲しています。

HTMLだとこんな感じ↓

<figure>
<img src=”” alt=”” width=”” height=””> →画像
<figcaption>キャプション</figcaption> →キャプション
</figure>

これでimg画像の下にキャプションが表示されます。(位置は変えられますけどね)

で、Flashの先生のWebページでは、キャプション全てが図の上に配置されていたんです。

スマホで見ていたので、キャプションが上にあった方が判読しやすいと思いました。
文中に出てくる「図◯の・・・」で書かれている図をすぐ見つけることができました。

キャプションが下だと、画像が最初に下から現れてきて、さらにずずっとスクロールして、やっと現れるキャプションで判別することになります。
学術系のWebサイトやブログを扱う場合は図表を示す文言は出やすいし、図表ももちろん多い。
図表がまとめられて表示されたら読みにくいったらありゃしない。

だからキャプションは上の方がいいのではと考えました。

Webサイトやブログは、スマホファーストで間違いないですから、紙の習慣が全てOKというわけではなく、見直すことも大切だと思いました。

 

組版ルールってそもそも読みやすくするためのもの。
Webサイトやブログの画面の先にいる人に役立つのです。

組版ルールを知ったWebディレクターやWebデザイナーが作ったWebサイトは、デザインの質が高いと感じるものができるので、組版ルールの大半を適用したいところです。

Webデザイナーも組版を少しでも学ぶといいと思います。

そう。もう、紙とWebを分ける、最終メディアにこだわるのは古くて狭い。
大切にするところはメディア自体ではないし。高めたスキルはどちらでも活かせる。活かせるよ。

印刷会社にいるなら最低限のルールは覚えて、そして実務で使えるレベルに上げておこう♩

 

いいモノを作りましょう。

0PEOPLE