オンラインコンバージョンのエース：SaaSランディングページのベストプラクティス

パンデミックは、私たちがつながり、働き、学び、そして遊ぶのを助けるソフトウェアサービスのブームを煽っています。 今日、SaaSの顧客にはこれまで以上に多くのオプションがあります。 このような複雑な製品のハイライトを、変換するシャープで信頼に影響を与えるSaaSランディングページにどのように詰め込みますか？

パンデミックの間、Zoomを使用する会議参加者の数は2019年12月の1,000万人から2020年4月の3億人に急増し、世界中の125,000の学校システムがプラットフォームを使用して子供たちが授業に参加できないときに連絡を取りました。 クラウドを活用している企業は全体的に活況を呈しています。BessemerVenturePartnersによると、業界は現在、合計で2兆ドルの価値があり、上位5つのプロバイダー（PayPal、Adobe、Salesforce、Shopify、Zoom）が、前年比で合計70％の増加を達成しています。 -年の値。

消費者向けSaaS製品の魅力は、製品を購入する必要がなく、単にサブスクライブするだけであるということです。 アプリがあるかもしれませんが、多くの場合、どのWebブラウザーからでもサービスを使用できます。 使用した分だけ支払うため、通常、事前購入に比べて費用対効果が高くなります。

しかし、ソフトウェアサービスは、ほんの数語と写真で説明するのが難しい場合があります。 顧客は1年前よりも精通しているかもしれませんが、それでも専門家ではなく、特定のソフトウェアサービスの価値提案は複雑になる可能性があります。 ランディングページは、顧客を圧倒することなく、または退屈させることなくクリックを促進するのに十分な情報を提供することの間で適切なバランスをとる必要があります。

ソフトウェアサービスは顧客が物事をより良くまたはより簡単に行うのを助けるために存在するので、そのメッセージングを最適に提供することがあなたの目標です。 ユーザー中心の設計アプローチは、より効果的に顧客にリーチするのに役立ちます。

ユーザーのニーズに対応する

ソフトウェアサービスプロバイダーとして、ユーザーの懸念や課題、およびユーザーが製品で解決しようとしている問題について、すでに十分に理解している必要があります。 これらのUXインサイトがランディングページにも通知されるようにします。

最近、私はCohereというカスタマーサクセス製品のランディングページに取り組みました。 発売されただけでなく、いくつかのリリースを経てきました。 製品の開発中に会社が収集した洞察は、さまざまな方法でページのデザインに影響を与えました。

同社のクライアントの大多数は、Cohereを使用して次のことを行っていました。

• 顧客の懸念や質問に対処するのに役立ちます。
• 見込み客を変換し、オンボーディングを支援します。
• インターフェースとの顧客の相互作用を理解するために、それぞれのWebサイトで顧客の活動を監視します。

このデータを使用してランディングページをセグメント化し、3つのシナリオのそれぞれに対応する機能を紹介しました。 ユーザーは、各ケースを切り替えて、各インスタンスで製品がどのように機能するかを確認できます。

価値を示すことで目標を達成する

すべてのランディングページは、明確に定義された目標にユーザーを導く必要があります。 消費者向けソフトウェアサービスプロバイダーの目標は、多くの場合、一定期間後に有料サービスに移行するオプションを備えた無料トライアルにサインアップするか、より多くの料金を支払うオプションを備えたミニマリストの無料バージョンを利用するように顧客を誘導することです。特徴。

たとえば、Slackは、新規顧客が無料のコミットメントなしのトライアルにサインアップすることを望んでいるため、チームの規模、プロジェクトのタイプ、またはエンゲージメントのタイプに関係なく、アプリケーションがどのように機能するかを示します。

ランディングページでは、ユーザーがチームのサイズを選択できるようにすることから始めて、さまざまなシナリオでSlackが提供する価値を強調しています。 この選択は、同様の規模の企業からのいくつかの関連する例を提供し、ユーザーがチームがそれをどのように使用できるかを簡単に理解できるようにします。

これにより、ユーザーは、ビデオチャットや外部チームとの連携機能など、より普遍的なメリットをスクロールダウンし続けるのに十分なエンゲージメントを維持できます。 このページには、生産性とコミュニティに関連するさまざまな統計がまとめられており、その場で無料トライアルを実施するか、営業担当者に相談して詳細を確認することもできます。

ヒーローを賢く選ぶ（画像）

