縁の下のUIデザイン―少しの工夫で大きな改善!

第3回 赤の使い方―色が与える直感的な印象を活かす

この記事を読むのに必要な時間:およそ 2 分

UIUser Interfaceデザインには,AppleのHuman Interface GuidelinesやGoogleのマテリアルデザインのようなガイドラインがありますが,サービスを超えて共通的に認識されている,お決まりのルールや定番も存在します。

たとえば,2017年6月15日にTwitterはユーザーアイコンを四角形から円形に変更しました。2015年2月24日にはLINEも同様にユーザーアイコンを円形に変更しています。このようにユーザーアイコンを円形にするサービスが増えており,今後定番化していく可能性があります。

今回の変更で画像の四隅が切り抜かれてしまい,ユーザーにとって意図しない形になってしまうのはデメリットにつながることも想像できます。しかし,特定のサービスの枠を超えて定番化することで,丸く切り抜かれた写真を見ればユーザーなんだなと認識がしやすくなるというメリットがあります。

上記のように形という観点もあれば,色という観点でも受け取られる印象を活かした定番の使い方が存在します。今回は特に色の中でも,UIUser Interfaceをデザインするうえでよく使われる「赤」の使い方を取り上げます。

赤が与える基本的な印象

色には人間が感じ取る印象があり,それぞれ違いがあります。赤は,⁠危険」⁠活気的」⁠情熱的」⁠熱い」などの印象があり,さまざまな場面で定番の表現として使われています。代表的なものに,トイレの男性と女性を区別するための識別としても使われたり,UIにおいては「危険」⁠注意」などを表現する要素として用いることが多くあります。たとえば何か要素を消してしまうときに実行直前に注意を促す文字の色に利用したり,車のガソリンがなくなりそうになるとメーターが赤く点滅したり,エラーメッセージに用いることもあります。

ただやみくもに使うのではなく,サービスの特徴やユーザーに与えたい印象によっても使い方を変えるとよいでしょう。

数字表現での赤

まず,数字に赤を用いるケースはよくあります。ネガティブな表現に用いる場合や,数字が減っている場合です。そのため,たとえば値下がりしたセール品の価格を表示する場合にもよく用いられます。

赤の効果的な利用法

図1は,Googleアナリティクスのホーム画面でサイトのデータを表している部分です。矢印の向きと数字に注目してください。特に左から3つ目の直帰率の数字は7日前と比較して増えていますが,赤く表示されています。直帰率は増えてしまうと悪化したことになります。数字が上がったか減ったかではなく,そのサイトにとってポジティブかネガティブかによって数字の色が緑か赤かで表現されているのです。

図1 Googleアナリティクス(PCサイト)のホーム画面

図1 Googleアナリティクス(PCサイト)のホーム画面

また,クラウド会計サービスを提供するfreeeは,支出には赤,収入には青を使っています図2)⁠

図2 freee(iPhoneアプリ)の取引一覧画面

図2 freee(iPhoneアプリ)の取引一覧画面面

会計ソフトでは,支出なのか収入なのかを間違えることは問題となります。そのため,それらをしっかりと区別しておくことがUIで大切なことだと言えます。

あえて赤を避けている事例

家計簿サービスを提供するZaimは,お金を取り扱うという点では図2のfreeeと同様ではありますが,支出を赤で表現はしていません図3)⁠家計簿では何にいくら使ったかを見ることが多くほとんどが支出になり,仮に赤い文字を使うと画面の印象が真っ赤になり,利用者もちょっとげんなりしてしまいそうです。

図3 Zaim(Androidアプリ)の履歴画面

図3 Zaim(Androidアプリ)の履歴画面

会計は数字を間違えないように処理することが大切ですが,Zaimは自分の生活を振り返ったりお金を楽しく使うために利用することもあり,数字の増減を強く強調する必要性はないためあえて赤を利用しなくてよいと感じます。

同じ数字の上下を扱うサービスでも,その数字がユーザーにとってどのような意味を持つかによっても赤を使うべきかなど表現方法が変わってくるのです。

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/

コメント

コメントの記入