Ch2 JP

•複数の設計哲学を理解して活用し、Webページを設計および修正して、コンバージョン率を最大化します。
•Webページを設計するときに確認および決定する必要のあるWebページのさまざまな要素を把握します。
•コンバージョンを促進するために、広告とランディングページが一致するディメンションをリストします。
•さまざまな種類のランディングページを理解する。

企業が所有する最も重要な顧客向けデジタル資産は、通常そのWebサイトです。たとえ会社が非常に活発なFacebookページ
と人気のあるモバイルアプリケーションを持っているとしても、そのウェブサイトはおそらく、顧客と潜在的な顧客にとって最も重要なデジタルの目的地です。したがって、企業は、適切に設計されたWebサイトの作成と保守に多大な労力を費やす必要があります。
ウェブサイトは主に見られるため、視覚的な魅力に基づいてウェブサイトのデザインの品質を評価することは魅力的です。しかし、ウェブサイトのデザインの品質の究極の尺度は、コンバージョンを促進する能力です。高いコンバージョン率を獲得するWebサイトは、一部の視聴者にとって退屈または雑然とした（または他の否定的な形容詞）ように見える場合でも、適切に設計されています。この章では、変換するWebサイトの設計に役立つWebデザインガイドラインを提供します。結果のWebサイトが派手なものか、落ち着いたものか、カラフルなものかグレースケールのものか、忙しいものか単純なものかは関係ありません。変換する限り、Webサイトは適切に設計されています。

セクション1：優れたWebデザインの原則

すべてのWebデザインの決定は、最終目標を念頭に置いて行う必要があります。現在のデザインはコンバージョン率を最適化しますか？しかし、その質問への答えが「いいえ」である場合、ウェブサイトを最高の変換可能性に導く変更を識別するのに役立つガイドラインと経験則が必要です。このため、優れたWebデザイナーはすべて、一連の指針となるデザイン原則を使用しています。これらの原則は通常、研究と経験を組み合わせて開発されます。以下に、コンバージョン率の高いWebサイトの作成に役立つ5つの異なるデザインフレームワークを示します。ウェブデザインの原則の最適なセットは、最高の作品を作成するのに役立つものです。これは、以下に示すシステムのいずれか、これらのシステムの設計原則の組み合わせ、

使いやすさを考慮した設計

Webデザインの原則の一般的なシステムの1つは、スティーブ・クルーグの著書「Do Maket Me Think：A Common Sense Approach to Web Usability」で与えられました。タイトルが示唆するように、彼の包括的な哲学は、平均的なユーザー（そして理想的には平均以下のユーザー）が探しているものを見つけたり、やりすぎたり、多くの間違いを犯さずに目的を達成できるように、ウェブサイトを設計することですクリック。これを行うには、Webサイトを、読書ではなくスキャン用に設計されたパンフレットではなく、看板のように設計する必要があります。次のチェックリストは、Webサイトを最大限に使用できるようにするための考慮事項をまとめたものです。

Webサイトの規則に従う：市場の他のほとんどのWebサイトがナビゲーションバーや会社のロゴなどのページ要素をページの同じ場所に配置している場合は、同じ操作を行うため、ユーザーはWebサイトの固有の構成を学習するために時間と労力を費やす必要はありません。

効果的な視覚的階層を作成します。より重要なことは、ページ上でより大きく、より高くする必要があり、同様のアイテムはページ上でグループ化する必要があります。

ページを明確に定義された領域に分割します：異なる訪問者が異なる可能なアクション（製品を閲覧したい人、アカウント情報を確認したい人など）に興味がある場合、最初にサイトの領域を識別するのに役立ちます。そのエリア内でドリルダウンできます。

クリック可能なものを明確にする：ほとんどのデザインプラットフォームでは、クリック可能なテキストがクリック不可能なテキストとは異なる色に自動的に変更されるため、これが問題になることはほとんどありません。明らかにクリック可能にします。

気晴らしを排除：ホームページは特に乱雑になりがちです。何が最も重要かを判断するのが困難な場合があり、ホームページにはすべてが掲載されています。難しい決定を下し、最も重要な情報のみを含めます。

スキャンをサポートするためにコンテンツをフォーマットする：魅力的なニュース記事やブログ投稿を読んでいない限り、長い段落を読むことを望みません。段落を短くし、多くの見出しを使用し、必要に応じて箇条書きリストを含めます。

