ウェブページのエクスペリエンス: ウェブページのカラーマッチング

ウェブページの色はウェブサイトのイメージを確立する鍵の一つですが、ネットユーザーにとって色合わせは頭の痛い問題です。 Web ページの背景、テキスト、アイコン、境界線、ハイパーリンクなどにどのような色を使用すればよいでしょうか。また、意図した意味合いを最もよく表現するには、どのような色を組み合わせるべきでしょうか。ここに私の考えをいくつか挙げます。皆さんにとって何らかのインスピレーションとなることを願っています。
まず、色に関する基本的な知識を学びましょう。
1. 色は光の屈折によって生じます。
2. 赤、黄、青は三原色であり、この三色に他の色を混ぜることができます。ウェブページのHTML言語における色表現は、この3色の数値で表されます。例えば、赤は(255,0,0)色で、16進数で表すと(FF0000)、白は(FFFFFF)となります。よく見かける「bgColor=#FFFFFF」は背景色が白であることを意味します。
3. 色は、無色と色の 2 つのカテゴリに分けられます。無色とは、黒、白、グレーのシステムカラーを指します。色とは、無色を除くすべての色を指します。
4. どの色にも、彩度と透明度という特性があります。特性の変化によって異なる色相が生成されるため、少なくとも数百万の色が生成できます。
Web ページを作成するときは、カラーを使用する方が良いですか、それともカラーを使用しない方が良いですか?専門の研究機関が行った調査によると、色の記憶効果は白黒の3.5倍だそうです。つまり、一般的に、カラーページは完全な白黒ページよりも魅力的です。
私たちの通常のやり方は、メインコンテンツのテキストには無色（黒）を使用し、境界線、背景、画像には色を使用することです。こうすることで、ページ全体が単調にならず、メインコンテンツが目まぐるしくなりません。
●非色合わせ 白黒は最も基本的でシンプルな合わせ方です。黒の背景に白の文字、または黒の背景に白の文字、どちらも非常に明瞭で際立っています。グレーはどんな色とも合わせられる万能な色であり、相反する 2 つの色を調和的に変化させるのにも役立ちます。本当に適切な色が見つからない場合は、グレーを試してみてください。効果は間違いなく悪くないでしょう。
●カラーマッチング 色は常に変化しており、カラーマッチングは私たちの研究の焦点です。色についてはまだもう少し学ぶ必要があります。
1. カラーホイール。「赤→黄→緑→青→赤」と順番に色を変えていくことで、カラーリングが得られます。色相環の両端は暖色と寒色、中央は中間色です。（下図参照）
赤、オレンジ、オレンジイエロー、黄色、黄緑、緑、シアン、青緑、青、青紫、紫、紫赤、赤
|____________| |____| |_________| |_________|
| | | |
暖色、中間色、寒色、中間色。2. 色の心理的感覚。色によって見る人に与える心理的感情も異なります。
赤は刺激的な色です。刺激効果により、人々は衝動的、怒りっぽい、熱狂的、活発な気分になることがあります。
緑---寒色と暖色の間の色で、調和、静けさ、健康、安心感を伝えます。ゴールドとライトホワイトを組み合わせると、エレガントで快適な雰囲気を演出できます。
オレンジは、明るく、陽気で、暖かく、居心地がよく、ファッショナブルな効果を持つ、刺激的な色でもあります。
黄色---幸福、希望、知恵、明るい性格を表し、最も明るい色です。
青は最もクールで、最も新鮮で、最もプロフェッショナルな色です。白と混ぜると、柔らかくエレガントでロマンチックな雰囲気を醸し出します（空の色である白は、白さ、明るさ、無邪気さ、清潔感を感じさせます）。
黒---深み、神秘、静寂、悲しみ、憂鬱といった印象を与えます。
灰色---節度、平凡さ、優しさ、謙虚さ、中立性、優雅さを表します。
各色の彩度や透明度を少し変えるだけで、違った印象になります。緑を例にとると、黄緑は若々しく活発な視覚的イメージを持ち、青緑は静かで深みのある印象を与えます。
●Webページのカラーマッチングの原則
1. 色の鮮やかさ。 Web ページの色は明るく目を引くものでなければなりません。
2. 色の独自性。人々に強い印象を与える特徴的な色を持ちましょう。（デザイン思考第2回WebサイトCIの標準色に関する項を参照）
3. 色の適合性。つまり、表現するコンテンツの雰囲気に合った色を選ぶ必要があります。たとえば、ピンクは女性サイトの柔軟性を反映するために使用されます。
4. 色の連想的な性質。色によって連想されるイメージは異なります。青は空を、黒は夜を、赤は楽しいイベントなどを連想させます。選択する色は、Web ページのコンテンツに関連したものにする必要があります。
●Webページの色彩を極めるプロセス Webページ制作の経験が蓄積されるにつれ、私たちの色彩の使い方は、モノクロ→カラフル→標準色→モノクロという傾向になってきました。当初は、技術と知識が不足していたため、単色のシンプルなウェブページしか作成できませんでした。ある程度の基礎と材料が揃った後、人々は美しいウェブページを作ろうと望み、集めた最高の写真と最も満足のいく色をページに積み重ねました。しかし、長い時間が経つと、色が乱雑で個性とスタイルがないことに気づきました。3回目のウェブサイトの再配置では、自分に合った色を選択し、立ち上げたサイトはより成功することが多くなりました。最終的なデザインコンセプトとテクノロジーがピークに達したとき、彼らはシンプルさに戻り、単色または無色を使用してシンプルで精巧なサイトを設計しました。
○Webページのカラーマッチングのヒント この記事のこの時点で、不安なネットユーザーの中には、「どんな色の組み合わせが似合うのか？カラースキームをいくつかお勧めできますか？」と尋ねる人もいるかもしれません。心配しないでください。ここでは、すぐにカラーマスターになるのに役立つヒントをいくつか紹介します。
1. 1色だけ使用します。ここでは、まず色を選択し、次に透明度または彩度を調整して（簡単に言えば、色を明るくしたり暗くしたりして）、Web ページで使用する新しい色を作成することを意味します。このようなページは色が統一されていて、階層感があります。
2. 2色を使用します。まず色を選択し、次にその対照的な色を選択します (Photoshop では Ctrl + Shift + I を押します)。これが私のホームページの青と黄色の色を決定した方法です。ページ全体がカラフルですが、過度にカラフルではありません。
3. 配色を使用します。簡単に言えば、ライトブルー、ライトイエロー、ライトグリーン、またはカーキ、アースグレー、アースブルーなど、感情を反映する色を使用することです。色の決め方は人それぞれですが、私はPhotoshopで前景色のボックスをクリックし、表示されるカラーピッカーウィンドウで「カスタム」を選択し、「カラーライブラリ」で選択します。
4. 黒と1色を使用します。たとえば、黒い枠線の付いた明るい赤のフォントは、非常に「飛び飛び」に見えます。
Web ページのカラーマッチングでは、次のことはタブーです。
1. 全ての色を使うのではなく、できるだけ少ない色を使うようにしましょう

<<: ページコードの変更の効率を向上させ、HTML言語のコア知識を習得します。

>>: CSS3 で画像ドロワー効果を実装するためのサンプルコード