予備設計レビューで何を見るべきか

公開: 2017-03-30

プレースホルダーテキストは、訪問者を混乱させる可能性があります。フォントを間違えると、ページのメッセージがわかりにくくなる可能性があります。非常に多くの細部が集まってクリック後のランディングページのデザインを成功させる場合、1つだけ見落とすと、コンバージョンに費用がかかる可能性があります。

そのため、クリック後のランディングページを完成させる前に、予備的なデザインレビューを実施する必要があります。

予備設計レビュー

クリック後のランディングページをデザインするには、クリエイティブのチーム全体の調整が必要です。 UXデザイナー、コピーライター、プロジェクトマネージャー、開発者はすべて、このプロセスで役割を果たす役割を担っています。（Instapageコラボレーションソリューションがそのプロセスをどのようにスピードアップできるかを学びます。）

多くの場合、忠実度の低いワイヤーフレームが引き出される前に、設計チームはすべてのページ要素に関するこれらの質問に答えます。

ワイヤーフレームさえも引き出される前に、設計チームはすべてのページ要素に関するこれらの質問に答えます。

クリックしてツイート

1.なぜこれを行うのですか/どのような問題を解決しようとしていますか？

たとえば、クリック後のランディングページ用のメディアをデザインしているとします。ステップ1では、決定の背後にある「理由」を特定する必要があります。クリック後のランディングページを見てください。なぜメディアを追加したのですか？

あなたの製品がどのように見えるかを見込み客に示すためですか？あなたのサービスがどのように機能するかを説明するためですか？答えを使用して、どの種類のメディアが目的を最もよく達成するかを判断します。

ヒーローショットは、訪問者があなたの製品でより良い生活を想像するのに役立ちます。あなたの問題が「私たちのサービスは新しく、人々はそれを理解していない」である場合、解説動画はそれがどのように機能するかを正確に紹介することができます。

忘れないでください：クリック後のランディングページには、目的のないデザインはありません。すべての要素がコンバージョン率に貢献します。

2.誰のためにやっているの？

特定のタイトルフォントを好みますか？忘れてください。あなたが「最先端」だと思うそのストックイメージ？それを捨てる。デザインの中核は、訪問者が好むものを中心に展開する必要があります。

このページは誰のために作成していますか？どのようなメッセージが彼らの共感を呼ぶでしょうか？見込み客を完全に理解するための良いステップは、購入者のペルソナを作成することです。

ターゲット顧客セグメントのこれらの調査ベースの表現により、クリック後のランディングページのデザインの基礎となる人口統計や行動（およびその他）のアイデアが得られます。

顧客調査からの定性的データと分析ツールからの定量的データの助けを借りてそれらを構築します。あなたが誰に売っているのかを知る前に、あなたは彼らに売る方法を戦略的に始めることはできません。

3.成功したことをどのようにして知ることができますか？

特定の設計要素を実装する場合は、その要素が目的を達成したかどうかを測定する方法が必要です。

コピーが長いページがサービスを最もよく表していると思われる場合は、スクロールの深さとコンバージョン率でその成功を測定できます。

動画が長いコピーよりもうまく機能すると思われる場合は、再生を指標およびコンバージョン率として使用して、テキストの多いページと比較して成功したかどうかを判断できます。

事前に、設計要素の成功を正確に測定できるメトリックを特定していることを確認してください。そうしないと、コンバージョン率に何が貢献しているかがわかりません。また、コンバージョン率に何が貢献しているかがわからない場合は、それを改善することはできません。

予備設計レビューで評価する要素

「すべてのコンポーネントを、デザインコンテストに提出できるかのように扱ってください」と、マイクロソフトのデザイナーであるクラウディオグリエリは言います。「すべてのコンポーネントに注意を払うと、全体はその部分の合計以上になります。」

クリック後のランディングページコンポーネントのそれぞれがデザイン賞を獲得できますか？ワイヤーフレームを開発に送る前に、確認することが重要です。エラーをキャッチすることは、公開後のコストのかかるミスを回避するために重要です。

前述の3つの質問に対する回答は企業ごとに異なりますが、クリック後のランディングページ要素のベストプラクティスは異なります。以下を評価して、ページが公開された後、コンバージョン率を低下させないようにします。

レイアウト

何千年もの間、私たちはグリッドシステムの助けを借りて読んできました。今日、列と行は、雑誌、本、新聞など、インターネットの黎明期以前と同じようにWeb上で私たちの目を導きます。

