デザインは第一印象が大切!5秒でできる3つのデザインチェック方法

人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう!

ぼかしテスト

ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。

テスト方法

Photoshopを使う方法と、ブラウザーを使う方法があります。

Photoshopを使う方法

  1. バナー広告やWebサイトのスクリーンショット画像を用意
  2. Photoshopで フィルター>ぼかし>ぼかし(ガウス)で5〜10pxほど画像をぼかす

Chromeブラウザーを使う方法

  1. テストしたいWebサイトを表示
  2. デベロッパーツールを起動(Macなら ⌘ + option + I 、Windowsなら F12
  3. サイトのbody要素に -webkit-filter: blur(5px) を加える

いちごの広告
こんな感じの画像を用意しました。

画像をぼかした様子
ぼかしてみると、苺の写真以外はかなり見えづらいですね。よく見ないとテキストがあるのかどうかもわかりません。強調したいはずのボタンはボタンと判別することすら困難です。

修正後
そこでテキスト部分には白い枠を敷き、ボタンを苺の色で表示しました。

修正版
修正版をぼかすと、このようにテキストの存在がよりわかりやすくなり、ボタンがしっかりと強調されています。

デザインをする上でよくある失敗例として、すべての要素を目立たそうとしてしまう事があります。しかし、それだと結局どの要素も目立たなくなるんですよね。このぼかしテストでは何が一番目立っていて、目につきやすいのかが判別できます。ユーザーに見て欲しい要素の優先順位を考えてデザインすることが大切です。

グレースケールテスト

デザインをする上で、配色は非常に大切な要素のひとつです。しかしその配色のせいでテキストや画面全体の視認性が下がってしまうと意味がありません。配色のコントラストはグレースケール(白と黒と灰色の無彩色)を使ってテストできます。

テスト方法

こちらもPhotoshopを使う方法と、ブラウザーを使う方法があります。

Photoshopを使う方法

  1. バナー広告やWebサイトのスクリーンショット画像を用意
  2. Photoshopで イメージ>モード>グレースケールを選択

Chromeブラウザーを使う方法

  1. テストしたいWebサイトを表示
  2. デベロッパーツールを起動(Macなら ⌘ + option + I 、Windowsなら F12
  3. サイトのbody要素に -webkit-filter: grayscale(100%); を加える

あじさいの広告
こんどはこちらの画像を使ってテストしましょう。全体の色が紫色に統一されています。

グレースケール版
グレースケールにするとボタンの色が背景色に溶け込んで見えづらくなっているのがわかります。

修正版
そこでボタンの色を明度の高い黄色にしました。テキストも白に変更。

修正版のグレースケール
すると背景とボタンのコントラストが表現でき、より視認性が高まりました。

色の組み合わせ次第でコンテンツの視認性が大きく変わります。同じ紫の組み合わせでも紫と青、紫と緑のようにコントラストの低い組み合わせだと視認性が下がり、紫と黄色、紫と黄緑のような組み合わせだと視認性が上がります。多くの色を取り入れる際は、特にこのようなコントラストのテストをすると良いでしょう。

5秒間テスト

上記2つの方法は自分でテストできますが、こちらの5秒間テストは第三者の手助けが必要です。なるべくプロジェクトに関わっていない人を選定すると良いでしょう。

テスト方法

  1. デザインを5秒間見てもらう
  2. 何のWebサイトだったか(何の広告だったか)を一言で言ってもらう
  3. 加えて思い出せるものを言ってもらう

何も知らないユーザーが5秒見ただけで何のWebサイトだったか(何の広告だったか)を言ってもらうことで、そのデザインの目的がユーザーに明確に伝わっているかどうかが検証できます。5秒と聞くと短く聞こえると思いますが、前述のとおり人間は一瞬で判別する能力を持っています。こちらのテストは複数の人にしてもらえるとより効果的です。

「思い出せるもの」は、そのデザインで印象的だった要素です。

  • 赤かった
  • キャッチコピーが大きかった
  • ボタンが2つあった
  • 犬の写真があった

などなど、なんでも構いません。覚えているだけ言ってもらいましょう。例えば商品写真よりも商品の横に写り込んでいる食べ物が覚えられている…など、こちらが目立たせたいものよりも、思いがけず違う要素が印象に残っているようだと、デザインの修正を考えた方がいいでしょう。

テスト後の改善策

第一印象は全体の構成や配色、余白、テキストの量、フォントなど、様々な要素から決定づけられます。これらテストをしてみて、どれが強調されているのかよくわからない、視認性が低い、なんのサイトかわからない…なんていう場合は、何かしら改善する必要があります。具体的には以下の要素を調整してみるといいでしょう。

  • 要素のサイズ
  • 余白
  • 配色
  • 配置

例えばボタンを目立たせたいのに全然目立っていない場合は、ボタンのサイズや配色を調整したり、ボタン周辺に余白を作ったりしてみましょう。なんのサイトかわかりづらい場合はキャッチコピーを変更したり、強調する要素を再考しましょう。調整が終わったら再度テストします。

デザインは「正解」というのが見えづらく、自分でチェックするのはなかなか難しいもの。これらの方法を取り入れ、何度も繰り返しテストしながら、よりよいデザインに仕上げていきましょう!

参照サイト:

シェアする

コメント

  • iwbjp

    グレースケールテストがPhotoshopで行われているがCSSのfilter: grayscale(100%);を使用したほうが手っ取り早い。

  • 確かにそうですね!ぼかしの方はその方法も記述しているのに、グレースケールの方はなぜ書かなかったのか…(; ・`ω・´)

    追記しておきました!ご指摘ありがとうございます!

  • MW

    こちらのブックマークレットをどうぞ。

    ぼかし
    javascript:(function(){document.body.style.WebkitFilter=’blur(5px)’;}());

    グレースケール
    javascript:(function(){document.body.style.WebkitFilter=’grayscale(100%)’;}());

  • おお!ありがとうございます!ヽ(=´▽`=)ノ

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)