スキャンをサポートするためにコンテンツをフォーマットします。魅力的なニュース記事やブログ投稿を読んでいない限り、長い段落を読みたがる人はいません。段落を短くし、多くの見出しを使用し、必要に応じて箇条書きリストを含めます。
ウェブサイトが使いやすくなればなるほど、訪問者はコンバージョンに至る可能性が高くなります。これらの原則に従うことでWebサイトがより使いやすくなりますが、Webサイトの使いやすさの究極のテストは、原則のリストに従うことではなく、ユーザーエクスペリエンス自体から得られます。ユーザーエクスペリエンステストは、Webサイトの使いやすさを検証する価値のある演習です。ユーザーエクスペリエンスのテストについては後で説明します。
変換中心の設計
このフレームワークは、Unbounce.comのOli Gardnerによって開発されました。彼は、Stukentが作成したこのエキスパートセッションで、このフレームワークに関する追加の詳細を提供しました。（このフレームワークは通常、Webページではなくランディングページのデザインに一般的に適用されますが、このフレームワークは一般的なWebサイトのデザイン戦略に役立ちます。）このフレームワークを使用して、企業のマーケティング自動化プラットフォームであるMagentoのホームページを分析します。（図2.1.1）

重要：潜在的な顧客に実行してもらいたいアクションは何ですか？ページ上のすべてがこのアクションを指しますか（比fi的または文字通り）？では
換言すると、ユーザーの注目を集めている（多くの場合、CTA略す）アクションへの単一の呼び出しはありますか？
「デモを見る」ボタンは、ユーザーが実行するよう指示されたアクションです。ページ上部の4つの文はすべて、そのボタンにつながる行動を促すフレーズです。画像内の女性の視線でさえ、このボタンに向けられています。

コンテキスト：サイト訪問者はどこから来たのですか？ホームページのメッセージとコンテンツは顧客の期待に合っていますか？
Magentoのホームページのコンテンツは比較的少ないので、訪問者が到着する前にプラットフォームについて何かを知っていることを明らかに期待しています。ただし、事前の知識が少ない訪問者には、大きなオレンジ色のボックスがプラットフォームに関する追加情報を提供します

明確さ：Webページのクイックスキャンから、Webページの内容が明確になっていますか？ユーザーは、リンクをクリックするとどうなるかを知っていますか？
Magentoは、訪問者が会社について多くの事前情報を持っていることを期待していますが、このページは、Magentoが「明確なデジタル小売体験を生み出すeコマースプラットフォーム」であるという非常に簡潔な要約を提供します。ボタンラベル（「デモを見る」）は、ユーザーがそのボタンをクリックしたときに何が起こるかを非常に明確に示しています。

一致：Webページ上のすべての単語はコンバージョンを促進しますか、または潜在的な顧客を望ましい行動からそらしますか？
大きなオレンジ色のボックスの下にある空白に注意してください。ユーザーが下にスクロールすると、この空白に追加のコンテンツがポップアップ表示されますが、そのコンテンツは表示されないため、ユーザーの注意をそらし、プライマリアクションボタンを参照できます。

信頼性：見込み顧客には、約束を果たすことができると信じる十分な理由がありますか？
企業間ソフトウェアの世界では、アドビは確立されたブランドエクイティを持っているため、MagentoがAdobe Commerce
Cloudの一部であるという事実は、Magentoの主張の正当性を提供します。さらに、唯一の統合プラットフォームであると主張することは強力な声明です。

クロージング：目的のクリック領域の近くでポジティブメッセージングを使用します。ネガティブな言葉はクリックを妨げることがあります。
ボタンの上にある「ビジネスビジョンに命を吹き込む」という最後のフレーズは具体的ではなく、おそらく少し過剰なものですが、ユーザーがさらに調査するかどうかを決定する時点で伝えられる明白な肯定的なメッセージです。

継続：目的のコンバージョンを取得したら、顧客は意図したアクションを完了し、次のコンバージョンを開始するように奨励されていることを顧客に知っていますか？

3つの質問
この設計フレームワークによると、ウェブページは、これらの3つの質問に対する明確な回答を提供し、スクロールせずに見える場所に情報を簡単に見つけることができる場合に最もよく変換されます。（「上折り」とも呼ばれる「上折り」は、スクロールしなくても見ることができるWebサイトの一部です。）
（1）何を提供していますか？
（2）なぜあなたを選ぶべきですか？
（3）次に何をしてほしいですか？
Webページのデザインの品質は、Webページがこれらの3つの質問に答えるかどうかではなく、質問にどれだけ明確に答えるかによって決まります。喫煙グリルを販売しているTraeger Grillsのホームページ（図2.1.3）を検討してください。このフレームワークの3つの質問にどれだけ明確に答えているかを調べることで、コンバージョンを増やす可能性のある変更を特定できます。

