ウェブデザインにおける階層化インターフェースの設計経験

多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を集められないのかとよく尋ねます。ネットユーザーがデザインしたウェブサイトをいくつか観察したところ、色の使い方が大胆ではなく、色のレベルに対する理解が欠けていることがわかりました。
色のレベルとは、作品を脱色した後に、黒から灰色、そして白への比率を示すかどうかを指します。作品に黒が多く含まれると、全体的に重く見え、白が多く含まれると、全体的に淡く見えます。グレーが多く、白と黒が少ないと、レイアウト全体が汚く見えてしまいます。
下の写真を見てください。これは脱色した写真です。多くの場所では 1 色だけではなく、色のグラデーションが生成されていることがわかります。
階層化インターフェースの設計方法 123WORDPRESS.COM

多くの人は、Web サイトを作成するときに独自のプライマリカラーとセカンダリカラーを見つけますが、セカンダリカラーをうまく使用していません。原色と二次色の色の階層構造に注意が払われていないため、作品の色彩は単調で生気がないように見えます。豊富な色彩レベルも作品をカラフルにするのに役に立ちます。多くの人は、明るい色を表現したいとき、カラーピッカーで常に高彩度、高明度の色を探しますが、実際に作ってみると、想像していたほど明るくないことに気づきます。比較のために上の写真を見てください。上の写真のほうが下の写真よりもずっとカラフルであることがわかるでしょう。

色に対する理解が深まりましたか?
「色の答え」第2回：色の比率今回は、多くの色を組み合わせたときに存在する「比率」の関係について詳しく見ていきます。
色を使うとき、すべての色を同じ大きさにすることは不可能です。もちろん、色のスペクトルを配置する場合は例外です。ウェブページやグラフィック作品をデザインする場合、通常はメインカラーとしてどの色を使用するかを考え、関連する色を二次色として探します。しかし、実際の仕事になると、主と補助の区別がつかず、何が主で何が補助なのかがわからなくなることがよくあります。作られるものは色とりどりで、重要度の順序はありません。
デザインを学ぶ人は皆、良いものを作りたいと思っていますが、物事は計画通りに進まず、生み出される作品が自分の要求を満たさないことが多々あります。その中で、人々は色の割合を選択する際に常に躊躇し、その結果誤った判断を下すことがよくあります。どうすれば美しい色を作ることができるのでしょうか？比率の配置は、いくつかの答えを得るのに役立ちます。下の写真を見てください。以下は、海外の Web サイトのスクリーンショットです。この Web サイトでは、白、黒、オレンジレッドなど、多くの色は使用されていません。言うまでもなく、どの色が一番カラフルで、どの色が一番カラフルでないかは誰もが知っています。

今回は、たくさんの色同士の「比例」関係について、さらに詳しく見ていきます。
色を使うとき、すべての色を同じ大きさにすることは不可能です。もちろん、色のスペクトルを配置する場合は例外です。ウェブページやグラフィック作品をデザインする場合、通常はメインカラーとしてどの色を使用するかを考え、関連する色を二次色として探します。しかし、実際の仕事になると、主と補助の区別がつかず、何が主で何が補助なのかがわからなくなることがよくあります。作られるものは色とりどりで、重要度の順序はありません。
デザインを学ぶ人は皆、良いものを作りたいと思っていますが、物事は計画通りに進まず、生み出される作品が自分の要求を満たさないことが多々あります。その中で、人々は色の割合を選択する際に常に躊躇し、その結果誤った判断を下すことがよくあります。どうすれば美しい色を作ることができるのでしょうか？比率の配置は、いくつかの答えを得るのに役立ちます。下の写真を見てください。以下は、海外の Web サイトのスクリーンショットです。この Web サイトでは、白、黒、オレンジレッドなど、多くの色は使用されていません。言うまでもなく、どの色が一番カラフルで、どの色が一番カラフルでないかは誰もが知っています。

最も多いのは白で、次に黒、最も少ないのはオレンジレッドです。しかし、問題に気づきましたか? 最も目を引く色は白黒ではなく、オレンジレッドです。これは、少なくとも、色が多いほど目を引くとは限らず、色が少ないほど注目を集めやすいことを証明しています。
また、黒と白はどちらも無彩色なので、オレンジと赤はより鮮やかに見えます。ご覧のとおり、ここでの比率は白が約 70%、黒が約 22%、オレンジが約 8% です。

ここで結論に達しました。色が明るいほど、使用する量が少なくなり、割合も小さくする必要があります。

では、どちらの色が大きいでしょうか? 上の図と下の図を見れば、誰もがより直感的に理解できるでしょう。マットカラーと無彩色の割合がやや多めです。ハイライトカラーは広い領域に表示するのに適しておらず、小さな割合で表示するのが最適です。
「色の答え」パート 3: 色のコントラストデザインには、サイズのコントラスト、形状のコントラスト、長さのコントラスト、量のコントラストなど、多くのコントラストがあることがわかっています。サイズ、長さ、量は見やすく、定量化できるため、これらのコントラストは比較的理解しやすいです。黄金比を使用して、デザインにおけるこれらの長さと量の比率を制限できます。ただし、色は黄金比によって制限されるわけではないので、色間のコントラストは個人の意見の問題になります。美術学校の友人が私によくこう言うのを聞きます。「スケッチは努力次第、色彩は才能次第。」この言葉は人々に不快感を与えますが、それはまた、色彩は知覚に基づいており、練習は役に立たないといういくつかの問題を反映している可能性もあります。
色が多すぎて、1つ1つマッチングさせて分析するのは現実的ではありません。256色しかない場合は、色について心配する必要はありません。しかし、別の観点から分析することができます。色相、明度、彩度の3つの側面を比較することができます。このようにすると、色のコントラストが理解しやすくなります。まず、次の 3 つのキーワードについて説明します。色相は、各色の固有の特性を指します。たとえば、赤、黄、青は色の基本色調です。たとえば、「バーガンディ」は赤い色調ですが、緑や青に分類することもできます。明暗の概念は非常に明確で、色の深さを指します。つまり、同じ色でも、夜と昼では光の反射強度が異なるため、明るさが異なります。あるいは、このように説明すると、色に異なる量の黒を加えると、色の明るさと暗さに異なる変化が生じます。彩度は色の「純度」または明るさを表します。この彩度は非常に興味深いものです。その特性により、色調や明るさがぼやけて判別しにくくなることがあります。

