ウェブサイトのビジュアルデザイン（画像とテキスト）における情報伝達の役割と方法

現代の Web ビジュアルデザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そして最終的に今日の情報視覚化に至るまで、3 つのまったく異なるが進歩的なプロセスを経てきました。現在、一部のアートや個人のウェブサイトを除き、他のほとんどのウェブサイトのビジュアルデザインの主な目的は、情報を正確に伝えることです。
情報は主にテキスト、画像、カラーブロックで伝えられ、配置された後にブラウザでユーザーに表示されます。そのため、Web サイトの大部分は明確に読み取れるテキストと正確な画像でなければなりません。
他の種類のビジュアルデザインと同様に、情報ベースの Web サイトのビジュアルデザインでは、いくつかの基本的なアートルールに従い、シンプルで効果的なアート手法を使用してそれを実現する必要があります。以下では、これらの具体的な方法論について説明します。
自慢の空間——————————————————
ブラウジングの効率化基本的にテキストとカラーブロックで構成されている情報では、ユーザーがスムーズにブラウジングし、簡単に操作できるようにするために、何度も検討する価値があります。通常、多くの国内デザイナーは、文字を文章として使用する国のデザイナーを羨ましがっています。なぜなら、Webデザインでは、中国語に使用できる最小のピクセルフォントは12Pxソンティにすぎず、最大のピクセルフォントは14〜18pxだからです。この範囲を超えるピクセルフォントは、ほとんど認識できないか、非常に醜くなります。ただし、文字で構成されているコンテンツには制限がなく、9Pxまたは8Pxと小さくても簡単に区別できます。これにより、情報デザインに多くの余地が残されています。
では、中国語で情報を効果的にデザインするにはどうすればよいでしょうか?
ウェブサイトのビジュアルデザインにおける情報伝達 123WORDPRESS.COM

ウェブサイトのビジュアルデザインにおける情報伝達 123WORDPRESS.COM

まず、カラー方式では、グレースケールの色を使用してフォントを視覚的に小さく見せ、重要なコンテンツには暗くて純粋な色を使用して大きく見せます。大きな段落のテキストの下に明るい背景色を時々付けると、テキストの読みやすさを効果的に高めることができます。メインテキストの色は、通常、システムのデフォルトの純粋な黒 #000 ではありません。これは白い背景には非常に目立つ色であり、スペースが混雑して窮屈に見えやすくなります。

第二に、配置方法は実際には組版の基本的な方法であり、最も重要な大きなテキストと補助的な最小のテキストを一緒に配置して、それらの違いを対比によって分割し、それぞれの特徴を強調します。

さらに、単語がさまざまな長さの行にある場合は、それらをずらした「線」として見なす必要があります。単語が多く、ブロックで表示されている場合は、線ではなく「面」として見なすことができます。線と面の視覚的な区分と配置を維持すると、スペースの割り当てが容易になります。
3 番目に、間隔と余白を制御します。通常、コンテンツの外側の距離はコンテンツ間の距離よりも大きく、コンテンツブロック間の距離はコンテンツ自体の間隔よりも大きくなります。これにより、コンテンツがよりコンパクトで整然と見えるようになり、目が休まる十分なスペースが確保されるため、混雑して疲れを感じません。

メインコンテンツのテキストの間隔と行間を調整し、システムのデフォルトの距離を使用しないようにしてください。「異なる文字の組み合わせでスペースの長さを変更する方法、および最適な印刷スタイルを作成する方法。それは、科学では決して捉えられない美しく本物の芸術的な繊細さです。本当に素晴らしいです。 - スティーブ・ジョブズ。」したがって、黄金比などのデータにあまり注意を払わないでください。本物の芸術は常にテクノロジーよりもはるかに進んでいます。これには、長期にわたる芸術的実践によって、審美的な好みを継続的に向上させる必要があります。

Apple 独自のフォントは、スペースと行間隔に注意しながらどこでも使用でき、ユニークでダイナミックなものになっています。
目を楽にするために余白を残すのは、伝統的な中国絵画の技法です。伝統的な中国絵画では、「白を黒として使う」というのは、実際には空間全体に対する配慮なのです。実際、多くの Web デザインは、「空白」スペースを無視したために失敗しています。ページに十分な意図的な空白がない場合、ユーザーは読みにくくなり、情報が効果的に伝達されず、良いデザインとは言えません。

ページに削除できない大きなテキストや画像セクションを表示する必要がある場合、読みやすさを確保することは大きな課題です。このとき、状況に応じて行動し、空白スペースを隠して残し、色の傾向を調整し、明暗のコントラストを高める必要があります。たとえば、タイトルの周りの大きなテキストの色を灰色に明るくすることは、タイトルを強調する効果的な方法です。