「これらは多かれ少なかれ直接Webに引き継がれたシステムであり、機能します」とAlexBigman氏は言います。「賢明な言葉：多くのデザイナーは、「創造性」の名の下にグリッドを避けようとしました。そのようなウェブサイトの多くは未読になります。」

研究はこれを確認しています。 MicrosoftとMITのある調査によると、2つのグループの主題が異なるページレイアウトで提示された場合、一方は従来型で、もう一方は非従来型でしたが、それらの応答は次のとおりでした。

非伝統的なグループは、作品を読むのにかかる時間を過大評価し、時には眉をひそめた形のレイアウトで身体的な不快感を示しました。

伝統的なグループは、彼らが作品を読むのにかかる時間を過小評価し、読んでいる間、より高い焦点を報告しました。

同じように、レイアウトの規則を避けるべきではありません。設計規則もそうすべきではありません。ヤコブニールセンのウェブユーザーエクスペリエンスの法則は、インターネットユーザーはほとんどの時間を他のウェブサイトに費やしていると述べています。それらの他のウェブサイトでは、ウェブがどのように機能するかについての期待を形成した場所です。

たとえば、ユーザーは下線付きのテキストをハイパーリンクとして認識するようになりました。ほとんどの場合、ロゴはページの左上隅にあり、ロゴをクリックすると、通常、ユーザーはホームページにリダイレクトされます（ただし、クリック後のランディングページには表示しないでください）。システムの親しみやすさは、ユーザーの満足度に大きく影響します、とニールセンは言います。

より多くのユーザーの期待が正しいことが証明されるほど、ユーザーはシステムを制御していると感じ、それをより好むようになります。 そして、システムがユーザーの期待を裏切るほど、ユーザーは不安を感じるようになります。

デザインの慣習を超えて、視覚的な階層は訪問者の視線をページ上の最も重要なコンテンツに向けます。ゲシュタルト心理学に根ざした技術で作成することにより、フォーマットを使用して最も重要な情報を目立たせることができます。

サイズ：サイズが大きいほど、注意が必要になります。

位置：人々はページを上から下、左から右に消費します。したがって、左上の要素は右下の要素よりも頻繁に表示されます。

色：ページの残りの部分と対照的な色が注目を集めます。

密度：小さなスペースにいくつかの要素を追加すると、その領域が引き付ける注意の量が増えます。

値：暗いオブジェクトは、明るいオブジェクトよりも目立つように描画されます。たとえば、太字の単語はより注意を引くものです。

見出し、メリット、情報メディア、CTAボタンなど、最も重要な情報を伝える要素は、読者の注意を引くために、上記の特性でフォーマットする必要があります。

タイプ

ページを変換する機能は、タイプとそのフォーマットに大きく依存します。賢明に選択されたフォントは信頼性と読みやすさを向上させることができますが、不適切に選択されたフォントは両方に悪影響を与える可能性があります。次のことを確認してください。

クリック後のランディングページのフォントがWebサイトのフォントと一致している

ブランドの一貫性は、購入決定に大きな影響を及ぼします。忠実な訪問者がクリック後のランディングページをあなたのビジネスに属するものとして認識しない場合、彼らはそれがそうであると信じないかもしれません。 AdobeTypekitおよびGoogleFontsのフォントでブランドを維持します。

あなたのフォントはすべてのサイズで読むことができます

ユーザビリティの専門家であるDBnonn Tennantは、本に見られるものに近いため、16pxを推奨しています（左側の画面、右側の本のページ）。

調査によると、セリフはオンラインで小さいサイズでは読みにくいことがわかっているため、本文のコピーにはサンセリフのテキストを使用してください。読みやすさを確保する良い方法は、フォントが「il1」テストに合格できることを確認することです。

異なるフォントを最小限に抑える

装飾フォントは、クリック後のランディングページに注目を集め、個性を加えることができます。ただし、使用数が多すぎると、クリック後のランディングページがオンラインの身代金の手紙のように見えます。

クリック後のランディングページでは、2つ以下の異なるフォントを使用してください。そうしないと、ブランドの力が弱まり、ページがまとまりのないように見え、読みやすさが損なわれるリスクがあります。

テキストの行はバランスの取れた長さです