ユーザーの注意を引くのに50ミリ秒しかないため、表示する内容を非常に選択する必要があります。 SaaS製品の場合、宣伝する具体的な製品がないため、これは非常に困難です。 製品の機能を紹介し、視覚的な情報や無関係な情報を邪魔することなく、ユーザーの質問を予測して回答することが不可欠です。

月曜日のプロジェクト管理ツールの背後にあるチームは、スクリーンショットを使用して製品の価値提案をキャプチャし、カスタマイズできるすべての方法を強調するという優れた仕事をしています。

「制限なしで作業する」というキャッチフレーズは、注目を集め、ニーズに対応し、好奇心を刺激します。 小見出しは、製品の価値提案を要約することによって興味を追加し、見込み客にそれが彼らの生活にどのように適用されるかについてもっと学ぶように勧めます。 その招待状を質問として表現すると、サイトとのやり取りが促進されます。 その下には、さまざまな特定の業界に合わせて調整されたワークフローのビジュアルがあり、ユーザーはそれが自分たちにとってどのように機能するかを考えるように促されます。

機能よりも利点を強調すると役立つことがよくあります。 これは、製品を視覚化するのが難しい場合や、微妙なニュアンスが多すぎていくつかのキャッチーな言葉に凝縮できない場合に最適な戦略です。 製品のすべての機能を披露する代わりに、ユーザーにとって最も意味のあることに集中することができます。

Pipedriveのランディングページは、顧客関係管理（CRM）システムを使用することの価値をうまく説明しています。 このページには、スクロールの必要性を回避するために、製品のすべての主な利点が簡潔に示されています。 一目で、ユーザーは次のことができます。

• CRMのコンテキストと知識を習得します。
• 製品の使用から期待できる結果を視覚化します。
• Pipedriveの製品が群衆からどのように際立っているかを理解してください。
• 大手企業を引き付けるための鍵となる、大規模なチームで製品がどのように機能するかを学びます。

最後に、インタラクティブなアプローチを検討してください。 SaaS製品は退屈な場合がありますが、ランディングページは退屈である必要はありません。 インタラクティブなデザインにより、ユーザーは製品情報や価値、ブランドストーリーを伝えるのに十分な時間エンゲージメントを維持できます。

モバイルバンキングアプリWickretのCubertoエージェンシーのランディングページのコンセプトは、インタラクションとミニマルなデザインを使用して、ユーザーの関心を維持します。

ユーザーがページを下にスクロールするときに遭遇するインタラクティブなコピー、およびカスタムカーソルが画面の要素をアニメーション化する巧妙な方法により、シンプルなメッセージングが実現します。 召喚状のマイクロインタラクション（「ダウンロード」）が、ページの他の部分に対してどのように目立つのに役立つかに注目してください。

これは、ミニマリスト製品を披露するための楽しく魅力的な方法です。

モバイルユーザーを念頭に置いて設計する

ユーザーの半数は、モバイルデバイスを介してWebサイトを閲覧します。 ただし、ランディングページは、画面を小さくするだけでなく、モバイルデバイス向けに最適化する必要があります。

ユーザーがモバイルで行うことができるインタラクションのタイプに注意し、ユーザーがシームレスにナビゲートできるようにページの構造を簡素化します。 Webサイトが単に応答する場合、コンテンツは通常、より小さなグリッドにシフトされ、垂直方向にスタックされます。 このコンテンツアーキテクチャの変更により、メッセージングの能力が低下する可能性があるため、垂直スタックレイアウトがデザインに最適かどうかを検討する必要があります。 場合によっては、水平カルーセルやタブなどの代替ソリューションがより効果的です。

モバイルデバイスで製品をうまく伝達できないと、コンバージョンが低下する可能性があります。 ビデオメッセージングサービスLoomは、必要に応じてコンテンツアーキテクチャを簡素化し、タブの代替アプローチを使用することにより、Webサイトで使用されるインタラクティブコンポーネントとビジュアルストーリーテリングをモバイルデバイスに変換するという素晴らしい仕事をしました。

ゼロから信頼を築く

見知らぬ人でいっぱいの部屋に入って、あなたが正しい場所にいるかどうか疑問に思っていると想像してみてください。 これは、ユーザーが新製品のWebサイトにアクセスしたときに感じるものと似ています。 パーティーでは、なじみのある顔を見ると、より快適になります。

