みなさんは、『プライマリーカラー』と『セカンダリーカラー』という言葉を聞いたことがありますか？

ウェブデザインやUI/UXデザインにおいて、色の選択は非常に重要です。特に、プライマリーカラー（主色）とセカンダリーカラー（副色）を含めた『キーカラー』への理解は、デザイン全体の基盤を形作る上で重要な色彩設計の基礎知識です。

『キーカラー』と『メインカラー』定義はこちら

これらの色を効果的に活用することで、視覚的な魅力やアクセシビリティを高め、UI(ユーザーインターフェース)やUX(ユーザエクスペリエンス)を向上させることができます。

[前編]である本記事では、まずはデザイン基礎講座としてデザイン初心者やエンジニアさん向けに『キーカラー』の定義や理想的な割合について詳しく解説していきます。

[後編]では、カラーの決め方、実際のデザインにどのように活用できるかについてステップバイステップで詳しく解説していきます！

また、本記事では個人情報不要・無料でダウンロードできるFigma形式のテンプレートを２種類ご用意しました。実際にデザインでぜひご活用ください。

色彩デザインの基礎を抑えて、UI/UXに強いサイトづくりを行いましょう！

後半記事：【デザイン基礎講座】プライマリーカラーとセカンダリーカラーを決めてみよう！[後編]

1. デザインにおけるUI/UXの重要性

1-1. UI/UXとは？

| UIとは？

UI（ユーザーインターフェース）とは、ユーザーがアプリケーションやウェブサイトと直接対話するための視覚的要素やデザインを指します。ボタン、メニュー、アイコンなど、ユーザーが操作するための具体的な要素が含まれ、使いやすさや見た目の美しさが重視されます。

| UXとは？

UX（ユーザーエクスペリエンス）とは、ユーザーが製品やサービスを使用する際に得る全体的な体験を指します。使いやすさ、満足度、感情的な反応など、ユーザーのニーズや期待に応えることが重要で、製品の設計や機能がどのように影響するかを考慮します。

これにより、視覚的な認識が向上し操作が容易になるため、単に障害を持つ人々のためだけでなく、すべてのユーザーが快適にウェブサイトを利用できるようになります。優れたウェブコンテンツには、UI/UXやアクセシビリティ等の配慮が必要不可欠です。

| UI/UXの重要性

・直感的な操作によるユーザー満足度の向上

・スムーズな操作による顧客維持と離反の抑止

・他社のサービスや商品との差別化による競争力の強化

・明確なデザインによる開発工程の効率化とコスト削減

| アクセシビリティとの関係

すべての人が情報やサービスにアクセスできるようにするための設計や配慮を指す”アクセシビリティ”は、UI/UXを向上させるために重要な要素です。

ウェブコンテンツにおけるアクセシビリティとは、色覚異常のあるユーザー向けに高コントラストの配色を使用したり、高齢者やデジタルデバイスに不慣れなユーザーのために大きめのアイコンを設置することが含まれます。

1-2. 企業のデザイン原則

2014年6月にGoogleは、今後の UX デザインの指標となる「Material Design」を提唱しました。これは、Android、iOS、Flutter、ウェブにおいて、高品質なUX設計を行うことを目的としており、主に3つのデザイン原則があります。

「Material Design」とは視覚的な美しさと機能性を兼ね備えたデザイン言語であり、Googleはこの規則に則ってユーザーにとって使いやすく、魅力的なインターフェースを提供することを目指しています。

2. 『キーカラー』と『メインカラー』の定義

2-1. キーカラーの定義

デジタルデザインを行う上で、適切なカラースキームを構築することはとても重要です。これにより、ブランドイメージが確立し、ユーザーが明確に情報を認識できるようになります。

具体的には、同じ色相の階調から必要なカラーを選択し、『キーカラー』として設定します。

『キーカラー』はメインカラー、アクセントカラー、バックグラウンド(ベース)カラーに大別できます。

| キーカラーの説明