人々はグリッドの助けを借りて読むことに慣れていることを忘れないでください。テキストの行がそのグリッドを無視してページ全体に広がる場合、訪問者の注意の範囲の限界が広がります。同時に、短すぎると、読者の目が頻繁に戻る必要があり、リズムが崩れます。

無意識のうちに、新しい行にジャンプすると、読者は活気づきます。しかし、そのエネルギーは、ラインが長くなるほど消耗します。そのため、ユーザビリティコンサルタントのチームであるBaymard Instituteは、50〜75文字の行の長さを推奨しています。

行間隔は読みやすさを向上させます

線の間の垂直方向のスペースは、大小のバランスを見つける必要があります。小さすぎると、1本の線がその下の線と混ざり始めます。大きすぎると、訪問者の目が1つの行と次の行の間で失われます。

フォントデザイナーのMatthewButterickは、読みやすさを最大にするために、各行の間隔はフォントサイズのパーセンテージ（正確には120％〜140％）にする必要があると主張しています。

テキストはウェブ上での読書のパターンに対応します

テキストの多いページでは、読者は「F」に似たパターンでページを処理する傾向があります。画像を掲載しているページでは、そのパターンは「Z」のように見えます。

視覚的な階層の助けを借りて、あなたのテキストが訪問者の読書スタイルに対応する方法であなたの最も価値のある情報を伝えることを確認してください。

見出し、小見出し、箇条書き、太字はすべて、訪問者がページをスキャンするときに画面全体に目を引きます。

左マージンを壊さない

私たちが読むとき、左マージンは私たちの目の「家」です。テキストの行はさまざまな場所で終わる可能性がありますが、左マージンは、テキストを完成させた後、目が跳ね返る場所です。

そのため、常にボディコピーを左に揃える必要があり（見出しは中央に配置できます）、写真などの要素で左マージンを壊してはなりません。

それ以外の場合は、クリック後のランディングページを作成します
はるかに
あなたの訪問者にとって難しい
読む。

色

クリック後のランディングページに適切な色を選択することは、心理的に色が何を意味するかとは関係がなく、目を引く方法と関係があります。カラーホイールから2〜3色（シンプルな方が良い、研究によると）を選択すると、変換に関係する要素（フォームとCTAボタン）に注意を向けるスキームを作成できます。

補色配色

補完的なスキームは、カラーホイールで互いに反対の色を選択することによって作成されます。その反対は、このスキーム内の要素間のコントラストを作成します。

類似の配色

類似の配色は、カラーホイール上のネイバーを使用して作成されます。補完的なスキームと同じレベルのコントラストは作成されませんが、視覚的に簡単に消化できます。

単色カラースキーム

単色の配色は、カラーホイールの同じ色相の色合い、色調、および色合いで作成されます。単色スキームの色の違いは微妙であるため、フォームやCTAボタンポップなどの要素を作成するために、単一の補色とペアになることがよくあります。

あなたの配色はあなたのブランドを反映していますか？

これらの図を見ると、ベース、アクセント、背景色をどのように選択するのか疑問に思われるかもしれません。答え？あなたのブランドの色から始めましょう。

ロゴの色を出発点として使用して、ブランドの一貫性を強化する配色を作成します。

次に、ロゴの表示内容を決定して、ベースカラーを作成します。

最後に、最大の注意を引くために、互いに対照的な背景とアクセントの色（CTAボタンの色）を選択します。

適切な色を選択したかどうかについては、こちらをご覧ください。

ナビゲーションメニュー、フッター

これらはおそらくあなたのリストをチェックするのに最も簡単なデザイン要素です。クリック後のランディングページのワイヤーフレームの上部を見上げます。誰かがナビゲーションメニューを引き出しましたか？もしそうなら、それをスクラップします。

さて、下を見下ろしてください。多数のサイトリンクを含むフッターがスケッチされていますか？もしそうなら、それらを削除します。

クリック後のランディングページのコンバージョン率は1：1である必要があります。つまり、クリック後のランディングページにはクリック可能な要素が1つだけ（CTAボタン）ある必要があります。調査により、アウトバウンドリンクはコンバージョン率を低下させるという考えが強化されているため、訪問者を除外して集中力を維持してください。

画像

メディアは、正しい方法で使用すると、クリック後のランディングページで強力な説得力を持つことができます。特集を検討したいいくつかの画像：

あなたの訪問者にあなたの申し出がどのように見えるか、またはそれがどのように機能するかについての考えを与える製品画像。

視覚的にわかりやすい方法で情報を伝えるインフォグラフィック。グラフとチャートは、人々がデータセットを比較するのに役立ちます。

訪問者があなたの申し出で彼らの生活がどのように改善されるかを想像するのを助けるヒーローショット。

一緒に仕事をした信頼できるブランドや、取り上げられた有名な出版物を強調する会社のロゴ。

訪問者にページ上で安全であることを知らせるセキュリティバッジ。

あなたのビジネスが獲得した賞を強調する権限バッジ。

クリック後のランディングページのデザインを確認するときは、これらの画像がレイアウトに適していることを確認してください。セキュリティバッジは、フォームの横で最も効果的です。ヒーローショットは、オーソリティバッジと同様に、ページ上で最高の不動産を授与される必要があります。画像がどこにあるかは、それが何を伝えているかと同じくらい重要です。

フォームデザイン

クリック後のランディングページでは摩擦の主な原因となることが多いため、フォームは特に慎重に設計する必要があります。そうでない場合、貧弱なラベルは訪問者を混乱させる可能性があり、不要なフィールドは訪問者を怖がらせる可能性があります。

予備的な設計レビュー中に、独自のフォーム設計を評価する際のフォーム設計に関するNielsen NormanGroupのベストプラクティスを参照してください。

絶対に必要な情報だけを求めていますか？

マーケティングチームとセールスチームは、バイヤーの旅のさまざまな段階で、適格なリードの定義について合意する必要があります。その定義には、各段階で見込み客から取得する必要のある情報を含める必要があります。

見込み客があなたのビジネスに適していることを確認するために必要と思われる情報のみをフォームが要求するようにしてください。フォームフィールドを削除するたびに、変換する可能性が高くなります。 Marketoのチームに聞いてみてください。

フィールドは単一列形式で表示されていますか？

それらを水平または2列形式でレイアウトするのではなく、フォームフィールドが1列で表示されるようにしてください。 2つの列は、各フィールドに入力するときに訪問者の下降の進行を中断します（都市/郵便番号などの関連フィールドに関しては例外を設けることができます）。

類似のフィールドとラベルはグループ化されていますか？

名と姓、都市と郵便番号、クレジットカードとCVVなどのフィールドは、ラベルなどの識別情報と同様に、互いに近接している必要があります。調査によると、プレースホルダーテキストが消えると、訪問者を苛立たせたり混乱させたりする可能性があるため、これらのラベルは各フィールド内ではなく上に配置する必要があります。

摩擦を減らすためにフォームフィールドを組み合わせたり変更したりできますか？

フォームで応答のオプションが3つ未満のドロップダウンを使用している場合は、ラジオボタンのセットなど、より簡単に入力できるものに変換することを検討してください。

名と名前を要求するスクイーズページフォームを設計している場合は、フィールドを結合するか、名前を削除することを検討してください（一部のページでは名前をまったく要求しません）。

物事をさらに簡単にするために、訪問者がボタンをクリックするだけで変換できるようにソーシャルオートフィルを提供することを検討してください。

ボタンのデザイン

多くの場合、クリック後のランディングページの訪問者は、オファーを請求するためにクリックする必要がある場所を正確に知っていることを当然のことと思っています。それは優れたボタンデザインの結果です—そしてそれはあなたも目指すべきものです。

見込み客はすでにあなたの信頼性とあなたの申し出の価値を決定するために一生懸命考えています。それを主張する方法を決定するために彼らをもっと一生懸命働かせないでください。次の点を確認して、誤ったデザインでボタンを誤って非表示にしないでください。

あなたのボタンはボタンに似ていますか？

キーボードのボタンを見下ろします。これらは、あなたの見込み客が現実の世界で推進することに慣れているものです。あなたのものは似ているはずです。

どのくらい似ていますか？それはあなたの聴衆に依存します。

スキューモーフィズムボタン

インターネットに精通していないオーディエンスにとって、スキューモーフィズムのデザイン手法はボタンを識別可能にするのに役立ちます。スキューモーフィズムは、現実世界のオブジェクトの構成を模倣するデザインのスタイルです。スキューモーフィズムデザインで作成されたデジタル計算機の例を次に示します。

シェーディングなどの3次元効果により、ボタンが押して見えるようになります。これらは、インターネットの黎明期から私たちが慣れ親しんできたものです。

