*

適切な配色とデザインでユーザビリティを向上させる(アプリ)

公開日: : 最終更新日:2015/12/15 デザイン , ,

白いページにグレーの枠と赤の枠

アプリを作るときに多くの人が配色に悩みます。
アプリのみならず、商品を作るときやサイトを作る時も配色に悩む方は大勢います。

一般的にマーケティングの世界で言われている色のイメージというのは以下のようになっております。

オレンジ……万人受けする色

……さわやかさ・知的

……落ち着き・安心感

……強烈なインパクト

……重厚・威圧

白……清潔感・無垢
色を変えたらコンバージョン率があがったとか、その説明にも科学的な根拠があったりなかったり、様々な通説があります。

今回私が説明するのは、そういう色に対するイメージに関してではなく、色が持つ特徴についてです。アプリ開発の際に、色選びで悩む方向けとなります。

スポンサーリンク

色の特徴

人が色に対して持つイメージは、科学でも心理学でも実証するのが難しいとされています。それは、色に対するイメージは個人で違うからです。
1.人間が種として培ってきた色への認識
2.集団内における色認識の違い
3.個人の体験に基づく色認識の違い

上記のような要因が様々に絡み合って色に対するイメージは決められます。ですので、

赤は購買色だから赤をアプリ内課金のボタンにしたら課金が増えるぞ!
とも一概に言えません。

では、色とは何なのでしょうか?それがよくわかる、簡単なアプリを作ってみました。

すべてのボタンが白

上の画像のアプリが何らかのパズルゲームだとして、ステージ1のクリア後にユーザーに次のステージも遊んでもらいたいとします。そうなると、「終了」ボタンよりも「次へ」ボタンの方を押したくなるようにユーザーの心を動かさなければなりません。

次へボタンが赤、終了ボタンが青

では、通説を極端に解釈して、赤は購買色だから「次へ」の背景にし、青は後退色だから「終了」の背景にしてみたところ、どうでしょうか? デザイン的にイケてるかどうかは置いておいて、赤の方が押したくなるでしょうか?

そういう人もいるかもしれません

しかし、色は単体だと意味はありません。では、それが良くわかるように、今度は文字を消してみましょう。

テキストが無いボタンが二つ

さて、これだとどうでしょうか? 文字が無いからどのボタンが「次へ」なのか「終了」なのかわかりませんよね?

強いて言うなら、人間は未来の事を考える時右を見ると言いますので、赤のボタンを押す人はいるかもしれません。このように、

色は基本的には単体で成り立ちません。

人間は色を文字の補助として読み取っているにすぎません。だから、有り体に言ってしまうとボタンの色は何でもいいのです。

そもそも、次のステージへと進ませたくなる原動力は、ステージ1の面白さなのであって、色の力ではありません。

ただし、ユーザビリティを考えると、

ボタンの色は統一した方がいいでしょう。

それは、統一性という観点からだけではなく、できるだけユーザーへのストレスを減らすためにです。

もしも、ボタンの色を最初に赤色に設定したとして、その後に青いボタンが出てきたとします。すると、ユーザーの頭の中では、

「赤はボタンである」

という認知がされているので、青いボタンを見た瞬間に混乱します。

これを心理学ではストループ効果と言います。

 

ストループ効果

ストループ効果(ストループこうか)とは、文字意味と文字色のように同時に目にする二つの情報が干渉しあう現象。

Wikipediaより

 

例えば、以下のように書かれていたら、人間は違和感を感じてしまいます。

これと同じように、赤がボタンだと思っていたのに違う色が設定されていたら違和感を感じるでしょう。

このような小さな違和感が積み重なってユーザーのストレスとなり、アプリからの離脱を招いてしまう可能性があります。

ですので、なるべくボタンの色は統一しようという事になります。

では、統一はわかったとして、どの色を選ぶべきかという話になりますが、色を決める時は、コンテキスト(文脈)と、コントラスト(対比)で考える必要があります。

 

