Web デザインにおける近接性とは何ですか?また、どのように使用できますか?

公開: 2022-10-28

人間の心の仕組みは興味深い。 人々が自分たちの世界を視覚的に捉える方法について疑問に思ったことはありますか?

20 世紀、ドイツの心理学者マックス ヴェルトハイマー、クルト コフカ、ヴォルフガング コーラーは、この疑問に対する答えを見つけようとしました。 彼らは一連の研究を実施し、その結果、人々が周囲の世界をどのように見ているかを説明する一連の簡単なガイドラインであるゲシュタルトの原則を開発しました。

UI/UX がビジネス Web サイトの成長を導く 9 つの方法

近接性は、ゲシュタルトの原則の 1 つと考えられています。 この原則は、現代のユーザー インターフェイス デザインの美学に大きな影響を与えます。 このブログでは、Web デザインにおける近接の意味と、その使用方法について説明します。

Webデザインにおける近接性とは?

近接の概念は、視覚的に順序付けする必要がある要素と、可能な限り混乱を最小限に抑えるという目標を指します。 相互に関連がないことを強調するために、相互に関連のないコンテンツを分離することが重要です。

たとえば、複数のソーシャル メディア プラットフォームのアイコンがグループ化されており、Web サイト上で分散していないことに気付いたに違いありません。 これは、すべてを 1 つの場所に配置する手法に似ています。

近接性を利用して視覚的なあいまいさを最小限に抑え、理解を促進するレイアウトは、理解しやすくなります。 近接性は、Web サイトのレイアウトの構造にも役立ちます。 近接を適切に適用することは、ユーザー エクスペリエンスに重要かつ有益な効果をもたらします。

デザイナーは、レイアウトをすっきりと見せたり、集合的に関連する変数をグループ化するなどの主要な目的を達成できるため、近接原則の恩恵を受けます。

Web デザインで近接性を使用するには?

ホワイトスペース

デザインにおける余白の重要性を理解することは、デザインに近接という概念をうまく採用するための最初のステップです。

デザインに余白がないことはよくある問題です。 ユーザー エクスペリエンスに関して言えば、余白はページ上の実際のコンテンツと同様にユーザー エクスペリエンスに影響を与える可能性があります。 ホワイト スペースはユーザーの視線を誘導し、コントラストを生み出し、ユーザーの心に永続的な影響を与えます。

デザインを通じて、デザイナーはウェブサイトの性質を伝えます。 テキストと画像を介して行うことができます。 しかし、効果的なデザインとは、ウェブサイトの要素を高めることができる、よく整理された余白を持つものです。

視覚的な階層を作成する

Web サイトの構造と、コンテンツを整理して表示する方法は、効率的な近接性の構成要素です。 デザイナーは、効果的な近接性というこの目標を達成するために、コンテンツの魅力的な視覚的階層を構築できる必要があります。 Web サイトに明確な視覚的階層を提供することが不可欠であるため、余白を効率的に使用し、同等の要素をまとめて配置することが重要です。

Web サイトのパーツをグループ化し、さらにサブグループ化することは、階層を維持するための最良の手法です。 ユーザーは、この階層の結果として、自分がどこにいて、どこに行きたいかをよりよく把握でき、Web サイトの目的を表現するのにも役立ちます。

ユーザーがこれを見ることができるという事実は、関連する情報がどこに保存されているかをユーザーが認識し、理解していることを示します。これは、Web サイトのメッセージと目標をうまく伝えたことを示します。

内容理解の向上

コンテンツは王様です。 多くの製品では、コンテンツ素材が、そもそも人間が製品を使い始める動機となっています。 明確性 (読み手が書かれたテキストの内容を認識できる便利さ) と読みやすさ (読み手が記号を解読できる便利さ) は、製品設計の重要な要素です。

フォント ファミリー、フォント サイズ、テキスト コンテンツのコントラストなど、多くの要素が明瞭さと読みやすさに貢献します。 しかし、Web ページのコンテンツを遅滞なく追加する方法は、コンテンツの読みやすさと明瞭さに影響します。