プライマリページの画像にはTraegerグリルの3つのモデルが表示されていますが、Traegerブランドに不慣れな人は、これらのグリルが石炭やガスのグリルではなく喫煙グリルであることを認識していない可能性があるため、最初の質問はTraegerに精通している人にのみ明確に回答されます。「WiFire Technology」および「D2 Direct Drive」機能は、潜在的な新規顧客よりもアップグレードを確信している可能性がある現在の所有者に語りかけます。Traegerを最高のグリルにするという特徴は、喫煙者のグリルブランドの中から選択する人を揺るがす可能性がありますが、石炭またはガスグリルよりも喫煙者の多様性の価値を伝えるものではありません。したがって、2番目の質問は、Traegerの顧客の特定のセグメントに対してのみ適切に回答することです。行動を促すフレーズは分かれています。このWebページは、ユーザーに新しいグリルの中から買い物をするか、新しい技術について詳しく知るように促します。どちらの経路もユーザーには明らかであるため、ページは3番目の質問でうまく機能しているようです。

Three Questionsフレームワークは、ゼロからWebサイトを設計する場合や、既存のWebサイトを改善する可能性があるかどうかを評価する場合に役立ちます。上記の3つの質問に常にできる限り明確に答えるようにWebサイトのページを設計すると、コンバージョン率の高いWebサイトになる可能性があります。さらに、既存のWebサイトがこれらの3つの質問にどれだけよく答えているかを調べると、設計者がコンバージョン率を高める変更を行う可能性があります。

顧客セグメント
多くのサイトは、さまざまな顧客や、ニーズや関心が大きく異なる潜在的な顧客からトラフィックを受け取ります。Webページが別のセグメントのニーズを犠牲にして顧客の1つのセグメントのニーズに対応している場合、1つのセグメントのコンバージョン率は高くないため、高いコンバージョン率は得られません。複数の顧客セグメントのニーズに対応することは、Webサイトの顧客のさまざまなニーズと関心を理解することを意味します。これには、会社独自の市場調査など、他のソースからの情報が必要になる場合があります。
電子商取引の分野では、多くの異なる顧客グループのニーズと関心に対処することが特に重要です。Zappos.comを検討してください。ランニングシューズを探している男性は、ドレスを探している女性とはまったく異なるニーズを持っていますが、どちらもウェブサイトのそれぞれの目的の領域に簡単に移動できます。別の違いとして、買い物客の中には商品の閲覧を好む人もいれば、検索を好む人もいます。目立つ検索バーは後者の顧客グループのニーズに対応し、ナビゲーションオプションは前者のグループを処理します。（図2.1.4および2.1.5）

別の例として、Netflixを検討してください。Netflix.comへの訪問者の中には、サービスについて詳しく知りたい潜在顧客や、サインインして番組の視聴を開始したい現在の購読者などがいます。両方の顧客グループが正しい情報をすぐに見ることができますか？サインインしようとしている人は、画面の右上にある「サインイン」ボタンをかなり簡単に見つけることができるはずです。一方、潜在的な顧客は「30日間無料視聴」に誘導されています。興味深いことに、画面スペースの99％以上が潜在的な顧客専用であり、1％未満が現在の顧客専用です。現在の顧客は説得力を必要としません。ただ単一のナビゲーションオプションが必要です。そのため、Netflixはホームページを潜在的な顧客の販売に捧げています。また、単一の[サインイン]ボタンを使用して、現在の顧客のニーズに対応しています。（図2.1.6）

さまざまな顧客セグメント向けのWebサイトを設計するときに役立つ練習は、ペルソナを作成することです。ペルソナは、顧客のセグメントを表すことを意図した架空の人物です。たとえば、ザッポスの1人（多くの）のペルソナは、運動のために走るのが好きな大都市の中心部でホワイトカラーの仕事をしている30歳の独身女性かもしれません。デザインを決定するとき、WebデザイナーはWebサイトのコンテンツがこのペルソナにアピールするかどうかを検討できます。Zapposは独自の市場調査から、このグループが春と夏に働くために中立色のサンダルを着用することが多いことを知っている可能性があります。

モバイルファースト
モバイルファーストデザインの哲学は、デバイスタイプを超えたコンテンツプレゼンテーションの汎用性よりも、コンテンツの最適なレイアウトとプレゼンテーションを重視していません。このWebデザインの哲学では、Webサイトは主にモバイルデバイス用に設計し、他の方法よりも大きな画面に適応させる必要があると述べています。この哲学の背後にある理由は、モバイルデバイスで適切に機能するサイトは、より大きな画面でも適切に機能する一方で、その反対はしばしば真実ではないということです。この哲学の背後にある二次的な理由は、モバイルトラフィックがデスクトップトラフィックを大量に追い越しているため、モバイル向けに最適化されたサイトはデスクトップ向けに最適化されたサイトよりも間違いなく重要だということです。モバイルブラウジングが最初に利用可能になったとき、新しいモバイルブラウジング機能に対する興奮はすぐにフラストレーションに変わりました。画面が小さいため、多くの画像が判読できませんでした。タイピングはページの読み込み時間と同様に非常に遅くなりました。また、ユーザーは太い指のクリックにより間違ったページに移動していることに気付きました。モバイル向けに最適化されたWebサイトは、通常、レスポンシブWebデザイン（RWD）を採用することにより、これらの落とし穴を回避します。

