純色をWebデザインに導入してみよう
こんにちは、フロントエンドエンジニアのジャッキーです。2021年12月から弊社のデザイン部に所属し、今年の目標はデザインエンジニアになることです。
弊社のデザイン部では、毎週「デザトレ」というデザインに関しての勉強会が行われています。
そして今週、私が担当したテーマをご紹介させていただければと思います。
今回のデザトレでは、純色を利用してWebデザインしてみようというテーマにしました。
純色とは？
中明度で高い彩度の色は純色と呼ばれています。
彩度を高くすることで、派手、目立つ、鮮やかな色になり、元気な雰囲気を生み出すことができます。
純色を使用するメリットとデメリット
純色を使用することによって、物体自体を目立たせることができます。
一番の利点は、情報量が多いサイトでもメインアクションなどを強調できて、ユーザーがすぐ次のステップは何か分かることです。
例えば、デザインのベース色を灰色にし、彩度が高い青をデザインに入れると、すぐにメインの情報が見つかります。
しかし、彩度が高いため、使い道が限られています。
彩度が高い色同士を組み合わせると、目がチカチカしますよね。この現象はバレーションと言います。
その場合は色の間に黒や白など、コンポーネントを分割するセパレーションカラーを挟むと、見やすくなるでしょう。
また、他の素材の色と調和しにくいため、ユーザーが混乱してしまう可能性もあります。
あとは赤や紫など、彩度が高すぎると、警告や不安などの感覚を与えることもあります。
「Wireframe」というプラグインを使ってみました
今回はFigmaで「Wireframe」というプラグインから、EC販売サイトのワイヤーをベースに、皆さんで一緒に純色を入れてみました。
デザイン部の皆さんの作品をご覧になってください。
純色をたくさんのコンポーネントに使用すると、目が回るので、ボタンやタイトルに色を入れるメンバーが一番多いですね。
また、ダークモードでは色のバリエーションが少なく、色の明度の差も大きいので、純色を目立たせることができます。
その一方で、ライトモードだと背景色との明度差が少ないので、コンポーネントを強調するには、アウトラインのみの使用やボーダーを追加するのもいい方法です。
まとめ
純色とは彩度が高い色であり、鮮やかで強調する効果があるのに対して、他の色と調和しにくいデメリットもあります。
デザインに入れる時、もし背景との明度差が低い場合は、黒や白などセパレーションカラーを挟むといいでしょう。
他のメンバーが担当されたのデザトレも以下のリンクから見れますので、興味がある方は見てみて下さい！