UI/UX

【UIデザイン入門】配色の基本とは?具体例を用いて解説!

こんにちは、テルプロです!

「UIデザインにおける配色の基本がわからない」とお悩みではないでしょうか?

テルプロ

本記事ではそんな悩みを解決していきます!

本記事を読むことで
  1. UIデザインにおける配色の基本が押さえられる
  2. 例をもとに解説しているため、概念をしっかりと理解できる

UIデザインにおける配色の基本

本記事は、プロが監修するUI/UXデザインコミュニティBONOの「UIビジュアルの作り方」を参考にまとめます。

UIデザインをする上で、私たちはどのような配色にこだわれば良いのでしょうか。

押さえておくべき「配色の基本」は以下の通りです。

  1. 配色設計
  2. テーマカラーの決め方
  3. 配色はメインUIを引き立てる
  4. テーマカラー2つ以上の時の考え方

それぞれ解説します。

配色設計

配色の基本①「配色設計」についてです。

UIデザイン・Webデザインには、色の鉄則が存在します。基本的には、上記の通りに色を決めていけば問題ありません。

配色設計においては、以下の4点をしっかりと押さえておきましょう。

  1. メインカラー
  2. テキスト
  3. ボーダー
  4. 背景

それぞれ解説します。

メインカラー

1つ目は「メインカラー」です。

色は、種類が多いほど考えなければいけない項目が増えてしまいます。それが自然と、難易度が上がることに繋がります。

上記のように「8:2の法則」に従って色を決めましょう。

もしアクセントとして、色を増やしたい場合にはテーマカラーの中でもこの法則を適応させると良いです。

テキスト

2つ目は「テキスト」です。

テキストの色は上記のように、強弱を分けて3つの色を使い分けるようにします。

上記からは「優先順位」を意識して色を決めることの重要性が分かります。

単色しか使わないデザインだと、どれも同じ優先順位となっていますが、補足的な情報のテキストの色を抑えることで、優先度の高いテキストに注目が集まります。

色によって、目線が行く場所を決められるという訳です。「どこに目線を行かせたいか?」という優先度を意識して色を決めることが重要であることが分かります。

ボーダー

3つ目は「ボーダー」です。

ボーダーの色が強いほど、グループをパキッと分けることが可能です。グループを分けることによって、人の情報処理を手助けすることに繋がります。

上記のように、HeaderとFotterのボーダーは濃く、コンテンツ内のボーダーは薄くすることで、グループの分け方に強弱を付けることが出来るのです。

背景

4つ目は「背景」です。

背景に色を加えることで、グループとして認識することができます。また、テキストを強調させる効果もあります。

上記はPC版のTwitterのUIですが「いまどうしてる?」のゾーンが、グレーになっていることが分かります。こうすることで、本来のツイートと区別しているのです。

テーマカラーの決め方

配色の基本「テーマカラーの決め方」についてです。

テーマカラーの決め方は以下の通りです。

  1. コンセプト – どんなサービスで人の感情はどう動く?
  2. 参考イメージを集める
  3. パターンを出す
  4. 決める

それぞれ意識すべきポイントを簡単にまとめます。

コンセプト – どんなサービスで人の感情はどう動く?

  1. ロゴやモチーフを作るかの如く方向性が必要
  2. サービスのコンセプトを表現する

– 人の感情が動く

– ロゴのモチーフ

– 機械的に選ぶ

参考イメージを集める

  1. まずは定番イメージを探してみる
  2. 類似の定番イメージを探してみる
  3. 競合も見てみる

パターンを出す

  1. 参考で探したのから発想してみる。いろんなものを出す
  2. 画像やイメージから引っ張って、調整する
  3. コントラストに注意する : AAを目指そう

決める

  1. コンセプトとの合致
  2. 競合との差別化
  3. ユーザーに正しく伝えたい印象を与えられるか

このようなフローで「テーマカラー」を決めていきましょう。

配色はメインUIを引き立てる

配色の基本配色はメインUIを引き立てる」についてです。

上記は、左側が配色を意識したデザイン、右側が配色を意識していないデザインの例になります。比べてみると、見やすさが全く違いますよね。

色も情報量です。そのため、背景に色味の強いものをセレクトしてしまうと、文字が読みにくくなってしまいます。基本的なメインのコンテンツが引き立つように背景色を設定することが重要です。

重要なアクションには、メインカラーを使いましょう。今回の例だと、アクションボタンを押してもらわないと、投稿ができないのでサービスとしての機能を果たさないからです。ボタンとリンクに色を使っているのも同じ理屈です。

背景色には基本的に、白・黒・グレーなどの無彩色を選ぶようにしましょう。初心者は背景に彩度のある色を使うことをおすすめしないとのことです。

また、上記のようにボトムナビゲーションバーの色を変えるとまた違った印象を受けることが分かります。