レスポンシブWebデザインは、Webページの要素（テキスト、画像、ナビゲーションなど）をコーディングして、Webサイト訪問者の画面サイズを検出し、それらの要素を自動的にサイズ変更および再配置して表示を最適化する方法です。すべての画面サイズでWebページを適切に表示する方法はRWDだけではありませんが、Googleが推奨する方法です。他の方法には、モバイルユーザーを別のモバイル固有のURLに再ルーティングするか、単にデバイスタイプを検出してモバイルユーザーに異なるコンテンツを提供することが含まれます。
モバイルとデスクトップのコンテンツ配置について決定する際、設計者はモバイルユーザーとデスクトップユーザーのニーズの違いにも注意する必要があります。たとえば、モバイルユーザーは携帯電話で商品を購入する可能性が低いことが多く、代わりに物理的な店舗を探して購入する場合があります。Home Depotがホームページを設計するとき、これらの異なるニーズを念頭に置いていたことは明らかです。デスクトップサイトでは、[ストアファインダー]リンクは、多数のナビゲーションオプションの1つにすぎません。ただし、モバイルサイトでは、8個のリンクのうち2つ（スクロールする前に表示されます）が、ユーザーが最も近い店を見つけるのを支援することに専念しています。（図2.1.7および2.1.8）

コンバージョン率の最適化
優れた一連のWebデザインの原則は、コンバージョン率の高いWebページの設計に役立ちますが、常に最高のコンバージョン率をもたらすデザインフレームワークはありません。可能な限り最高のコンバージョン率を獲得するには、コンバージョン率の最適化（CRO）が必要です。CROは、継続的なA / Bテストを通じて、実質的にすべての主要なWebサイトおよび鋸のある中小規模のWebサイトで実施されています。
基本的なA / Bテストは次のように機能します。既存のWebページ（ページの「A」バージョン）を取得し、コンバージョンを改善できると思われるページの一部の要素を変更します。この変更を含む新しいページは「B」バージョンになります。たとえば、おそらくTraeger Grillsは「新しいグリルの購入」ボタンの上に追加のテキストを追加して、新しい喫煙者が大規模なアップグレードであると信じる理由を提供できます（このセクションの前の図2.1.3）。Google OptimizeなどのA / Bテストプラットフォームは、各訪問者に表示するページのAまたはBバージョンをランダムに選択します。次に、ソフトウェアはページの各バージョンが生成する変換率を記録します。ページのどのバージョンが優れているかを確実に判断するために十分なデータが収集されたら、テストが終了し、今後のすべての訪問者にページの上位バージョンが使用されます。たとえば、新世代のトレーガーグリルに関する追加情報を追加すると、コンバージョン率が2.1％から2.3％に向上した可能性があります。この差が統計的に有意であることを示すのに十分な長さのA / Bテストが実行されると（ランダムノイズではなく、変換率の真の根本的な違いによる）、TreagerはAバージョンをBバージョンに置き換えます。

