レイアウトやUIコンポーネントなど、最近のランディングページで使用されているアイデアのまとめ -SaaS Pages

ランディングページがどのようにデザインされ、レイアウトされているのか、そしてコピーライティングがどのようにデザインされているのか、その参考資料となるアイデアをまとめたSaaS Pagesを紹介します。

ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザインの引き出しにストックしておきたいですね。

サイトのキャプチャ

SaaS Pages

SaaS Pagesでは、ランディングページに使用されるUIコンポーネントごとにデザインとコピーライティングがまとめられています。

ナビゲーションバー

  • 目標到達のプロセスから遠ざかる方向にナビゲートしない。
  • 分かりやすいCTAボタンがある。
  • ユーザーエクスペリエンスを向上させるスティッキーバー。
  • 開発者向けのドキュメントなど、特別なリンクを含めたい場合。
サイトのキャプチャ

Navbar

ヒーローヘッダ

  • 独自のセールスポイントを強調する。
  • 「今すぐ開始」などのアクションプランを用意する。
  • 画像や動画などを使用して、プロダクトやサービスの価値を示し、理解しやすくする。
  • ターゲットオーディエンスをヘッダーまたはサブヘッダーに含める。
  • 目標到達のプロセスの一部でない限り、ページリンクを離れて使用することは避ける。
サイトのキャプチャ

Hero

クライアント一覧

  • クライアントのロゴはよく知られたロゴを使用する。
  • 会社固有のプロパティなどのメトリックを加える。
  • ケーススタディのためのCTAがあれば、なおよし。
サイトのキャプチャ

Clients

アクションボタン

  • アクション指向の言葉を使う。
  • コントラストのあるカラーを使って、目立たせる。
  • 試してみるような曖昧な言葉を使わない。
  • 興味に訴える言葉を使う。
  • 説得力のあるフレーズを使用して、要点をすばやく説明する。
  • セクションごとに複数のCTAを使用可能。
サイトのキャプチャ

CTA

サービスやプロダクトの特徴

  • ヘッダと簡潔な説明を付けた画像や動画を用意する。
  • 機能が多すぎて説明できない場合は箇条書きを使用し、訪問者が興味を持った場合の詳細な説明へのリンクを追加する。
  • ユーザーにどのようなメリットがあるかを説明する。プロダクトではなく、お客様のことを考える。
  • ユーザーがどのように利用できるか説明する。
サイトのキャプチャ

Features

スタッフ紹介

  • ミッションを説明する。
  • すべての従業員を表示するのが理想的。
  • LinkedInのリンクは、信頼の構築に役立ちます。
サイトのキャプチャ

Team

価格一覧

  • メリットを強調する。
  • 価格設定は時間をかけて検討する。
  • 少数のプランだけを提案する。
  • 価格ページにFAQを加える。
  • 推奨プランを強調表示する。
  • それぞれのプランでCTAを際立たせる。
  • 月額プランと年間プランの割引を提供。
サイトのキャプチャ

Pricing

FAQ

  • ユーザーからの質問を使用し、可能な場合はその言葉を使用する。
  • 大きな質問に答えるのではなく、より詳細な質問に答える。
  • 簡単な質問を追加することを忘れないでください。
  • 専門知識を紹介する。
  • パーソナライズ化する。
サイトのキャプチャ

FAQ

お客様の声

  • ロゴや顔の画像を使用する。
  • 顔を使用する場合は、ビジターにそれが誰であり、信頼性のために何をしているかを伝える。
  • ケーススタディもある場合は、そこに誘導するボタンを設置する。
  • ユーザーが使用しているかなどデータと統計も使用できます。
サイトのキャプチャ

Testimonials

フッタ

  • フッタから、サイトの他の部分(キャリアやブログなど)に移動できるようにする。
  • 関連するソーシャルリンクはここに追加。
  • デザインはシンプルに。
  • プライバシーポリシーと利用規約へのリンク。
サイトのキャプチャ

Footer

sponsors

top of page

©2019 coliss