他では見つけられない最高のモバイルランディングページデザインのヒント

多くのリソースは、そのアドレス、モバイルクリック後のランディングページのデザインがご来店中ですが、実際には高い変換ページを構築するための方法を具体的な設計手順の多くはありません。

モバイル表示にはどのような構造レイアウトが推奨されますか？ ボタンは何ピクセルにする必要がありますか？ 要素をいくつのピクセルで区切る必要がありますか？ 「ホバー」効果を使用する必要がありますか？ フォームラベルは内側または外側のどちらにする必要がありますか？

私の名前は、InstapageのデザインサービスディレクターであるCosminSerbanです。 Cosminがモバイルのクリック後のランディングページのデザインを書く資格があるのはなぜですか？

私は、コンバージョン率を向上させるために、クリック後のランディングページを設計および構造化するためのベストプラクティスについて顧客を教育してきました。 また、私は持っています：

• 1,000を超えるクリック後のランディングページを確認
• 顧客と提携して、メッセージが伝わり、訪問者が最終的にコンバージョンにつながる優れたエクスペリエンスを提供できるようにします

さらに、私は200,000を超えるクリック後のランディングページを作成して起動するために使用される200を超える最適化されたテンプレートを開発したチームの一員でした。テンプレートは、ここにあります。

モバイルのクリック後のランディングページのデザイン：始める前に知っておくべきこと

この記事のいくつかの概念は、テンプレートライブラリを作成するときに内部で開発されました。 これは、これらのヒントのすべてが、作成するすべてのクリック後のランディングページに適用される必要があることを必ずしも意味しません。 クリック後のランディングページにはそれぞれ独自の課題がありますが、これらの基本的な概念を理解することで、モバイルデバイスからアクセスするすべての人により良いエクスペリエンスを提供できるはずです。

デスクトップとモバイルのエクスペリエンスの最も重要な違いから始めましょう。

構造

プロジェクトの開始時にはそうではないように見えますが、適切な要素のグループを適切なタイミングで提供する構造を整えることは、思っているよりも重要です。

最初に頭に浮かぶのは、訪問者がモバイルページのコンテンツをスキャンする方法がまったく異なることです。 デスクトップのクリック後のランディングページのFパターンまたはZパターンについて聞いたことはありますが、モバイルのパターンは何と呼ばれていますか？ 必ずしも名前を付ける必要はありませんが、おそらく非常に直線的です。 上下にスクロールすることが、クリック後のランディングページが提供しているものを理解する唯一の方法です。

これは、訪問者がクリック後のランディングページを操作する方法の最も重要な制限のひとつであるため、多くのコンテンツを水平方向に詰め込むのではなく、 1列のレイアウトに固執することをお勧めします。 （ピンチしてズームするのが好きな人はいません。）

デスクトップでは、ほとんどの場合、デジタルマーケターは、個々の要素の配置とそれが与える影響について考えます。 モバイルでは、シフトを行い、要素のグループと、最大の影響を与えるためにそれらを互いに積み重ねる方法について考えることをお勧めします。

この並べて比較すると、デスクトップページとモバイルページの構造がわかります。

左から右に移動し、要素の各グループを互いに下に配置することをお勧めします。 ヘッダー領域（折り畳み上）を例にとってみましょう。 上部にロゴがあり、次にメインの見出しとサポートの見出しで構成されたグループがあり、その下にフォームボックスグループ全体があります。

要素をグループ化する機能により、ネイティブにモバイル対応のオブジェクトのセットが作成されます。 または、グループを構成して、複雑な配置のアスペクト比をロックし、モバイル版のページに変換するときに正確な比率を維持することもできます。

モバイルアスペクト比ロックは、階層化されたグループをまとめて、デスクトップまたはモバイルレイアウトのどちらにあるかに関係なく、アスペクト比をロックします。

