アンカータグがランディングページのユーザーエクスペリエンスをどのように改善するか

公開: 2017-05-31

錨を水に落とすとどうなりますか？

アンカーがボートを所定の位置に保持しますよね？アンカーポイントから任意の方向に特定の距離を移動する自由はありますが、どちらの方向に進んでも、特定の半径に制限されます。

これは、アンカータグがWebページでどのように機能するかと似ています。訪問者はページ上のさまざまな場所にジャンプできますが、ページ上にとどまります。

マーケターは、特にアクションを刺激することが目標であるクリック後のランディングページで、特定の関心のあるポイントを強調できるため、このWebデザイン手法を気に入っています。これを実現するには、適切に最適化された要素を使用して、説得力のあるクリック後のランディングページをデザインする必要があります。私たちの新しい電子ブック、説得力のあるクリック後のランディングページを構築するための究極のガイドは、それについてさらに詳しく説明しています。

しかし、今日の投稿では、マーケターがアンカータグを使用して特定のページ要素に注意を引き、最終的にページ上で変換する方法を示します。

アンカータグを使用して特定の要素に注意を引きますが、変換するページにそれらを保持します。

クリックしてツイート

アンカータグとは何ですか？

アンカータグまたはアンカーリンクは、同じページ上の別の場所にリンクするWebページ要素です。これらは通常、長いページやテキストの多いページに使用されるため、訪問者はそれほどスクロールしなくてもページの特定の部分にジャンプできます。

アンカーリンクをクリックすると、訪問者は手間をかけずに行きたい場所に移動できるため、全体的なユーザーエクスペリエンスが向上し、変換プロセスに役立ちます。訪問者がページをすばやく簡単にナビゲートできるようにするだけでなく、視覚的な手がかりとして機能し、コンバージョンの目標に不可欠な要素に人々を向けることができます。

それらは静的またはアニメーション化できることに言及する価値があります。アニメーション化すると、アンカータグはページ上を移動する唯一のものである可能性が高いため、より多くの注目を集める可能性があります。また、アニメーションと空白を組み合わせると、必要な場所で人々の注意を引く強力な組み合わせが得られます。

以下のアンカータグの例では、この設計手法をさまざまな方法で使用できることに気付くでしょう。

クリック後のランディングページでアンカータグが強調表示できるものは何ですか？

重要なコピー

製品やサービスのメリットはコピーを通じて伝えられるため、特定のコピーへのアンカーリンクを使用するのが理想的です。コンスタントコンタクトは、ページの途中にあるクリック後のランディングページでこれを行います。訪問者が下矢印をクリックすると、ページがスクロールします。

SocialMediaCompanies.comは、訪問者をフォールドの下に誘導するアンカーリンクを備えた別のブランドです。この例では、訪問者に、会社が評価およびレビューする主要な領域に気付いてもらいたいと考えています。

各例は、アンカータグターゲットを使用してオファーに関する利点または重要な詳細を強調することにより、訪問者がコピーを読む（スキムする）可能性が高いことを示しています。

カスタマーサクセスストーリー

顧客のサクセスストーリーとお客様の声を特集することは、訪問者に説得力のある社会的証明を提供するための優れた方法です。彼らはあなたの製品やサービスへの信頼と信頼を築き、彼らを転換へと導く手助けをします。

顧客のサクセスストーリーが見落とされないようにするために、Dynamic Yieldは、バウンドするアンカータグの矢印を備えており、注意を引き、訪問者を正しい方向に導きます。見込み客が矢印をクリックすると、ブランドロゴがバイパスされ、サクセスストーリーのビデオに直接移動します。

この種のカスタマーレビューは、ページ上の他の何よりも効果的に製品を販売できることが多いので、なぜ見込み客がそれらをスキップするリスクを冒すのでしょうか。

ユースケース

