UIデザインでの「色」の失敗をなくす7つの行動指針
フリーランスUIデザイナーのはまさきともや（@tomoya_hamasaki）です！
UIデザインに限らずすべてのデザインにおいて、色というのはとても大きな役割を果たします。デザインを始めたばかりの方が一番最初に手をつけやすいのも色だと思います。デザインをするうえで欠かせない「色（カラー）」ですが、正しい知識が身についていないと失敗しやすく、単純なようで奥が深い要素なんです。
今回はUIデザインに取り組んでいる方やこれから始めてみたいという方に向けて、色について知っておくべき基礎知識やデザインをする際の実践的な行動指針7つをまとめていこうと思います。これから紹介するポイントを1つずつ確認していただければ色の失敗をかなり減らすことができると思いますので、ぜひ参考にしていただけますと幸いです！
［1］「三原色」について知る
色といえば三原色を思い浮かべる人も多いのではないでしょうか。三原色とは、すべての色の元となる基本の3つの色のことですが、実はこの三原色には、「光の三原色」と「色の三原色」の2種類が存在します。ここでは、それぞれの特徴や違いについて簡単にまとめておきます。
光の三原色
・R（Red / 赤）G（Green / 緑）B（Blue / 青）
・PCやモバイル端末などのスクリーンでの表示に使われる
・3つの色を合わせると白になる加法混色
RGBそれぞれを256段階使用できる「フルカラー表示」の場合、256×256×256=約1677万色を表示することが可能です。
色の三原色
・C（Cyan / シアン）M（Magenta / マゼンタ）Y（Yellow / イエロー）
・写真やポスターなどの印刷物での表示に使われる
・3つの色を合わせると黒になる減法混色
実際の印刷の際には、CMYとは別にK（Key plate / キープレート（一般的には黒））のインクが用意されており、CMYKの4色が使われています。
光の三原色と色の三原色では混色方法が違うため、表示できる色の範囲も異なります。「スクリーンと印刷物で同じ色が表示できない」といった問題が発生する可能性がありますので、ロゴやブランドカラーを決める際には、RGBとCMYKの両方で表示できる色を設定するようにしましょう。Adobe Illustratorなどのデザインソフトでは、CMYKで表示できない色を設定した際に注意を促してくれますので、こういったものを参考にしながら色を決めていくのもおすすめです！
［2］カラーパレットを使う
UIデザインを行う際には、ブランドカラーやアクセントカラーなどの色を選ぶ機会が多くあると思います。ゼロから自分で色を選ぶのは面倒だし、意外と難しい…。そんな時に活用できるのがカラーパレットです。カラーパレットを使うことでスクリーンで映える色のカラーコードを簡単にコピーすることができます。難しい色選びの手助けをしてくれて、時間の節約もできる最強のツールです。
無料で使えるカラーパレットもたくさんありますので、使いやすいものを見つけてブックマークに保存しておくと非常に便利です。ぼくが使っているカラーパレットを紹介しておきますので、良ければ使ってみてください！
［3］HSBで調整する
UIデザインを進めていくと、背景色やボーダーの色など細かい色の調整が必要になることがあります。このような細かい色の調整にはHSBカラーモデルを活用することをおすすめします。HSBはそれぞれH（Hue / 色相）S（Saturation / 彩度）B（Brightness / 明度）を表しており、数値を変えることで定量的に色の調整をすることが可能です。
HSBで調整する時は、Hを固定したままSとBを少しずつ変えていきながら調整をすることで、トンマナを崩すことなく色を調整することができます。
［4］失敗しない配色をみつける
デザイン初心者の方にありがちな失敗の中には、使っている色の種類が多すぎることが原因となっているものが多くあります。そんな失敗を繰り返している方に知っておいてもらいたいのが、「白＋黒＋キーカラー」の配色です。世の中に出回っているアプリケーションやWebサービスでも、「白（背景）＋黒（テキスト）＋キーカラー（ボタンやキービジュアル）」の配色が採用されているものが多くあります。
この鉄壁の配色を軸に、それぞれの色の割合を調整したり、アクセントを加えたりしながら、色のバランス感覚を醸成していくことをおすすめします。
［5］プロダクトに合った色を選ぶ
アートとデザインは似て非なるものです。UIデザインで色を選ぶ際には、自分やクライアントが好きな色ではなく、そのプロダクトやユーザーに適した色を選ぶようにしましょう。
一般的な傾向として、C to CのサービスやECサイトなどワクワク感が重要になるプロダクトでは暖色が採用され、反対にB（企業）向けのプロダクトや管理ツールなど信頼感が重要になるプロダクトでは寒色が採用されます。
プロダクトのブランディングやユーザーの属性、プロダクトの利用価値などから総合的に色の方向性を決めることが重要になります。
［6］アクセシビリティについて学ぶ
日本人男性の1/20人、女性の1/500人は色覚異常（色弱）を持っていると言われています。できる限り多くのユーザーにとって使いやすいUIを作成するためには、アクセシビリティに関する配慮は必要不可欠です。ここでは色に関するアクセシビリティを代表して、色の組み合わせとコントラストについて簡単にまとめておきます。
色の組み合わせ
色の組み合わせを選ぶうえで特に注意が必要なのが、赤と緑の組み合わせです。色覚異常を持っている方の多くは赤と緑を判別することが難しいため、赤系統の色と緑系統の色を組み合わせた配色はなるべく避けるようにしましょう。
コントラスト
コントラストとは、2つの色の色相、彩度、明度の差を指します。世界基準のウェブアクセシビリティガイドラインであるWCAGでは、背景とテキストなどの視覚情報のコントラストは1：4.5以上が好ましいと定められています。無料で使えるコントラストチェッカーもありますので、色を決める際にはぜひ活用してみましょう。
アクセシビリティについてはMaterial DesignやHuman Interface Guidelinesなどのガイドラインにも記載がありますので、詳しく知りたい方は併せて確認してみてください。
［7］色以外の表現方法を身につける
使う色の種類が多すぎる問題やアクセシビリティへの対策として、色に頼りすぎないデザイン手法を学ぶことも有効です。シェイプやスタイルなど、色以外の要素でも差を出せるように、意識して表現の幅を広げてみましょう。
表現の引き出しを増やし、状況に適した表現方法を選択するスキルを磨けば、よりユーザビリティの高い洗練されたUIを生み出すことができるようになるはずです。
DribbbleやPinterestなどのクリエイティブシェアサイトを使ってたくさんのUIに触れることで、表現の幅を広げていきましょう！
今回は、単純なようで奥が深い「色」についての行動指針をまとめさせていただきました。UIデザインに大きく影響する「色」について正しい知識を身につけておくことで、デザイン初心者の方がやりがちな失敗を減らすことができると思いますので、ぜひ参考にしていただけると嬉しいです！
現在は、「ストレスフリーな日常体験」をビジョンとして、デザイン活動を行っています！
一緒にお仕事をしてくれる仲間や、スキルアップを目指す仲間を募集しています。デザインに触れたことがない方でもお声掛けいただけると嬉しいです！
お仕事のご依頼はTwitter（@tomoya_hamasaki）までお願いいたします。
この記事が気に入ったらサポートをしてみませんか？