コンバージョン率の最適化に携わる人々は、「常にテストする」というマントラを唱えるのが好きです。つまり、A / Bテストが終了すると、別のA / Bテストを開始する必要があります。継続的なA / Bテストを通じて、Webチームは、どのWebページのデザインとレイアウトが最も高いコンバージョン率をもたらすかを時間をかけて知ることができます。コンバージョン率の増加は、ウェブサイトの収益性を向上させる最も確実な方法です。したがって、ウェブサイトはノンストップA / Bテストを通じて一定のCROを実施する必要があります。一定のA / Bテストを実施することに加えて、次のガイドラインは、Webサイトが常に
改善されていることを確認するのに役立ちます。
（1）データに基づいて変更を行います。すべてのWebサイトは、適切なWeb分析パッケージを使用して、Webサイト訪問者の行動に関するデータを提供する必要があります。優れたWebデザイナーは、このデータを使用して、改善が最も必要なページと、Webサイトのパフォーマンスを改善する可能性が最も高い変更を判断します。次の章でウェブ分析について学びます。
（2）Web分析データが不十分な場合、ユーザーエクスペリエンステストを採用します。Webサイトのトラフィックが少なすぎて設計の問題に関する信頼できる情報を提供できない場合、または分析データが問題を特定せずに問題を示している場合、最善の策はユーザーエクスペリエンステストを実施することです。ユーザーエクスペリエンステストを実施する最も一般的な方法は、ユーザーにWebサイトで実行するタスクのリストを提供し、その後、ユーザーが何をしているかを確認することです。タスクを達成するのが困難な場合、またはタスクを達成するために必要以上のステップ/クリックを行う場合は、ページを変更して、それらのステップをより明確にする必要があります。ユーザーエクスペリエンスのテストでは、後でユーザーにインタビューして、混乱した理由を尋ねることも一般的です。
（3）Webデザインの原則に基づいて変更を加えます。Web分析データは、多くの場合、Webページのパフォーマンスが低いため、変更する必要があるという非常に具体的な証拠を提供します。この時点で、Webデザイナーは多くの場合、Webデザインの原則がページの設計だけでなく、実行できる最も有益な変更を特定するためのものであることを忘れています。間違ったコンテンツに注意が向けられているため、またはユーザーがボタンをクリックしたときに何が起こるかわからないため、ページのパフォーマンスが低下している可能性があります。これらの変更を行うために一連のWebデザインの原則を使用すると、考えられるソリューションを単純に吐き出すよりもはるかに優れた結果が得られます。
（4）再設計を避けます。ページのパフォーマンスが低いことがわかった場合、ページ全体を再設計したくなるかもしれません。しかし、再設計を行うと、まずパフォーマンスの低下の原因を知ることができなくなります。再設計されたページのパフォーマンスが向上した場合、200の変更のうちどれが改善を引き起こしたかわかりません。つまり、設計上の欠陥が最初にパフォーマンスの低下を引き起こしたとしても、サイトの他の場所で引き続き使用されます。

結論
優れたWebデザインとは、見栄えの良いWebサイトを作成することではなく、変換のためにWebサイトを作成して最適化することです。単一の設計哲学が常に最良の結果をもたらすわけではありませんが、上記の設計原則のセットのいずれか、またはそれらの組み合わせにより、高性能なWebサイトを作成する可能性が高まります。Webサイトを作成したら、パフォーマンスを改善するために継続的に変更する必要があります。これらの変更はデータに基づいている必要があり、A / Bテストを使用してサイトの最高のパフォーマンスを確認する必要があります。

セクション2：ページ要素これで
、Webデザインの取り組みを支援するために、いくつかの異なる原則をある程度理解できるはずです。このセクションでは、変換を生成するために実装、変更、または削除を検討できるWebページ内の特定の要素について説明することにより、その知識の一部を文脈化しようとします。

ナビゲーション
2000年代初頭、あらゆる種類のWebサイトは、ほとんどの訪問者のインタラクションがいつかはナビゲーションメニューに関係することを期待しているようでした。2010年代には、この期待は減り、多くのWebサイトは、以下のHuluホームページのようなナビゲーションメニューを完全に見捨てました。明確な目標を念頭に置いているWebサイトの場合、ナビゲーションメニューを完全に削除することは理にかなっている可能性があります。Huluには非常に明確な目標があります。それは、訪問者にサービスにサインアップしてもらうことで、ナビゲーションを提供しないことを選択しました。（図2.2.1）
ただし、ほとんどの小売Webサイトでは、ナビゲーションを完全に削除することは一般的に賢明な選択ではありません。目的の動作が明確な場合（購入トランザクション）でも、訪問者ごとに異なる製品を念頭に置いているため、訪問者が探している製品を見つけられるようにするにはナビゲーションメニューが重要です。これらの場合、ナビゲーションの配置とサイズは重要な選択です。Appleのホームページ（下記）で、Appleはナビゲーションをできるだけ小さく目立たないようにし、最高の製品を宣伝するためのスペースを増やしました。（図2.2.2）
一方、Best Buyは、より目立つナビゲーションセクションを選択し、さまざまなオプションをカバーする複数のナビゲーションメニューを用意しています。どちらの選択も明らかに優れていません。Best Buyのより大きなナビゲーションにより、潜在的な顧客は、製品から店舗、顧客サービスまで、より多くの場所に直接移動できます。Appleサイトへの訪問者は、これらのオプションのいくつかを見つけるためにクリックを増やす必要がありますが、そのミニマリストのナビゲーションメニューサイトは、ミニマリストの製品設計哲学と見た目がより調和しています。（図2.2.3）

信頼のシンボル
AppleやBest Buyなどの確立されたブランドは、消費者への信頼を植え付けます。これがブランディングの主な目的です。しかし、多くのWebのみのビジネスでは、初めて訪問者がサイトや会社のことを聞いたことがありません。多くの非倫理的で信頼できないオンラインビジネスのため、サイトが何らかの形で信頼できないと思われる場合、消費者はしばしばオンラインでの購入を控えます。これらの不安を和らげる1つの方法は、ページレイアウトに信頼のシンボルを含めることです。信頼のシンボルとは、サイトが合法であることをユーザーに伝えるシンボル、アイコン、画像、または小さな声明です。いくつかの信頼シンボルを使用する以下のFanDuelページを検討してください。（図2.2.4）
これらの信頼シンボルは、各信頼シンボルがソースにリンクし、消費者が自分の信verify性を検証できるため、さらに効果的です。Webページの他の多くの機能は信頼性を伝えることができ、それによって信頼のシンボルとして機能します。下記の中で信頼を植え付ける18のWebデザイン技術である
サイトの訪問者は：
1.プロの写真
2.高品質なデザイン
3.保証（例えば、海運、サービス、または製品ベース）
4.アクセス可能な返品ポリシー
5.アクセス可能なプライバシーポリシー（ステートメント）他の目的のために、訪問者の情報を利用したり販売していない程度フォーム送信ボタンの近くに
6安全な支払いゲートウェイ（セキュリティを検証するためのアイコンが含まれる）
7.ブランド認識と賞
8.声
9.クライアントのロゴ
10.製品またはサービスを使用している顧客の写真
11.ビデオデモ
12.会社が提携している組織へのロゴとリンク
13.会社が本物であることを証明する入手可能な連絡先情報
14.アクセシブルで詳細な製品情報
15.積極的な宣伝
16 。ソーシャルメディアの存在
17.サードパーティの資格情報または認定
18.会社の連絡先情報（住所、電話番号、メールアドレス）

カラースキーム
「ウェブサイトで使用するのに最適な色は何ですか？」この質問には答えられません。高性能のウェブサイトは太陽の下ですべての配色を使用しているため、配色を選択してもウェブサイトの運命が劇的に変わることはありません。会社のロゴに目立つ色を使用している場合は、おそらくこの色に基づいてWebサイトの配色を決めるのが理にかなっています。また、補色の基本的な色の原則を採用して、2次色と3次色を選択することも価値があります。しかし、それ以上の色の選択は特に重要ではありません。重要なのは色ではなくコントラストです。対照的な色を使用して、訪問者が出席する必要があると思われる場所に注意を向けます。以下のニコンのページをご覧ください。ページの中央にある明るい黄色の[開始]ボタンが最も注目を集めていますが、それは黄色だからではなく、

ボタン
Webページは、目標の変換を念頭に置いて作成する必要があります。そのため、多くの場合、上記のNikonの例のように、行動を促すフレーズ（CTA）を持つキーボタンが含まれます。これらのボタンは成功に不可欠であるため、変換を最大化するには、ボタンの色、形状、サイズに対してA / Bテストを実行する必要があります。ボタンは、高いクリック率を生成するためにボタンのように見える必要があるため、通常、グラデーション、境界線、影などの視覚的な合図が含まれます。ボタンを使用する別の重要な利点は、通常、大きなデスクトップ画面とモバイルデバイスで同じように機能することです。

画像
前のセクションで説明したように、ウェブページは主にスキャンされ、読まれません。その結果、多くの場合、画像はテキストよりも重要です。この事実の重要な意味は、画像がウェブサイトの信頼性の最初の兆候であることです。訪問者が何らかの方法で非専門的に見える写真を見た場合、彼らはサイトが信頼できないと結論する可能性が高く、それはコンバージョンに劇的に悪影響を及ぼします。

ビデオ
現在、ほとんどのブラウザ対応デバイスは、ビデオを視聴するのに十分なほど技術的に洗練されているため、多くの利点があるため、ウェブページでますます採用されています。まず、ビデオは画像と音声を組み合わせているため、他のメディア形式よりも短時間でより多くの情報をまとめることができます。第二に、ビデオがプロの場合、サイトに信頼性を与えます。第三に、ビデオを読むことは読むことよりも労力が少ないため、ユーザーは書かれたコンテンツよりも良いビデオに夢中になる傾向があります。第4に、動画はモバイルユーザーにとってもデスクトップユーザーにとっても便利です。画面が小さいため、モバイルユーザーは、他のほとんどすべての種類のコンテンツについて、デスクトップユーザーに比べて不利です。ただし、動画はデスクトップユーザーと同様にモバイルユーザーも利用します。ただし、企業は注意する必要があります。ウェブサイトにプロ意識が欠けていることを非常に強く伝えているため、プロではない動画は動画がないよりも悪いということです。優れた魅力的な動画コンテンツを作成するのは難しいため、動画コンテンツの専門家を雇うことは理にかなっています。

