レイアウトやUIコンポーネントなど、最近のランディングページで使用されているアイデアのまとめ -SaaS Pages
Post on:2019年7月29日
sponsors
ランディングページがどのようにデザインされ、レイアウトされているのか、そしてコピーライティングがどのようにデザインされているのか、その参考資料となるアイデアをまとめたSaaS Pagesを紹介します。
ランディングページのデザインや実装、ヘッダやフッタやナビゲーション、特徴やボタンの目立たせ方など、デザインの引き出しにストックしておきたいですね。
SaaS Pagesでは、ランディングページに使用されるUIコンポーネントごとにデザインとコピーライティングがまとめられています。
ナビゲーションバー
- 目標到達のプロセスから遠ざかる方向にナビゲートしない。
- 分かりやすいCTAボタンがある。
- ユーザーエクスペリエンスを向上させるスティッキーバー。
- 開発者向けのドキュメントなど、特別なリンクを含めたい場合。
ヒーローヘッダ
- 独自のセールスポイントを強調する。
- 「今すぐ開始」などのアクションプランを用意する。
- 画像や動画などを使用して、プロダクトやサービスの価値を示し、理解しやすくする。
- ターゲットオーディエンスをヘッダーまたはサブヘッダーに含める。
- 目標到達のプロセスの一部でない限り、ページリンクを離れて使用することは避ける。
クライアント一覧
- クライアントのロゴはよく知られたロゴを使用する。
- 会社固有のプロパティなどのメトリックを加える。
- ケーススタディのためのCTAがあれば、なおよし。
アクションボタン
- アクション指向の言葉を使う。
- コントラストのあるカラーを使って、目立たせる。
- 試してみるような曖昧な言葉を使わない。
- 興味に訴える言葉を使う。
- 説得力のあるフレーズを使用して、要点をすばやく説明する。
- セクションごとに複数のCTAを使用可能。
サービスやプロダクトの特徴
- ヘッダと簡潔な説明を付けた画像や動画を用意する。
- 機能が多すぎて説明できない場合は箇条書きを使用し、訪問者が興味を持った場合の詳細な説明へのリンクを追加する。
- ユーザーにどのようなメリットがあるかを説明する。プロダクトではなく、お客様のことを考える。
- ユーザーがどのように利用できるか説明する。
スタッフ紹介
- ミッションを説明する。
- すべての従業員を表示するのが理想的。
- LinkedInのリンクは、信頼の構築に役立ちます。
価格一覧
- メリットを強調する。
- 価格設定は時間をかけて検討する。
- 少数のプランだけを提案する。
- 価格ページにFAQを加える。
- 推奨プランを強調表示する。
- それぞれのプランでCTAを際立たせる。
- 月額プランと年間プランの割引を提供。
FAQ
- ユーザーからの質問を使用し、可能な場合はその言葉を使用する。
- 大きな質問に答えるのではなく、より詳細な質問に答える。
- 簡単な質問を追加することを忘れないでください。
- 専門知識を紹介する。
- パーソナライズ化する。
お客様の声
- ロゴや顔の画像を使用する。
- 顔を使用する場合は、ビジターにそれが誰であり、信頼性のために何をしているかを伝える。
- ケーススタディもある場合は、そこに誘導するボタンを設置する。
- ユーザーが使用しているかなどデータと統計も使用できます。
フッタ
- フッタから、サイトの他の部分（キャリアやブログなど）に移動できるようにする。
- 関連するソーシャルリンクはここに追加。
- デザインはシンプルに。
- プライバシーポリシーと利用規約へのリンク。
sponsors