これは薄ければ薄いほど浮いているように、濃ければ濃いほど下にあるように見えているのです。井戸の奥底は遠いから、真っ暗に見えるのと同じ現象ですね。

テーマカラー2つ以上の時の考え方

配色の基本④「テーマカラー2つ以上の時の考え方」についてです。

テーマカラーは基本的に、プライマリーカラーのみですが、雰囲気を出したいという場合にはセカンダリーカラー使う必要性がある場合もあります。

セカンダリーカラーの使い方は以下の2点です。

  • 基本的には「アクセント」として用いる
  • 使う場合には役割の設定が重要

これに関しては、下記UIの「Before/After」を見てもらうと理解しやすいです。

Before

こちらのUIは、1次色として「黄色」/ 2次色として「青」を使っています。

アクションには1次色を使うのが基本ですが、今回の場合は黄色を使っています。ここまでは問題ないのですが、それに加えて、ハイライトするところにも黄色を使ってしまっているのが問題です。

アクションとハイライトが同じ色になってしまうと、同じ役割に見えてしまうため、メリハリが付きづらくなってしまう問題があるのです。

After

こちらのUIは、1次色として「青」/ 2次色として「黄色」を使っています。Beforeと比べて、色の優先度が反対になりました。

アクションとハイライトの色を分けることにより、それぞれの役割が明確になったことがわかると思います。「役割とバランス」これが非常に重要な点です。

黄色のみで表現するの問題ないのですが、黄色はコンストラクトが強いため、白文字が目立たなくなります。ボタンの文字色は白がいいことを考えての青ということですね。

実際の使用例

画像

実際の使用例として「デザイン動画共有サービスの動画詳細UI」のリデザインに「配色の基本」を意識して取り組んでみました。

詳細は以下の通りです。

Before(リデザイン前)

テーマカラーの赤を多用しすぎており、どれが重要な情報なのか分かりづらいですね。これだとユーザーに迷いが生じてしまい、脳を疲れさせてしまいます。

こちらのUIを「配色の基本」を意識してリデザインすると以下のようになります。

After(リデザイン後)

テーマカラーを最も目立たせたいボタンに指定することで、すっと情報が入るようになりました。また、テキストの色を変えることで重要度の区別が出来ています。

「配色の基本」を意識することが如何に重要なことかが分かりますね!!

まとめ

今回は「UIデザインにおける配色の基本」についてまとめました。

優れたUIは、配色の基本をしっかりと押さえられていることがわかります。闇雲に配色を決めるのではなく、ロジカルに決めるべきということですね。

反対に、配色の基本(=型)を押さえられていれば、楽に配色を設計できます。このような基本をしっかりと染み込ませていくことが重要です。

UI/UXデザインの実践的なスキルを身につけたい方には「Udemy」がおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。

▼以下では、口コミをもとに厳選した「UI/UXデザイン学習におすすめのUdemy講座3選」をご紹介しています。ぜひ参考にしてみてください!

最後までご覧いただきありがとうございました。ではまた!

参考:https://www.bo-no.design/series/uivisual

ABOUT ME
テルプロ
東京都在住のアプリエンジニア。大学では、ソフトウェア開発の研究に取り組む。長期のエンジニアインターンシップを経て、実務スキルを磨き、現在はフリーランスエンジニアとしても活動中。メインはモバイルアプリ開発。IT関連の記事監修も行い、技術の共有と普及に励んでいます。 監修実績(レバテックフリーランス
\ 登録しておいて損なし!IT就活支援サービス /
1位:レバテックルーキー
レバテックルーキー」とは、新卒でITエンジニアを目指す学生の支援に特化した就職エージェントです。業界支持率NO.1の実績を誇っており、エージェント選びに悩む学生におすすめです。エンジニア業界を熟知したアドバイザーが担当します。面接対策だけでなく、学生の志向性やスキル、入社後のキャリアパスを考慮したアドバイスをしてくれる就職活動の強い味方となります。
おすすめ度
URLレバテックルーキーはこちら

 

2位:OfferBox
OfferBox」とは、企業が興味を持った学生にオファーする、新しい就活サイトです。学生は自分のプロフィールを登録しておくだけで、企業からオファーをもらえます。学生利用率No.1で就活生の3人に1人が利用しており、IT業界を志望する学生にもおすすめです。いわゆる一斉配信ができないため、企業はしっかりと学生のプロフィールを見て、オファーを送ってくるので安心です。
おすすめ度
URLオファー型就活アプリOfferBox

 

3位:GeekSalon
GeekSalon」とは、全国展開の大学生限定プログラミングスクールです。Web開発やアプリ開発など多様なコースを提供しています。お値段は他スクールの3分の1程度の料金で、大学生でも通いやすい値段設定です。専属メンターが全面的にサポートしてくれるため、未経験でも安心です。また、切磋琢磨できる同世代の仲間に出会えます。スクールを検討している大学生におすすめです。
おすすめ度
URL大学生限定コミュニティ「GeekSalon」