同じ考え方がSaaS製品にも当てはまります。 顧客が解決したい問題を抱えているとしても、新製品を学び、日常業務に統合することは恐ろしいことです。 そのため、顧客が連絡先や支払い情報を渡すリスクを合理化することが難しくなる可能性があります。

あなたは多くの方法で信頼を促進することができます：

• 必ずSSL証明書を持ってください。
• URLを簡潔かつ有益に構成します。
• 不要なリダイレクトがないことを確認してください。
• リードに必死に聞こえるコピーは避けてください。
• ページを直感的で使いやすいものにします。

これらは、ユーザーとの信頼関係を築き、ユーザーが価値を感じ、情報を得ていると感じる体験を生み出すための簡単な方法です。 しかし、そこで止まるべきではありません。

ユーザーにどのように機能するかを示す

顧客が製品をどのように使用するかを知っていることを示すことで、不確実性とプロジェクトの信頼性を減らすことができます。 あなたの製品が彼らのルーチンにどのように適合するかを彼らに示すことは、多くの質問に非常に迅速に答えることができます。

たとえば、Monday.comはクイックツアーを提供しており、ユーザーがサイトをどのように操作するかを確認できます。

プロトタイピングツールFramerはさらに一歩進んで、Framerインターフェイス内で動作するプロトタイプの開発を示すアニメーションを使用します。 追加の双方向性により、ユーザーはさまざまなプロジェクトをクリックして、可能性をよりよく理解することができます。

社会的証明は不可欠です

社会的証明は、SaaS製品にとって特に重要です。 顧客に信頼できるパートナーを示すことは、ユーザーの製品を試す意欲を高めるのに大いに役立ちます。

社会的証明のもう1つの優れた形式は、仲間からの積極的な圧力です。 テーブルを予約する前にレストランのレビューをチェックしたり、肯定的なレビューに基づいてオンラインで何かを購入したりする頻度はどれくらいですか。 BrightLocalによると、87％の消費者がまさにそれを行っています。

推奨は強力なツールになる可能性がありますが、ユーザーにとって有益で関連性のあるものでなければなりません。 うまくやれば、彼らは一度にいくつかのことをすることができます。 ズームは、レビューがどのようにできるかを示しています。

• あなたが需要があることを示してください。 Zoomの支持は、この製品がさまざまな業界の大企業に広く認識され、使用されていることを示しています。
• 顧客間のコミュニティの感覚を作成します。 多くのお客様からのフィードバックや考えを共有することで、大きなユーザーベースが伝わり、新しいお客様をより歓迎していると感じます。
• 信頼性を促進します。 ユーザーは、認識できる顧客によって購入が行われていることを確認し、製品に信頼性を与え、信頼を築きます。

右足で終了

ユーザーがページ全体を通過したとしても、決定を下す準​​備ができていない理由はいくつかあります。

• 彼らはあなたのSaaS製品に興味を持っていますが、より多くの情報を求めています。
• 彼らには、対処されていない質問や懸念があります。
• 彼らは製品やブランドを信頼していません。

これらの問題に対処するために、ページの下部をどのようにデザインしますか？ まず、ユーザーがインスタントサポートにアクセスしたり、質問や懸念に対処できる人に連絡したりできる明確なセクション、ボタン、またはリンクがあることを確認します。 チャットを介して接続したり、FAQを提供したりするための追加の機会を提供できます。

好奇心が強いが気が進まないユーザーを引き付けるもう1つの方法は、追加の視点を提供することです。 無料の試用版が主な行動の呼びかけではない場合は、デモを提供することで、まだフェンスにいるユーザーを捕らえることができます。 または、さまざまなユーザーからのケーススタディを提供することもできます。

フッターはユーザーへの扉を開き、ユーザーが製品へのより強力でパーソナライズされた接続を作成できるようにする必要があります。 ページの終わりとしてだけでなく、ユーザーにとっての新しい旅の始まりとして扱ってください。

成功のためのミックスアンドマッチ

変換は、すべての製品で同じように機能する一貫した式ではありません。 むしろ、成功するSaaSランディングページには、3つのCを実現するサイトを作成するために制御、調整、および構成できる変数のコンパイルが含まれます。

• 最も効果的な方法で製品ストーリーを伝えます。
• ユーザーの注意、関心、行動を捉えます。
• それらを変換します。

Toptal Designブログでさらに読む：

• 効果的なランディングページをデザインする方法
• 変換するように構築–ランディングページデザインのベストプラクティス
• 理解する–ユーザーのオンボーディングフローのガイド