色彩をUXに活かすための4つのポイント
*「色」*というものは、どんなデザインにおいても最も重要な要素のひとつです。
ホームページやアプリでは、ボタンをハイライトしたり、まわりのコントラストを絞って要素を目立たせたり、特定の部分にだけ限定的に着色したりして、「色」をうまく活用しているデザインも多くあります。
色によって見せ方やヒエラルキーも変化し、ユーザーがどう受け止めるかにも影響するので、デザイナーにとっても無視できない要素のひとつになっています。
しかし、色彩理論を学んだだけでは、どのように色をデザインに活かしていけばいいかが分かりにくいので、色彩をUXに活かしきれていないと感じている人もいるのではないでしょうか。
今回は、戦略的に色を使って最高のUXに近づけるための4つのポイントをご紹介します。
色彩をUXに活かすための5つのポイント
1. 視線が奪われるようにアクセントカラーを使う
色の使い方というと、どの色の組み合わせを選ぶかだけを考えてしまいますが、それだけにとどまりません。
実際、色の選び方と同じくらい、その色をどのくらいの割合で使うのかという色同士の「比率」を考えることも重要です。
最近ではかすかな色を使った背景のホームページが増えていますが、そうした背景のホームページでは、部分的に*「アクセントカラー」*を用いると、そこに注目が集まります。
Scheduled — Schedule your text messages for your favorite messenger
例えば、リマインドを設定できるアプリ*「Scheduled」*の紹介サイトでは、周囲の色に比べて認識しやすい彩度の高い赤色を使ってダウンロードボタンを目立たせています。
同様に、非常にシンプルなオンライン履歴書を作ることができるサービス*「Glyph」*は、Twitterアカウントにログインすることで簡単にサインアップができますが、やはりそのボタンを配置するとともに、背景色と近い色ではなくはっきりと識別できる青色を使ってボタンを認識しやすくしています。
一方、背景に比べてボタンが質素すぎると、かえって目立たなくなるケースもあります。
例えばslackを使ってデザインのプロジェクト管理を行う*「Paste」*のホームページでは、Slackのアイコンがあるものの、白いボタンのログインボタンがあまり目立っていません。
パッとみたときに視線が奪われる場所にログインボタンや購入ボタンのような重要なUIがあれば、ユーザーを望ましい方向に誘導することができます。
もちろんボタンの大きさやタイポグラフィも重要ですが、色の変化によって成果も大きく変わってしまうでしょう。
2. 色を使ってUXのリズムを作る
心地いいUXには、*「一貫性」*が不可欠です。
デザインによって次に何が起こるのかをある程度予測できる「予測可能性」を高めると、一般的に離脱率を下げることができると言われています。
配置やタイポグラフィの繰り返しによっても「一貫性」を生み出すことはできますが、何より最も分かりやすく「一貫性」を作り上げられるのは、「色」を使った場合です。
たくさんの色を使い過ぎずに、できるだけ色彩数を絞って一貫した世界観を作り上げることで、UXを改善することができます。
その例が、スクリーンショットをチームで共有することができるMacOS用アプリ*「Teampaper Snap」*のページです。
このホームページでは、水色を「背景色」として使ったりボタンの「文字色」として使ったりしていますが、原則としてこの水色を使うことで一貫性を生み出しています。
Facebookメッセンジャーのチャット機能を使ってカメラを操作することができるサービス*「Cheeze」*では、紫色がUIカラーとして採用されています。ボタンの色だけでなく、イラストにも紫色が使われており、ホームページ全体を見たときに統一感があります。
一方、一度にたくさんの色を取り入れすぎると、かえってユーザビリティが低下してしまう恐れもあります。
上のポートフォリオサイトのように、グリッドで大きさは区切られているものの、色によるヒエラルキーが成立していないデザインの場合は、どれをクリックしたらいいのか分からず、ユーザーの選択を鈍らせてしまい、コンバージョン率を下げてしまう原因にもなります。
3. 色のヒエラルキーを作る
デザインにおける*「ヒエラルキー」*とは、*重要度の「階層」*のことを指します。
重要度の階層は大きさや配置によっても生み出すことができますが、色彩によってヒエラルキーを作り上げることも大切なことです。
Setlr - The Human Translation Engine
複数の色を使う場合には、色面を広く採るメインカラーとそのほかの色をパッと見て分かるようにデザインします。
例えば人力の翻訳エンジン*「Setlr」*のホームページは、ブルーの色面が広くなっており、次にエメラルドグリーンがアクセントとして採用されています。
サイト内にはそのほかの色も使われていますが、一貫性を崩さないようにわずかに使われているだけとなっています。
一方、スタートアップ企業の動画の作成方法をレクチャーしている*「How to Make a Startup Video」*は、ブルー・ピンク・イエローの3色が同じような割合で使われています。
文字の大きさによってヒエラルキーは生み出されていますが、色を使ったヒエラルキーがないので、例えばブルー・ピンク・イエローのボタンが並列しているときにどれを最初にクリックすればいいのかをためらってしまいます。
ユーザーに最も伝えたい情報があっても、色によって台無しになることもあるので、戦略的に色の使い方を決めておきたいものです。
4. 同系色による美しさを演出する
色の組み合わせを選ぶときに、ある色の補色を選んだり三和色を選んで鮮やかに演出する方法もあります。
一方で、メインカラーとなる1色を選んだときに、あえてその同系色を使うことでブランドカラーのイメージを構築する方法もあります。
Co-motion | Design & Branding Studio
クリエイティブエージェンシー*「Co-motion」*のトップページは、同系色による美しさを上手く演出できている好例のひとつです。
薄いブルーの背景に、水色の鮮やかなパッケージが目に飛び込みます。
また、スマートフォンで簡単に決済するプラットフォームを提供している*「Instant Access」*のホームページのように、同系色同士のグラデーションを使うのも、一貫性が生み出されて美しく見えます。
まとめ
以上、戦略的に色を使って最高のUXに近づけるための4つのポイントをご紹介しました。
色の使い方ひとつとっても、戦略的に考えてデザインすることで、見た目も使い勝手も大きく変わることがご理解いただけたのではないでしょうか。
ユーザーにとって使いやすく、見やすく、好きになってもらえるホームページにするために、まずはご自身のホームページの「色」を見直してみてはいかがでしょうか。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- Twitterとは140文字以内の短文でコミュニケーションを取り合うコミュニティサービスです。そもそもTwitterとは、「小鳥のさえずり」を意味する単語ですが、同時に「ぺちゃくちゃと喋る」、「口数多く早口で話す」などの意味もあります。この意味のように、Twitterは利用者が思いついたことをたくさん話すことのできるサービスです。
- アカウント
- アカウントとは、コンピューターやある会員システムなどサービスを使うときに、その人を認識する最低必要な情報として、パスワードと対をなして使う、任意で決めるつづりです。ユーザー、ID、などとも言います。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- 離脱率
- 離脱率とはホームページを見ている人が、そのホームページから去り、アクセスの記録などを取れなくなる状態の割合のことを言います。ホームページ運営者はどのページでユーザーが離脱(去った)のかをチェックし、改善に役立てることが多いです。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ユーザビリティ
- ユーザビリティとは、ホームページの使いやすさのことです。万人にとって使いやすいホームページは存在しませんが、運営者はターゲットとするユーザーに便利に使ってもらうために、優先させることや割り切ることを検討し改善する必要があります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング