専門家からのヒントを使用してランディングページワイヤーフレームを作成する方法

公開: 2018-05-08

クリック後のランディングページは、多くの場合、人々があなたのブランドに最初に目にする印象の1つであるため、それを特別なものにすることが重要です。クリック後のランディングページのワイヤーフレームは、実際にページを作成する前にページ要素の配置を視覚化できるようにすることで、これを支援します。

クリック後のランディングページのワイヤーフレームとは何ですか？

ワイヤーフレームは、クリック後のランディングページの基本的なデザインレイアウトまたはスケルトンであり、ページがどのように構造化され、ページを構築するためにどのアセットが必要かを関係者に知らせます。

InstapageのビジュアルデザイナーであるRaresCimpeanは、次のように説明しています。

クリック後のランディングページのワイヤーフレームをまとめるときは、ページのフロー、使いやすさ、アクセシビリティ、必要な情報にどれだけ早くアクセスできるか、CTAがどれだけアクセス可能で認識できるかなどに焦点を当てる必要があります。これらすべての要素ワイヤーフレーミングフェーズで考慮されます。

ワイヤーフレームのクリック後のランディングページの例を、長いものと短いものの両方で次に示します。

クリック後のランディングページのワイヤーフレームテンプレートは、いくつかの主な目的を果たします。

ペンと紙のスケッチと最初のプロトタイプの中間点として機能する
ページに表示されるコンテンツの概要を表示する
ページ構造の青写真を提供するため
ユーザーインターフェイスの全体的な方向性を伝えるため

注：すべてのキャンペーンに適合する単一のクリック後のランディングページのワイヤーフレームデザインはありません。クリック後のランディングページの中には、見出し、箇条書きのコピー、フォーム、CTAボタンが必要なものもあれば、追加のメリットを強調して社会的証明を示す必要があるものもあります。たとえば、販売ページでは、多くの場合、より詳細な製品の説明が必要であり、より長くする必要がある場合があります。（短いページと長いページのどちらがより良い結果をもたらすかを確認するために、いつでもA / Bテストを行うことができることを覚えておいてください。）

ワイヤーフレームを作成するページの種類に関係なく、グラフィックデザインマネージャーのRafal Bogdanは、関係する利害関係者を圧倒しないように、最初はワイヤーフレームを非常にシンプルに保つことの重要性を表明しています。

次のフェーズで利害関係者によって拒否される可能性のある要素にあまり深く焦点を合わせたくありません。 ワイヤーフレームの主なアイデアは、クリック後のランディングページに特定のプロジェクト機能を表示し、それらの機能が実際のページでどのように動作するかを理解できるようにすることです。

ワイヤーフレームを手に入れたら、それを輝かせるデザインの時間です。以下は、コンバージョン率の高いクリック後のランディングページに通常見られる要素です。

クリック後のランディングページをワイヤーフレーム化する方法

ナビゲーションなし

クリック後のランディングページはコンバージョンと単一の目的のために設計されているため、コンバージョンの目標からユーザーの注意をそらす可能性のあるナビゲーションリンクがあってはなりません。変換するか残すかのどちらかです—他のオプションはありません。

多くの企業では、ナビゲーションバーを削除した後、コンバージョン率に大幅な変化が見られました。

キャリアポイント大学では、上部のナビゲーションバーを削除し、フォームレイアウトを変更した後、コンバージョン率が336％増加しました。
Yuppiechefは、ナビゲーションバーを削除することで、コンバージョン率が100％増加（3％から6％）するのを目撃しました。
SparkPageは、A / Bテストで上位のナビゲーションを削除した月の間に、コンバージョン率が9.2％から17.6％に増加しました。

Comporium Media Servicesは、コンバージョンを最大化するためにナビゲーションを削除する必要性を理解しているもう1つのブランドです。彼らのロゴさえリンクされていないので、訪問者はページにとどまり、相談を要求することに集中できます。

ベストプラクティスに従う場合、使用する必要があるリンクは、信頼性を高めるリンク（利用規約やプライバシーポリシーなど）と、ユーザーエクスペリエンスを向上させるリンク（アンカータグやクリックして電話をかける電話など）のみです。番号）。

見出しと小見出し