3つのキーワードを説明したところで、どのような比較が可能かについて説明します。色を合わせるときにはコントラストが必要であり、そうでないと見栄えが悪くなることは誰もが理解しています。しかし、ほとんどの場合、人々は比較をどのように行うかを理解していません。実際のところ、私たちは「灰色」と「邪悪な」色を避けるだけでいいのです。「灰色」とはどういう意味でしょうか? コントラストが悪すぎて、活気がなく、灰色で汚く見えることを意味します。では、「悪」とは何でしょうか? それは、コントラストが極度に不調和で、針の穴のように、人々に不快感を与えることを意味します。

これを避けるにはどうすればよいでしょうか。ちょっとしたコツがあります。色、明るさ、彩度の 3 つの要素のうち 1 つが統一されていることを確認してください。このような色のコントラストには通常問題はなく、次の図から直感的に理解することができます。

最近、私はデザインには階層感覚が必要だと言っています。この階層感覚には、色の重ね合わせや要素の重ね合わせなど、さまざまな種類があります。デザインに階層感が欠けていると、ページが単調になったり、派手になったりすることがあります。デザインにおいては、特定の色や効果を好むという罠に陥ることが多く、その結果、デザインが長期的な活力を失ってしまうことがあります。そして私たち自身も、この好みへの執着によって美的感覚が制限され、それが私たちの進歩に影響を与えるでしょう。こうした偏執的な考えは、多くの場合、デザインにおける階層の欠如につながります。
では、階層感覚は、通常、どこに現れるのでしょうか。以前書いた「色の答え」シリーズの最初の記事では、色の階層について説明しました。その記事では、「黒、白、グレー」を使用して色の階層を分析することについて言及しました。デザインするときに、ウェブサイト全体を 1 色で作成することがありますが、この単色の効果により、ウェブサイトが単調で安っぽく見えることがあります。時には、より多くの色を使用しても、安っぽく見えることがあります。Web サイトで使用されている色には、階層感がなく、コントラストもありません。すべて同じようなグレースケールなので、Web サイトは灰色でみすぼらしく見えます。もちろん、高コントラストの単色ブロックを使用してデザインを行うこともできます (多くの韓国の Web サイトがこの手法を使用しています)。この手法は比較的シンプルなので魅力的ですが、模倣されやすいという欠点もあります。しかし、そのようなデザインには活力がありません。トレンドとしてはファストフードのようなもので、誰でも真似できます。基盤として文化は必要ありません。もちろん、この方法が全く役に立たないというわけではありません。あくまでも方法としては使えるものの、万能薬として使えるものではありません。
言葉で表現するだけでは実感できない。それではこの写真を見てみましょう:

IBM のデザインには色数は多くありませんが、重層感があることがわかります。ここでは黒、水色、白が使われており、黒と水色のコントラストがより目を引くものになっています。そして、黒は純粋な黒であるのに対し、水色は明るいことがわかりました。この強いコントラストは人間の視覚に一定の魅力を持っています。カラーは黒、白、グレーからお選びいただけます。さらに、3 つの比率は均等ではありません。私たちがデザインをするとき、通常は似たようなグレースケールの色を一緒に使用しますが、彩度は高くないため、最終的な作品は灰色でくすんだものになります。そのようなウェブサイトの例を探すつもりはありません。探しても誰も幸せにならないからです。もちろん、これには私自身も含まれます。ハハ、私のポートフォリオで探してみてください。そういう灰色で醜いものがいくつかあるはずです。
さらに、IBM の新しいデザインは、元のデザインよりも立体的になっていることもわかります。これが、上で要素レベルとして述べたものです。この階層化の感覚により、閲覧者の視覚的な奥行きが増し、Web ページが平坦ではなくなります。 3D 効果ではありませんが、2D 効果は必然的に Web デザインの新しいトレンドになると思います。 2D を通じて 3 次元の視覚効果をシミュレートすると、Web デザインがよりダイナミックになり、コンテンツがより豊かになります。
単色のブロックのレイアウトでは、明るい色の画像がより目を引きます。これはまた別の種類の視覚レベル、あるいは複雑さとシンプルさの対比とも言えます。デザインには決まったルールはなく、多くの要素が関係しています。デザインの良し悪しは、デザイナーの世界に対する理解の広さによって決まります。そのため、デザイナーは制作スキルの向上に注力するだけでなく、文化的な知識を継続的に蓄積していく必要があります。より素晴らしい作品をデザインできるように、常に自分の能力を高めていきましょう。皆さんと一緒に頑張っていきたいと思います！

<<: HTMLは太字、斜体、下線、取り消し線などのフォント効果を設定します

>>: Vue を使用して CSS トランジションとアニメーションを実装する方法