スマートフォンのフォーム特有の改善ポイントは多くありますが、
今回はとくに、スマートフォンフォームの配色・色彩にスポットをあてながら、改善ポイントを考えていきたいと思います。
明るいところでディスプレイは見づらい
スマートフォンは、基本的に屋内で使用するPCとは対象的に、屋外でも頻繁に利用されるという特徴があります。
そして、屋内の蛍光灯と日中の屋外の太陽光とでは明るさが大きく変わります。
スマートフォン（フィーチャーフォンでも）をお使いのみなさんは、一度は屋外で太陽光がディスプレイに反射してしまって画面が見づらいという経験がおありなのはないでしょうか。
コンテンツの可視性は端末のディスプレイの性能や明るさ調整に依る部分も大きいのですが、フォームを作るときはこの明るい場所ではディスプレイが見難くなるという特徴を考慮しておきましょう。
屋外で見やすいフォームは「明度」がカギ
では具体的に、スマートフォンフォームの可読性を上げるためにはどうすれば良いのでしょうか。
ずばり、背景と文字色の明度差が大きくなるようにすると、文字の可読性が高くなります。
明度とは
明度とは明暗の度合いのことで、一般的に明度が高いと白っぽく、明度が低いと黒っぽい色になります。
下の図は、実際に背景と文字の明度差を段階的に変化させた例です。
右にいくほど背景と文字の明度差が大きい。
屋内で眺めているぶんには一見どの文字色も問題ありませんが、強烈な太陽光の下でも読みやすいかどうかはまた別の話。
背景色が白、つまり背景の明度が高い場合は、文字色の明度は下げ、背景と文字の明度に差をつけることが大切です。
反対に、背景が黒っぽい色の場合は当然、文字は明度の高い色をチョイスしたいですね。
背景の明度が低い時
文字の太さ・大きさも意外と重要な要因
また、配色だけでなく当然ながら文字サイズとウェイトも可読性においては大きな影響を及ぼします。
下記は、小さい文字と大きい文字を同じ色で表示した例です。また、それぞれを太字にしたパターンも用意しました。
文字サイズの大小と、それぞれ太字にした例
文字の色はどちらも同じなのにもかかわらず、文字が小さいテキストのほうが色が薄く感じるのではないでしょうか。
また、いずれも太字にしたテキストのほうが色が濃いように感じるはずです。
これは色の面積効果という特徴から起こるいわば目の錯覚で、暗い色はこの面積が大きくなるにしたがって、いっそう暗い色に、反対に明るい色はより明るく見えるという性質が関係しています。
このため、文字が大きく太字であるほうが面積が大きいために、色が濃く見えるというわけですね。
つまり屋外でも見やすいフォームを作る場合は、なるべく大きな文字でフォームを構成したほうが、文字の視認性が向上し使い勝手が良くなるのではないでしょうか。
いかがだったでしょうか
本日は配色の観点からEFOを考えてみました。
主に視認性に大きな影響を持ち２つのポイントをお伝えしましたが、
デザインマナー上、背景と文字の明度差を大きく改善できない場合は、文字の大きく太くする、等双方で補いあうように活用できると良いですね。
フォームの改善に留まらず、スマホサイトのデザイン全般にも通じる話ではありましたが、スマートフォンフォームをご担当の今後の改善に活かしていただければ幸いです。
