モバイルビジネスユニットのイシカワです。

端末の進化によって、モバイルサイトでも表現の自由なサイトが多くなってきました。

見せ方ひとつとっても、Flash を多用したリッチなコンテンツにしたり、絵文字や装飾で賑やかなコンテンツにしたり様々ですが、今回は物凄く基本的な「色」について書いてみたいと思います。

色の効果にも色々とあるので、掻い摘んで説明をしたいと思います。

視認性

視認性は色の見えやすさの事をいいます。

背景色と文字色とで明度差が小さいと、文字が見えにくくなり、逆に背景色と文字色の明度差が大きいと、文字は見えやすくなります。また明度以外にも彩度や色相の差も関係してきます。なので、文字の読みやすさに与える配色の場合は可読性とも言います。



背景色は白、文字色は赤で文字のみ明度に差をつけてみました。

左上の文は明度差が小さいので読み難くなっていますよね? 逆に右下の文は明度差が大きいので、ハッキリ読めると思います。端末の設定にもよりますが、小さい文字でもストレス無く読ませるために視認性・可読性は重要です。

誘目性

誘目性とは、注意を引きつける色の度合いです。

高彩度の暖色系 (鮮やかな赤・黄など) は誘目性が高く、逆に寒色系の色は誘目性が低くなります。注意を促す標識や看板に赤や黄が多く使われるのはこの為です。

視認性と異なるのは、心理的な部分に影響されるという事と、周囲と異なる色であるという事が大きい部分です。宣伝や広告などで暖色系の使用頻度が高いのは、有目性を性質を利用しているからです。

逆に、落ち着いた配色を目的とする場合は寒色系の色が効果的に働きます。



上部は暖色の組み合わせ、下部は寒色の組み合わせです。

あからさまになってしまいましたが、上部の方が見やすいですよね? ページ全体の配色にもよりますが、ココだけは目立たせたい! アピールしたい! という場合に非常に有効な要素です。

面積効果

色は面積によって見え方が変化します。

これは光の反射率が変わるために起こります。小さな面積より大きな面積のほうが、明度・彩度が高い色は明るく見え、反対に明度・彩度が低い色は面積が大きくなると、より暗く見えます。



文字の色はどちらも同じですが、大きい文字の方が若干暗く見えるかと思います。

PCサイトでは明度・彩度の低い背景色を使用すると、圧迫感が出てしまいがちです。携帯サイトでは表示領域が限られてるので、面積効果によって明度・彩度が低い背景色でも効果的に使用することが出来ます。

面積効果について触れたので、実際に自社サービスから一例を挙げてみたいと思います。


▲livedoor スポーツ内コンテンツの livedoor 写真ギャラリーより

背景や罫線などのベース色が黒基調になっています。

コンテンツにとって一番重要な「写真」が、背景色を黒にすることにより際立ちます。面積効果で圧迫感などの重さは感じられず、文字色が白という明度差が対極の組み合わせなので、文字の可読性を保持し、コントラストを利かせスタイリッシュさを表現させています。

また、前の写真・次の写真などリンクの部分に誘目性のある色を置く事で、このページで完結させず、ユーザーがアクションを起こしやすい施策がされています。スポーツ (写真ギャラリー) は、20〜30代の男性ユーザーからのアクセスが多いので、コンテンツ・ユーザー共にマッチしたカラーリングにになっています。

しかし、背景色が黒というのはアダルトサイトなどでも使用され、ユーザーからしてみればビックリしてしまう色使いなので、使用時には注意が必要です。

効果的に色を組み合わせることで、コンテンツの魅力を更に引き出す事が出来ます。逆に色設定を蔑ろにしてしまうと、コンテンツが良いものでも殺してしまう事になります。なので、コンテンツやユーザーにマッチしたサイトを作るために、色の構成は大事な要素です。

弊社には優秀なデザイナさんが多いので「この配色はどうなの？」といったツッコミが入る事もありますが……。

ライブドアではモバイルサイトの配色を常に意識できるディレクターを募集しています。