空間を誇らしくする 空間は色彩と同様にデザイナーにとってデザインの基本要素であり、デザイナーはこの特別な要素を活用する主導権をしっかりと握っていなければなりません。
デザインを純粋で、エレガントで、洗練されていて、禅の雰囲気さえ感じさせたいなら、余白を大切にして愛すべきです。余白は必須ではないので、この芸術的な空間を邪魔しないでください。
大型トラックのウェブサイトから、バンク・オブ・アメリカ、かつては賑わっていた宝くじのウェブサイトまで、空白は常にページ全体をしっかりとコントロールしています。

沈黙の色
—————————————————
カラー - シミュレートされたアイトラッカー大量の情報をテーマとしたウェブページでは、ウェブページがキャンバスである場合、テキストとカラーブロックはペイントです。多数のユーザー、製品、技術者がいる一部のツールウェブサイトでは、読み込みを高速化し、ダウンロードノードを節約するために、画像を使用する権利がほとんど奪われています。したがって、このタイプの Web サイトでは、色とテキストは画像であり、Web ページの最終的な効果は、視覚的な美しさを実現し、閲覧順序を導くデザイナーの色とテキストの管理に依存します。

kmart ウェブサイトの色の使用を分析します。色を使用してユーザーの閲覧をガイドし、ウェブサイトのビジネスアイデアを表現します。
テキストの色 通常、テキストに色を割り当てるときは、テキストの重要度に応じて色を分けます。最も重要なテキストには、最も暗く明るい色が割り当てられます。その他のテキストにも、色の明るさと純度に基づいて、重要度順に、暗い色から明るい色、明るい色から灰色がかった白の色が与えられます。
大量のテキストを配置する場合、テキストの色の範囲も考慮する必要があります。通常、コンテキストを明確に保つために、タイトルや重要なテキストなどの小さな領域のキーコンテンツには暗い色と明るい色を使用し、一般的なテキストの大きな領域にはダークグレー#333、または#666などのグレースケール色を使用します。 #333 には少量の白が含まれているため、白い背景で強いコントラストが生じることはありません。同時に、大部分が黒であるため、明確な識別が可能です。このタイプの色は実はたくさんあります。これらを適度に使用して配分すると、Web ページ全体が明瞭になり、使いやすくなります。

もちろん、色を多く使用すればするほど、ページ上でのその色の影響は弱くなることにも注意する必要があります。たとえば、シティバンクのウェブサイトには、非常に目を引く明るい青色が使われています。しかし、大量に使用すると、ページ上の濃い青色ほど明るくなく、ロゴの横にある赤色ほど明るくはありません。しかし、このような明るい組み合わせがシンプルで美しいのは、背景として大量の白を使用していることに加えて、明るいブロックデザインがもう1つの重要な役割を果たしているからです。

ブロックカラー 決済や銀行のWebデザインでは、カラーブロックデザインは、章モジュールを調整するためにほぼ必須のテクニックになることがあります。統一されたスタイルとテキストが必要な場合、カラーブロックは通常、低輝度、低純度の色を使用します。ページ情報が大きくて味気ない場合は、非常に小さなカラーブロックまたはトーンを使用してユーザーの視覚を誘導します。このようなカラーブロックは通常、非常に明るく活気のある単色を使用します。

Google Wallet は、ブロックカラーを使用してユーザーの目を誘導し、快適で豊かな視覚体験を生み出します。
色のコントラスト カラーブロックの役割が視覚的な美しさを区別して調整することである場合、純度が高く、明度が低いカラーブロックの組み合わせを使用できます。このような組み合わせは、飛び跳ねたりギラギラしたりすることなく、リズム感を簡単に作り出し、画像をカラフルに見せます。

Digg はウェブサイトのデザインに危険な対照的な色を使用していますが、明るさを抑えているため、明るく美しいです。
色の配分比率 ほとんどのテキスト情報デザインでは、ページを快適で洗練されたものにしたい場合、テキストの色の比率を制御することは考慮すべき事項です。一般的に言えば、5％の明るい色を使用して、金額などの非常に重要なテキストを強調表示し、約60％のより高い明度色（ダークグレーなど）を使用して主要なコンテンツテキストを与え、約15％の中低明度色を使用して必要な補助テキストを与えます。残りの20％は、最も低い明度色（ライトグレーなど）であり、必須ではない補助テキスト用に予約されています。この比率の利点は、明確なレイヤーと目立つ強調です。最後の低明度テキストは、実際には明るいグラフィックカラーブロックとして設計されており、視聴者が閲覧順序を整理するのに役立ち、大きな段落のテキストによってもたらされる心理的プレッシャーを軽減します。

