フラット デザインは、驚くほど長い間関連し続けている Web デザインのトレンドの 1 つです。 過去数年間、このデザインはデスクトップ、Web、インターフェイスの開発で積極的に使用されてきました。 モバイルアプリケーション。 フラットデザインは印刷物のグラフィック素材を作成する際にも積極的に活用されています。 知ること さらなる事実このオンライン チュートリアルではフラット デザインについて学ぶことができます。 今日の会話のテーマは、フラットデザイン全体ではなく、その特定の部分であるフラットカラーです。
フラット デザインの名前には理由があります。そのコンセプトでは、3 次元要素、深い影、明るいグラデーションの使用が排除されています (英語の「フラット」は「平ら」を意味します)。 ボタン、アイコン、その他のグラフィック要素は単純化されて明確に見えますが、依然として魅力的です。
フラットな Web サイトのデザインを開発するのはそれほど簡単ではありません。 インタラクティブ要素では主な問題が発生します。デザインでは静的コンテンツと動的コンテンツの違いを強調する必要があるからです。 どの要素がインタラクティブであるかをユーザーに伝える唯一の方法は、微妙な影と境界線を使用することです。 したがって、「バランスの取れた」フラットなレイアウトを作成するには、すべての要素を細部に至るまで検討する必要があり、これは簡単な作業ではありません。
配色にフラットカラーを選択する
Web デザインにおける色の重要性は、過大評価することはできません。 たとえば、成功した記事はより多くの読者を引き付けることができます。 フラット デザインは、色に関するすべての点でユニークであることはすぐに言う価値があります。 フラットなデザインの明るい色は、すぐにユーザーの注目を集めます。 2 つまたは 3 つの色合いで構成される従来の配色とは異なり、フラット レイアウト デザインは 4 つ以上の色で行われます。 非常に多くの場合、これらはグレーまたは黒と組み合わせられた豊かな色合いです。
色の組み合わせに関する従来のルールをフラット デザインに適用することはほとんどできません。 フラット デザインでは、色そのものの組み合わせではなく、そのトーンと彩度が重要です。 1 つのレイアウトのデザインでは複数のレイアウトを絶対に使用できるという事実にもかかわらず、 異なる色、それらを深く組み合わせる必要があります。 単色自体は原色または二次のいずれかになります。 白と黒の対照的な組み合わせも可能です。
理論から実践へと移りますが、W3.CSS のフラット カラーのセットについてお話したいと思います。 このコレクションには、Web サイトを作成するためのさまざまな配色が含まれています。 ここでは、マテリアル デザイン、フラット カラー、Windows メトロ、Windows Phone 8 の色が見つかり、選択した組み合わせをすぐに適用できるように、HTML と CSS のコード例が示されています。
まったくの初心者でどこから始めればよいかわからない場合は、「フラット UI カラー」にアクセスしてください。 このサイトでは、好きな色をコピーし、適切な値を挿入してグラフィック エディターでその色を見つけることができます。 ご覧のとおり、緑、青から黄色、オレンジまで、明るい色合いが選択の大半を占めています。
ただし、フラットデザインであっても、選択できる色には制限があります。 たとえば、赤、黄色、および黄色の組み合わせはほとんど見られません。 青い花 1つのレイアウトで。 デザイナーは、より豊かで混合された色合いを好みます。
フラットなウェブサイトのデザインを開発したいですか? フラット デザインの原則を考慮して作成された MotoCMS 3.0 テンプレートに注目してください。 テンプレートを比較しました さまざまなサンプル単色の配色を使用して、UI プロパティにどのような影響を与えるかを示します。
明るい色。鮮やかな青、緑、紫が白または黒の背景に映えます。 これらの色は、フラットな Web サイトのデザインでよく使用されます。
印刷サービス Web サイト用の MotoCMS 3.0 テンプレート
印刷サービス Web サイト用の MotoCMS 3.0 テンプレート - 完璧な解決策印刷・印刷関連のプロジェクトに。 ただし、テンプレートのテーマは簡単に変更できます。 テンプレートのデザインは、フラット デザインの原則を考慮して開発されています。 ユーザーには、20 のウィジェットとモジュールとともに、スライダーとギャラリーの 8 つのオプションが提供されます。 これらすべては、人気のあるオリジナルのオンライン プロジェクトを作成するのに役立ちます。
レトロな色。多くの場合、パステル調のオレンジや黄色に、明るい赤や青を組み合わせたものです。 ほとんどの場合、単色原色は次のとおりです。 レトロなスタイル二次的なものと組み合わせると、混合効果を達成しやすくなります。
フラットデザインについてはすでにたくさん話してきました。 たくさん見せてくれた さまざまな例使用 この方法。 独自のバージョンを開発してみてはいかがでしょうか? 最も重要ではないにしても、この方法の重要な部分の 1 つは次のとおりです。 カラーパレット.
フラットデザイン - 準備
フラットデザインとは、追加のエフェクトを使用しない、または最も単純なエフェクトを使用する方法であり、立体的な要素も含まれません。 フラット デザインでは、シャドウ、ベベル、エンボス、グラデーションなどの効果は使用されません。
フラット デザインの外観をシンプルと呼ぶ人もいますが、常にそうとは限りません。 ルックアンドフィール自体はシンプルですっきりしていて使いやすいため、モバイル ユーザー インターフェイスのオプションとして人気が高まっているだけでなく、Web デザインのトレンディなデザイン オプションとしても人気が高まっています。
カラーパレットの定義
フラット デザインは、明るく大胆な色で機能します。 カラーパレット、多くの場合、デザイナーはさまざまな色を使用することを好みます。
フラットデザインのもう一つの特徴は、色です。 デザイナーが使用する カラーパレット 1 つの色合いだけで、2 ～ 3 色、4 色以上の色を追加します。 これらのオプションのほとんどは、グレーや黒など、正反対の明るく完全に飽和した色合いです。
カラー フラット デザインに関しては、色の組み合わせや一致に関する多くの伝統的なルールが無視され、虹全体に及ぶパレットが使用されます。 多額の色。
フラット カラー デザインで見られるのは、色相と彩度の組み合わせだけです。 デザイナーは、その色が原色であるか二次色の結果であるかに関係なく、色深度の設定に応じて相互に補完するかなりの数の色合いを使用できます。 色の組み合わせ、それともこの色はまったく別の部分のものかもしれません カラーパレット黒または白の色合いの色が含まれています。
となると、 カラーパレット、フラットなデザインは、多くの場合、明るい色、レトロまたは単調で過飽和になっています。 それは彼らだけがそうだという意味ではありません オプションがありますが、現在ではトレンドが発展しつつあるため、これらのオプションが最も人気があります。
明るい色
明るい カラーパレットさまざまな感情を呼び起こすため、フラット デザインの特徴となることがよくあります。 明るい色は、通常の色と比べて特に効果的です。 暗い背景、コントラストを生み出し、ユーザーの目を引き付けます。
では、どこから始めればよいでしょうか?
FlatUIColors.com には、フラット デザインで最も人気のあるいくつかの色合いの優れた開始リストが用意されています。 明るい青や緑から黄色やオレンジまで。 このサイトは、無料の色やさまざまな色の組み合わせを選択してダウンロードできるため、プロジェクトでフラット デザインの使用を開始するのに最適な場所です。 （個人的にはグレーなど落ち着いた色合いが好きです。）
自分で接続したい場合 明るい色フラットデザインでは、シンプルさと同じ色を選択してください 色調そして飽和。
鮮やかな例: これらの色の組み合わせを一緒に試したり、グループで個別に試したりして、よりフラットなカラー パレットを作成します。 これらの各色は、最大限のインパクトを与えるために白または黒の背景に対して設定されます。
人気のカラー: 青、緑、紫
レトロな色
レトロな色は、フラット デザインを扱う場合にも人気の選択肢です。
これらの彩度の低い色合いは、明るい色に基づいて構築されています。 カラーパレット, しかし、白を加えてより落ち着いたものにします。 レトロなカラーパレットにはオレンジと黄色が多く含まれていることが多く、場合によっては赤や青が含まれることもあります。
フラット デザインを扱う場合、色調が柔らかくなるため、レトロなパレットで原色と二次色が使用されるのがよく見られます。
レトロな例: レトロな色は、主要な色として前景に配置すると最も効果的です。 画像や落ち着いた色と組み合わせて究極の仕上がりを実現 最高の結果.
人気のカラー：オレンジ、ピーチ、ダークブルー。
単調な色
モノトーンカラーとフラットなデザインが急速に人気を集めています。 これら カラーパレット黒と白の単色を使用して、明るくはっきりとしたパレットを作成します。
ほとんどのモノトーン配色では、ベースとして 2 色または 3 色が使用されます。 最も人気のある色は青のようですが、多くのデザイナーはモノトーンで黒をベースにした色 (グレーなど) を選択したり、ボタンに赤などの色を選択したりします。
もう 1 つのオプションは、色の単調な小さな変化を使用して効果を作成することです。 青から始めて緑の色合いを加えて、青緑のスキームを作成するとします。
モノトーンカラーはモバイルアプリやモバイルデザインで特に人気があります。
単調な例: 他のカラー パレットと同様に、モノトーン スキームでもコントラストを使用する必要があります。 ベースカラーとは異なる色合いをミックスします。 彩度（100%）から始めて、色合いを 50%、20%、8% にします。
結論
フラット デザインが実際に機能する唯一の理由は、トレンドが新しくて興味深いということです。
創造 カラーパレットは、プロジェクトのトーンと一致し、サイトの使用方法をユーザーに示し、視覚的に興味深く楽しいものです。 色を選択する際の伝統的なルールだけでなく、作成するときは自分の好みにも注意してください。 平らな花のパレット。
今回はフラットデザインについて解説していきます。 フラットはここ数年、ウェブ上の主要なトレンドの 1 つとなっているため、おそらくすでにこのことについて何かを聞いたことがあるでしょう。
今回は、フラット デザインとは何か、その成り立ち、そしてクリーンで明るくレスポンシブなデザインを作成するために何が必要かについて見ていきます。
発見できる 良い例ウェブサイト http://market.envato.com/ のフラット デザイン。 モダンなデザインがどのようなものかを明確に理解できるレイアウト、アイコン、テンプレートが豊富にあります。 .
1. フラットデザインとは何ですか?
フラットなデザイン - モダンなスタイルユーザーインターフェイスとグラフィックデザインは、ミニマリズムを特徴としています。 フラット デザインは、最小限の要素を使用し、混合色、グラデーション、ハイライトなどのテクスチャ、影、光のさまざまな効果を使用しないことを特徴とします。
フラットはスキューモーフィズムに反対します( スキューモーフィズムは、ある製品に別の製品の外観を与えるときのデザイン原則です。 いつ さまざまな要素インターフェイスは実際のオブジェクトからコピーされます - 約翻訳。 、豊富なデザインだけでなく、フラットデザインは一見したほど単純ではないことは言う価値があります。 これにはスキューモーフィズムの機能がいくつか含まれていますが、これについては少し後ほど説明します。
一般に、フラットは、ユーザーがビジュアルに気を取られることなくコンテンツに集中するのに役立ちます。 フラットなデザインは要素のシンプルさを強調すると同時に、インターフェイスの応答性を高め、快適で使いやすくしています。
2. ちょっとした歴史
ご存知のとおり、フラット デザインは、Web 上で世界的なトレンドになるずっと前から存在していました。 フラット デザインは 80 年代に非常に人気がありました。これは、当時のテクノロジーが複雑なエフェクト、テクスチャ、シャドウをサポートできるほど十分に開発されていなかったためです。 しかし、そのときでさえ、デザインはスキューフォモーフィズムを追求し、インターフェイス要素を可能な限り現実的にしようとしていました。
現在私たちが目にしている形のフラット デザインは、マイクロソフトがいわゆるメトロ スタイルの製品を生産し始めてから普及し始めました。 Metro は、そのスタイルとシンプルさが印象的な Microsoft の UI デザインです。
2010年に Microsoft は Windows Phone 7 をリリースしました。これは、以前の製品から継承されたシャープなエッジとシンプルなグラフィックスを備えたフラット デザインを採用していました。マイクロソフト（Zune）。 その後、その成功に触発されて、マイクロソフトはオペレーティング システムをリリースしました。 Windowsシステム 8、同じフラットな Metro スタイルに基づいています。
結局のところ、フラット デザインは、Apple がリリースした 2013 年に人気のピークに達しました。 iOS 7 の基本的なデモ 新しいデザインアイコンやフォントなどのユーザー インターフェイス要素が完全に再設計されました。 アップルが作成した UIとアイコンデザインの視覚原則 .
その後すぐに、Google もアプリケーションと Web ページでフラット スタイルを使用し始め、これをフラット スタイルと呼びました マテリアルデザイン。 Google には、このスタイルに特化したセクション全体があり、Web デザインの目標、その原則、アイコンやレイアウトなどのさまざまなデザイン オブジェクトを作成する手順の説明が含まれています。
それ以来、フラットは Web デザインの主要なトレンドとなり、Web サイト、アプリケーション、インターフェイス要素をエレガントでクリーン、スタイリッシュなものにしています。
このように、企業によるフラット デザインの世界的な例が 3 つあります。これらなしでは想像するのが困難です。 現代世界技術:
MicrosoftのMetroデザイン
Apple iOS 7のデザイン
Googleのマテリアルデザイン
3. 清潔であることを忘れないでください
フラットなデザインは、立体的な要素が欠けているため「フラット」と呼ばれるようです。 リアルな効果グラデーション、テクスチャ、ハイライト、ハーフトーン、シャドウなど。 フラット スタイルはオブジェクトを 2 次元 (フラット) に表現する方法であることに注意してください。
さらに、フラット デザインでは、オブジェクトは非常に単純化され、様式化された方法で表現されます。
そして時には、オブジェクトのシルエットや輪郭だけが使用されることもあります。 オブジェクトを認識できる程度に十分ですが、細かい詳細を詰め込みすぎないようにしてください。
最近ではミニマリズムが世界的なトレンドになっています。シンプルな形とシャープなエッジの使用により、すっきりとした心地よいデザインが生まれています。 シンプルなフォームよりわかりやすく、よりわかりやすく。 これにより、煩雑で乱雑な外観を与えることなく、デザインをミニマルかつクリーンに保つことができます。
4. 完璧に仕上げる
フラット アイコンと UI 要素を作成する場合は、それらを鮮明できちんとしたピクセル完璧な外観にする必要があることを知ってください。 できるだけ。 さらに、これはラスター グラフィックスとベクター グラフィックスの両方に当てはまります。
Adobe Photoshop は、ピクセルに基づいたラスター グラフィックスで動作することは明らかです。
Adobe Illustrator プログラムでは、ベクトルと呼ばれる曲線や直線で構成され、数式で指定されたベクトル グラフィックスが使用されます。
かつて、Adobe Illustrator は、ピクセルパーフェクトなグラフィックを作成するのに特に便利なプログラムではありませんでした。 良いニュースは、 最新バージョンイラストレータースチール 素晴らしいツール良いグラフィックを作成するために。
ベクター グラフィックスでは、主に単純で平らな形状、純粋な色、グリッドを使用する必要があると言わざるを得ません。Adobe Illustrator は設定が非常に柔軟で、グリッドをニーズに合わせて調整したり、オブジェクトを配置したり、使用したりすることができます。 各種スナップ。 これにより、どんなディスプレイでもすっきりとスタイリッシュに見える完璧なデザインを簡単に作成できるようになります。 完璧なグラフィックを作成する方法を学びたい場合は、次の記事を読んでください。 Adobe Illustrator を使用してピクセルパーフェクトなアートワークを作成する方法 .
5. カラー
影以外のフラット デザインの最も特徴的な機能の 1 つは、色の使用です。 フラット デザインの要素で使用される色のほとんどは、ほんの数色の基本色で構成されています。
フラットなデザインの色は明るく、豊かで豊かです。フラットな配色にはいくつかの特別な色が含まれており、その選択は、お菓子のアイコンや洗練されたレトロなパレットのレトロなスタイルのオブジェクトなど、何を描くかによってのみ異なります。
あなたが UI デザイナーで、カラー パレットをよく理解しており、実験しているとします。 カラーパネル Photoshop と Illusstartor で、好きなように色を混ぜ合わせます。 ただし、このプロセスは非常に複雑であり、優れた直感、経験、スキルが必要です。 ここでは、独自のカラー パレットの作成に役立つツールをいくつか紹介します。
フラットデザインだけでなく、あらゆるタイプのデザインやイラストに適したものもあります。 たとえば、Cooler として知られる Adobe Color CC です。 現在では、Web サイトと Adobe 製品の両方から直接アクセスできます。 Cooler は非常に柔軟なツールで、独自のカラー パレットを作成することも、ライブラリのカスタム パレットから選択することもできます。
もう 1 つのシンプルで便利なカラー パレット ジェネレーターは Coolors です。 スペースバーを押すだけで、プログラムがカラーパレットを生成し、色を調整でき、エクスポート機能もあります。
便利なカスタム パレットを備えた同様のサービスが他にもいくつかあります。 ただし、Designmodo によってフラット デザイン専用に作成されたツールが 1 つあります。これは、作業に非常に便利な「フラット」カラーのセットを備えたサービスです。 このサイトは、良いものを探しているデザイナーの間で非常に人気があります。 カラーソリューション完璧なデザインを実現します。 それを試してみてください！
また、より多様な色やパレットを見つけることもできます。 Google のマテリアル デザイン ガイド.
6. 長い影
上で述べたように、フラット デザインはシンプルさと多くの空きスペースを特徴としています。これが、フラット デザインがエフェクトの使用を拒否する理由です。 ただし、フラット デザインに特有の効果が 1 つあります。 この効果はトレンドになっており、 特徴的な機能フラタ。
今は長い影について話しています。 彼らはいくつか持っています 典型的な特徴、この効果を認識できるようにします。つまり、45 度の傾斜と ビッグサイズ(影は被写体自体よりも数倍長い場合があります。その結果、長い影は平面にある程度の奥行き効果を与えます。
この効果により、オブジェクトがより立体的になりますが、同時にフラットなデザインの範囲内に保たれます。
7. フォントの操作
タイポグラフィーはフラット デザインにおいて大きな役割を果たします。 多くの場合、テキストが作品の主要な要素になります。
フラット デザインでは通常、シンプルなフォント スタイルが使用され、デザイン全体が全体的にすっきりして読みやすくなります。 Adobe 製品を使用している場合は、Adobe Typekit で多くの無料フォントを見つけることができます。 Font Squirrel には優れた無料フォントもたくさんあります。 ただし、フォントを商用目的で使用する場合は、ライセンスを読むことを忘れないでください。
ほとんどの場合、フラット デザインでは大文字と対照的な色を使用するのが一般的で、これによりテキストが読みやすくなります。
フォントは、独立した要素として表示されるのではなく、デザインを補完し補完するものであることを忘れずに、セリフや手書きの複雑なフォントを使用してはいけないという意味ではありません。 最小限に抑え、すべてのバランスを保つことを忘れないでください。 ただし、フラットでは、より厳格できちんとしたように見えるため、サンセリフ フォントがよく使用されます。
8. フラットデザインの長所と短所
フラット デザインは多くの利点があるため非常に人気がありますが、このスタイルを使用する際にデザイナーが直面する欠点がまだいくつかあります。 メリットとデメリットを見てみましょう。
長所
人気
フラットデザインがトレンドとなり、ますます増えています 正のフィードバック\ デザイナーや Web デザイナーからも支持されており、その地位を失っているようにはまったく見えません。 それどころか、それはますます広がり、いくつかの新しい形式や機能を獲得し、ますます創造的になっています。
シンプルさ
フラットなデザインはシンプル、ミニマル、そしてクリーンです。 Flat on the Web は、ユーザーがビジュアルに気を取られるのではなく、コンテンツに集中するのに役立ちます。 これはモバイルアプリのインターフェースにも当てはまります。大きなボタンを備えたすっきりとしたデザインにより、 モバイルデバイス完璧。
輝度
カラーもフラットデザインのクールなプラスポイントです。 明るく豊かな色は魅力的で清潔に見え、グラデーションがないためデザインがスタイリッシュになります。 さらに、このような純粋な色により、フラットなデザインがよりポジティブで見栄えの良い雰囲気を作り出します。
欠陥
フラットには他にも多くの利点がありますが、完璧なデザインはなく、それを理想化することはできません。 フラット デザインのいくつかの欠点について言及しておく必要があります。
無反応
たまに欠席することもある 重要な詳細または 視覚効果ユーザーフレンドリーなインターフェイスを作成するプロセスが難しくなり、通常、デザイン全体が応答しなくなります。 Web ページ上で画面上でクリックまたはタップする必要がある要素を見つけるのが難しい場合があるため、すべてのユーザーがフラット レイアウトを快適だと感じるわけではありません。 携帯電話インタラクティブではないからです。
タイポグラフィーの問題
前述したように、すべてのフォントがフラット デザインに適しているわけではありません。 シャープなエッジを持つこのような豊かなフォントは、非常にバランスが取れていてスタイリッシュに見えることがあります。 ただし、フォントの選択を誤ると、デザイン全体が台無しになる可能性があります。 どのフォントがフラットに適しており、どのフォントが適していないのかをよく理解する必要があります。経験がないと、フォントの選択が非常に難しくなります。
弱いビジュアル
エフェクト、色、フォントの使用に制限があるため、フラット デザインはシンプルすぎて冷たく見える場合があります。 そのミニマリズムは主な欠点でもあります。他のフラット デザインは、最終的にあなたのものとまったく同じに見えてしまいます。 そのため、同じ単純化された形状、限られたカラーパレット、類似のフォントを使用しているため、自分のアイコンや Web ページを他の人のデザインと異なるものにすることは非常に困難です。 その結果、フラット デザインは時間の経過とともに退屈になる可能性があります。
9. 今後のフラットデザインのトレンド
フラットデザインが完全に形成され、軌道に乗っているとは言えないのは、おそらく上記の欠点のためであり、フラットデザインは新しい機能を獲得し、視覚的な表現力を高めようとしています。
よく見ると 最後の例フラットなデザインで、実際に徐々に厳格なツールから離れ、グラデーション、シャドウ、照明、その他の視覚効果などの微妙な効果を追加し始めます。
これらの小さなタッチにより、スキューモーフィック デザインのように過度に詳細になることなく、フラット デザインに深みが与えられます。これらの微妙な改善により、フラットの応答性が向上し、快適になり、また、新鮮な外観がもたらされ、フラットがより柔軟で多用途になります。
したがって、フラットはその機能を失うことなく、より興味深く柔軟になります。- 彼は本当に良くなってきています。
結論
そこで、フラットデザインの歴史からいくつかの事実を取り上げ、色、形、タイポグラフィーについて話し合いました。 レビューしました 異なる点ビジョンを学び、フラットの長所と短所に焦点を当て、優れたデザインを作成するための主な原則のいくつかを学びました。
この記事から新しい情報を得たり、少なくとも興味深いと思っていただければ幸いです。 まだフラット デザインを作成したことがない場合は、ぜひフラット デザインの作成に挑戦してください。
結局のところ、フラット デザインについて他に言及する必要があるでしょうか?
エッジがシャープなフラットがお好みなら、 ジューシーな花鮮明なフォント、その清潔さとミニマリズム、そしてそれを試してください！
これはトレンディですが、他のグラフィック スタイルと同様に、1 つのテクニックだけに限定しないでください。 フラットがトレンドだからといって、プロジェクトで他のスタイルを使用できないわけではありません。 細かいディテールやテクスチャを備えたスキューモーフィズムも、 英断。 重要なことは、デザインはプロジェクトごとに異なることを覚えておくことです。便利で機能的でありながら、その精神、目的、本質を表現する必要があります。 フォワード！
実用的なヒントとツール。
他のものと同様、色も適度に使用するのが最善です。 配色で最大 3 つの原色を使用すると、より良い結果が得られます。 デザインにおける色の選択の有効性は主にバランスに基づいており、色が多いほど、達成するのが難しくなります。
色はデザインの品質を決定するのではなく、デザインを強化します。
ピエール・ボナール
最初にパレットに選択した色以外に追加の色が必要な場合は、ティントとシャドウを使用します。 選択した範囲内で行動してください。
規則 60-30-10
このデザイン ルールは、配色をすばやく作成するのに役立ちます。 60% + 30% + 10% の割合は色のバランスを反映しています。 この処方が機能するのは、バランス感覚を生み出し、目をある点から別の点へ快適に移動できるようにするためです。 さらに、このテクニックは非常に使いやすいです。
壁の装飾、家具、アクセサリー。60% がメインカラー、30% がサブカラー、10% がアクセントカラーです。
色の意味
科学者たちは何世紀にもわたって、特定の色の心理的効果を研究してきました。 美学を超えて、色は感情や連想を生み出します。 文化や状況によって、色の意味は異なります。 ファッションブティックがよく見られるのはそのためです 黒と白の色。 彼らはエレガントで高貴に見えることを望んでいます。
Asos は完全に白黒で、緑色の「行動喚起」が付いています。 そして、これはそれだけではありません。 - 赤：情熱、愛、危険
- 青: 冷静、責任、安全
- 黒：神秘、優雅、悪
- 白：清潔さ、沈黙、きちんと感
- 緑：斬新さ、新鮮さ、自然
花の意味については、「Color Culture」で詳しく学ぶことができます。
グレースケールが最初
私たちはデザイン開発の初期段階で色やトーンをいじるのが好きですが、この行動はすぐにがっかりさせる可能性があります。主要な色を選ぶのに 3 時間も費やして、その後気が変わってしまうこともあります... 確かに魅力的ですが、そうではありません。特に効果的です。
代わりに、レイアウト内の要素の間隔や配置などの構造に取り組むように努めてください。 これにより時間を大幅に節約できます。 この作業は非常に生産的です。 一方で、退屈である必要はありません。 テスト さまざまな色合い何か楽しいことを達成したいなら 外観.
私の作品の一つ。dribble で見つけることができます。 単純 モノクロカラーそして要素に焦点を当てます。 純粋なグレーや黒は避ける
私がこれまでに見た中で最も重要な色のトリックの 1 つは、次のことを避けることです。 灰色の色飽和せずに。 で 実生活クリーン グレーの色合い存在しない。 黒人も同様です。
ほとんど 暗色この写真では#000ではなく#0A0A10です 常に色に少し彩度を加える必要があることに注意してください。 無意識のうちに、より自然でユーザーに近いものとして認識されるでしょう。
自然を信じる
最良の色の組み合わせはすでに自然によって発明されています。 彼らはいつも自然に見えます。 一番良いのは、周囲の自然を観察し、そこからデザイン用のパレットを抽出することです。自然は常に変化します。
インスピレーションを得るには、周りを見渡すだけで十分です
コントラストを維持する
相性の良い色もあれば、全く合わない色もあります。 色合いの相互作用には、カラー ホイールによって最もよく示される定義ルールがあります。 これらのメソッドを知っておく必要がありますが、手動で使用する必要はありません。
インスピレーションを得ます
UI サンプルを見つけることに関して言えば、dribbble は最適なものの 1 つです。 最高の場所このために。 色で検索するツールがあります。 したがって、他のデザイナーによる特定の色の使用について視覚的な調査を行う必要がある場合は、次のサイトにアクセスしてください。
ビデオ、印刷デザイン、インテリアデザイン、ファッション...インスピレーションを得られる場所はたくさんあります。 興味深い発見を将来のアイデアのために保存します。
私はよく KPOP のミュージック ビデオから色を盗むのが好きです。 贅沢ですよ。
ツール
自分にとって物事を簡単にするために、いくつか挙げます 最高のツールカラーパレットを選択します。 時間を大幅に節約できます。
色を選ぶための私のお気に入りのツールです。 スペースバーを押して、色を 1 つ選択し、パレットを生成するだけです。 Coolors を使用すると、画像をアップロードし、そこからパレットを作成できます。 結果は 1 つに限定されません。セレクターを使用すると、元の参照ポイントを変更できます。
クーラー
Adobe のこのツールはすでに 長い間デザイナーを助けます。 ブラウザで動作しますが、デスクトップ版もあります。 デスクトップ版を使用している場合は、配色を Photoshop にエクスポートできます。
Kuler と似ていますが、5 つの色合いに限定されない点が異なります。 原色があり、追加の色合いで遊んでみたい場合に最適です。
デザインインスピレーション.net
カラーパレットのアイデアはあるが、視覚的に比較する必要があると想像してください。 さまざまなバリエーション。 デザインインスピレーションはこれらの目的に最適です。 最大 5 色を選択し、色合いに合った画像を探してください。 このサービスは、特定のパレット内の画像を正常に検索するだけでなく、デザインに統合する適切なグラフィックの選択にも役立ちます。
「選択した色の写真を検索したい場合はどうすればよいですか?」と疑問に思うかもしれません。 Shutterstock には、特定の色合いの写真を見つけることができる Spectrum というツールがあります。 ウォーターマーク付きのプレビュー画像だけでパレットを生成するのに十分なので、これにはサブスクリプションも必要ありません。
タイニーマルチカラー
ただし、指定した複数の色に基づいて写真を検索する必要がある場合、または各色合いの特定の量を設定する必要がある場合は、Tineye を使用してください。 このサイトは、Flickr の 1,000 万件のクリエイティブ コモンズ画像のデータベースを使用しています。
最終的な考え
カラーは、特にデジタル デザインの時代においては、習得するのが非常に難しいリソースです。 この投稿で共有したヒントを参考にすると、適切な色合いを見つけやすくなります。 見事な配色を作成する方法を学ぶ最良の方法は練習することなので、色をたくさん試してください。
タグ: 、インフォグラフィックスに最適なパレットを選択するためのヒントと原則を記載した投稿。
「最近では、適切なパレットを見つけるのは簡単ですが、データ視覚化に適した色の組み合わせを見つけるのは依然として困難です」と Zheng 氏は書いています。 インフォグラフィックの色を探すとき、彼女は 3 つの主な課題を特定します。
フラット UI カラーパレット
プロタポニアのフラット UI カラー パレット
黒と白のフラット UI カラー パレット
まず、すべてのパレットが視覚化用に設計されているわけではありません。 たとえば、インターフェイス デザイン ガイドライン (Google のマテリアル デザインなど) の色は、色盲の人にはうまく認識されず、単に互いにわずかに異なる場合があります。
Color Hunt Web サイトの 4 色のパレット
第二に、既存のパレットの多くには十分な色がありません。 例として、彼女は Web サイト Color Hunt を挙げています。 成功した組み合わせ 4色。 しかし、インフォグラフィックスの場合、通常は 6 ～ 12 色が必要です。
Color Hunt サイトのグラデーション パレット。インフォグラフィックスでは色を区別するのが困難です。
4色のグラデーションパレットと12色のグラデーションパレットの違い
第三に、一部のパレットの色は明るさがわずかに異なるため、特に隣り合っている場合、それらを区別するのが困難になります。
良いものを選ぶには 色の組み合わせインフォグラフィックについては、Zheng 氏は 3 つのルールを使用することをアドバイスしています。
左から右へ: マテリアル デザインの青いパレット、これもプロタポニウム、黒と白
色盲の人と正常な視覚を持つ人の明るさと色の比率
まず、パレットの色に十分な明るさの差があるかどうかを確認する必要があります。 「明るさの違いは普遍的になるでしょう」とデザイナーは書いています。 また、明るさの大きな違いは、色盲の人にパレットを適応させるのに役立ちます。 プロタポニア（赤色の感度が低下）、第二色覚（緑色または他の色の感度が低下）を持つ人々がそれをどのように認識するか、また白黒に変換されるかどうかを確認できます。
第二に、パレットには自然な組み合わせを使用することをお勧めします。 例として、Zheng 氏は、薄黄色から濃い紫へ、および薄紫から濃い黄色への移行を挙げています。 「純粋に数学的な観点からすれば、それらはほぼ同じに見えるはずです」と彼女は書いており、最初の組み合わせの方が 2 番目の組み合わせよりも自然に見えると述べています。 デザイナーは、これは人々が自然界、たとえば日没時に最初のパレットからの組み合わせを見ることに慣れているという事実によるものだと考えています。
グラデーションを操作するためのメッシュ
第三に、パレットを作成するときは、色の違いをよりよく感じるためにグラデーションを使用することをお勧めします。 作業を簡単にするために、Zheng 氏は、上のスクリーンショットのような花のグリッドを Photoshop で作成することをお勧めします。 彼女によると、グラデーションは 2 色または 12 色を選択するときに効果的です。
成功したインフォグラフィック用パレット
成功したインフォグラフィック用パレット
デザイナーもアドバイス 12 有用なリソースカラーとパレットを操作するため。 彼らのリストを見ることができます
