純色をWebデザインに導入してみよう

こんにちは、フロントエンドエンジニアのジャッキーです。2021年12月から弊社のデザイン部に所属し、今年の目標はデザインエンジニアになることです。

弊社のデザイン部では、毎週「デザトレ」というデザインに関しての勉強会が行われています。
そして今週、私が担当したテーマをご紹介させていただければと思います。

今回のデザトレでは、純色を利用してWebデザインしてみようというテーマにしました。

純色とは？

中明度で高い彩度の色は純色と呼ばれています。
彩度を高くすることで、派手、目立つ、鮮やかな色になり、元気な雰囲気を生み出すことができます。

純色を使用するメリットとデメリット

純色を使用することによって、物体自体を目立たせることができます。

一番の利点は、情報量が多いサイトでもメインアクションなどを強調できて、ユーザーがすぐ次のステップは何か分かることです。

例えば、デザインのベース色を灰色にし、彩度が高い青をデザインに入れると、すぐにメインの情報が見つかります。

しかし、彩度が高いため、使い道が限られています。

彩度が高い色同士を組み合わせると、目がチカチカしますよね。この現象はバレーションと言います。

その場合は色の間に黒や白など、コンポーネントを分割するセパレーションカラーを挟むと、見やすくなるでしょう。

また、他の素材の色と調和しにくいため、ユーザーが混乱してしまう可能性もあります。

あとは赤や紫など、彩度が高すぎると、警告や不安などの感覚を与えることもあります。

「Wireframe」というプラグインを使ってみました

今回はFigmaで「Wireframe」というプラグインから、EC販売サイトのワイヤーをベースに、皆さんで一緒に純色を入れてみました。

デザイン部の皆さんの作品をご覧になってください。

純色をたくさんのコンポーネントに使用すると、目が回るので、ボタンやタイトルに色を入れるメンバーが一番多いですね。

また、ダークモードでは色のバリエーションが少なく、色の明度の差も大きいので、純色を目立たせることができます。

その一方で、ライトモードだと背景色との明度差が少ないので、コンポーネントを強調するには、アウトラインのみの使用やボーダーを追加するのもいい方法です。

まとめ

純色とは彩度が高い色であり、鮮やかで強調する効果があるのに対して、他の色と調和しにくいデメリットもあります。

デザインに入れる時、もし背景との明度差が低い場合は、黒や白などセパレーションカラーを挟むといいでしょう。

他のメンバーが担当されたのデザトレも以下のリンクから見れますので、興味がある方は見てみて下さい！

「#ゴーリストデザトレ」の人気タグ記事一覧｜note ――つくる、つながる、とどける。