サービスのランディングページ要素比較10選

こんにちは!マツイです。

サービスを機能させるため、ランディングページ(以下LPと呼ぶ)を作る事は必要不可欠です。LPを考える際に、どんなテイストにするかということより、どのような構成にするかという事を優先して考える必要があります。 自分自身、ランディングページを最近よく作る機会もあり、他社のランディングページがどのような構成になっているかを今回、調べてみました。サービスを作る際、どの流れであれば今作ろうとしているサービスにサイトに最適なのか参考になればと思います。

slack

カテゴリー:コミュニケーションツール

1.ヘッダー

ロゴ,ナビゲーション,ワークスペースへのサインインボタン

2.ファーストビュー

キャッチコピー, サインアップボタン, イメージ

3.使い方

ビデオでの使い方訴求

4.できる事

タブ切り替え式で大きく3つに分け紹介、直下には、アイコン/タイトル/文章で機能を説明。さらに、連携できるコンテンツを大きく扱い、他社ツールと差別化しながら特徴を紹介。

5.安心訴求

セキュリティについての訴求を記載

6.導入企業紹介

コラボレーションの企業の詳細を設置

7.ダウンロードエリア導線

シンプルなメッセージとダウンロードボタンのみを設置

8.フッター

サイトマップを表示し検索しやすくしている

Airレジ

カテゴリー:POSシステム

1.ヘッダー

ロゴ,ナビゲーション,登録ボタン

2.ファーストビュー

キャッチコピー, 登録ボタン, 資料導線ボタン, イメージ

3.topicエリア,バナーエリア

お知らせとは別で、Topicエリアやバナーを設置。より必要な情報にたどり着きやすいカタチに。

4.NEWS

お知らせと、メディア情報をそれぞれ3件表示。

5.安心訴求

導入相談の窓口導線を設置し、初回ユーザーに対する手厚いサポートと安心訴求を行なっている。

6.特徴

直感的に良さが伝わるように、アイコンと短文のみで特徴を紹介。動画でシーンを連想させ、その後で、特徴についての詳細を記載して情報を補足。

7.導入事例

1カラムで導入事例エリアを大きく扱い、別ページに遷移させている。

8.機能紹介

機能が豊富なため、タブ切り替えによって紹介。

9.信頼度訴求

具体的な評価や、導入の伸び率を表示し、Airレジ自体のサービスを訴求。

10.ユーザーボイス

様々な事業者におけるユーザーボイスの紹介。口コミを掲載する事で、信頼と安全の訴求にも繋がる。

11.利用の流れエリア

利用するまでの流れを設置し、しっかりとユーザーをナビゲートする事で不安を解消。

12.おすすめ紹介

サービス利用と共に、よりよく使っていただくための提案エリア。サービスのみだけはなく、セット買いをしてもらうためのコンテンツ。

13.サポート

導入相談コンテンツと同様、売り切りだけではなく、手厚いサポートを行う事で、信頼と安心と不安解消を訴求。

14.ダウンロード

サービス自体の説明が終わった後に、ダウンロードできますよ!と設置する事で、ページトップに戻らず、無料アカウントを作成できる。

15.バナー、お知らせエリア

横展開している商品のバナーと、お知らせを再度設置し、トータルでサポートできることを伝えている。

16.フッター

サイトマップを表示。

NEWSPICKS

カテゴリー:ニュースキュレーション

1.ヘッダー

ロゴ

2.ファーストビュー

キャッチコピー

3.登録エリア(サインアップエリア)

訴求文言,サインアップボタン

4.特典

3つの特典,CV導線ボタン

5.プラン選択

2種類のみと学生プラン

6.訴求エリア

訴求文言,NEWS記事がわかるイメージ,CV導線ボタン

7.フッター

ロゴ,お試しボタン,SNSボタン

FReeNANCE

カテゴリー:サービス

1.ヘッダー

ロゴ,ナビゲーション,新規登録ボタン

2.ファーストビュー

キャッチコピー,訴求文言

3.特徴

直感的に良さが伝わるように、アイコンと短文のみで特徴を紹介。その後で、特徴についての詳細を記載して情報を補足。

4.登録の流れ

4ステップで、WEB登録から利用開始までの流れを紹介

5.利用者の声

グラフィックデザイナー,エンジニア,ライターの3つの業種の声を記載。コアターゲットに近い声を掲載していると考えられる。

6.登録エリア

無料登録ボタンのみ

7.フッター

サイトマップを設置

ハンズクラブアプリ

カテゴリー:クラブアプリ

1.ファーストビュー

ロゴ,キャッチコピー,訴求文言,イメージ,Appダウンロードボタン

2.特徴

3つに分けて紹介、最後の特徴部分には、使い方と思われるコンテンツも含まれている。

3.ユースケース

イラストを使った動画コンテンツ

4.訴求ポイント

手軽さを押し出した訴求の設置。

5.登録エリア

Appダウンロードボタン(Appstore & Googleplay)

6.フッター

登録/再発行,会員規約,よくある質問, 問い合わせ

メルペイ

カテゴリー:ペイメント

1.ヘッダー

ロゴ,キャッチコピー,訴求文言,イメージ,Appダウンロードボタン

2.ファーストビュー

動画コンテンツ

3.特徴

3つに分けて紹介

4.ダウンロードエリア

Appダウンロードボタン(Appstore & Googleplay)

5.利用方法

