ウェブサイトのビジュアルデザイン: ウェブページのカラーマッチングの自然なスタイル

ウェブサイトのビジュアルデザイン: ウェブページのカラーマッチングの自然なスタイル

この記事には細かいことは何も書かれていません。ただテクニックを共有しているだけです。とてもシンプルで、思わず涙が出るほどシンプルです。

ウェブページの視覚的な側面は、主にフォーム(またはレイアウト)、色、画像、テキスト情報で構成されています。デザイナーは通常、フォームの感覚を重視します。視覚的なインパクト、デザインの違いや革新性は主にフォームのプレゼンテーションに依存し、色は主に全体的な認識、デザインの品質、視聴者の感情に影響を与えるためです。多くの場合、私たちは良いフォームをデザインしても、この原稿が持つべき品質を達成できません。残念ではありませんか?

フォームは考えて作成する必要があり、画像素材は学習して処理する必要があり、テキストは分類して配置する必要がありますが、Webページの色を自由に使用できるようになるには、必ずしも自然な色彩感覚、豊富な理論、そして長年の経験が必要でしょうか?

もちろん違います!

ウェブページのカラーマッチングについて

インターネットにはWebページのカラーマッチングに関する記事がたくさんあり、中には氾濫しているものもあります。少し注意を払った学生なら、「カラーホイール」や「カラーカード」などの補助的なカラーマッチングツールを知っているはずですが、そのほとんどは印刷媒体のカラーシステムから拡張されたもので、Webページに完全には適用できず、大きな制限さえ生じます。たとえば、カラーホイールを使用してWebページの色を選択することを真剣に考えていますか?たとえば、以下に示す色の組み合わせで、同様のWebページデザインのニーズに次々と自由に対応できますか?

CMYKとRGBのカラーモードの違いにより、Webページに表示される色の数ははるかに多く、選択の自由度は高くなります。しかし、色合わせに関しては、汚い、灰色、派手なデザインなどの大きな問題に遭遇することがよくあります。この問題を解決する必要があります。

ウェブページの事例分析

「Web ページには 3 色以上を使用しないでください。」

確かにその通りですが、それは色相(赤、オレンジ、黄色、緑、藍、紫などのさまざまな色)に関するものです。

色相の違いが明らかなので、メインカラーの選択が簡単です。一般的な方法としては、対照的な色、隣接する色、寒色と暖色の補色などがあります。単純に設定することもできますし、成功した作品からメインカラーと補助カラーの比率を直接借りることもできます。たとえば、一般的な朱色に濃い青を飾ったり、明るい黄色に濃い緑を飾ったりします。

しかし、通常、私たちが直面する必要があるデザイン要件には、色の割り当てに関するより多くの問題があります。

(私はゲームウェブページのビジュアルデザインに携わっているため、事例はすべてゲームウェブページで説明されています。他の種類のウェブページについては、検討のため、または参考のために拡張できます)

上記のように、Web ページの情報量に応じて、色領域の階層的な分割が増え、テキスト情報のレベルを区別する必要が生じます。そのため、「Web ページ上の色 (段階) は 3 つ以下」という原則を遵守しながら、同じ色族内でより多くの色を探してデザインを改善すること、つまり「彩度」と「明度」に取り組むしかありません。

この問題を解決するためにこの記事で紹介したいのが、重なり合うソフトなカラーマッチング法という「自然な」カラーマッチング手法です。

重ね合わせやソフトな色合わせのテクニックの共有(これが本文です、上記はすべてデタラメです)

この方法はとても簡単です。三角関数や四則演算の知識は不要、カラーインデックスやヒストグラム、さらにはカラーグラデーションカーブや輝度レベルを理解する必要もありません。色についてまったく意識しなくても大丈夫です。

★ 理解する必要があるのは、「オーバーレイ」、「ソフト ライト」、「透明度 (塗りつぶし)」という 3 つのキーワードだけです。

これら 3 つのキーワードがまだ不明な場合は、それらの場所を覚えておいてください (下の図を参照)。

注意: 透明度は塗りつぶしとは少し異なります。塗りつぶしは「ブレンド オプション」の効果に影響しませんが、透明度はレイヤー全体に影響します。

ちなみに、このカラーマッチング技術の原理を理解するには数分かかります。

