使いやすさと変換を向上させるユニバーサルWebデザインの原則
私は何千ドルもかけてデザイナーを雇い、見栄えのするWebページを作成しましたが、コンバージョン率を向上させるために何もしなかったことがわかりました。
それ以来、私は賢くなってきました。
ウールが目に引っ張られないように、デザインの知識を磨きました。
自分が何を望んでいるかがわかり、それをデザインチームに伝えることができるようになったので、変換する見栄えの良いWebサイトができました。
良いデザインはただのきれいな写真以上のものです。
優れた設計は、問題を解決し、結果を達成し、メッセージを効果的に伝達します。
ほとんどのWebサイトでは、ビジュアルデザインは、訪問者にコンテンツを消費させたり、行動を促すフレーズに応答させたりするなど、ビジネス目標をサポートする必要があります。
つまり、人間の脳が視覚情報をどのように処理するかを理解する必要があります。ありがたいことに、それはかなり予測可能です。
いくつかの実証済みの設計原則を適用することにより、Webサイトを訪問者にとってより魅力的で、目的を達成する上でより効果的にすることができます。
視覚的階層
視覚的な階層により、訪問者はコンテンツを読まなくてもWebページ上の最も重要な要素を識別できます。
たとえば、1つのページに複数の行動を促す呼びかけがある場合は、最も重要なものが大きなボタン、太字の色、または特別なアイコンで強調されていることを確認してください。
視覚的階層の原則を効果的に活用するには、最初にビジネス目標を決定する必要があります。
あなたがウェブページに達成させたい最も重要なことは何ですか？
ニール・パテルとの相談
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
以下の例では、主な目標は、食欲をそそるステーキの欲求を作成し、次にページの内容を伝え、次に行動を促すことです。
貼り付けた画像01483
視覚的な階層を確立するために使用できる6つの原則は次のとおりです。
ページスキャンパターン
人々は、ページをスキャンして、コンテンツをより深く掘り下げたいかどうかを判断する傾向があります。
記事などの従来のテキストの多いページの場合、ほとんどの読者はページの左側を下に移動してFパターンに従います。
彼らは、左揃えの見出しまたは最初のトピック文で興味深いキーワードを探します。
貼り付けた画像01454
読者の注意を引くには、ページの左上隅の近くに最も重要な情報を配置し、左揃えの見出しを使用して興味をそそります。
ランディングページなど、テキストが少ない他のレイアウトの場合、ほとんどの人はZパターンに従ってページをスキャンします。
貼り付けた画像01475
この動作を利用するには、最も重要な情報を隅に配置し、残りを上部と下部のバーに沿って配置します。
ヒーロー画像などの視覚要素を使用して、上部と下部のコンテンツ間の対角線を接続します。
サイズ
人々は最初にページの大きな要素を読む傾向があるので、ページを大きくして重要なコンテンツを強調します。
グラフィック処理または色のコントラストが十分に強い場合は、多くの場合、上から下または左から右への読み取り習慣を無効にして、ページ上の最大の要素に注意を引くことができます。貼り付けられた画像0 1437
大胆な色と高コントラスト
これは非常に単純です—明るく大胆な色が目立ち、注目を集めます。
ミュートまたはグレースケールの背景に配置すると、大胆な色で印象的な効果を得ることができます。
スクリーンショット20170821 at 2.03.23 PM
書体の重みとペアリング
ストロークの太さは、視覚的な階層を確立するための最も重要なフォント属性です。
そのため、記事内の特定のフレーズを強調するために太字を使用することがよくあります。
さらに、単語の配置、スタイル（たとえば、セリフやサンセリフ）、および斜体や下線などの変更も、テキストの視覚的な階層に影響を与えます。
見出しと小見出し
記事またはテキストの多いページで見出しと小見出しを使用すると、視覚的な階層を作成するのに役立ちます。
貼り付けた画像01482
H1、H2、およびH3タグのスタイルを設定して、Webサイト全体で一貫性を保ち、訪問者が情報の階層を理解しやすくします。
方向性
私たちの脳は、垂直線または水平線のグリッドに配置されたテキストを読むことに慣れています。
曲線上や対角線上に配置されたテキストなど、グリッドを壊すものはすべて、自動的に視聴者の注意を引き付け、ページ上で最も目立つ要素になります。
空間と質感
すべてを大きく大きくする代わりに、周囲に十分なスペースを置くことで、控えめなデザイン要素に注意を向けることができます。
貼り付けた画像01474
書体、ポイントサイズ、色合い、太さ、文字間隔、行間隔、および一般的な空間分布の組み合わせにより、レイアウトの全体的な「テクスチャ」が作成されます。
テクスチャとトーンは、人々がテキストを読む順序に影響を与えます。たとえば、影付きのボックスは、ボックス内のコンテンツを強調し、読者の注意を引き付けます。
貼り付けた画像01469
ホワイトスペースとすっきりとしたデザイン
優れたデザインは、Webサイトの使いやすさを向上させ、ユーザーが必要なものを簡単に見つけられるようにする必要があります。
余白とすっきりとしたデザインの使用は、訪問者が探している情報をすばやく見つけたり、実行する必要のあるアクションを理解したりできるように、煩雑さを排除するための鍵です。
ホワイトスペース
訪問者がWebサイトのテキストの壁にぶつかるとどうなりますか？
彼らの8秒間の注意はそれを処理できず、彼らはあなたのサイトから離れてクリックします。
貼り付けた画像01477
すべてを3文にまとめることが常に可能であるとは限りませんが、ありがたいことに別の解決策があります。
それは空白と呼ばれます。
空白は、デザイン要素とデザイン要素内のスペースの間の領域です。
それはあなたのコンテンツをより消化しやすく見せるので、あなたの訪問者は立ち往生します。
煩雑さが軽減されるため、訪問者はページにいる理由に集中しやすくなります。
さらに、レイアウトを簡素化し、空白を追加すると、多くのWebサイトのコンバージョン率が向上することがわかっています。
貼り付けた画像01444
ホワイトスペースは「ネガティブスペース」とも呼ばれますが、ネガティブなことは何もありません。
デザイン要素のバランスを取り、コンテンツを整理して、ビジュアルコミュニケーションのエクスペリエンスを向上させ、読者の注意を引くのに役立ちます。
空白を使用して設計する場合は、次の点を考慮してください。
読みやすさ：空白を使用して、フォント、サイズ、色、スタイル、先頭、カーニング、およびトラッキングを考慮して、テキストを読みやすくします。
ブランディング：空白を使用してブランドイメージを伝えます。たとえば、デザイン要素間の多くのネガティブなスペースは、通常、ミニマリズムと豪華さを反映しています。一方、空白の不足は、多くのニュースWebサイトの場合のように、「有益」であることに関連していることがよくあります。
焦点と注意：デザイン要素の周りの空白は、訪問者の注意を向けるのに役立ち、インタラクティブなコンテンツを通じて訪問者をガイドするのに特に役立ちます。
スクリーンショット20170821 at 9.33.18 AM
グリッドシステム
ページに多くのコンテンツがある場合は、グリッドシステムを使用すると、すっきりと整理された外観を実現できます。
貼り付けた画像01445
グリッドシステムは、ページ上のコンテンツを理解するための構造を脳に与えるために何世紀にもわたって使用されてきたビジュアルデバイスです。
グリッドシステムは制限的である必要はありません。グリッドを壊して特定のコンテンツに注意を喚起し、ページデザインをさらに強力にすることができます。
ほとんどの設計者は、視覚的に刺激的なグループを作成するために、複数の列を持つグリッドシステムを使用することを好みます。
貼り付けた画像01430
書体
古き良き時代には、デザイナーはほんの一握りの「ウェブセーフフォント」から選択することができました。
今日、ほとんどの最新のブラウザに@ font-faceが埋め込まれているおかげで、Webセーフオプションの数が急増しています。
ただし、同じページに12種類のフォントを配置しても問題がないという意味ではありません。
1ページの書体が多すぎると、デザインが忙しすぎます。訪問者はどこに注意を向けるべきかわかりません。
表示フォント、セリフフォント、サンセリフフォントを選択することから始めます。この組み合わせは、気を散らすことなく、デザインのニーズの大部分を満たす必要があります。
貼り付けた画像01459
フォントをヘッダータグ（H1、H2、H3など）に割り当てて、情報の階層を伝達しながら、書体の使用がWebサイト全体で一貫するようにします。
色
フォントと同様に、デザインでは2色または3色のメインカラーを使用して、パレットを最小限に抑える必要があります。
ブランドスタイルガイドを作成すると、全員が常に同じページにとどまるようにするのに役立ちます。
貼り付けた画像01450
画像
あちこちでアニメーションGIFを使用するのは楽しいかもしれませんが、ページ上の動きが多すぎると気が散ります。
一般的に、読者は静止しているWebサイトを好みます。
画像の選択に注意してください。彼らは有用な情報を伝えることによって価値を付加するべきです。スペースを埋めるためだけに使用しないでください。
また、一貫したブランドアイデンティティを提供するために、画像はサイトのトーンと一致している必要があります。
Occam’s Razorは、デザインの効率を低下させる可能性のあるページ上の不要な要素を排除するための指針です。
アイデアは、「最も単純なソリューションがほとんどの場合最良である」ということです。
これは、「追加するものがない場合はデザインが完成しないが、取り除くものがない場合はデザインが完成しない」という昔ながらの言葉を示しています。
オッカムの剃刀とパレートの法則（80/20ルールとも呼ばれます）を組み合わせて、ページ上の最も重要な要素を特定し、残りを削除してデザインの効果を高めます。
以下の例では、コンテンツの80％がページから削除された後、コンバージョン率が300％上昇しました。
貼り付けた画像01426
アクセシビリティ
ウェブサイトをデザインするときは、すべての訪問者がすべての情報にすばやく簡単にアクセスできるようにしてください。
直感的な構造
ページレイアウトであろうとナビゲーションであろうと、ウェブサイトは直感的に使用できる必要があります。
つまり、訪問者は必要なものを見つけて、dを取ることができます
可能な限り最も効率的な方法で必要なアクション。
あなたの訪問者にあなたのウェブサイトを使用するためにフープを飛び越えさせないでください。
書体
一部の表示フォントは人目を引くものですが、テキストの全ページに使用するためのものではありません。
本文のテキストについては、ほとんどの人が読みやすいサイズで、実績のあるフォントを使用してください。
貼り付けた画像01476
色
背景とテキストは、白い背景に黒いテキストなど、読みやすくするために対照的な色を使用する必要があります。
明るい背景の暗いテキストの色は、目に優しいです。長いコンテンツには、暗い背景に明るい色のテキストを使用しないでください。
パレットを選択するときは、色覚異常を考慮して、すべてのユーザーがすべてのデザイン要素を表示できるようにします。
画像
人間のコミュニケーションの93％は視覚的です。脳は画像をテキストより60,000倍速く処理します。
貼り付けた画像01424
Webサイトで適切な画像を使用すると、使いやすさが向上し、メッセージの伝達が向上します。
モバイル
モバイルユーザーエクスペリエンスを最適化するには、すべてのコンテンツを小さな画面に表示する以上のことを行う必要があります。
モバイルデバイスでページを表示したときに、すべてのデザイン要素がどのように見え、互いに再生されるかを検討してください。
たとえば、すべてのテキストが判読可能であり、画像がアイデアを効果的に伝えることができないほど拡大されていないことを確認してください。
黄金比
黄金比1：1.618は、自然界でよく見られる数学的比率です。
私たちの脳は、黄金比に従うオブジェクトや画像を好むように配線されているようです。
デザインに適用すると、多くの場合、目に心地よい有機的で自然に見える構成になります。
貼り付けた画像01479
レイアウト寸法
黄金比を使用して、ページ上のさまざまな要素の寸法を決定できます。
たとえば、Webページの一般的な幅（960ピクセル）を1.618で割ると、594ピクセルになります。多くのウェブサイトはそれをページの高さとして使用しています。
黄金比に基づいて2列のレイアウトの幅を設定することもサイトで人気があります。
貼り付けた画像01456
間隔
デザイン要素間の理想的な間隔を決定するのは難しいことがよくあります。
黄金比図から始めて、正方形を使用してテキストと画像の配置をガイドすることで、あなたの生活を楽にしてください。
貼り付けた画像01461
コンテンツの配置
あなたの訪問者があなたのページのコンテンツを読んでいることを確認したいですか？
目はゴールデンスパイラルをトレースするのが好きなので、コンテンツをスパイラルに沿って配置すると、読み取られる可能性が高くなります。
貼り付けた画像01478
三分割法
黄金比は、写真であろうとページレイアウトであろうと、構図に情報を与えることもできます。
構成に黄金比を使用する簡単な方法は、三分割法に従うことです。
Webページを2本の水平線と2本の垂直線で9つの等しい部分に分割すると、訪問者の注意は線の交点に引き付けられる可能性が高くなります。
貼り付けた画像01468
左上の交差点が最も注目される傾向があり、重要な情報の理想的な場所になっています。
ゲシュタルト設計法
ゲシュタルトは、認知行動に基づく心理学の一形態です。
「ゲシュタルト」という言葉は「統一された全体」を意味します。断片化された部分をどのように認識し、処理し、つなぎ合わせるかをキャプチャします。
貼り付けた画像01435
デザインと視覚に適用される場合、ゲシュタルトは、心が私たちの日常生活からの大量の視覚入力にどのように対処するかを指します。
設計要素間の関係を識別し、オブジェクトをグループに統合して入力を簡素化する傾向があります。
これらの関係とグループ化を適切に活用すると、より優れたユーザーエクスペリエンスを作成し、メッセージをより効果的に伝達できます。
ゲシュタルト理論から導き出された設計原理は次のとおりです。
近接性
オブジェクトが空間の近くでグループ化されると、それらは1つのオブジェクトとして認識される傾向があります。
ページ上のオブジェクト間の距離によって、オブジェクトがグループとして認識されるかどうかが決まります。
ナビゲーションやフッターリンクなど、同じカテゴリの要素を近づけて、それらがすべて同じ機能の一部であることを示すことで、使いやすさを向上させます。
類似性
共有された視覚的特性は関係を作成します。 2つのアイテムが類似している場合、それらは同じグループに属していると認識されます。
ウェブサイトのデザインでは、視覚的な処理を使用して、コンテンツの機能またはカテゴリを伝えることができます。
たとえば、すべての証言が同じデザイン処理を共有している場合、訪問者は、サイト全体に散らばっていても、それらが同じカテゴリに属していると認識します。
貼り付けた画像01481
連続
目が何かを追跡し始めると、別のオブジェクトに出くわすまでその方向に移動し続けます。
多くのコンバージョン重視のWebサイトは、ページのコンテンツまたは行動の呼びかけに注視しているモデルの写真を使用することにより、この認知習慣を活用しています。
貼り付けた画像01471
閉鎖
脳は完全性を求めているので、完全ではない形や画像を見ると、空白が埋められます。
閉鎖の法則は
ビジュアルデザインをより面白くするために使用されます。これは、一般的で、聴衆が認識できるオブジェクトに最適です。
貼り付けた画像01480
対称
脳は対称的な配置を探します。
接続されていないが対称的な2つの要素を見ると、私たちの心はそれらを組み合わせて一貫した形を形成します。
貼り付けた画像01438
ページ上の要素の対称的な配置は、目に心地よい視覚的な統一を作成するのに役立ちます。
一般的な運命
同じ方向性を示すオブジェクトをグループ化します。
たとえば、同じ方向にジェスチャーをしている人々のグループがある場合、それらはグループとして認識されます。
連続の法則で使用されるモデルの視線と同じように、この認知行動を活用して、コンテンツ、ロゴ、または行動の呼びかけに注意を引くことができます。
貼り付けた画像01449
ヒックの法則
Webサイトの訪問者が利用できるようにするすべての選択により、決定に必要な時間が長くなります。
この原則は、選択のパラドックスに関連しています。これは、人々に多くの選択肢を与えると、多くの人々が何も選択しないというものです。
ヒックの法則は、ウェブサイトの使いやすさを向上させ、コンバージョン率を高めるのに役立ちます。
選択肢を最小限に抑える
ランディングページなどのコンバージョン重視のデザインでは、選択肢の数を最小限に抑えて、目的のアクションを簡単に実行できるようにします。
たとえば、ほとんどのランディングページには、ヒーローの画像、簡潔なテキスト、および訪問者が何をすることが期待されているかを明確にするための1つの目立つ行動の呼びかけが含まれています。
貼り付けた画像01465
ナビゲーション
ウェブサイトのすべてのページへのリンクをナビゲーションバーに配置すると、混沌とした圧倒的な印象になります。
訪問者は混乱し、混乱した心は「いいえ！」と言います。
高レベルのカテゴリのみを表示するようにWebサイトメニューを設計します。ユーザーがサイトに深く入り込むにつれて、ゆっくりとドリルダウンします。
スクリーンショット20170822 at 9.08.29 AM
検索機能とフィルター
訪問者がすべてをWebサイトのナビゲーションに投入することなく特定のアイテムや情報を見つけられるようにするには、堅牢な検索機能が必要です。
商品の選択肢が多い場合は、検索結果でさえ圧倒される可能性があります。
使いやすいフィルター機能を設計して、訪問者が表示される選択肢の数をさらに制限し、最も関連性の高い結果を確認できるようにします。
貼り付けた画像01440
フィッツの法則
フィッツの法則によれば、ボタンなどのターゲット領域に移動するのに必要な時間は、ターゲットのサイズとターゲットまでの距離の関数です。
この設計原則を使用して、訪問者が召喚状をクリックするのをより速くします。
サイズと配置
画面の最もアクセスしやすい領域、通常は目が落ちる場所、またはマウスがすでにホバリングしている場所にボタンを配置することで、訪問者がボタンをクリックする可能性を高めます。
貼り付けた画像01433
多くの場合、ボタンを大きくしたり、太字の色を使用したりすることで、ボタンの目立ちを高めることができます。
ただし、大きいほど良いとは限りません。ボタンのサイズを大きくしても、Webページの使いやすさが直線的に向上するわけではありません。
貼り付けた画像01447
さらに、ボタンのサイズと目立ちは、訪問者の大多数が目的のアクションを実行できるように、予想される使用頻度を反映している必要があります。
距離と動き
フィッツの法則のもう1つの主要な要素は、マウスポインタが現在ある場所と必要な場所との間の距離です。
つまり、重要な要素がさらに離れている場合、訪問者が順次タスクを完了するのに時間がかかることを意味します。
より多くの訪問者がタスクを完了していることを確認するには、タスクを完了するために必要なリンクを近接してグループ化します。
貼り付けた画像01428
結論
あなたのウェブサイトのデザインは、美的に心地よく、経済的にやりがいのあるものである必要があります。
幸いなことに、科学に裏打ちされた心理学は、より魅力的でユーザーフレンドリーなWebサイトの設計に役立ちます。
上記の原則に従うと、コンバージョン率を上げ、バウンス率を下げることができます。
また、Webサイトの訪問者を、変換プロセスの次のステップに導くのにも役立ちます。
かわいらしいデザインでも役に立たないかもしれません。あなたのウェブサイトを設計するとき、それを覚えておいてください。
さらに、コピーだけでなく、さまざまなグラフィック要素を試してテキストを送信することを恐れないでください。ターゲットオーディエンスを喜ばせるものを見つけます。
単一の要素に対してA/Bテストを実行して、変更によって違いが生じるかどうかを判断します。
これらのユニバーサルデザインの原則は、ウェブサイトをデザインする際に常にビジネス目標を念頭に置いておくための優れたチェックポイントです。
使いやすさと変換を改善するために、Webサイトでこれらの設計原則をどのように使用しますか？
