【Q&A】ランディングページを添削してください：ファーストビューの背景・文字色のバランス編

なるほど、まるおくん！
おしゃれにしたつもりが読みにくく感じるんですね？
それ、実は “背景と文字色のバランス” が原因かもしれませんよ。
一緒にチェックしてみましょう！

まるおくんは、背景と文字の色の組み合わせって意識しましたか？

なるほどね。もしかしたら、それが原因かもしれませんよ！
背景と文字色のバランスが悪いと、どんなにおしゃれでも読みにくくなって伝わりづらいことがあるんです。

そうなんです！
たとえば、淡い色同士の組み合わせとか、コントラストが足りない配色だと、パッと見で読みづらくなっちゃうことがよくあるんですよ。

では、読みにくさを防ぐためのチェックポイントも一緒に見ていきましょうか！

まるおくん、たとえばポスターやチラシを見たときに、すぐに内容が理解できるものと、なんとなく目がチカチカして読みにくいものってありませんか？

まさにそれです！
ランディングページも同じで、色バランスが悪いと、読者が必要な情報をすぐにキャッチできなくなっちゃうんです。
つまり、読みにくい＝スルーされやすい ってことですね。

そういうことです！
たとえば、薄いグレーの背景に薄い青の文字とか、ベージュの背景に薄いピンクの文字を使っていると、遠目から見たときに文字が背景に溶け込んでしまって読みにくくなるんです。

逆に、黒い背景に真っ赤な文字みたいに色の主張が強すぎると、目がチカチカして読むのがしんどくなることもあります。
だから、適度な明暗差と色の組み合わせが大事なんです！

その通り！読者がパッと見たときに、スムーズに文字を認識できるかどうかが重要なんです。

では、どうすれば読みやすい色バランスになるのか、簡単なポイントを紹介しますね！

まず、背景と文字の明るさの差（コントラスト）が大事です！

たとえば、薄いグレーの背景に白文字とか、ベージュの背景に薄ピンクの文字って、なんかフワッとしていて読みにくくないですか？

そうなんです！
基本は明るい背景には濃い文字、暗い背景には明るい文字を選ぶとバッチリですよ！

そうですね。色が多すぎると逆にゴチャゴチャして、どこを読めばいいのか迷っちゃいます。

ですから、基本はメインカラー1色＋サブカラー1色＋アクセント1色くらいがちょうどいいですよ！

それと、影とかグラデーションを使いすぎると、文字が背景に溶け込んでしまい 読みにくくなることもあります。
シンプルな文字の方がパッと読めるから、装飾は最小限がベストですよ！

そうなんです！
ですから、スマホでもしっかりチェックして、読みにくい色になっていないか確認するのが大事ですよ。スマホの画面は小さいから、よりコントラストを意識しないと読みにくくなりやすいんです。

でしょ？この4つのポイントを押さえれば、デザインを活かしつつ、しっかり伝わるランディングページになりますよ！

そうなんです！デザインのセンスも大事ですが、結局は “ 見てもらえなければ伝わらない ” ですからね。
この4つを意識するだけで、見やすさがぐっと向上しますよ！