投稿者: 画像や図形について
画像やグラフ、イラストなどの視覚的な図は現在のWebサイトには欠かせない存在です。
文章で伝えずらいことを分かりやすく伝えられるからです。
ユーザー心理として、サイトを見るのに時間を取られたくないという心理があるので、あまり長い文章などはユーザーが離れる原因にもなります。
なので画像や図形で分かりやすく見やすくすることが結果的にメリットが大きくなります。
枠に気を付ける
既に図形などを取り入れてる方には分かるかもしれませんが、図形の上に文章を載せたい場面があると思います。
背景が写真や色使いが多い画像であったりすると、何色を使用しても読みづらい時があります。
最近では図の中になるべくテキストを入れないやり方もありますが、場合によってはどうしても図中に入れたいということもあると思います。
こういったときはテキストの縁取りに気を付けるといいでしょう。
文章が黒文字であれば白い縁取りをつければ画像上でもはっきりと見えます。
ただ縁取りはつければいいということではなく、縁取りの部分が多いと文字自体が潰れたような形になって見た目が悪くなってしまいます。
縁取りする場合は、必ずバランスを確認しましょう。
もう１つやり方があり、文字にシャドウや光彩をつける方法です。
シャドウは主に文章の下部分に色をつけるやり方です。
そこまでコントラストが激しい画像でなければシャドウをつけるだけでもいいかもしれません。
光彩は文章の周りにぼやっと光を当てるやり方です。
縁取りみたいにはっきりさせたくない場合やデザイン性の高いサイトではよくつかわれている手法です。
・縁取り
・シャドウ
・光彩
以上３つを状況に合わせて使い分けることで、画像上にテキストを載せたい場合も苦になりません。
視覚に訴える
図は視覚にダイレクトに働きかけます。
文章でいくら箇条書きや、見出しを大きくしたり、サイズを大きくしても分かりやすい図のほうが圧倒的に理解しやすいです。
分かりやすい図の作り方
何かの作り方ややり方などを解説するのを図で表したことを図解といいます。
では、分かりやすい図解の作り方にはいくつかポイントがあります。
・色を使いすぎない
・図形の種類はなるべく同じにする
・楕円を使わない
色を使いすぎない
よく四角の図形に塗りと線を別々の色を使用してる方がいますが、ぱっと見でしつこい印象を受けるので塗りだけにしましょう。
あるいは、線だけにして塗りは入れないというやり方もあります。
分かりやすさ・読みやすさを強めるためには余計な装飾は排除しようという考え方です。
図形の種類はなるべく同じにする
同じページ内で上では四角を、下では丸をといった風に色々な種類の図形を使うのをやめましょう。
形を統一するだけで統一感がでてすっきりした印象を出すことができます。
サイト全体でも意味合いによって形を統一したほうがユーザーにもわかりやすいです。
楕円を使わない
よく楕円の形も目にしますが、楕円もなるべくやめましょう。
まず、楕円形の中に文章を入れると余白が少なくなってしまい、それだけで見栄えが悪いです。
そもそも楕円形自体が美しくありません。
どうしても必要な理由がない限り四角や角丸などを使いましょう。
第5回まとめ 画像の見せ方に気をつける
今回は画像の見せ方について紹介しました。
同じ画像でも見せ方によって良くも悪くもなります。どうやったら分かりやすく、伝わりやすくなるかを考えながら使いましょう。