あなたの見出しは最も重要な要素の1つです。説得力のある見出しがないと、訪問者はあなたのオファーを評価し続けるのに十分な説得力がないからです。これはメッセージを配信するための主要な方法であるため、注意を促し、ユーザーがページにアクセスするとすぐに、折り目の上にはっきりと表示される必要があります。

サブヘッドラインは、特にプライマリヘッドラインが長い場合、または追加のコンテキスト（統計など）が必要な場合に、プライマリヘッドラインを補完するために使用されます。

優れた見出しを書くための鍵は、それがあなたのユニークなバリュープロポジション（UVP）、またはあなたの製品やサービスを競合他社と一線を画すものを伝えることを確実にすることです。

このオートパイロットのクリック後のランディングページの見出しは、他のマーケティング自動化ソフトウェアと比較して、オートパイロットで「より速く成長」できることを企業に知らせます。次に、小見出しは、どのように速く成長できるかを説明することで、このアイデアを補完します。

UVPを含めることに加えて、説得力のある見出しには4つの主要なタイプがあります。

ニュース：見込み客に新しいソリューションを紹介します
自己利益：見込み客の固有の自己利益に訴える<
迅速で簡単な解決策：迅速な修正を求める見込み客の要望にアピールする
好奇心：訪問者の興味と好奇心を刺激し、続きを読むように促します

1つを使用することも、複数を組み合わせてさらに強力な見出しにすることもできます。最も説得力のある見出しは2つ以上を使用します。

メディア

人々はテキストよりもビジュアルを処理する方が簡単なので、魅力的なメディア（画像、GIF、ビデオ）は、言葉よりもオファーの価値を伝えるのに役立ちます。ただし、ビジュアルは万能のソリューションではありません。クリック後のランディングページに選択するメディアの種類は、提供しているものによって異なります。

クリック後のランディングページ画像の種類は次のとおりです。

ヒーローショット：あなたの製品やサービスが彼らの生活をより良く変える方法を訪問者に垣間見せます
製品画像：訪問者が主な機能を含むオファーの詳細を確認できるようにします
インフォグラフィック：訪問者がデータと統計（チャート、グラフなど）をより簡単に概念化できるようにします

iContactが作成に役立つビジネスメールのいくつかの例を見込み客に示すために使用する画像を見てください。

画像に加えて、クリック後のランディングページの動画にはいくつかの種類があります。

説明動画：製品がどのように機能するかを説明します（特に、新しい製品や複雑な製品の場合）。見込み客にどのように役立つかに焦点を当てます。
紹介ビデオ：新会社の紹介、新製品の発表、新製品の機能の強調
ビデオの声とケーススタディ：実際の満足している顧客に、製品またはサービスに対する満足度と成功を説明することで、社会的証明として機能します

画像を使用する場合は、オファーの現実的な状況を伝え、トピックに関連するものでない限り、ストックフォトに近づかないでください。それより少ないと、ブランドの認識と価値を低下させるリスクがあります。

コピー

しかし、訪問者にあなたの申し出についてすべてを伝えたいと思うかもしれませんが、そうしないでください。注意の持続時間はせいぜい数秒なので、あなたのコピーは簡潔で、すぐに人々の注意を引く必要があります。

たとえば、箇条書き（図像、チェックマーク、矢印などでマークされている）は、重要な情報を伝える一般的な方法であり、訪問者はページをすばやくスキャンして、オファーの重要なポイントを特定できます。

見込み客は、太字のセクションヘッダー、最小限のコピー、および箇条書きの助けを借りて、Highfiveのビデオ会議ソリューションについてすばやく学ぶことができます。

社会的証明

変換する前に、人々はあなたの会社が信頼できるサービスを提供していることを信頼する必要があります。それは、社会的証明がさまざまな方法で彼らを納得させることができる場所です：

顧客の声：顧客から直接検証されるため、約束を果たしている見込み客を示します（特定の情報、統計、氏名、専門家の所属と肩書き、顔写真を引用して）。
顧客のロゴ（および数）：あなたがすでに協力している有名な会社（およびその数）を表示し、訪問者に「私たちの製品またはサービスは彼らにとって十分であったので、あなたにとってもそうなるでしょう」と知らせます。
業界賞：業界のリーダー、レポーター、ニュースステーション、ウェブサイトなどから公に認められていることを示します。
トラストシール：支払い情報が外部の関係者から安全かつ確実であることを見込み客に保証します。
プライバシーポリシー：メールアドレスが適切に使用され、他の人と共有されないことを見込み客に保証します。

