2020年も機能する8つのWebデザイン原則
公開: 2021-07-22あなたのウェブサイトのデザインはあなたが思っているよりもコンバージョンにとってより重要です。 あなたは世界中のあらゆるコンバージョン促進戦術を実装することができます、しかしあなたのウェブデザインががらくたのように見えるならば、それはあなたにあまり良くありません。
デザインはデザイナーがすることだけではありません。 デザインはマーケティングです。 デザインはあなたの製品であり、それがどのように機能するかです。 ウェブデザインの原則について学べば学ぶほど、より良い結果が得られます。
無料のUXとユーザビリティコース
原則から実践へ。 UXとユーザビリティに関する無料のコースをご覧ください。
ここにあなたが知って従うべき8つの効果的なウェブデザインの原則があります。
1.視覚的階層
きしむホイールはグリースを取得し、目立つビジュアルが注目を集めます。 視覚的な階層は、優れたWebデザインの背後にある最も重要な原則の1つです。 それは人間の目が見ているものを知覚する順序です。
運動。 重要度の高い順に円をランク付けしてください。
これらのサークルについて何も知らなくても、ランク付けすることができました
簡単に。 それは視覚的な階層です。
Webサイトの特定の部分（フォーム、行動の呼びかけ、価値提案など）は他の部分よりも重要であり、重要性の低い部分よりも注目を集めるようにします。
ウェブサイトのメニューに10個のアイテムがある場合、それらすべてが等しく重要ですか？ ユーザーにどこをクリックしてもらいたいですか？ 重要なリンクをより目立たせます。
階層はサイズだけから来るのではありません。 Amazonは、色を使用して、「カートに追加」および「今すぐ購入」の召喚ボタンをより目立たせています。
ビジネス目標から始める
あなたはあなたのビジネス目標に基づいてあなたのウェブサイト上の要素をランク付けするべきです。 特定の目標がない場合は、何を優先すべきかわかりません。
これが例です。 これは、ウィリアムズソノマのウェブサイトから撮ったスクリーンショットです。 彼らは屋外調理器具を売りたいと思っています。
最大の目を引くのは、巨大な肉片（私にそれを欲しがらせる）、それに続く見出し（それが何であるかを言う）、そして行動への呼びかけ（それを手に入れる）です。 4位は見出しの下のテキストの段落に行きます。 5つ目は送料無料のバナーで、上部のナビゲーションは最後です。
これは視覚的な階層であり、Webデザインの時代を超えた原則です。
運動。 Webをサーフィンし、視覚的な階層の要素を意識的にランク付けします。 次に、あなたのサイトを見に行きます。 重要なもの（つまり、訪問者が求める重要な情報）は、階層のはるか下にありますか？ それをより目立たせます。
2.神の比率
黄金比は魔法の数1.618（φ）です。 黄金比によって定義された比率を使用するデザインは、見た目に美しいと信じられています。
次に、フィボナッチ数列があります。 各項は、前の2つの項（0、1、1、2、3、5、8、13、21など）の合計です。 興味深いのは、一見無関係に見える2つのトピックがまったく同じ数を生成することです。
黄金比は次のようになります。
多くの芸術家や建築家は、黄金比を概算するために比率を使用しています。 有名な例は、古代ギリシャで建てられたパルテノン神殿です。
黄金比はウェブデザインで機能しますか？ あなたは賭けます。 Twitterは次のとおりです。
Twitterのクリエイティブディレクターであるダグ・ボウマンによる、数年前のコメントです。 デザインの選択は偶然ではありませんでした：
したがって、レイアウト幅が960pxの場合は、1.618（= 593px）で割ります。 コンテンツ領域の幅は593px、サイドバーは367pxである必要があります。 ウェブサイトの高さが760pxの場合、470pxと290pxのチャンクに分割できます（760 / 1.618 = 〜470）。
詳細については、黄金比をタイポグラフィに適用する方法に関するこの記事をご覧ください。
3.ヒックの法則
ヒックの法則によれば、選択肢が増えるたびに、決定を下すのに必要な時間が長くなります。
あなたはレストランでこれを数え切れないほど経験しました。 豊富なオプションのメニューはあなたの夕食を選ぶのを難しくします。 2つのオプションが提供されている場合、意思決定にかかる時間ははるかに短くなります。 これは選択のパラドックスに似ています。選択肢が多いほど、何も選択しにくくなります。 どちらの原則もWebデザインに関係しています。
ユーザーがWebサイトで持つオプションが多いほど、使用が難しくなります（使用されている場合）。 選択肢を排除する必要があります。 より良いウェブデザインを作るために、デザインプロセスを通して気を散らすオプションを排除することに焦点を合わせてください。
無限の選択の時代では、人々はより良いフィルターを必要としています！ 膨大な数の製品を販売している場合は、意思決定を容易にするために、より優れたフィルターを追加してください。 ワインライブラリーは大量のワインを販売しています。
彼らはフィルターで良い仕事をします：
4.フィッツの法則
フィッツの法則では、ターゲット領域に移動する（ボタンをクリックするなど）のに必要な時間は、ターゲットまでの距離とターゲットのサイズの関数であると規定されています。 つまり、オブジェクトが大きく、オブジェクトが近いほど、使いやすくなります。
Spotifyを使用すると、他のボタンよりも「再生」を簡単に押すことができます。
携帯電話アプリでは、再生ボタンもタップしやすい場所に配置しています。
大きいほど良いとは限りません。 画面の半分を占めるボタンはお勧めできません。数学的な調査を行う必要はありません。 それでも、フィッツの法則は2進対数です。 これは、オブジェクトのユーザビリティの予測結果が直線ではなく曲線に沿って実行されることを意味します。
サイズを20％大きくすると、小さなボタンをクリックするのがはるかに簡単になりますが、サイズを同じ20％大きくすると、非常に大きなオブジェクトでは、使いやすさにおいて同じ利点が得られません。
これは、ターゲットサイズのルールに似ています。 ボタンのサイズは、予想される使用頻度に比例する必要があります。 マウストラッキングを使用して、ユーザーが最もよく使用するボタンを確認し、人気のあるボタンを大きくする（打ちやすくする）ことができます。
人々に記入してもらいたいフォームがあると想像してみましょう。 フォームの最後に、「送信」と「リセット」（フィールドをクリア）の2つのボタンがあります。
99.9999％が「送信」を押したいと考えています。 したがって、ボタンは「リセット」よりもはるかに大きくする必要があります。
5.三分割法
デザインで画像を使用することをお勧めします。 ビジュアルは、テキストよりもはるかに速くアイデアを伝えます。
最良の画像は三分割法に従います。画像は、2本の等間隔の水平線と2本の等間隔の垂直線によって9つの等しい部分に分割する必要があります。 重要な構成要素は、これらの線に沿って、またはそれらの交点に配置する必要があります。
以下では、右の画像がどのように興味深いかをご覧ください。 それが三分割法の実行です。
美しく大きな画像を使用することは、優れたWebデザインに貢献します。 あなたの画像がもっと面白ければ、あなたのウェブサイトはもっと魅力的になります。
6.ゲシュタルトデザイン法
ゲシュタルト心理学は心と脳の理論です。 その原理は、人間の目は、個々の部分を認識する前に、オブジェクト全体を見るというものです。
これが私が意味することです：
犬が構成する各黒い点に焦点を当てずに、犬をどのように見ることができるかに注意してください。 ゲシュタルト主義の創設者であるクルト・コフカは、次のように説明しています。「全体は部分から独立して存在します。」
Webデザインに関連しているため、ヘッダー、メニュー、フッターなどを区別する前に、Webサイト全体が最初に表示されます。
人々が何かをどのように知覚するかを予測することを可能にする、8つのいわゆるゲシュタルト設計法則があります。 それぞれがWebデザインにどのように関連しているかを次に示します。
1.近接の法則
人々は、空間内で互いに接近しているものをグループ化します。 それらは単一の知覚対象になります。
効果的なウェブデザインのために、一緒になっていないものが一つとして認識されないようにしてください。 同様に、関連するデザイン要素（ナビゲーションメニュー、フッターなど）をグループ化して、それらが全体を形成していることを伝えます。
Craigslistはこの法律を使用して、どのサブカテゴリが「売り出し中」に該当するかを簡単に理解できるようにします。
2.相似の法則
私たちは似たようなものを一緒にグループ化します。 この類似性は、形状、色、陰影、またはその他の品質の形で発生する可能性があります。
ここでは、同じ色のドットが互いに似ているため、黒いドットを1つのグループにグループ化し、白いドットを別のグループにグループ化します。
Webデザインに適用すると、これはどのようになりますか？ Mixpanelは、ケーススタディへのリンクに同様の設計を使用しているため、それらを1つのグループと見なし、それぞれが相互に補強します。
3.閉鎖の法則
私たちは完全性を求めます。 閉じていない形状や画像の一部が欠落している場合、私たちの知覚は視覚的なギャップを埋めます。 下の図にはどちらの形状も実際には存在しませんが、円と正方形が表示されます。
閉鎖の法則がなければ、長さの異なるさまざまな線が表示されます。 しかし、閉鎖の法則は線を組み合わせて全体の形を形成します。
閉鎖の法則を使用すると、ロゴやデザイン要素をより面白くすることができます。 良い例は、1961年にピータースコット卿によって設計された世界自然保護基金のロゴです。
4.対称性の法則
心は物体を対称として知覚し、中心点の周りに形成されます。 オブジェクトを偶数の対称部分に分割することは、知覚的に喜ばしいことです。
接続されていない2つの対称要素を見ると、精神はそれらを知覚的に接続して、まとまりのある形を形成します。
上の画像を見ると、6つの個別のブラケットではなく、3対の対称的なブラケットが観察される傾向があります。
人々は非対称の外観よりも対称の外観を好みます。 画像とテキストの交互の列、中央に配置されたスライダー、および3列のリストにより、Trelloホームページデザインの視覚的な楽しみが増します。
5.共通の運命の法則
私たちは、オブジェクトをパスに沿って移動する線として認識する傾向があります。 同じ動きの傾向を持ち、したがって同じパス上にあるオブジェクトをグループ化します。
精神的には、人々はすべて同じ方向を指しているので、どこかを指している棒または上げられた手を一緒にグループ化します。 サイトのデザインでは、これを使用して、ユーザーの注意を何か（たとえば、サインアップフォーム、価値提案など）に導くことができます。
たとえば、ドットの配列があり、ドットの半分が上に移動し、残りの半分が下に移動する場合、上に移動するドットと下に移動するドットは2つの別個の単位として認識されます。
6.連続の法則
人々は、線が確立された方向性を継続していると認識する傾向があります。 オブジェクト（線など）の間に交差がある場合、2本の線を2つの単一の途切れのないエンティティとして認識する傾向があります。 刺激は重なってもはっきりと区別されます。
Fixelはこれを使用して、面をBIOSに接続します。
Figure andGroundやLawof Good Gestaltなど、他のゲシュタルト法もあります。 （オリンピックのリングのように、オブジェクトが規則的でシンプルかつ整然としたパターンを形成している場合、オブジェクトは知覚的にグループ化される傾向があります。）ただし、上記のオブジェクトはWebデザインの最良の指針です。
7.ホワイトスペースとすっきりとしたデザイン
空白（「ネガティブスペース」とも呼ばれます）は、「空」のままのWebページの部分です。 これは、グラフィック、マージン、ガター間のスペース、列間のスペース、タイプの行間のスペース、またはビジュアルです。
それは単なる「空白」のスペースではなく、Webデザインの重要な要素です。 その中のオブジェクトが存在できるようにします。 空白とは、情報、タイポグラフィ、色、または画像の階層の使用に関するものです。
空白のないページ、テキストやグラフィックでいっぱいに詰め込まれているページは、混雑しているように見えたり、雑然として見えるリスクがあります。 通常、読むのは難しいです。 （人々は気にさえしません。）これが単純なウェブサイトが科学的に優れている理由です。
適切な量の空白は、Webサイトを「クリーン」に見せます。 明確なメッセージを伝えるには、すっきりとしたデザインが不可欠ですが、コンテンツが少なくなるだけではありません。
クリーンなデザインは、そのスペースを最大限に活用します。クリーンなサイトデザインを作成するには、空白を賢く使用して明確に伝達する方法を知る必要があります。 Made.comは空白をうまく使用しています：
空白をうまく利用することで、メインのメッセージやビジュアルに集中しやすくなり、本文のコピーも読みやすくなります。 一般的に、空白は優雅さと洗練を促進し、読みやすさを向上させ、焦点を合わせます。
空白と単純さについてもっと読む。
8.オッカムの剃刀
いくつかの競合する仮説が与えられた場合、オッカムの剃刀は、仮定が最も少なく、それによって最も簡単な説明を提供するものを選択するように促します。 それをウェブデザインの文脈に置くために、オッカムの剃刀は、通常、最も単純な解決策が最善であると主張します。
彼らのAngelpad体験についての投稿で、Pipedriveのチームは次のように書いています。
Angelpadチームとメンターは多くの方法で私たちに挑戦しました。 「ホームページにたくさんのものがあります」というのは最初は同意できませんでしたが、喜んでテストします。 そして、私たちは確かに間違っていたことが判明しました。 コンテンツの80％を削除し、ホームページに1つのサインアップボタンと1つの[詳細]リンクを残しました。 サインアップへのコンバージョンは300％増加しました。
それは見た目だけでなく、それがどのように機能するかについてもです。 37Signalsのような一部の企業は、「シンプル」をビジネスモデルに変えました。 創設者のジェイソン・フリードが書いた本「リワーク」からの引用は次のとおりです。
私たちの製品は競合他社よりも性能が低いため、多くの人が私たちを嫌っています。 私たちが彼らのペットの特徴を含めることを拒否すると、彼らは侮辱されます。 しかし、私たちは、私たちの製品が行っていることと同じように、製品が行っていないことを誇りに思っています。 ほとんどのソフトウェアは複雑すぎると考えているため、シンプルになるように設計しています。機能が多すぎる、ボタンが多すぎる、混乱が多すぎるなどです。
シンプルでミニマリストなデザインは、デザインが機能することを保証するものではありません。 しかし、私の経験では、単純な方が常に反対よりも優れています。したがって、Webデザインを単純化するように努める必要があります。
結論
効果的なウェブデザインとアートは同じではありません。 しかし、多くの心理的およびデザインの原則がWebサイトに適用されます。 これらの法律の関連する側面をレイアウト、タイポグラフィ、および画像に適用することにより、優れたWebサイトを設計できます。
ユーザーとビジネス目標に合わせて設計します。 優れたウェブデザインは、見た目に美しく、経済的にやりがいのある結果をもたらすことができます。