• Home
• コーポレートブログ
• 色と配色の基本を学んでみた – デザイン初心者のための実践ポイント

杠です。睡眠や運動を計測しようと思いフィットネストラッカー「Fitbit Charge 6」を購入しました。購入時に割引が実施されていてお得に手に入れられました。専用のアプリで睡眠の質、長さなどによって睡眠のスコアが表示されます。最近はスコアと深い睡眠を取れているか記録を見るのが楽しみになっています。

さてチラシ、バナー、Webサイトなどを作成する際、配色はデザインの質を左右する重要な要素の一つです。例えば、赤は情熱や危険を、青は信頼や安心感をイメージさせます。私はWebサイトのお知らせや会社のブログのサムネイルを作成することが多く、特に悩むポイントとして、どの色をどのように組み合わせるかがあります。

そこで、色についての基本的な知識を学ぶことにしました。今回のブログでは、デザイン初心者である私が学んだ色と配色の基本についての知識と、実践で使えるポイントを紹介します。

学んでわかったこと

まず取り組んだのが色の三属性（色相、彩度、明度）の理解です。色相は色み、彩度は明るさ、明度は鮮やかさを示します。それぞれの性質により色を分類できます。

色・配色に関しては「色の事典 色彩の基礎・配色・使い方」を参考に以下のポイントを理解しました：

• 色の組み合わせによって、1色では得られない新たな効果を得られる
• 配色で大切なのが調和
• 調和した配色を生む基本原理として「秩序の原則」「類似性（共通性）の原理」「なじみの原理」「明瞭性の原則」の4種類がまとめられている

色の理論を意識しながら、具体的にどのように色を組み合わせるかを考えていきます。

具体的な配色の方法

ここでは比較的わかりやすいと思った「類似性（共通性）の原理」取り上げます。類似性（共通性）の原理は類似した性質を持つ色同士は調和するという考え方です。この原理に基づく配色に加えて、写真を用いた配色、さらには配色ツールの活用方法についても紹介します。

無彩色+1色の配色

無彩色（白・黒・灰色）に1色を加えるシンプルな配色方法です。無彩色は他の色と組み合わせやすいです。色みをもつ有彩色と、色みをもたない無彩色と組み合わせた配色は同一色相配色になります。同一色相配色は同じ色相の色を組み合わせた配色です。共通性があり、まとまりやすいです。

無彩色+2色の配色

無彩色+1色からステップアップしたい場合は、無彩色に2色加える方法です。色のバランスに注意する必要がありますが、類似色を選ぶと比較的バランスの取れたものが作成しやすいと思います。

上の例ではイラストと文字に無彩色（白と黒に近い色）を使い、背景と文字で類似色を選びました。

色相環（色を環状に並べて表したもの）上で隣り合う色相を組み合わせた配色は隣接色相配色になります。統一感が出やすいです。背景と文字の色は色相環では次の位置になります。背景の色は隣り合う色相から彩度を調整して使用しました。

写真から配色を考える

写真が含まれるデザインの配色には、その写真で使われている色から考える方法が利用できます。

上の例では文字の色を写真から取り入れました。文字の背景は、文字で使った色の彩度を調整したものです。文字と文字の背景に使った色は色相環では次の位置になります。

写真の上に文字を入れる場合は、写真と文字の明度差をつけることで、可読性を高めることができます。

配色ツール

配色ツールを使用する方法です。ツールによっては特定の色を選択すると、組みわせの色を提案してくれるものもあります。例えば「Adobe Color」では特定の色を指定すると、それに合わせた類似色や補色自動で提案してくれるため便利です。またアップロードした画像から色を抽出する機能もあります。

まとめ

配色はまだまだ勉強中です。色以外にもフォントや余白などの要素もデザインに関係してくるので、なかなか自分のイメージ通りにはいかないです。何か違うなと思ったら、何回も試してみるしかないと思うので練習あるのみです。練習の際にChatGPTにデザインのお題を出してもらうと簡単だという気付きがありました。配色方法の例で出した画像はChatGPTが出したお題を元に作成しました。お題を考える手間が省けるのでおすすめです。

【スタッフ募集中】
弊社ではAWSを活用したソリューションの企画・設計・構築・運用や、Ruby on Rails・JavaScriptフレームワークなどを使用したアプリケーション開発を行うスタッフを募集しています。採用情報の詳細
弊社での勤務に関心をお持ちの方は、知り合いの弊社社員・関係者を通じてご連絡ください。

---