つまり、「オーバーレイ」および「ソフト ライト」ブレンド モード (彩度と明るさを調整するのと似た効果) で純粋な白 (#ffffff) と純粋な黒 (#000000) を使用して、任意の色に最も一致する色を取得します (その後、透明度を調整して最も適切な補助色を選択します)。

(上記の例では、オーバーレイ/ソフトモードで黒と白のブロックの異なる透明度を調整することで(例として10%から100%までの整数値をとります)、明らかな違いのある40色の組み合わせを得ることができます。このテクニックにより、理論上、各色は「間違いなし」で無限の「自然な色の組​​み合わせ」を簡単に得ることができます!)

★ オーバーレイ モードとソフト ライト モードでは、画像の最も明るい部分と最も暗い部分が調整されないため、このカラー マッチング方法は純粋な黒と純粋な白には機能しません。

設計実演:

上の写真のように複雑ですか?

いいえ、上記の方法を理解していれば、アイコンを忘れて、自由にデザイン作業を行うことができます。

3つの簡単なステップ:

① 黒または白、または白黒のグラデーション(点、線、面、フォントでも可)

② ブレンドモードにオーバーレイまたはソフトライトを選択します

③ 透明度を調整します(1%~100%はオプションですが、最も簡単な方法は整数値を直接入力することです。たとえば、テクスチャが薄いページの場合は20%~40%を選択し、テクスチャが濃いページの場合は60%以上を入力できます)。

以下のように表示されます。

(メインカラーが何であっても、白黒のカラーオーバーレイやソフトライトを使えば、完璧にマッチした配色を簡単に得ることができます)

これは、色域の分割やいくつかの二次色の抽出にのみ適用できるわけではありません。以下に示すように、フォントの色、詳細線、ボタンのグラデーション、コーナーのハイライト、ストロークの影などをすべて白黒で自由に適用できます。

元のタイトル: ウェブサイトのビジュアルデザイン: ウェブページのカラーマッチングの自然なスタイル

キーワード: ウェブサイト、ビジュアル、ウェブページ、カラーマッチング、ナチュラル、スタイル、この記事、単語選び、単語の噛み砕き、1、ウェブマスター、ウェブサイトのプロモーション、収益化

<<:  ウェブマスターネットワークからの毎日のレポート:Facebook上場の影響が深まり、QQが高リスクの脆弱性を露呈

>>:  Discuz! App Center が新しい「需要請求」モデルを開始

推薦する

1から10までのブランドマーケティング戦略

新興消費ブランドは人気から世間の批判の的へと転じた。これは一方では、内在する資本バブルと交通配当の過...

企業向けマイクロブログマーケティングの4つのヒントについて簡単に説明します

Weibo は成長を続けており、企業がブランド認知度を高め、ターゲット顧客を開拓するための主要なチャ...

Kubernetes がネットワーク セキュリティと管理機能を強化する新しいバージョン 1.26 をリリース

Kubernetes 開発者は、Kubernetes ソフトウェア コンテナ管理プラットフォームの...

エンタープライズ SaaS で価値実現までの時間を短縮する 5 つの方法

多くの人々にとって、サービスとしてのソフトウェア (SaaS) とクラウド コンピューティングに対す...

インタビュアー: 大規模なファイルの分散ストレージを実現するにはどうすればよいでしょうか?

[[344018]]著者は、正確にスケジュールされたタスクと遅延キュー処理機能を備えた、高同時実行シ...

クラウドコンピューティングを早めに活用しましょう!クラウドコンピューティングが企業にもたらすメリットを見てみましょう

[[221272]]クラウド コンピューティングの概念は古くから存在しており、すべての CIO と ...

ブラジルの共同購入ウェブサイトPeixe Urbanoがモルガン・スタンレーから投資を受ける

北京時間1月27日、外国メディアの報道によると、ブラジル最大の共同購入サイトであるPeixe Urb...

SAPが第1四半期の財務報告を発表:クラウドコンピューティングの収益は22億ユーロ、前年比7%増

ドイツのビジネスソフトウェア大手SAPは4月13日、第1四半期の財務報告書を発表し、新たなエンタープ...

Baidu による旅行ウェブサイトのプロモーションに関する経験と洞察

2012年に旅行会社にSEOスーパーバイザーとして入社してから1年以上が経ちました。いろいろな思いが...

2013 Google 上海パートナーデー: 海外のウェブサイト開発者が注目される

12月3日、国内のウェブサイトおよびモバイル開発者が上海ヒルトンホテルに集まりました。会場は600人...

Linkerd 2.10 (ステップバイステップ) - Linkerd による分散トレース

[[406175]] Linkerd 2.10 の中国語マニュアルは継続的に改訂および更新されていま...

A5の開発から見るソフト記事執筆の「戦略」

ソフトな文章を書くことは、これまでずっとみんなの頭痛の種でした。なぜなら、あまりにも多くのウェブマス...

1API-6 USD registration.com、12時間プロモーションのみ、無制限登録

長い間、ドメイン名の割引情報には注目していませんでした。今日、com と net のプロモーションを...

私たちが一緒に受けたSEOトレーニング

要約: SEOトレーニングといえば、おそらく多くの人が知っているように、いまだに多くのジャンクSEO...

クラウドコストをより適切に管理するために、7 つのクラウド財務指標を追跡します。

今日、企業は、特に経済が不安定な時期にクラウド支出を追跡することの重要性を十分に認識しています。しか...