また、『キーカラー』においては、

の比率で構成が、バランスの取れた美しい配色とされています。

　

2-2. メインカラーの定義

さらに『メインカラー』の中にも、プライマリー（主色）、セカンダリー（副色）、ターシャリー（第三色）といった色の階層が存在します。これらの色は、デザインにおいて異なる役割を果たし、全体のバランスや調和を保つために重要です。

| メインカラーの説明

2-3. アクセントカラーの定義

『アクセントカラー』とは、配色においてメインカラーを際立たせるために用いられる色のことであり強調色や差し色とも呼ばれます。全体のバランスを整え、デザインに奥行きや個性を加える役割を果たします。

| アクセントカラーの説明

・使用される色：特定の要素に注意を引くために高彩度(より鮮やか)やメインカラーと対比的な色を小面積で使用。

・使用シーン：特定の意味を持ったハイライト表現や、CTAボタンに使うことで抑揚を変えて重要性を示す。

・使用の際の注意点：アクセントカラーを使用する際には、過度に使わないように注意することが重要。

| Q.複数のアクセントカラーを使う場合は？

　A. アクセントカラーを複数使う場合、色に優先順位を付けることが重要です。

具体例：ボタンにおけるアクセントカラーの優先順位付け

STEP1. 上記サンプルファイルを参照
STEP2. ファイル右クリック「コピー」(Ctrl+C)、もしくは、「ドラフトに複製を作成」
　※「コピー/貼り付けオプション」にて画像など、任意の形式でコピーすることも可能
STEP3. 「⁨⁩00（コピー）」複製版を自身のファイルに貼り付けまたは、移動
STEP4. 自身のファイル上で編集、調整

これは、情報の階層を明確にし、ユーザーが重要な情報を簡単に識別できるようにするためです。優先順位の高い重要な要素にはより鮮やかなアクセントカラーを追加し、次に優先順位の高い要素にはよりメイドや彩度を抑えたアクセントカラーを狭い範囲で使用することが重要です。

3. 前半のまとめ

今回の記事では、『プライマリーカラー』と『セカンダリーカラー』を決めるにあたって重要なデザイン原則の基礎知識について解説していきました。

『キーカラー』はメインカラー、アクセントカラー、バックグラウンド(ベース)カラーから構成され、

そのうちの『メインカラー』は、プライマリー（主色）、セカンダリー（副色）、ターシャリー（第三色）へ分類することができます。

また、メインカラー：アクセントカラー：バックグラウンド(ベース)カラー の比率を

　「25%：5%：7%」

で構成することで、バランスの取れた配色を実現できます。後半では、Figmaを活用したキーカラーの決め方や実際のECサイトにおける活用と無料Figmaテンプレートを配布しておりますので、ぜひご覧くださいね！

後編：【デザイン講座】プライマリーカラーとセカンダリーカラーの決め方[後編]　

デザイン原則を抑えてプロジェクトを成功に導きましょう！

4. デザイン研修会でデザイン思考を学びませんか？

“デザイン原則についてどこから学べばいいのかわからない“、

“デザイン思考には興味があるけど敷居が高そう“といったイメージをお持ちの方に向けて、

UIUXデザイン会社「Engineerforce」では企業向けデザイン研修会を行っています。

~社内にデザイン思考を浸透させる~　ダイジェスト Ver

この研修では、UIUXデザインの専門家から直接学ぶことで、デザインの基礎知識から最新のトレンドを理解し、デザイン思考を体系的に身につけることができます。

実践的にすぐ応用できるよう詳しく研修しておりますので、興味のある方はぜひ下のリンクからお気軽にお問い合わせください。

5. 関連記事

「Web、UIデザインには欠かせない「コントラスト比」とは？」【テンプレ付】

コントラスト比の概要や、推奨される基準値（4.5:1）やコントラストチェッカーのツール、WCAGとの関係、そしてアクセシビリティを向上させるためのポイントをわかりやすく解説しております。