互いに密接に関連している、または補完している2つ以上の要素は、常に互いにくっついている必要があります。 この状況では、フォームボックスをページの上部に配置することは意味がないため、折り畳み上の領域にフォームを配置するという概念は理想的ではありません。 訪問者に最初にサインアップする内容のコンテキストを提供することは、できるだけ速く行動する方法を訪問者に提供することよりも重要です。

読み込み時間

訪問者が使用しているデバイスに関係なく、ページの読み込み速度は非常に重要です。 ほとんどの訪問者はモバイルデータの制限を使用し、ページを表示するためにコストがかかることに注意してください。したがって、ページに追加するグラフィックや要素の種類に注意してください。 ページにアクセスしてビデオを自動的に再生することを想像してみてください。

コンテンツをサポートするために多くのアニメーションが必要な場合は、モバイル用のシンプルな画像を使用することをお勧めします。 簡単に言うと、特定のセクションのカスタム背景画像を作成する必要があるということです。 写真編集ソフトウェアを使用して写真のサイズやレイアウトを調整することは、ページを高速化できることを意味する場合、余分な時間の価値があるかもしれません。

背景画像についても同じことが言えます。セクションに読み込むのに幅2,000ピクセル、300kbの画像は必要ないため、セクションの背景として設定できるカスタムのカスタマイズされた画像をデザイナーに作成してもらうことをお勧めします。

ほとんどの場合、モバイルページをできるだけシンプルに保つことは常に良い考えです。 たとえば、同じメッセージを伝える複数のグラフィック要素がある場合は、モバイルで1つだけ表示します。

ほとんどの携帯電話は、モバイルビルダーで提供されるコンテンツ領域のサイズに適応するため、経験則として、側面に空きスペースがないように、幅が400ピクセル以上の画像を用意することをお勧めします。

AMPのクリック後のランディングページを作成する

クリック後のランディングページはコンバージョンが発生する場所であるため、モバイルでポジティブなクリック後のランディングページを作成することが不可欠です。 ページの読み込みが遅すぎたり、広告からクリック後までバラバラなエクスペリエンスが発生したりすると、訪問者はバウンスします。

次に、Googleがクリック後のランディングページエクスペリエンスを広告ランクを決定する1つの要素と見なしていることを考慮してください。これは、最終的にクリック率に影響します。 これらすべてを合計すると、ブランドは大きな問題を抱えています。 幸い、AMPフレームワークは存在します。

特にAMPページは、スタイリングとブランディングのカスタマイズ性をサポートしながら、ほぼ瞬時の読み込み時間とスムーズなスクロールにより、より魅力的なモバイルユーザーエクスペリエンスを実現できるため、広告主にとって魅力的です。 AMPはHTML / CSSとJavaScriptを制限しているため、クリック後のランディングページのレンダリングを高速化できます。 従来のモバイルページとは異なり、AMPページはGoogle AMPキャッシュによって自動的にキャッシュされるため、Googleでの読み込み時間が短縮されます。

AMPフレームワークの利点は、その制限を本当に上回ります。

• モバイルデバイスでのページ読み込み速度の高速化
• モバイルブラウジングのユーザーエクスペリエンスの向上
• AMPページを使用すると、品質スコアを上げることができます
• GoogleはAMPを使用するページを優先します

2018年6月の時点で、InstapageはAMPのクリック後のランディングページを提供しており、デジタルマーケターは開発者なしでアプリ内にAMP準拠のページを作成できます。 なぜなら、結局、ページの読み込みが瞬時でなければ、十分な速度ではないからです。

タッチのデザイン

モバイルのクリック後のランディングページのデザインに関する最大の課題の1つは、訪問者ができるだけ簡単に行動できるようにすることです。 そのアクションは、フォームの送信またはボタンの単純なタップである可能性があります。 ほとんどの人がいくつかの調整を行うことを期待しますが、常にそうであるとは限りません。

