ファーストビューの型の選び方
ファーストビューの型は、「最初の画面で読み手に何をしてもらうか」「何を主役にして伝えるか」「主張を裏付ける根拠を添えるか」の3つで変わります。まず問い1で型の大きな方向を決め、内容を伝える型の場合は問い2・問い3で組み立てます。型を選んだら、各Patternのページでワイヤーフレームとプロンプト、動くデモを確認できます。
問い1：最初の画面で、読み手に何をしてもらいますか？
| 最初にしてもらうこと | 向く型 |
|---|---|
| まず内容を理解してもらい、そのうえで次へ進んでほしい | → 問い2へ |
| 探したい条件を選んで、すぐに探し始めてほしい | 目的入力型 |
| 自分の立場や相談の内容を1つ選んで、自分向けの案内へ進んでほしい | 入口分岐型 |
| いくつかの質問に答えて、自分に合うコースやプランを見つけてほしい（条件を入れてそのまま探す目的入力型に対し、複数の質問を通して結果を導く） | 診断開始型 |
| 商品そのものを見比べて、選び始めてほしい | 商品選択型 |
| 日時や締切のある情報を確かめて、申し込んでほしい（ページそのものがイベントやキャンペーンのためにある場合。既存のサイトの中で重要な情報を目立たせるなら重要なお知らせ固定型 お知らせ） | 告知型 |
問い2：何を主役にして伝えますか？
内容を理解してもらう場合に、最初の情報の主役を決める型です。
| 伝えたいことの中心 | 向く型 |
|---|---|
| サービスの内容や強み。言葉で説明したほうが分かりやすい | 一文訴求型 |
| 空間、料理、商品、人の様子など。写真を見ることで特徴や雰囲気をつかみやすい | 画像主体型 |
| 言葉で説明したいことと、画像で見せたいものの両方がある | 左右分割型 |
問い3：主張を裏付ける根拠を添えますか？
問い2で選んだ型に組み合わせる型です。
| 添える根拠 | 加える型 |
|---|---|
| 時点と条件を示せる数字や、掲載の許可を得た導入企業のロゴがある | 根拠添え型 |
ファーストビューの型の比較
| 型 | 役割 | 最初の情報の主役 | 向くサイト |
|---|---|---|---|
| 一文訴求型 | 見せ方 | 言葉 | BtoBのサービス、士業、コンサルティング、制作会社 |
| 画像主体型 | 見せ方 | 写真 | 飲食店、美容室、宿泊施設、住宅、アパレル |
| 左右分割型 | 見せ方 | 言葉と画像 | アプリやツール、採用サイト、サービス紹介 |
| 根拠添え型 | 信頼の示し方 | 主張と根拠 | SaaS、BtoBのサービス、比較検討されやすい商材 |
| 目的入力型 | 行動の入口 | 検索や条件の選択 | 不動産、求人、予約、EC |
| 入口分岐型 | 行動の入口 | 立場や相談内容ごとの入口 | 士業、金融・保険、学校、個人と法人の両方を扱う会社 |
| 告知型 | 行動の入口 | 日時・締切・受付状態 | セミナー、説明会、展示会、期間限定のキャンペーン |
| 商品選択型 | 行動の入口 | 商品のカード（写真・名前・価格） | ネットショップ、食品・日用品の通信販売 |
| 診断開始型 | 行動の入口 | 質問と、回答から導く結果 | スクール、SaaSのプラン選び、サービスのコース案内 |
すべての型に共通する設計の原則
ファーストビューの型を作る中で、型が違っても繰り返し出てきた原則です。どの型を選んでも、次の点は同じように確かめます。
- 何のページか、誰に向けたものかが、最初の画面で伝わるようにする。抽象的なキャッチコピーだけにしない
- 見出し・補足・ボタンはHTMLのテキストで書き、見出しはページの大見出し（h1）として扱う。画像の中の文字だけに頼らない
- 主の行動を1つに決め、必要なら優先度の低い副の行動を1つ添える（例：「問い合わせる」と「資料を受け取る」）。ボタンの文言と移動先を一致させる。最初の画面に要素を詰め込まず、一番伝えたいことに絞る
- SPでは、主ボタンが極端に下へ追いやられないようにし、早い段階で到達できるようにする。最初の画面にすべてを収めることにこだわらない。収めるために文字を小さくしすぎたり、内容を削りすぎたりしない
- 画面いっぱいで完結したように見える場合は、続きがあることが分かる手がかりを用意する
- 見出しの改行は特定の画面幅だけを前提に固定しすぎず、PC・タブレット・SPの複数の幅で確かめる
- 最初の画像は後から読み込む設定にせず、幅と高さを指定して表示のずれを防ぐ。代替テキストは、画像が内容を伝えるか装飾かで書き分ける
- 自動で切り替わる表示や動き続ける演出は避ける。動画を使う場合は、止める手段を用意し、動きを減らす設定を尊重する
- 数字や「No.1」などの主張は、根拠と時点・条件を示せるものだけを載せる
組み合わせの例
- 制作会社・コンサルティング：一文訴求型で何をする会社かを言葉で伝え、実績の数字がある場合は根拠添え型の形で見出しの下に添える
- 飲食店・美容室：画像主体型で空間や料理を大きく見せ、長いページでは追従型 CTAで予約のボタンを追従させる
- SaaS・業務ツール：左右分割型で機能を言葉と製品の画面で伝え、根拠添え型の形で導入数などの根拠を添える。ボタンは主副併記型 CTAで「無料で試す」と「資料を受け取る」を並べる
- 不動産・求人：目的入力型で最初の画面から探し始められるようにし、条件を決めていない人には新着や一覧への入口を用意する
- 士業・金融：入口分岐型で相談の内容ごとに入口を分け、入口の上の見出しで何の事務所かを伝える
- セミナー・イベント：告知型で日時と締切を最初の画面にまとめ、締切や満席のあとは状態を切り替える
- ネットショップ：商品選択型で好みや用途のカテゴリから商品を選び始めてもらい、すべての商品への入口も用意する
- スクール・SaaS：診断開始型で数問の質問から合うコースを案内し、診断しない人には一覧や比較への入口を用意する
よくある質問
どの問いから考えればよいですか?
問い1の「最初の画面で、読み手に何をしてもらうか」から考えます。探し始めてほしいのか、立場を選んでほしいのか、まず内容を理解してほしいのかで、型の大きな方向が決まります。内容を理解してほしい場合は、問い2で何を主役にして伝えるかを選びます。
最初の画面は、画面の高さいっぱいにしたほうがよいですか?
必ずしも画面いっぱいにする必要はありません。画面の高さぴったりに作ると、ページがそこで終わっているように見えることがあります。完結したように見える場合は、次のセクションの一部を見せるなど、続きがあることが分かる手がかりを用意します。
複数の写真や訴求を、スライダーで切り替えてもよいですか?
UI PATTERNSでは、スライダーを型として扱っていません。自動で切り替わると、見ている途中で内容が変わり、写真や文字を落ち着いて確かめにくくなるためです。最初に伝えることを1つに絞り、ほかの内容は次のセクション以降で見せる形をおすすめします。
ファーストビューのボタンは、CTAの型とどう関係しますか?
ファーストビューの主ボタンは、最初の画面に置くCTAです。ボタンの文言と移動先の一致や、主と副の優先度の付け方など、CTAと同じ考え方がそのまま当てはまります。詳しくは、CTAの型の選び方を参考にしてください。