すべての正しい動き：学ぶべきモバイルランディングページの例

モバイルランディングページのデザインに関しては、多くの選択肢があります。 画面スペースは限られており、ユーザーの注意力も限られています。 最適化されていない、雑然とした、遅いページはチャンスがありません—訪問者はより良い代替案を探して去るだけです。

私たちが確かに知っていることが1つあります。それは、ユーザーがモバイルWebサイトをナビゲートしようとするときに、メンタル体操を実行する必要がないことです。 そのため、いくつかのヒントとモバイルランディングページの最良の例をいくつかまとめました。これにより、ページを簡単に簡素化および刷新することができます。

モバイルランディングページを持つことが重要な理由

モバイルが最初です。 オンラインでの購入の53％はモバイル経由で行われ、モバイルユーザーもeコマーストラフィックの63％を占めています。 ファッション業界の数はさらに多く、ウェブサイトの訪問者の最大90％がスマートフォンやタブレットを使用して新しい服を探しています。

パンデミックはさておき、人々は今や歴史上かつてないほど旅行や通勤を行っています。 しかし、彼らはまた、少なくとも彼らの内側のサークルと常に接続し続けることを好みます。 また、新しいスマートフォンは、外出先で魅力的な視覚的かつインタラクティブな体験を提供します。 これで、モバイルの台頭に関与する3つのコンポーネントができました。

モバイルフレンドリーなデザインを最優先にすることをお勧めします。 複雑な商品を提供している場合でも、オーディエンスの第一印象は、モバイルのランディングページにアクセスすることから始まる可能性があります。そのため、見栄えがよく、コンバージョン率がさらに高くなるはずです。

コンバージョンにつながるモバイルランディングページを作成する方法

これが大まかな目安です。 誰かがあなたのモバイルランディングページを可能な限り最も気が散る状況でスクロールしていると想像してみてください：渋滞に巻き込まれている間、並んで待っている間、または地下鉄の車に詰め込まれている間。 彼らはあなたの申し出の本質を一瞬で把握することができるでしょうか？ はいの場合、あなたは良い仕事をしました。

モバイルランディングページは、次の基準のほとんどを満たしている場合に効果的であると見なすことができます。

• 数秒で簡単にスキャンできます。 これは、短く対照的な見出しを使用し、ページ全体にドミナントフォーカルポイントとセカンダリフォーカルポイントを作成することで実現できます。
• 召喚状が1つあります。 モバイルランディングページを作成するときは、ユーザーがそれ以上スクロールせずにコンバージョンや連絡を行えるように、常にCTAをスクロールしなければ見えない位置に配置する必要があります。
• 読み込みが速い。 ページの速度を確認して改善する方法がわからない場合は、ウェブサイト最適化ツールに関する記事をご覧ください。
• 単一列のレイアウトです。 ページ構造を簡素化することで、ユーザーがコンテンツに集中できるようにします。水平スクロールは、誰もが楽しめるわけではありません。
• 十分なアニメーションがあります。 視覚効果は、ストーリーを伝え、メッセージを強化するのに役立ちます。 注意してください：あなたがそれらをやりすぎると、あなたのモバイル着陸はより重くなります。
• 明確でユニークなセールスポイントがあります。 記憶に残る、独特の製品とサービスだけが誰かの興味を引くチャンスがあります。
• 気を散らす要素はありません。 画面のスペースが不足している場合は、ポップアップやスティッキーバーが多くのスペースを占有し、ユーザーが実際のオファーを見ることができないため、簡単に使用できます。
• ページ全体に読みやすいフォントがあります。 ライトグレーの書体は大画面ではエレガントに見えますが、スマートフォンで表示すると見分けがつきません。
• 社会的証明が含まれています。 このセクションを犠牲にすることはできません。 モバイルのランディングページには通常、情報の面で最低限のものがあります。肯定的なレビューで提案を強化する必要があります。
• 一貫したエクスペリエンスを作成します。 あなたがあなたの訪問者を導き、あなたの聴衆にあなたの製品やサービスについて徐々に学ばせることを意味します。

基本的には、物事を単純化しすぎずにシンプルに保つことがすべてです。 あなたはまだあなたの製品やサービスを最高の光で表示したいので、プロ並みの写真やイラストを追加することが重要です。 動画も機能しますが、ページの速度が低下しないように、60秒以内に短くしてください。

実際には、ランディングページには多くのCTAが含まれている場合があります。 たとえば、訪問者が検索結果をクリックした後にアクセスするホームページでは、これらを回避することはできません。 それは悲劇ではありません—他の規則がまだ適用されます。 情報で聴衆を食べ過ぎないでください。 ユーザーのパスをできるだけスムーズに保つようにしてください。