man.de と Bank of America のカラー分布 素晴らしい詳細——————————————————
支払いの詳細 詳細に関しては、TenpayやAlipayなどの個人アカウント情報を主に使用するWebサイトから始めることができます。Tenpayはサードパーティの支払いチャネルに重点を置いているため、明確な情報と便利な支払いが協力の基礎です。デザインもシンプルさと明瞭さが求められ、機能性が強調されるため、ページデザインは比較的保守的で抑制されています。 Alipay の Taobao への依存は明らかであり、Taobao から伝わったデザイン思考は非常に明白です。支払い方法の多様性と商品やアプリケーションの豊富さをページのデザインに顕著に反映し、より実質的で華やかに見せることを要求しています。そのため、多くのページは過度に派手で、少し焦点が定まっていない状態になっています。デザインのシンプルさと豊かさは、両社が採用している2つの路線です。しかし、業界の発展と事業の拡大に伴い、両社は互いの特質に近づく傾向にあります。両者が本質的に同じ会社であることは驚くことではありません。そのため、ページの視覚的な詳細に関してはデザインの余地がある可能性があります。
コントラストが美しさを生み出す デザインでは、比較を繰り返すことなしに、素晴らしいディテールは生まれません。ディテールが細かい理由は、検出が難しいにもかかわらず、はっきりと見えるからです。このとき、デザイナーは微妙な視覚的違いを識別するためにn個のオプションを検討する必要があります。 1pxの素晴らしいバリエーション 2007年にiPhoneが登場したとき、その絶妙なUIは数え切れないほどのデザイナーを魅了し、1pxに正確なアイコンは多くのブランドデザインをはるかに超えるものにしました。Appleは、1pxを使用して、投影、凹凸、ハイライトなどのリアルな3次元効果を作成するのが得意です。Webデザインでも、Appleはその絶妙なテクニックを使用して、Webサイトデザインの全世代に影響を与えました。

この緻密な描写技法には、完璧なデザインスキルとデザインスケールの熟達が必要であることは注目に値します。注意しないと、工場で大量生産された油絵や高精度カメラの製品のように、デザインは硬直して鈍くなり、活力を失ってしまいます。多くのデザインは、この言い表せない職人技の代表例です。このようなデザインは、リアリズムのためにリアリズムを追求していることが多く、情報の伝達力が弱まることがよくあります。
実際、Apple の新しい Lion システムへの回帰や、Nokia の N9 のアイコンデザインの変革も、デザインが情報表現に戻るという重要な傾向を示しています。

Appleは、新しいLionシステムで、元の複雑なアイコンを、調和のとれたグレーのシンプルなアイコンに変更しました。NokiaのN9は、アイコンのデザインを、元の不格好な機械のようなアイコンから、カラフルなグラデーションの背景と白いシルエットを備えた、シンプルで明るく認識しやすいアイコンに変更しました。また、Appleの丸みを帯びた四角形と区別するために、アイコンの曲線を開発し、独自のスタイルを形成しました。
VI の拡張ウェブサイトの視覚的な統一性と独自性を維持するもう 1 つの方法は、デザインにおける企業 VI の広範な適用、特にウェブページでの企業標準色の拡張を確保することです。さまざまな明るさの色レベルとテキスト色を組み合わせることで、ウェブサイト全体の独自性と認識性を確保できます。Wallmart と Tesco は、ウェブページデザインの標準色を拡張して、ウェブサイトを統一して明確にしました。Wallmart は、製品のテレビ画面を青に変更しました。色が適切に使用されているため、ウェブサイトは明瞭で美しいです。ショッピングモールのウェブサイトは暖色系でなければならないと誰が言ったのでしょうか?

まとめると、それらのほとんどは、ウェブサイトのビジュアルデザインにおけるいくつかの基本的なアートデザイン方法と手段の基本的な応用です。デザインにおいてネットワーク技術と伝統的なアート美学の関係に注意を払っている限り、私たちは間違いなくより多くの、より良い他のデザインテクニックを発見することができ、私たちの作品はより正確に情報を伝えやすくなり、私たちの芸術作品のようにより精巧でユニークなものになるでしょう。

<<: vue3 カスタムディレクティブの詳細

>>: VirtualBox Centos7 の NAT+ホストオンリーネットワークの落とし穴のまとめ