Boardvantageは、前の例とは少し異なることをします。ここでは、矢印アンカータグの横にあるターゲット「ExploreUseCases」を識別します。それを目立たせるのに十分な空白に囲まれていることに注目してください。クリックすると、訪問者はフォールドの下のセクションに移動し、会社は最小限のコピー、短いビデオ、およびスクリーンショットでMeetXの主な機能と利点を強調します。

この特定のセクションには主な製品のセールスポイントが含まれているため、訪問者に確実に見てもらいたいと考えていました。 Boardvantageによるスマートな動き。

製品アドオン

このLyftのクリック後のランディングページでは、メニューナビゲーションリンクはすべてアンカータグであり、訪問者をページのさまざまな場所に誘導します。「GetYours」リンクをクリックすると、ページが中央付近にスクロールし、独自のアンプを入手する方法の詳細を確認できます。

ユーザーがFAQナビゲーションリンクをクリックした場合、ページ下部の「知っておくべきことすべて」セクションに送信されます。この記事で言及されている他の要素と比較すると、FAQセクションはクリック後のランディングページではあまり一般的ではありません。しかし、特に企業が自社のブランドに固有の何かを販売しようとしている場合、それらは依然として重要な目的を果たします。

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

このSalesgenieのクリック後のランディングページにはアンカータグが表示され、それぞれが訪問者にページをより多く利用してもらうことを目的としています。それぞれの下矢印は人々をページのさらに下に送り、それぞれのオレンジ色のCTAボタンは人々を上に戻してフォームに記入するように指示します。

もう一度CTAボタンに注目してください。その明るいオレンジ色は注目を集め、説得力のあるコピー（「無料」）を使用しているため、クリック数が増える可能性があります。訪問者がそれ（または協力的なCTAボタンのいずれか）をクリックすると、ページの上部に戻され、Salesgenieの無料トライアルが開始されます。

AppFolioは、CTAボタンを使用して、見込み客をリードキャプチャフォームにリダイレクトします。訪問者がページ全体をスクロールすると、このオレンジ色のCTAボタンが表示されます。ボタンは、ページ上部のフォームにリダイレクトするアンカーリンクです。

3番目のCTAボタンの例では、BambooHRがCTAボタンを対照的な色で強調表示し、コピーはデモが無料であることを指定し、両側にそれを指す矢印方向の合図さえあります。

リードキャプチャフォームは、クリック後のランディングページで最も重要な要素の1つです。これがないと、見込み客の情報を取得する方法がないためです。簡単にアクセスできるフォームがないと、見込み客は変換に苦労するため、アンカータグは、フォームに向かって微調整して変換するための優れた設計手法です。

CTAボタン

CTAボタンを最適化する方法はたくさんありますが、訪問者を直接それらに誘導するアンカーリンクを作成することもできます。以下のQuickBaseの例では、会社はクリック後のランディングページナビゲーション（画像の下部にある3つのセクション）を作成しました。このナビゲーションでは、3つのリンクすべてがアンカータグです。見込み顧客が[サクセスストーリー]と[QuickBaseとは]をクリックすると、ページのさらに下にある2つの異なるセクションにリダイレクトされます。どちらのセクションにも、CTAボタンがあります。

明らかに、CTAは非常に重要です。それは文字通り人々が回心する方法です。 それを目立たせ、コピーを説得し、それにつながるアンカータグを作成して、可能な限りアクセスしやすくします。

アンカータグはどのように使用しますか？

上記の例は包括的なリストではありませんが、アンカータグがどのようにコンバージョンを支援し、クリック後のさまざまなランディングページ要素を強調するかについての良いアイデアを提供します。特定のクリック後のランディングページ要素をリンクする場合でも、リンクメニュー全体を設定する場合でも、クリック後のランディングページのアンカータグを間違えることはありません。楽しいユーザーエクスペリエンスを提供し、コンバージョンの可能性を高めます。

クリック後のランディングページにカスタムコードを追加して、アンカータグの使用を今すぐ始めましょう。今すぐInstapageEnterpriseデモにサインアップしてください。