電子マネーのiDでの支払い, メルペイコード払いでの支払い, ネットショップでの支払いの3つに分け表示。

6.お知らせ

サムネイルがあるカード型のお知らせコンテンツを3件表示

7.よくある質問

8件表示

8.ダウンロードエリア

Appダウンロードボタン(Appstore & Googleplay)

9.導入提案訴求

実店舗での導入とネットショップでの導入とに分け、新規ユーザーに向けたサポートを設置。初めての方へなどのコンテンツとも取れるので、初回ユーザーであって、ある程度、購入意欲が高い方へ導線と考えられる

10.フッター

サイトマップを設置

pairs

カテゴリー:マッチングサービス

1.ヘッダー

ロゴ,ナビ,snsログイン

2.ファーストビュー

コピー,訴求バッジ,snsログイン,アプリダウンロード

3.ユーザーボイス

動画コンテンツ, ユーザーレポート

4.利用までの流れ

3ステップで簡単さをアピール。

5.選ばれている理由

サービスを支える為の理由を3つに絞り掲載

6.ダウンロードエリア

訴求文言, snsでサインアップボタン, Appダウンロードボタン(Appstore & Googleplay)

7.安心訴求

4つの安心訴求とメディアで紹介されていることを記載

8.コラム

コンテンツマーケティングや情報をキャッチアップができるコラム枠

9.ダウンロードエリア

訴求文言, snsでサインアップボタン, Appダウンロードボタン(Appstore & Googleplay)

10.フッター

会社概要/利用規約安心・安全の取り組みとガイド/コミュニティガイドライン/プライバシーポリシー/特定商取引法に基づく表示/ヘルプ/記事提供元一覧

ONEPAIR

カテゴリー:マッチングサービス

1.ファーストビュー

ロゴ,コピー,アプリダウンロード

2.NEWSエリア

テキストリンクベースのお知らせを4件表示。

3.ビジョン

画像とテキストベース

4.特徴

画面いっぱいのイメージとコンパクトの文章。どちからというと読ませるようなデザイン。

5.導入企業

18社のロゴを記載,Appダウンロードボタン(Appstore & Googleplay)

6.snsエリア

関連するtwitterカードを表示

7.フッター

運営会社/FAQ/利用規約/プライバシーポリシー/個人向けお問い合わせ/法人向けお問い合わせ

レコレル

カテゴリー:サービス

1.ヘッダー

ロゴ,ナビ,お問い合わせボタン,申し込みボタン

2.ファーストビュー

ロゴ,コピー,申し込みボタン,イメージ

3.お知らせエリア

テキストリンクベースのお知らせを3件表示。

4.できること

5つの機能の紹介

5.訴求エリア

他者との違いを伝えると共に、カスタマイズの良さを訴求

6.特徴

2つに絞った特徴を記載

7.料金プラン

ユーザー数ごとに金額を設定。例)1 〜 40 ¥10,000/月

8.よくあるご質問

サービスや機能など、カテゴリーに分けよくある質問コンテンツを設置

9.ダウンロードボタン

申し込みボタンのみ設置

10.フッター

ロゴと、運営会社のurl

メールワイズ

カテゴリー:メール共有システム

1.ヘッダー

ロゴ,ナビ,お試しボタン

2.ファーストビュー

コピー,無料お試し申し込みボタン,費用はこちら,検討中の方へのアクション導線

3.評価される理由

アイコン/タイトル/テキストで簡潔に3つに絞り込む訴求。

4.課題定義

4つの課題に対して、こんなことが可能です!というソリューションの提案

5.機能紹介

直感的にわかるアイコン/タイトル/テキストでわかりやすく訴求

6.導入企業

ロゴやアイコンを多用しわかりやすく訴求

7.お知らせ

カード型のお知らせを4件表示

8.検討中の方へのアクション導線

興味がある方や、購買意欲が高いユーザーに対して、よりわかりやすいサービス内容の資料やイベントのコンテンツを設置して、CV率の向上へ繋げるアクション導線。初めての方へコンテンツとしても利用できる。

9.ダウンロードボタン

申し込みボタンのみ設置

10.フッター

サイトマップを表示し検索しやすくしている

要素を比較

抜粋した10のサイトを比較すると、ほぼ共通して特徴や強み、利用までの流れが含まれている事が多い事がわかります。もちろん、特徴は必須だったりする事もあるとは思います。ただ一番、シンプルな構造だったのは、NEWSPICKSでした。

基本はヘッダーに登録ボタンをおきますが、ヘッダーにもロゴのみ、ファーストビューにも、訴求文言のみと、あくまでも情報をシンプルに伝える事を意識しているようにも感じました。要素を書き出し、比較する事で、どのように伝える方がよいのかの軸になるのでおすすめです。

松井 貴史
フリーランス・副業向けチームビルダーのためのプラットフォーム、MENTION(メンション)開発|RUBYDESIGN.代表(http://rubydesign.jp)|デザイナー&エンジニア|趣味:旅行・サウナ・ポーカー・ワイン|ビジネスライフハックもたまに|提携や仕事の相談は気軽にDMください

類似記事

アイコンだけで伝わらない場合の解決方法

よりよいダッシュボードデザインをするためのTips

よりよいダッシュボードデザインをするためのTips

デザインを扱う人たちには、必要な覚悟

デザインを扱う人たちには、必要な覚悟

デザインは、情報の整理と課題解決能力

デザインは、情報の整理と課題解決能力