画像を使って文章のやさしさを高めよう

写真やイラストや地図など、画像は多くの情報を簡単に伝えます。そのため、画像が多く用いられた説明は、わかりやすさを期待させ、親しみを感じさせるものになります。

1. 画像の無い文章
   
2. 画像のある文章
   

私なら、この2つのページを比べたら2番目のページに目が向きます。ページを訪れた瞬間、1番目の方には「なんだか難しそう」と感じますが、2番目の方には「ていねいな説明がされるに違いない」と感じるからです。子供のころ絵本から本を読むことを始めたように、人は本来「さし絵」がある説明を好むのです。

デザイン用語ではこのような文章のビジュアル性のことを「視覚度」と呼び、次のような働きを持つことが広く知られています。

• 視覚度の高い文章ほど、楽しく、親しみやすい印象になる
• 視覚度の低い文章ほど、落ち着いて、威厳のある印象になる。一方で、堅く、難しい印象を与える

文字ばかりで構成された画面は、難しそうでつまらなそうな印象を持たれがちです。画像を使った方がわかりやすい情報は、無理に文章化せず、手間がかかっても画像を使って説明するようにしましょう。「急がば回れ」です。

画像を使って説明に注目させよう

画像は文字よりもサイズが大きく、豊富な表現力を持っているため、文章の中でも特に注目されやすいパーツです。長くて難解そうな文章でも、冒頭や説明の要所に画像を交えて説明することで、ユーザーを伝えたいメッセージまでうまく誘導することができます。

1. 画像の無い文章
   
2. 画像が並んだ文章
   

2番目の例のように、説明のポイントごとに画像が置いてあれば、ユーザーは自分の欲しい情報がありそうな部分をすぐに見つけることができます。もし、ユーザーの欲しい情報がページの後ろの方にあったとしても、関係のない部分をスルーして、本文を読んでもらうことができます。

なお、HTML標準の状態では画像と文章は別々のかたまりとして表示されますが、CSSのfloatプロパティを使うことで、文章の右、または左に画像を回り込ませて表示させることができます。2番目の例のように、画像を文章の左に回り込ませたい場合、img { float: left }と記述します。

画像を使って雰囲気を伝えよう

画像は豊富な表現力を持っているため、ものの印象・雰囲気をダイレクトに伝えます。そのため、使用する画像の内容・大きさ・点数を調整することで、文章全体の雰囲気をうまく変えることができます。基本は次の2点です。

• 画像が大きいほどその印象が強まり、小さいほど印象が弱まる
  
• 画像点数が少ないほど1つの画像の影響が強まり、点数が多いほど全体のテーマ性が影響を持つ
  

画像の内容選びにはよく注意してください。どれだけ文章がうまく書かれていても、見た目の雰囲気でユーザーに「違う」と思われたら、それだけで去られてしまう可能性があります。

スポンサード リンク