コンテキスト(文脈)とは

色が使われる場合、人はその色に対して色々なイメージを持っています。例えば、赤い服を好む女性にフラれた経験があるならば、赤い服を着た女性を見て、嫌悪感を示す人もいるでしょう。

この時、その人の中で過去の体験が思い出されます。これを色のコンテキストと言います。

一方で、赤い服を着た女性を見て魅力的だと思う人もいれば、派手だと敬遠する人もいます。

 

このコンテキストを考える場合、重要なのは

色とその対照が結びつく場合に何を想起させる可能性があるか

という事です。

例えば、赤は人の近くにあると「血」を連想させ、嫌悪感を示してしまう人もいます。

手と血痕

しかし、草原に赤があると誰も嫌悪感を示さないでしょう。これを血だと思う人は稀です。

草原のポピー

このように、色は使われる場面次第で様々なコンテキストを持ちます。

では、アプリではどうかというと、

ボタンなどのパーツに関するユニバーサルな色の定義はありません。

ボタンが赤だろうが、黄色だろうが、それはユーザーにとって何かを想起させる事はあまり無いでしょう。

ですので、ボタンを決める際はぶっちゃけると、

何でもいいと思います(爆)

では背景はどうかというと、そんな事はなく、

ボタンやパーツとのコントラストで決めましょう。

 

コントラスト(対比)とは

コントラストとは物体とその背景の色の差を言います。

コントラストを考える上で重要なのは、同じ明度の色を使う事を避ける事です。

ます、明度が近い色同士を使ってみましょう。

緑背景に赤のボタン

なんだか疲れてしまいますね。ならば次の画像はどうでしょう。

緑背景に白のボタン

若干退屈ですが、最初の画像よりは不快感は少ないでしょう。このように、同じ明度の色を隣接して使うと、人によっては目が疲れ、人によっては不快感を感じてしまいます。このような現象を、色彩の世界ではハレーションと言います。

 

ですので、配色を決める時は、ハレーションを避けるように作ればユーザーへの不快感を減らす事ができます。

 

まとめ

今回は、良くマーケティングの世界で言われてるような色彩心理学からは一歩離れ、色が持つ特徴という面からどのような配色をすべきかという事を説明していきました。アプリにおける配色はデザインの一部であり、これが正解!というものはありません。突き詰めていけば、色々な手法もあるでしょうが、考え出すとキリがないので、

いかにユーザーへのストレスを軽減できる色使いをするか

という事に注力した方がいいでしょう。

重要なのは、

色でアプリの価値が決まるわけではなく、アプリの価値はそのアプリの面白さにある

という事です。

 

スポンサーリンク

コード左

コード左

関連記事

記事はありませんでした

Message

メールアドレスが公開されることはありません。

麻婆豆腐
コンビニの麻婆豆腐を食べ比べてみた

では、今回は大手コンビニである ファミリーマート、セブンイレブン、ロ

会議の資料
【仕事術】情報の共有には紙やホワイトボードの方がいい場合もある

お久しぶりです。 今抱えている案件がひとまず落ち着いたので、久しぶり

オートミール
ダイエットの救世主!オートミールの美味しい食べ方について

今回は個人的に最強のダイエット食材であると思われるオートミールをいかに

諸葛亮孔明の出師の表から学ぶ、誰かを説得する文章のコツ

今回は諸葛亮が北伐(魏への遠征)に向かう際に、皇帝の劉禅に向けた書いた

大きく手を丸にして承諾するビジネスマン
日本人がつくづくイエスマンだと思う理由

今日はふとした疑問からひょんなことを思いついたので書いていきます。

→もっと見る

  • 当ページの管理人のShaneです。元コンサルタント。今はしがないフリーランス。アプリ開発をしながら人々の役に立つ駄文を垂れ流してます。
PAGE TOP ↑