.jpg)
こんにちは、グループブランディング室デザイナーの暁です。株式会社モニクルでは、デザイナー一人ひとりのスキルアップと、チーム内での知識共有を目的に、社内勉強会を開催しています。
第1回のテーマは「UIカラーパレット作成」。今回はシニアエキスパートの神田さんを講師に迎え、日々の業務で悩みがちな「色選び」を、理論と実践の両面から学びました。本記事では、勉強会当日の様子や参加者の声を交えながら、その学びのポイントをご紹介します。
スキルアップと交流を目的に社内勉強会がスタート
モニクルのデザイナーは、日々それぞれのプロジェクトに向き合いながら、より良いデザインを追求しています。そうした中で、チーム全体で知見を共有したり、業務を離れて自由にコミュニケーションをとる機会が少ないという課題意識もありました。
「他のメンバーがどういうふうにデザインを考えているのか知りたい」「プロジェクトを超えてスキルを高め合える場がほしい」。
そんな声をきっかけに、今回の社内勉強会が企画されました。それぞれの経験や視点を持ち寄りながら、気付きや学びを日々の業務に還元していくことが、この勉強会の目的です。
初回のテーマは「色の選び方」
第1回のテーマは、「UIカラーパレット」です。
「感覚に頼って色を選んでしまうことが多い」「ブランドイメージや伝えたいことを、どう色で表現すれば良いか分からない」。そんな声が多く集まり、今回のテーマが決定しました。
講師を務めたのは、UIデザインとカラーシステムに精通しているシニアエキスパートの神田さんです。長年の経験をもとに、カラーパレットの設計手法や考え方について、実践を交えて丁寧に解説してくれました。
3つのカテゴリから考えるUIカラーの基本
-
暁
- はじめに、UIカラーパレットの基本的な考え方について神田さんから解説をお願いします。
-
神田
- UIの「カラーパレット」とは、画面上で使用する色を一定のルールで整理・分類した色の一覧のことです。今回は、カラーパレットを作るための色の決め方や作成の流れについて解説していきます。
-
神田
-
まずは、UIデザインで使う三種類のカラーのカテゴリをご紹介します。
「ブランドカラー」は、UI全体の印象を左右する重要な色で、ボタンやナビゲーション、アイコンなどに使われます。UIデザインに取り組む前にあらかじめ決まっていることが多いですが、マウスオーバー時の変化など、実際の使い方に応じてトーンを調整する場合もあります。- ブランドカラー
- サポートカラー
- ニュートラルカラー
-
神田
- 「サポートカラー」は、ユーザーへのフィードバックを伝えるための補助的な色です。例えば「成功、エラー、警告、インフォメーション」といった状態に応じて、グリーンやイエロー、レッド、ブルーなどを割り当てるのが一般的です。
-
神田
- 「ニュートラルカラー」は、ブランドカラーやサポートカラー以外のカラーです。UI上では、基本的にグレーの階調として使われることが多いです。ニュートラルカラー選定のポイントとして、無彩色（色相と彩度がなく明度だけを持つ）ではなく、今回の場合基準となるコーポレートカラーの色味を含めた方が、展開した際の相性が良くなるという点があります。
-
神田
- まずは、最も重要で変更されることも少ない「ブランドカラー」を決めます。例えば、ブランドカラーが青の場合、一口に青といってもさまざまな種類があります。ボタンに使うなら視認性があるか、マウスオーバーした時の変化に耐えられるか、などの観点から適切な色味を選ぶ必要があります。
-
神田
- このときに、一般的によく使われるHexやRGBではなく、「HSB」を使うのがポイントです。HSBは、色相（Hue）、彩度（Saturation）、明度（Brightness）で構成されています。色相は0から360で一周するので分かりやすいですし、彩度と明度も、それぞれ0から100までで表します。HSBは色をコントロールしやすいんです。
-
神田
- ブランドカラーの次は「サポートカラー」を選びます。ここで重要なことは、ブランドカラーとサポートカラーのトーンを合わせることです。あまりに彩度が異なる場合、デザインの統一感がなくなり、UXにも影響を与えてしまいます。HSBを使い、最初は彩度と明度が「5～10以内」を目安に調整すると、全体のトーンがそろいやすくなります。
-
神田
- デザインをしていく上で、同じ色でも濃淡のバリエーションが必要になる場合があります。そのために作るのが「カラーステップ」です。カラーステップを何段階にするかはブランドによって異なりますが、今回は100から900までの9段階を作ることにしましょう。
-
神田
-
まずは、色を決めやすい両端の100と900からスタートします。以下の数値が目安になります。
- 900（濃い方）：彩度が90～100、明度が20～30
- 100（明るい方）：彩度が5～10、明度が90～100
次は、中間色の300と700を決めて、さらにその中間の200と800のカラーを決めていくと、カラーグラデーションが完成します。他の色も同様に進めていきましょう。
最後に「ニュートラル」です。こちらは真ん中の500から決めても、一番濃い900から始めても問題ありません。手順としてはサポートカラーと同様に、基準となる色を決めてから他の段階を展開していきます。ちなみに、「ニュートラルの900」には、基本的に黒（#000000）は使いません。
こうして全体のカラーステップが出そろったら、一覧にして並べてみて、実際の見え方を確認してみましょう。ぼやけた状態でも色の違いがはっきり見えるかなど、数値だけではなく目で見てチェックします。
-
神田
- さらに、コントラスト比も必ずチェックします。背景色と文字色の組み合わせが読みづらくないか、アクセシビリティの観点からも配慮が必要です。実際に使用する想定でテストしたり、ツールを使用して数値を確認しながら微調整していきます。
ワークショップで見えた「色選びの難しさ」
勉強会の後半からは、実際にFigmaを使ってカラーパレットを作るワークショップを行いました。各自、好きな色や担当しているサービスをイメージしてブランドカラーを設定し、サポートカラーやニュートラルを展開していきます。
HSBでの調整方法や、ステップの組み立て方を踏まえつつも、実際に手を動かしてみると想像以上に難しく、「この色のトーンが他と合わない」「同じ数値で設定しているのに、色によっては彩度が高く感じる」など、あちこちで試行錯誤する様子が見られました。
数値に頼りすぎず、最後は自分の目で見て調整を
-
暁
-
色を決める際に、気をつけた方が良いポイントがあれば教えてください。
-
神田
-
カラーパレットを作成するとき、数値的に均等な間隔で調整しても、実際には視覚的に違和感が出てしまうことがあります。例えば、明度や彩度を一定のルールで並べても、人の目にはその変化が均等には見えないんです。だからこそ、最終的には「目で見て調整する」プロセスが不可欠です。
「スティーヴンスのべき法則（Stevens' power law）」という法則があるのですが、この法則は、与えられた刺激の変化率の観察であり、色の明度スケールに影響します。知覚的に均一な色空間において、色合いと陰影の数値的に均等な分布は、人間の目には均等に分布しているように見えません。
私も実際に手を動かしてみると、数値を均等に並べただけでは色に違和感が生じてしまうことに気が付きました。まずは数値で設定し、そこから自分の目で確かめながら微調整していく工程がとても重要だと実感しました。AIツールを使えば、一定のルールに沿った色は簡単に作れますが、最終的な仕上がりには“人の感覚”による調整が欠かせません。
参加者からも、「カラーパレット上では整っていても、実際のUIに当てはめると印象が変わる」「小さなパーツでは問題なくても、使用面積が大きくなるとバランスを取るのが難しい」といった声がありました。カラーパレット上と実際の使用環境では見え方が異なることが分かり、実務に直結する多くの気づきが得られました。
また、作成したカラーパレットは、将来的に調整したり他のメンバーへ引き継ぐ際のために、制作意図やルールをドキュメント化しておくことが重要だという認識も深まりました。
長く使えるカラーパレットを設計するには
-
暁
- カラー設計を進めていく中で、「今ある色では対応できないので、新しい色がほしい」と感じることもあると思います。そういった場合はどうしたらいいでしょうか？
-
神田
-
たしかに、色を追加したくなることがあるかと思いますが、安易にカラーステップを増やすのはおすすめしません。ステップを増やすというのは最後の手段で、それをやってしまうと色の管理が一気に大変になってしまうんです。
まずは、いまあるステップの中でどう使いまわせるか、どう工夫できるかを考えてみてください。例えば、「彩度や明度を少し変えてみる」「色相を微調整する」といった小さな調整だけでも、印象が大きく変わることがあります。
また、カラーを効率よく管理していくために、Figmaの「バリアブル」機能の活用は必須です。オブジェクトごとにカラーコードで指定してしまうと、後から変えたいときに、一つひとつ手作業で修正しなければいけませんよね。
ですが、バリアブルで色を定義しておけば、元の色を1ヵ所変更するだけで、すべてのデザインに自動で反映されます。例えば、元々「ブルーの500」を使っていたとして、ユーザーの年齢層に合わせて「ブルー400」に差し替えたいという場合に、バリアブルなら簡単に修正できます。
こうした仕組みを最初に整えておくことで、ダークモードの対応や、ブランドリニューアルが必要となったときにも、柔軟に対応できる土台ができるんです。
実践から見えた“色設計のヒント”
今回の勉強会を通じて、デザイナーのみなさんから実務に直結する学びや気付きが多く寄せられました。一部をご紹介します。
-
伊東
- 数値で見たときと、実際に画面で見たときの印象の違いにはっとしました。ワークショップ形式で他のメンバーと一緒に手を動かせたことも、とても楽しかったです。
-
大谷
- 今回、色の選定方法を改めて学んだことで、いままでいかに自分が感覚的に作業を進めていたかを痛感しました。また、UIデザインとWebデザインでは、色の考え方やルールが異なることも実感し、UIデザインについてもっと深く知りたいという気持ちが強くなりました。
-
西尾
-
教科書には載っていないような、実践的なカラー選定のプロセスを学べたのが大きな収穫です。数値で設定したとしても、最後は自分の目で見て微調整するという工程がいかに重要かを再確認できました。感覚や直感を大切にしつつも、これまでの自分の進め方の課題も浮き彫りになり、非常に学びが多かったです。
最後に、今回講師を務めていただいた神田さんからも、振り返りのコメントをいただきました。
-
神田
-
今回、あらためて自分の知識を言語化できたのがよかったですし、参加者のみなさんに実際に手を動かしてもらえたのも大きなポイントだったと思います。
よく『デザイナーは感覚で色を選んでいる』と思われがちですが、実際には基本となるルールや背景を理解した上で判断していることがほとんどです。”感覚”といっても、ルールを知らないまま直感で選ぶのとは違うんですね。まずはルールを理解して、それに基づいて判断し、最後の微調整で“感覚”を活かしていく。このプロセスこそが、実践的なデザインにおいて必要な姿勢だと思います。
色の選び方一つとっても、なぜこの設定になっているのか、その背景を知ろうとする姿勢が、デザインの理解を一歩深めてくれるはずです。今後のデザインにも、そうした“探求の視点”を持ち続けていってもらえたらうれしいです。
「なんとなくで色を選んでしまう」「ブランドイメージをどうやって色で表現すれば良いのか分からない」。そんな声をきっかけに始まった今回の勉強会。理論だけでは補いきれないカラー選定の難しさや、デザイナー自身の「目で見る力」の大切さを、あらためて実感する機会となりました。
モニクルでは、今後もこのような学びの機会を定期的に設けながら、デザイナー一人ひとりの成長と、チーム全体のデザイン力の向上を目指していきます。次回のテーマは「効率化」です。今後の取り組みにもぜひご期待ください！
