ミュート・カラー。 定義と Web サイトやアプリでの使用方法

Advertisement

デザインに落ち着いた色を使用するというコンセプトは確かに新しいことではありません。 ほとんどどこにでもあるような鮮やかな色の傾向と比較すると、確かに何か新しいもののように思えます。

現代の UX デザイナーなら誰でも、ミニマルでフラットなトレンドが過去数年間で勢いを増していることを知っています。

Microsoft、Apple、Twitter などの企業は、デジタル製品を設計する際に、この新しいスタイルを活用しています。

フラット デザインは、ミニマリストのアプローチと密接に関係しています。

フラット デザインは、シェーディングやグラデーションを使用しないことで奥行きをなくし、一次元の幾何学を好みます。

FireShot-Capture-1789-BO ミュート カラー。 Definition and How to Use Them In Websites and Apps

The minimalist design will eschew unnecessary features and content, replacing it with a clean, sleek monochromatic approach. Together, the two approaches will give you legibility and clarity, and reject ornamentation and excess.

FireShot-Capture-1790-Fut Muted Colors: Definition and How to Use Them In Websites and Apps

However, even though these two practices make the UI interface very simple, their intersection has created some usability issues for certain users.

物事をシンプルにしすぎることは、実際には求められていたものとは逆の効果をもたらし、ユーザーは、どこをクリックすればよいのか、なぜクリックするのかを理解することがより困難になります。

ありがたいことに、これを助ける 3 つ目のトレンドがあります。

exploration-pastel-color-2- ミュート カラー。

exploration-pastel-color-2- Muted Colors: Definition and How to Use Them In Websites and Apps

exploration-pastel-color-2- Mixed Colors:

落ち着いた色の配色は、印刷広告ではどこでも見かけます。 しかし、印刷キャンペーンでは、ユーザーは紙片とやりとりするのではなく、見るだけでよいので、最小限のデザインやフラットな効果は必要ではありません。

しかし、ミュート カラー パレットは、機能的な UX の実践における主要な役割とは別に、実際には新しい役割を担っています。

ミュート カラーの定義を見つけようとすると、「ミュート カラーとは何か」という質問に対する最良の答えは、これらの色が現代的、効率的、進歩的であることを表しているという事実にあることに気づくでしょう。

これらの色は、見ている物質が何であれ、関連性があり、時代遅れでないことを視聴者に伝えます。

FireShot-Capture-1778-Rot Muted Colors.で、ミュートされた色を見ることができます。 定義と Web サイトやアプリでの使用方法

これらの色とミュート パステルは非常に意図的であり、現代の文化と大衆に語りかけています。 また、その時々の何かを意味するものでもあります。

FireShot-Capture-1780-Vic ミュート カラーの使用。

Advertisement

今日、UX デザイナーは、色の選択が実際にデザインの選択であり、色は、フロー、コンテンツ、ユーザビリティ、機能などと同様に、多くを示すことができることを知っておくべきです。

鮮やかな緑か落ち着いたトーンの緑かを選択すると、ユーザーがサイトにとどまり、すぐに離れてしまう違いを作ることができます。

ミュート カラーの理由

FireShot-Capture-1781-VR- Muted Colors: Definition and How to Use Them In Websites and AppsFireShot-Capture-1781-VR- ミュート カラーの理由です。

  1. 低い値
  2. 低い彩度
  3. 隣接する色との混合
  4. 上記のいずれかの組み合わせ

何度も見てきたフラット カラー パレットのバリエーションがあり、しばしば目指すデザインの美しさにフィットしないことがあります。

そこで、ミュート カラーのオプションが威力を発揮します。フラットな美的感覚で使用すると、クラシックで洗練された外観になり、他のすべてのフラット プロジェクトから際立つようになります。

animal-800-x-600-large-1 Muted Colors: Definition and How to Use Them In Websites and Apps

(日本語)>ミュート カラー。

しかし、ミュート カラーのパレットとは何でしょうか。

この会話の目的では、彩度の高い色相にトーン、色合い、またはシェードを追加して、控えめで明るくなくすることです。

FireShot-Capture-1784-AMA Muted Colors:

「色」は、実は私たちが毎日使っている非常に不正確な用語です。 それは、色相、彩度、および値の 3 つの主要なコンポーネントで構成されています。

赤道が360度の色相、縦軸が値、横が彩度である風船があれば、色は内積で視覚化できます。

FireShot-Capture-1785-Des Muted Colors: 定義と Web サイトやアプリでの使用方法

この質問には、「シェーディング」や「ティンティング」など、役立つ他の概念もいくつかあります。 たとえば、任意の色に黒を混ぜることは「シェーディング」と呼ばれ、もう少し落ち着いた色になります。

一方、ある色に白を加えることは「ティント」と呼ばれ、より明るい色になります。 しかし、例えば黄色のように、すべての色が明るくなったり暗くなったりするわけではありません。

淡色系の色合い

FireShot-Capture-1783-Tim 淡色系の色合いです。 定義と Web サイトやアプリでの使用方法

色に白を追加する、または色合いを調整すると、元の色よりもかなり明るい色が得られ、通常はパステルとして知られています。 ほとんど白に近い色から、完全に飽和した色よりも少し明るい色まであります。

FireShot-Capture-1786-Kve(ファイアショット キャプチャ 1786-Kve)ミュート カラー(Muted Colors: 定義と Web サイトおよびアプリでの使用方法

その感触はより軽く、よりソフトで、大胆で明るいオプションと比較して、より落ち着いた美的感覚を与えます。

イラストで非常に人気があり、また、写真でも素晴らしい効果を発揮します。 彼らは、メインの美的感覚とは対照的に、別の焦点を持っているときに最も一般的に使用されます。

ミュート カラーの色合い

FireShot-Capture-1787-Céd ミュート カラーです。 定義と Web サイトやアプリでの使用方法

一方、シェードは、色が目に重く見えるようにし、ほとんど黒に近い色から、元の色より少し暗い色まで、さまざまな色を使用します。

story-app-exploration-large「ミュート・カラー」

非常に暗くて黒が多いプロジェクトがありますが、非常にうまく実行しない限り、読みやすさの問題が発生します。 しかし、伝統的なフラット デザイン スキームの色の 1 つを進化させている場合、これはそうではありません。

ミュート カラーのトーン

FireShot-Capture-1782-Wha Muted Colors: Definition and How to Use Them In Websites and AppsFireShot-Capture-1782-Wha ミュート カラーの色。 定義と Web サイトやアプリでの使用方法

黒と白を組み合わせて色を柔らかく見せると、色調が得られます。 ほとんどの色は、ほとんど普遍的な魅力を持つ複雑な色であるため、実際にはトーンを使って作られています。

これは、色スペクトルのいくつかの異なる部分から引き出すという事実によるもので、これが、ほとんどのプロジェクトでトーンがアーティストやデザイナーの最初の選択肢となる理由です。

unsplash-app-exploration-la Muted Colors:

unsplash-app-exploration-la Muted Colors: Definition and How to Use Them In Websites and Apps

UNSPLASH-APLACHI-APLACHI-APLACHI

定義と Web サイトおよびアプリでの使用方法

落ち着いた色についての考察

いくつかの伝統的なフラット デザイン カラーから分岐しているかどうかに関係なく、上記のカラー テクニックの 1 つを選択することだけが唯一の選択肢ではありません。

これらの単純な研究の教訓は、「本による」傾向を使用しなければならないことにとらわれてはいけないということです。

これらの簡単な研究から得られる教訓は、「本に書いてある」トレンドを使わなければならないということに囚われてはいけないということです。 カラーパレットとそれを変えることは素晴らしいことであり、まだフラットなデザインを得ることができます。

落ち着いた色についてのこの記事を気に入ったのなら、これらもチェックしてみてください。

  • 写真のウェブサイト。 デザイン、アイデア、作成方法
  • スポーツ ウェブサイトのデザイン。 ヒント、インスピレーション、ベスト プラクティス
  • レストラン Web サイトのデザイン。

Unlimited Downloads: 1,000,000+ Fonts, InDesign Templates, Photoshop Actions, Mockups & Design Assets via logo

コメントを残す

メールアドレスが公開されることはありません。