私たちは皆、何かをタップするのが非常に難しい、またはエクスペリエンスがモバイルユーザー向けに調整されていないページを経験しました。 特にテキストリンク—ハイパーリンクされているテキスト要素のサイズを調整すると非常に役立ちます。 訪問者は、目的のアクションを実行するためにズームインする必要はありません。

ボタン

しかし、私たちが気付いた最大の問題は、クリック後のランディングページのボタンのサイズです。 私たちのチームは、高さが70ピクセル以上で、できるだけ幅を広くすることを恐れないボタンを設計することをお勧めしますが、小さなセクションと混同される可能性があるため、ボタンを全幅（400ピクセル）に伸ばさないでください。

ホバー効果は、訪問者がその特定の要素に対してアクションを実行できることを通知するため、デスクトップページに適しています。 モバイルでは、スルー、ホバー効果は冗長です。

マージン

余白については、両側で少なくとも20ピクセルの安全ゾーンを垂直方向に自由に保ち、電話スクリーンの側面に近すぎる要素で表示される可能性のある視覚的な緊張を避けることをお勧めします。

空白は、デスクトップページと同様にモバイルページにとっても重要です。 基本的な概念は引き続き適用されます。すべての間隔を空けて、要素が互いに実際に接近しないようにしてください。 これを行うと、視覚的な緊張を避けるのに役立ちます。

一貫したマージンを持つことは間違いなくより良いユーザーエクスペリエンスにつながります。 私たちのチームは通常、各要素の間に少なくとも20〜40ピクセルがあることを確認します。 各ブロックは要素の固有の構造を持っている可能性があるため、どの程度決定するかはあなた次第です。

これはかなり主観的ですが、ルールを確立したら、それをページ全体に複製してみてください。そうすると、よりモダンな外観になります。

読みやすさ

コンテンツをはっきりと読むことができるのは当然だと思うかもしれませんが、テキストが小さすぎるか大きすぎるクリック後のランディングページを何度も目にしました。 適切なバランスを見つけるのは非常に簡単です。特定の要素に使用されるフォントサイズの目安は次のとおりです。

• 主な見出し： 28ピクセル
• 小見出し： 22ピクセル
• 段落： 17ピクセル
• その他の詳細： 15ピクセル

もちろん、すべてのニーズに合う1つのサイズはないため、これらのサイズを調整できます。 ただし、これは、モバイルのクリック後のランディングページを設計する際の優れたベースラインとして役立つはずです。

言及する価値のあるもう1つの項目は、テキスト要素を含む行の高さです。

デスクトップの特定の状況では、1.0または1.2にするのが理にかなっています。モバイルのクリック後のランディングページを作成するときは、テキスト要素の行の高さが少なくとも1.4であることを確認してください。

結論：フォントサイズが小さいほど、行の高さを大きくする必要があります。

フォーム

フォームはほとんどのクリック後のランディングページの最も重要な部分であるため、ユーザーが情報を簡単に送信できるようにすることが重要です。

モバイルページ全体で、通常、フォームフィールドを可能な限り水平方向に拡大し、フォームフィールドとボタンが同じ行にあるような状況を回避します。 それはただの悪い経験です：

非常に頻繁に出てくるもう1つのことは、多くのフィールドを持つフォームを扱うことです。

私たちのチームが発見したベストプラクティスは、ページに2つ以上のフォームフィールドがあり、ラベルの位置を外側に設定することで、訪問者が入力内容を覚えておく代わりに、必要な情報を簡単に把握できるようにすることです。

今日からモバイルコンバージョンを増やしましょう

デスクトップページと同じように、モバイルのクリック後のランディングページのデザインは、ユーザーエクスペリエンスを第一に考え、人々にエンゲージメントとコンバージョンを促すものです。 上記の提案を考慮しないと、モバイルのコンバージョン率が低下し、人々が跳ね返る可能性があります。

推奨事項の実装を検討し、クリック後のランディングページが高度に最適化されたコンバージョンアセットにどのように変換されるかを確認してください。 今すぐInstapageAMPデモを入手してください。