テキストコンテンツがフォーマットなしで提供されている間、読みやすさは通過する可能性があります。 文章をパラグラフまたはセクションにグループ化し、空白のチャンクで区別することで、簡単にスキャンできる短いブロックでコンテンツ素材を提供することにより、顧客がテキストコンテンツをテストして学習するのを支援します.

スキャン可能なレイアウトにする

階層で構造化され、論理的に分類されたコンテンツの読み取りとスキャンが、はるかに簡単になります。 アーキテクチャとデザインを構築するとき、ウェブサイトは近接性を利用して、ユーザーにコンテンツで過負荷にならないようにする必要があります。

したがって、コンテンツの量が限られている Web サイトで近接の概念を実践するのは比較的簡単であるという事実にもかかわらず、大量のコンテンツを含む Web サイトでは近接がはるかに重要になります。 そのため、レイアウトがシンプルで読みやすく、ユーザーがスキャンできるかどうかを確認する必要があります。

音声UIデザインとは?このウェブデザインのトレンドをすべて知っている

特定の要素を強調する

強調は、パーソン エクスペリエンス (UX) デザインの最も重要な概念の 1 つです。 Web ページ上の正確な要素またはコンテンツ素材を優先することは、デザイナーにとって珍しくない最大の場所の責任の 1 つです。

デザイナーは、細部を大きくしたり、余分なコントラストを含めたりするなど、多くの独自の戦略を使用して適切な結果を得ることができますが、本物の細部を変更せずに同じ結果を得ることができます. 代わりに、詳細全体の不十分な領域の量を試すことができます。

貧しい地域と個人的な関心の間には直接的なつながりがあります。 丸く細部をアップロードする余分な領域は、視聴者にとって非常に重要になります。 これは自然に起こります。なぜなら、その場所には他に興味を引くものが何もないという事実のために、人の興味は余分な貧弱な領域を持つ詳細の方向に導かれる可能性があるからです.

インターネットページでどの詳細が最大の関心を引くかを認識するのはおそらく難しいことを指摘することは非常に価値があります. そのため、インターネット レイアウト ソフトウェア プログラムを適用してレイアウトのプロトタイプを作成し、5-2 テストで検証することをお勧めします。

聴衆を構成する人々にプロトタイプを 5 秒間見せてから、「あなたが思い出す主な要因は何ですか?」と尋ねます。 あなたが彼らに見てもらいたい詳細(または要素)を彼らが呼んでいるなら、あなたは大丈夫です。

コンテンツを通じて視聴者の目を誘導する

近接の原則は、視聴者の目をある要因から別の要因に導く良い方法である漂流を作成するのに役立ちます。 余白を調整することで、ユーザーの注意を明確に引き付ける焦点要素または領域を簡単に作成できます。

フォーカル ファクターの作成は、インターネット レイアウト グリッドを成長させることから始まります。これにより、常にレイアウト内にレイアウト ファクター (テキスト コンテンツ、画像、または実用的なコントロールと共に) を囲むことができます。

グリッドを取得したら、重要なコンテンツ マテリアル セクションを介して手動の顧客に要素を設定します。 以下に示すように、Evernote は、テキスト コンテンツ ブロックとイラストを組み合わせて使用​​することで、まさにそれを実現しています。 その結果、閲覧者の目は、このページをスクロールするときにジグザグの経路をたどります。

まとめ

さまざまなモニターや解像度に合わせてレイアウトする場合、UI 要素間の相対的な距離に注目することが重要です。 大きなラップトップ モニターに正しく表示されるデザインは、小さなセルラー モニターには正しく表示されません。

より小さなモニターを収容するためにレイアウトが縮小されると、要素間の間隔が最小化される可能性があり、UI 要素の想定される関係が崩れる可能性があります。 さまざまなモニターと解像度でレイアウトをチェックして、レイアウトが適切にスケーリングされるかどうかを確認することが重要です。 Google Chrome Dev 機器を適用してセルラー デバイスをシミュレートすることは実行可能です。

Web サイトのユーザー エクスペリエンスを向上させる方法についても、詳しく知りたいと思うかもしれません。 ウェブページのデザインまたは再デザインをご希望の場合は、お問い合わせください。