したがって、購入者のペルソナを作成するときに、オーディエンスがオンラインで多くの時間を費やしていないことに気付いた場合、このタイプのボタンは、クリック後のランディングページに含めるボタンである可能性があります。これが高度に様式化されたものです：

ただし、訪問者がより経験豊富なインターネットユーザーであることが期待される場合は、ボタンを識別するために影のような手がかりは必要ない場合があります。あなたは…の使用を採用することができるかもしれません

フラットボタン

フラットデザインは、デジタルの世界でオブジェクトを再作成することを中心に展開しない手法です。これは、よりミニマルなアプローチです。

この手法で作成されたボタンは、自分自身を識別できるようにするために、粗い影やハイライトに依存しません。これもまた、フラットな手法でのみ設計された計算機です。

スクイーズページのフラットボタンは次のとおりです。

ただし、調査によると、この手法は3D効果などのクリック可能性の指標を除外することで、経験豊富なインターネットユーザーでさえ混乱させてイライラさせる可能性があります。ケイトマイヤーは説明します：

ユーザーは、クリック可能なものを決定するためにページを探索することを余儀なくされています。 彼らは頻繁に活動を一時停止して、動的なクリック可能性シニフィアンを期待して要素にカーソルを合わせるか、実験的にクリックして潜在的なリンクを見つけます。

この動作（ランダムにクリックしてボタンまたはリンクを見つける）は、やりがいのある場合があります。訪問者がクリックするのは実際にはクリック可能なボタンである場合とそうでない場合があります。マイヤーは拡大します：

ユーザーはほとんどの場合、この探索的動作を使用してインターフェースを介して自分の道を見つけることができますが、それでも余分な作業を強いられており、具体的なメリットを得ることなく、主要な目標から注意をそらされています。

その結果、多くのクリック後のランディングページのデザイナーは、フラットとスキューモーフィズムのバランスを実現するボタンを作成します。

フラット2.0

そのバランスは、「フラット2.0」、「セミフラット」、または「ほぼフラット」なデザインとして知られています。セミフラットボタンは次のとおりです。

この手法では、シャドウとハイライトを使用してクリック可能性を示しますが、はるかに微妙な方法です。フラット、セミフラット、スキューモーフィズムから選択するときは、常にユーザーのことを考えてください、とMeyer氏は言います。

流行のために使いやすさを犠牲にするような設計上の決定をしないでください。 他のデザイナーのためだけにデザインしているのでない限り、あなたはユーザーではないことを忘れないでください。 独自のデザインの各要素が何を意図しているのかを知っているため、クリック可能性の記号を解釈するための好みや能力は、ユーザーの好みと同じではありません。

あなたのボタンは注目を集めていますか？

CTAボタンに注意を引くには、クリック後のランディングページで控えめに（またはまったく使用されていない）色でボタンを塗りつぶします。このケーススタディのため、赤は緑よりも優れていると考えられていました。

しかし、コンテキストを考慮すると、赤いボタンはページ上の他のいくつかの緑の要素（お金のアイコン、ロゴ、写真）の中で際立っていたため、おそらく緑よりも優れていることがわかります。

色彩理論を使用してデザインスキームを作成している場合、CTAボタンは「アクセント」カラーです。カラーホイールの反対側の色相と対比すると、最も目立ちます（上記の「色」を参照）。

ボタンは十分に大きいですか？

今日、インターネットは主にモバイルデバイスを介してアクセスされます。つまり、クリック後のランディングページにアクセスしたユーザーは、指でボタンを押す必要があります。あなたは十分に大きいですか？

MITの調査によると、平均的なタッチパッドは10〜14mmであり、10x10mmが適切な最小ボタンサイズになります。

それよりも小さいデータによると、ユーザーエラーの可能性が高くなります。

予備的な設計レビューでコンバージョンを保存する

予備的な設計レビューで間違いを見つけた場合、クリック後のランディングページが公開された後、チームの時間とビジネスのコンバージョンを節約できます。あなたはそれを最終決定する前に、必ず上記のすべての質問に答えると、Instapage出版チェックリスト上のすべてのチェックボックスをOFFすることができます。

顧客獲得あたりのコストを下げるために、常にすべての広告をパーソナライズされたクリック後のランディングページに接続してください。今すぐInstapageEnterpriseデモにサインアップして、専用のポストクリックページの作成を開始してください。