以前に同じHighfiveのクリック後のランディングページを振り返って、訪問者にコンバージョンを促すために使用したすべての社会的証明（ブランドのロゴ、引用された紹介文、業界の星評価）を確認してください。

これは別の例です。今回はSplashOmnimediaからのもので、顧客数、ブランドロゴ、ケーススタディビデオ、引用された紹介文など、あらゆる種類の社会的証明が含まれています。

このすべての証拠を組み合わせることで、CTAボタンをクリックして見込み客にコンバージョンを促すことができます。

リードキャプチャフォーム

完璧なフォームを作成するのはそれほど簡単ではありません。フォームフィールドが不足しているため、必要なすべての情報を収集できません。フィールドが多すぎると、潜在的な顧客を怖がらせるリスクがあります。フォームの長さは、オファーがマーケティングファネルのどこにあるかによって異なります。原則として、上が高いほどフォームは短くなり、その逆も同様です。

Justworksは、価格情報を提供するために、このクリック後のランディングページを設計しました。これは目標到達プロセスの最上位のオファーであるため、フィールドから3つだけが含まれ、非常に基本的な情報を要求することは理にかなっています。

対照的に、オートパイロットの無料トライアルは目標到達プロセスのさらに下にあるため、より多くの情報を求めることは許容されます。

アクションの呼び出し

CTAボタンは、クリック後のランディングページの変換が行われる場所であるため、目立ち、クリックを懇願する必要があります。 CTAボタンを最適化するための主な側面は次のとおりです。

色：色彩理論を使用して、コントラストがよく、ページの他の部分から目立つ色相、色調、色合い、または色合いを見つけます。
コピー： 「送信」と「ダウンロード」は一般的で刺激的ではありません。代わりに、特定のパーソナライズされたコピーを作成し、「あなた」、「あなたの」、「私」、「私の」を組み込んで、より多くのCTAボタンクリックを生成します。
サイズ：ボタンを検索させないでください。目立つようにします。 また、Volusionのクリック後のランディングページにあるバウンドする矢印のように、視覚的な手がかりを提供することもできます。
以下—さらに注意を引くために：

最小限のフッター

クリック後のランディングページとウェブサイトのフッターは同じではありません。クリック後のランディングページのフッターには、サイトマップ、製品ページのリンク、またはソーシャルメディアアカウントを含めないでください。あなたが含めるすべてのリンクは、別の気晴らしと、変換せずにページを離れるための追加の方法を作成します。

Infegyが訪問者に提供するこれらの脱出ルートをすべて見てください。

クリック後のランディングページフッターを含める場合は、Tapstoneのように、最新の著作権情報、利用規約、プライバシーポリシーのみが表示されるようにしてください。

ホワイトスペース

空白はページに息を吹き込み、すべての要素が注目を集め、訪問者がページを簡単にナビゲートできるようにします。空白の追加も：

乱雑さを減らします
読みやすさを向上
視覚的な階層を確立します
クリック後のランディングページをよりプロフェッショナルに見せます

NASMとAcquisioの次のクリック後のランディングページを比較してください。

NASMのページは混雑しており、最初にどこを見ればよいか、ページをどのようにナビゲートするかを決めるのが難しいため、一部の人にとっては圧倒される可能性があります。 Acquisioのページには十分な空白があるため、上から下への移動が簡単で、全体的に優れたエクスペリエンスを提供します。

それはすべて、クリック後のランディングページのワイヤーフレームから始まります

ワイヤーフレームを作成すると、チームはページストーリー全体を決定し、必要なアセットと必要なコピーの量を確認できます。そこから、上記の提案を使用して、最適化されたクリック後のランディングページをデザインできます。しかし、パーソナライズされた、100％カスタマイズ可能なクリック後のランディングページを構築するには、その仕事に十分強力なソリューションが必要です。

Instapageを使用すると、マーケターは、デザイナーフレンドリーなビルダー、CSSエディター、配置とグループ化、ホットキーなどを使用して、ピクセル単位で完璧なページを作成できます。次に、組み込みのヒートマップを使用してA / Bテストを行い、さらに高い変換を行い、Instablocks™を使用して生産をスケーリングします。他のソリューションは比較できません。今すぐInstapageEnterpriseデモにサインアップしてください。