多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を集められないのかとよく尋ねます。ネットユーザーがデザインしたウェブサイトをいくつか観察したところ、色の使い方が大胆ではなく、色のレベルに対する理解が欠けていることがわかりました。 色のレベルとは、作品を脱色した後に、黒から灰色、そして白への比率を示すかどうかを指します。作品に黒が多く含まれると、全体的に重く見え、白が多く含まれると、全体的に淡く見えます。グレーが多く、白と黒が少ないと、レイアウト全体が汚く見えてしまいます。 下の写真を見てください。これは脱色した写真です。多くの場所では 1 色だけではなく、色のグラデーションが生成されていることがわかります。 ![]() ![]() ![]() 「色の答え」第2回:色の比率 今回は、多くの色を組み合わせたときに存在する「比率」の関係について詳しく見ていきます。 色を使うとき、すべての色を同じ大きさにすることは不可能です。もちろん、色のスペクトルを配置する場合は例外です。ウェブページやグラフィック作品をデザインする場合、通常はメインカラーとしてどの色を使用するかを考え、関連する色を二次色として探します。しかし、実際の仕事になると、主と補助の区別がつかず、何が主で何が補助なのかがわからなくなることがよくあります。作られるものは色とりどりで、重要度の順序はありません。 デザインを学ぶ人は皆、良いものを作りたいと思っていますが、物事は計画通りに進まず、生み出される作品が自分の要求を満たさないことが多々あります。その中で、人々は色の割合を選択する際に常に躊躇し、その結果誤った判断を下すことがよくあります。どうすれば美しい色を作ることができるのでしょうか?比率の配置は、いくつかの答えを得るのに役立ちます。下の写真を見てください。以下は、海外の Web サイトのスクリーンショットです。この Web サイトでは、白、黒、オレンジレッドなど、多くの色は使用されていません。言うまでもなく、どの色が一番カラフルで、どの色が一番カラフルでないかは誰もが知っています。 ![]() 色を使うとき、すべての色を同じ大きさにすることは不可能です。もちろん、色のスペクトルを配置する場合は例外です。ウェブページやグラフィック作品をデザインする場合、通常はメインカラーとしてどの色を使用するかを考え、関連する色を二次色として探します。しかし、実際の仕事になると、主と補助の区別がつかず、何が主で何が補助なのかがわからなくなることがよくあります。作られるものは色とりどりで、重要度の順序はありません。 デザインを学ぶ人は皆、良いものを作りたいと思っていますが、物事は計画通りに進まず、生み出される作品が自分の要求を満たさないことが多々あります。その中で、人々は色の割合を選択する際に常に躊躇し、その結果誤った判断を下すことがよくあります。どうすれば美しい色を作ることができるのでしょうか?比率の配置は、いくつかの答えを得るのに役立ちます。下の写真を見てください。以下は、海外の Web サイトのスクリーンショットです。この Web サイトでは、白、黒、オレンジレッドなど、多くの色は使用されていません。言うまでもなく、どの色が一番カラフルで、どの色が一番カラフルでないかは誰もが知っています。 ![]() また、黒と白はどちらも無彩色なので、オレンジと赤はより鮮やかに見えます。ご覧のとおり、ここでの比率は白が約 70%、黒が約 22%、オレンジが約 8% です。 ![]() ![]() 「色の答え」パート 3: 色のコントラスト デザインには、サイズのコントラスト、形状のコントラスト、長さのコントラスト、量のコントラストなど、多くのコントラストがあることがわかっています。サイズ、長さ、量は見やすく、定量化できるため、これらのコントラストは比較的理解しやすいです。黄金比を使用して、デザインにおけるこれらの長さと量の比率を制限できます。ただし、色は黄金比によって制限されるわけではないので、色間のコントラストは個人の意見の問題になります。美術学校の友人が私によくこう言うのを聞きます。「スケッチは努力次第、色彩は才能次第。」この言葉は人々に不快感を与えますが、それはまた、色彩は知覚に基づいており、練習は役に立たないといういくつかの問題を反映している可能性もあります。 色が多すぎて、1つ1つマッチングさせて分析するのは現実的ではありません。256色しかない場合は、色について心配する必要はありません。しかし、別の観点から分析することができます。色相、明度、彩度の3つの側面を比較することができます。このようにすると、色のコントラストが理解しやすくなります。まず、次の 3 つのキーワードについて説明します。色相は、各色の固有の特性を指します。たとえば、赤、黄、青は色の基本色調です。たとえば、「バーガンディ」は赤い色調ですが、緑や青に分類することもできます。明暗の概念は非常に明確で、色の深さを指します。つまり、同じ色でも、夜と昼では光の反射強度が異なるため、明るさが異なります。あるいは、このように説明すると、色に異なる量の黒を加えると、色の明るさと暗さに異なる変化が生じます。彩度は色の「純度」または明るさを表します。この彩度は非常に興味深いものです。その特性により、色調や明るさがぼやけて判別しにくくなることがあります。 ![]() ![]() ![]() では、階層感覚は、通常、どこに現れるのでしょうか。以前書いた「色の答え」シリーズの最初の記事では、色の階層について説明しました。その記事では、「黒、白、グレー」を使用して色の階層を分析することについて言及しました。デザインするときに、ウェブサイト全体を 1 色で作成することがありますが、この単色の効果により、ウェブサイトが単調で安っぽく見えることがあります。時には、より多くの色を使用しても、安っぽく見えることがあります。Web サイトで使用されている色には、階層感がなく、コントラストもありません。すべて同じようなグレースケールなので、Web サイトは灰色でみすぼらしく見えます。もちろん、高コントラストの単色ブロックを使用してデザインを行うこともできます (多くの韓国の Web サイトがこの手法を使用しています)。この手法は比較的シンプルなので魅力的ですが、模倣されやすいという欠点もあります。しかし、そのようなデザインには活力がありません。トレンドとしてはファストフードのようなもので、誰でも真似できます。基盤として文化は必要ありません。もちろん、この方法が全く役に立たないというわけではありません。あくまでも方法としては使えるものの、万能薬として使えるものではありません。 言葉で表現するだけでは実感できない。それではこの写真を見てみましょう: ![]() さらに、IBM の新しいデザインは、元のデザインよりも立体的になっていることもわかります。これが、上で要素レベルとして述べたものです。この階層化の感覚により、閲覧者の視覚的な奥行きが増し、Web ページが平坦ではなくなります。 3D 効果ではありませんが、2D 効果は必然的に Web デザインの新しいトレンドになると思います。 2D を通じて 3 次元の視覚効果をシミュレートすると、Web デザインがよりダイナミックになり、コンテンツがより豊かになります。 単色のブロックのレイアウトでは、明るい色の画像がより目を引きます。これはまた別の種類の視覚レベル、あるいは複雑さとシンプルさの対比とも言えます。デザインには決まったルールはなく、多くの要素が関係しています。デザインの良し悪しは、デザイナーの世界に対する理解の広さによって決まります。そのため、デザイナーは制作スキルの向上に注力するだけでなく、文化的な知識を継続的に蓄積していく必要があります。より素晴らしい作品をデザインできるように、常に自分の能力を高めていきましょう。皆さんと一緒に頑張っていきたいと思います! |
<<: HTMLは太字、斜体、下線、取り消し線などのフォント効果を設定します
>>: Vue を使用して CSS トランジションとアニメーションを実装する方法
IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...
この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...
1. すべてのタグには対応する終了タグが必要です以前の HTML では、<p> や &l...
mysql が正常に実行されている場合、テーブル構造を表示することは難しくありません。しかし、場合...
1. データベースのタイムゾーンを確認する '%time_zone' のような変数を...
MySQL はネストされたトランザクションをサポートしていますが、それを実行する人は多くありません....
この記事では、CSS無限シームレススクロール効果を実現するためのvue3の具体的なコードを参考までに...
Web ページを作成する過程では、<h1>、<h2>、<h3> ...
目次背景1. dns-prefetch とは何ですか? 2. dns-prefetch を設定するに...
目次説明する:要約する補充するDOM を直接変更して操作する js や jQuery とは異なり、V...
目次1. キューを理解する2. カプセル化キュー3. 太鼓をたたいて花を渡す場合1. キューを理解す...
目次目的実験環境実験原理実験手順1. 独立したCAを生成する2. サーバーの秘密鍵と署名要求ファイル...
MySQL をインストールするための前提条件: CentOS 7 64 ビットをインストールし、Ce...
実際、これは非常に簡単です。imgにaタグを追加し、 <a href='tencent...
この記事の警告事項は、ブラウザの互換性とはまったく関係ありません。主に、プロジェクトで遭遇したいくつ...