フォーム
長年にわたる多くの研究により、ウェブページ上のフォーム補完の心理学が調査されてきました。ウェブサイトが見込み客を生み出しているのか、購入プロセスを通じてサイト訪問者を獲得しているのかにかかわらず、訪問者はフォームに記入する必要があります。これらのベストプラクティスは、企業が受け取るフォーム入力の割合を増やすのに役立ちます。
10フォーム最適化のベストプラクティス
1.不要なフォームフィールドを削除します
2.最初のフォームフィールドで既に点滅するようにカーソルを設定します
3.ページで目立つようにフォームをフレーム化します
。ユーザーがフォーム
に記入します5.フォームの記入に時間がかからないことに注意してください
6.フォームの完成後すぐに何を得るかを訪問者に思い出させる画像またはメッセージを追加します
。7.際立つ送信ボタンを
作成します。8
. フォームフィールドの異なるレイアウトをテストします。9 .フォームが完成したら、必ずありがとう確認メッセージまたはページが表示されます
10.ブラウザのCookieを使用して、リピーターの適切なフィールドに自動入力します

電話番号
多くのサイトの主要なリード生成方法は電話です。そのため、リードジェネレーションWebサイトでは、電話番号を目立つ位置に配置する必要があります。さまざまなコールトラッキングソフトウェアのおかげで、ランディングページにアクセスした人からの電話の数を追跡することは、今では非常に簡単になりました。Rail.com、Marchex.com、ifbyphone.com、さらにはGoogle Adsにコールトラッキングを提供します。コールトラッキングソフトウェアのGoogle検索は、サービスを提供する企業の長いリストを提供します。各サービスは一意ですが、ほとんどのサービスでは、訪問者がいつどこで電話をかけたか、通話がいつまで続いたかについての情報を提供し、通話の録音も提供します。

セクション3：ランディングページ
ランディングページは、サイトの訪問者が見る最初のWebページです。これはサイトのホームページまたは他のページですが、ほとんどのデジタルマーケティング担当者は「ランディングページ」という用語を使用して、マーケティングキャンペーンに関連して作成されたWebページを指します。つまり、ランディングページは多くの場合、ランディングページはメインWebサイトにまったくリンクしていないため、メインWebサイトと同じ構造や配色を採用する必要はありません。ウェブサイトの他の部分には適用されない追加の考慮事項。

リンク先ページのデザイン
NSAMCWADLPは、デジタルマーケティング担当者に人気の頭字語です。「専用のランディングページなしでマーケティングキャンペーンを開始しないでください。」たとえば、関心のある購入者をWebサイトのホームページに誘導するFacebook広告キャンペーンを実行できますが、結果として得られるコンバージョン率は、トラフィックを専用のランディングページに送信した場合の結果よりもほぼ確実に低くなります。専用のランディングページがウェブサイトの既存のページよりも優れている傾向がある理由は、専用のランディングページを作成して広告のメッセージに正確に一致させ、訪問者の期待と関心に正確に対処できるからです。この章で前述したWebデザインの原則は、引き続きランディングページに適用されますが、これらの原則に加えて、ランディングページは3つの次元で広告と一致する必要があります。
デパートであるロード＆テイラーの広告とそれに付随するランディングページを検討してください。広告に掲載された製品は、Brooks Brothersの赤いフリースベストでした。ただし、ランディングページにはその製品についての言及はありません。広告をクリックした多くの人々は、広告に描かれた赤いフリースのベストについて具体的に知りたいと思っていたが、それを見るためには、追加のナビゲーションに参加するか検索する必要があったためにそうしました。それらのほとんどは、代わりに[戻る]ボタンを押す可能性があります。（図2.3.1および2.3.2）
メッセージはどうですか？広告の主な行動を促すフレーズは「メンズショップ」です。一方、ランディングページのメインメッセージは「Very Vintage」です。そのため、ランディングページは、メッセージディメンションの広告と一致しません。ランディングページに「Men's Fall Style Guide」と多少目立つように表示されているため、メッセージは広告と一致するが、2つの理由で一致しないと考えるかもしれません。まず、それはページで最も目立つメッセージではありません。一致するメッセージは、最初に表示されるメッセージである必要があります。第二に、メッセージは実際には一致しません。同様のトピックに対処するだけです。これは難しいように聞こえるかもしれませんが、メッセージと一致させるためにまったく同じ単語を使用することは非常に重要です。ロード＆テイラーが「Very Vintage」を「Shop Men's」に置き換えた場合、安全な賭けです。
最後に、広告とランディングページの間の視覚的なコンポーネントに一致がないことも確認しています。視覚的なコンポーネントを一致させることで、訪問者が正しい場所に到着したことを即座に確認できます。代わりに、AWeberのエキスパートメールテンプレートの広告とランディングページを検討してください。ラップトップコンピューターの画像はランディングページの画像と一致しますが、広告画像の黄色のフィルターがランディングページのフィルターと同じである場合、視覚的な一致を改善できます。（図2.3.3および2.3.4）

ランディングページの種類ランディングページ
の最適なデザインは、ランディングページが奨励しようとしている動作によって異なります。ランディングページはこの目標の動作によって異なるため、ランディングページのタイプは異なります。以下に、6つの一般的なランディングページタイプを示します。
単一製品のランディングページ。会社が広告またはメールで特定の製品を宣伝する場合）、ランディングページはすべて同じ製品に関するものでなければなりません。このランディングページにアクセスしてから数秒以内に、訪問者は次のすべてを確認できます。
製品画像。
ユニークな価値提案。（UVP）
行動を促すフレーズ。
どうやって進める。
おなじみの配色とロゴ。

複数の商品のランディングページ：特定の1つの商品（「割引ランニングシューズ」や「ベストセールメンズウォッチ」など）ではなく商品カテゴリを宣伝する場合、この広告をクリックすると、複数の商品を掲載するランディングページこの製品カテゴリ。単一の製品ページに適用されるのと同じルールが複数の製品ページにも適用されます（たとえば、製品の画像、一意の価値提案などが表示されます）。情報過多。製品の順序に優先順位を付けて、ベストセラーと最高のマージンを持つ製品が最初に表示されるようにします。複数の商品がスクロールせずに見えるようにします。また、商品検索機能を含めると、訪問者が広告をクリックしたときに思い描いていた商品を確実に見つけることができます。図2.3.6は、JustBallGloves.comからの広告のランディングページです。
複数製品のランディングページの代わりに、複数カテゴリのランディングページがあります。この選択肢は、特定の製品の好みがなくても、一般的なカテゴリーの好みを持つ可能性が高いほど製品タイプに十分なバリエーションがある場合に一般的です。たとえば、野球のバットのランディングページでは、同じランディングページのすべてのバットを組み合わせるのではなく、木製バットまたはアルミニウムバットのページに追加のナビゲーションを提供できます。Webサイトの訪問者が製品を公開する前に好みを調整できるようにすることは、コンバージョンにとって有益です。

リードジェネレーションのランディングページ：リードジェネレーションのほとんどのサイトでは、訪問者がメールフォームに電話をかけるか、記入する必要があります。したがって、ランディングページでは、通常は行動を促すフレーズとともに電話番号を上部に目立つように表示する必要があります。また、問い合わせフォームに追加の行動を促すフレーズを提供することもできます。さまざまな価値提案、行動を促すフレーズ、ボタン、画像、フォームの配置、電話番号の配置、および信頼のシンボルを使用してランディングページでA / Bテストを実行すると、コンバージョンを増やすための最適な組み合わせを見つけるのに役立ちます。図2.3.7は、Rescue Rooter広告のランディングページです。

サブスクリプションランディングページ：メディアウェブサイトは、トラフィックが増加するにつれて収益が増加します。トラフィックを増加させる1つの方法は、訪問者をサブスクリプションにサインアップすることです。これを行うために、メディアサイトは多くの場合、訪問者に購読を求めるサイトオーバーレイ（ポップアップウィンドウとも呼ばれます）を使用します。それ以外の場合、サイトは新しいコンテンツ（ビデオ、ブログ投稿、記事、またはインフォグラフィック）が潜在的なサブスクライバーの間で特に人気があると予想する場合、広告を実行して、一般的な行動を促すフレーズ（CTA ）訪問者を購読に招待する。図2.3.8は、The New York Timesのサイトの例です。

単一目的のランディングページ：コミュニケーションおよびコラボレーションプラットフォームであるSlack（図2.3.9）からのランディングページを検討してください。このページには、短いビデオプロモーション以外の情報はほとんどありません。また、新規顧客には、メールアドレスを入力するか、去るという2つのオプションしかありません。このような単純なランディングページを提供することは直感に反するように思えるかもしれません。より多くの情報が有益ではないでしょうか？より多くのオプションが有益ではないでしょうか？時々、これらの質問に対する答えは「いいえ」であることがわかります。リードなどのコミットメントの低いコンバージョンの場合、単一のランディングページでコンバージョン率が劇的に向上することがあります。

結論
Webページまたはランディングページを設計する単一の正しい方法はありませんが、適切に設計されたすべてのWebページには2つの共通点があります。第一に、それらは顧客が望む行動を促進するように設計されました。第二に、可能な限り最高のコンバージョン率または収益性が得られるように、継続的にテストと更新が行われました。優れたWebデザインとは、見た目に美しいサイトを作成することではなく、コンバージョンを生成することです。