核心に迫り、ドラッグアンドドロップビルダーを使用してすべてのランディングページ要素を配置する方法を学ぶ準備はできましたか？ 次に、ウェブサイトビルダーでランディングページを作成するためのガイドをご覧ください。 ただし、最初に、以下のモバイルランディングページの最良の例をいくつか確認してください。これらは、最も重要なことを理解するのに役立ちます。

7つの驚くほどシンプルで効果的なモバイルランディングページの例

さまざまな企業がさまざまなアプローチを採用しています。そのため、ここにはさまざまなモバイルページがあります。 これらのランディングページのいくつかは、今説明したルールに違反することさえありますが、正当な理由があります。 混乱を招くことなく、ページにいくつかのCTAを追加する方法を学習します。

フィットネスクラスのモバイルランディングページの例

フィットネスクラスが仕事や余暇と衝突しない場合、新しいアクティブな生活を始めるのは簡単です。 したがって、ウェルネスクラブであるExhale Spaが、ウェブサイトの訪問者に最適な場所の施設を選択し、スケジュールを確認し、さらにスクロールする前に場所を予約するように提供しているのも不思議ではありません。 それは皆の時間を節約し、ページ訪問者がそれらのバレクラスが彼らのために働くかどうかを即座にチェックするのを助けます。

この例では、クラブのチームはプロのコーチと高度な機器の説明を開始していません。まず、簡潔な3文の説明でユーザーの興味をそそり、バレクラスを予約するオプションを残します。その横にあるCTAボタン。

次に、彼らはより詳細に行き始めます。 躊躇している訪問者は、何かに取り組む前に、クラスのプレビューを見つけて、各分野について詳しく読むことができます。 説明はリンクされているため、ページ自体に不格好な段落はありません。 このモバイルランディングページのすべての写真は本物であり、きれいでインスタグラム可能なスペースを示しています。これはもう1つの利点です。

Exhale Spaはまた、開始プロセス全体をいくつかのステップに分割して、新規参入者がクラスを管理し、簡単にサブスクライブできるようにします。 モバイルランディングページの下部には別のCTAボタンがあります。訪問者はサインアップして、ウェルネスのヒント、ニュース、素敵なオファーを受け取ることができます。 繰り返しますが、分厚いサブスクリプションフォームはありません。 この場合、単純なボタンで十分です。

ブランドモバイルランディングページの例

わかりました、それは素晴らしいことですが、どのようにしてより多くの情報を単一のモバイルランディングページに詰め込むのでしょうか？ スマートフォンでeコマースのウェブサイトを直感的かつシンプルに見せるためにどのようにしたらよいでしょうか。 ビルケンシュトックのこのモバイルランディングページを見てみましょう。

特別オファーはトップに残り、ユーザーがページを閲覧しているときにユーザーを悩ませることはありません。 新しいコレクションは、折り目の上に美しく表示され、CTAボタンが付いています。 ビルケンシュトックは、靴の耐久性と人間工学を強調する高品質の画像を使用していることに注意してください。これらは、典型的な製品写真だけではありません。

このモバイルランディングページには言いたいことがたくさんありますが、それでもスムーズなエクスペリエンスを生み出します。 さまざまなセクションとオファーが論理的な順序で表示されます。 ビルケンシュトックはまた、社会的証明、つまりユーザー生成コンテンツを含むフィードのための場所を予約しています。

商品のモバイルランディングページの例

よりミニマルなソリューションに移りましょう。 これはKeegoからのもので、革新的なバイクボトルを宣伝するために作成されました。 市場にはそれほど多くの類似体がないため、Keegoはこの製品の利点を世界に伝えるという使命に着手しました。 ありがたいことに、そのモバイルランディングページは完璧に機能します。

このブランドは、Keegoボトルが軽量で絞りやすいことを示す印象的なアニメーションを使用して、メッセージを発信しています。 これは比較的珍しい製品であるため、同社はWebサイトの訪問者に、行動を起こす前にもう少し詳しく学ぶ時間を与えています。これも良い動きです。

このページでは、Keegoボトルと通常のボトルの違いを説明し、ユーザーに両方の世界から最善を尽くすことを奨励することで、詳細を掘り下げます。 独立した専門家による肯定的なレビューもこのページに表示されます。 ページの下部には、新規ユーザーが割引を受けることができる最小限のリードキャプチャフォームがあります。これは、ブランドがメーリングリストを自然に成長させるための確実な方法です。

サービスモバイルランディングページの例

オンラインでサービスを販売しようとすると、誰もが目がくらむ可能性があります。トーンからモバイルランディングページのデザインまで、考慮すべきことが無数にあります。 サービスは常に具体的で測定可能であるとは限らないため、早い段階で顧客の信頼を確立する必要があります。 Swapfietsはそれを正しく行っているようです。

同社は長期レンタル用のシティバイクを提供しており、バイクに問題が発生した場合に備えて、すべてのユーザーに即時交換を提供しています。 これは珍しいサービスであるため、Swapfietsは、新しいユーザーがオファーの便利さを理解できるように教育します。 同社はそれで成功しました—そのランディングページは、ためらいのある訪問者を数分で熱心なクライアントに変えることができます。

最初に気付くのは、CTAボタンと一緒に明確で実用的な見出しです。 続いて、会社の価値観を説明する魅力的な短いビデオが続きます。 ページが重くなることはありませんが、すぐに感情的なつながりが生まれます。 上部に粘着性のあるバーがありますが、ユーザーエクスペリエンスをまったく損なうことはありません。

短い小見出しは、ユーザーがページをすばやく確認してその本質を把握するのに役立ちます。 すべての説明は3文以内ですが、必要なすべての情報を伝えています。わかりやすく、的確なランディングページのコピーは成功の半分です。 このモバイルランディングページはシンプルですが、潜在的なユーザーが尋ねる可能性のあるすべてを網羅しています。

心理学者のモバイルランディングページの例

カウンセリングやコーチングなどの1対1のサービスをオンラインで提供することは簡単な作業ではありません。 ただし、モバイルランディングページの訪問者に信頼を勝ち取るのに十分な情報を提供することで、バランスをとることができます。 ニューヨークの心理学者であるフラー博士が彼の個人的なウェブサイトでそれを行う方法は次のとおりです。

フォールドの上にやる気を起こさせる行動の呼びかけがあり、以下にさらに詳細な説明があります。 匿名のままでいることを好むセラピストを人々が信用しないので、ここではプロの写真が必須です。 フラー博士と同じように、ランディングページで、何があなたを専門家にし、どのようなトレーニングを受けたかを説明する必要があります。

提供するさまざまなサービスを説明するために、箇条書きを使用することをお勧めします。 個人的な問題を解決する場合は、クライアントからの推薦状や紹介されたリソースの形で、本物の社会的証明を提示する必要があります。 この例では、すべてのボックスにチェックマークを付けています。

シティガイドモバイルランディングページの例

包括的なモバイルシティガイドを作成する方法はありませんか？ このヘルシンキシティガイドは、この固定観念を完全に暴きます—その清潔で直感的なウェブサイトには、観光客が探すかもし​​れないすべてのものがあります。 よく見てみましょう。

折り目の上には、ウェブサイトのユーザーが最もよく読んでいる記事を掲載したスライダーがあります。素敵なビジュアルは、訪問者を旅行気分に引き込む役割を果たします。 次に、ユーザーが最も象徴的なローカルアクティビティに飛び込むのに役立つ「See＆Do」セクションがあります。

このランディングページには、地元のガイドやイベントのお知らせも掲載されています。 残りの部分はカテゴリに分けられ、ヘルシンキを勉強、仕事、投資に最適な場所として提示します。この種の構造は一貫性を確保し、ユーザーが圧倒されることなく街について段階的に学ぶのに役立ちます。 上の桜は、ヘルシンキの特別な雰囲気を翻訳した短い予告編ビデオです。

写真家のモバイルランディングページの例

ミニマリストデザインの別のサービスに焦点を当てたモバイルランディングページを見てみましょう。 Alessio La Ruffaは、ロンドンを拠点とする建築写真家です。 彼は自分のウェブサイトを使用して自分の作品を紹介し、新しいクライアントを引き付けています。

それはポートフォリオなので、主な焦点は彼の写真にあります。 ただし、独自のセールスポイント、簡単なウェルカムセクション、CTAを使用したリードキャプチャフォームもあります。 これらの要素はすべて不可欠であり、訪問者が連絡先データを残すように促すために使用されます。

リードキャプチャフォームには6つのフィールドがありますが、写真家がクライアントごとにパーソナライズされたオファーを作成し、最大の価値をもたらすのに役立つため、これらはすべて等しく重要です。 このような場合、長いフォームを使用することは絶対に正当化されます。

言われたよりも簡単にできます

モバイルランディングページを成功させるための独自の公式を形作ることを妨げるものは何もありません。 当社のランディングページビルダーは、モバイルデバイスで見栄えのする個人用および商用ページを作成するのに最適です。

カスタマイズ可能なテンプレートを使用して、クリーンでクリスピーでエレガントなモバイルランディングページを瞬時に作成できます。 当社のマルチチャネルサブスクリプションウィジェットは、ユーザーが1つのメディアから別のメディアにスムーズに移行するのに役立ち、支払いの統合により販売が簡素化されます。 他にもたくさんのクールな機能があります—それらすべてを試してみてください！