ホームページのファーストビューを作るとき、写真や動きから決めると、伝えたいことが増えるほど画面が散らかります。最初に整理したいのは見た目ではなく、訪問者が「自分向けか」「何が得られるか」「次に何をすればよいか」を判断できる情報です。
この3つが決まれば、見出し、補足文、実績、ボタンの役割を分けられます。
反対に、原稿が曖昧なままデザインを進めると、大きな写真の上に抽象的な言葉を重ねただけになりかねません。
この記事では、ファーストビューに載せる情報を3要素へ絞り、業種別の原稿例、画面サイズの考え方、公開前の確認手順まで整理します。社内で原稿を決める順番として使ってください。
先に決めるのは対象・価値・次の行動
ファーストビューの役割は、情報を全部見せることではありません。ページを読み進める理由と、次に取れる行動を短時間でつなぐことです。
ホームページのファーストビューは最初に見える範囲
ファーストビューとは、ホームページを開いた直後、スクロールする前に見える範囲のことですが、その範囲は一定ではありません。
端末の画面、縦横の向き、ブラウザの表示領域、文字サイズなどによって変わります。
そのため、特定の画面だけを基準にして「ここまでが必ず見える」と考えるのは危険です。パソコンで整っていても、スマートフォンでは見出しやボタンが画面外へ押し出されることがあります。
一方で、すべてを最初の画面に詰め込む必要もなく、サービスの詳細、会社紹介、事例、料金、よくある質問まで並べれば、重要な情報が埋もれます。
最初の画面は説明の完結地点ではなく、続きを読む判断の入口と捉えると整理しやすいでしょう。
メモファーストビューの境界線を固定するより、狭い画面でも重要な順番が崩れないかを確認します。見出しが見え、補足が読め、次の行動が分かれば、すべてを一画面へ収める必要はありません。
ファーストビューで伝える3要素
私は、ファーストビューを目立たせるための一枚絵ではなく、訪問者の判断を支える情報の入口と考えており、
ここで使う3要素は公式の規格ではなく、原稿を絞るための実務上の整理方法です。対象、提供価値、次の行動の順に決めれば、訪問者の疑問と画面上の要素を結び付けられます。
対象
誰の、どの状況に向けたページか。
提供価値
何を提供し、どんな状態を目指すか。
次の行動
何を確認し、どこへ進めばよいか。
誰の、どの状況に向けたページか
「法人のお客様へ」だけでは、業種も課題も広すぎます。たとえば「採用サイトを作り直したい製造業の人事担当者」「問い合わせ対応を整理したい地域サービスの責任者」のように、役割と直面している状況まで置くと、自分向けか判断しやすくなるでしょう。
対象を狭めることは、受注の可能性を狭めることと同じではありません。誰に向けて何を話すかが明確になると、対象外の人にも会社の得意領域が伝わります。競合との違いを原稿へ落とす際にホームページで差別化を伝える考え方も合わせて整理すれば、抽象語を減らしやすくなるでしょう。
何を提供し、何がどう変わるか
次に、商品名やサービス名だけでなく、提供内容と目指す状態をつなげ、「高品質なサービス」ではなく、「問い合わせの内容を整理し、担当者が優先順位を付けやすい導線を設計する」のように、何をする会社かが想像できる言葉へ置き換えます。
成果を断定できない場合は、約束に見える表現を避けます。「売上を伸ばす」ではなく、「購入前の迷いを減らす設計を支援する」のように、会社が提供できる働きかけを書けば、根拠のない保証になりません。
次に何を確認・実行すればよいか
訪問者が興味を持っても、次の行動が分からなければ止まります。資料を見る、事例を読む、相談するなど、その時点で選べる行動を具体的な言葉で示してください。
ただし、最初から問い合わせだけを強く迫ると、まだ比較中の人には重く映りかねません。まず実績や進め方を確かめたい人には、お客様の声をホームページへ載せる考え方のような判断材料も用意し、検討段階に合う導線を設計します。
整理3要素を一文へ詰め込まない
対象は見出しや小見出し、提供価値は見出しと補足文、次の行動はボタンやリンクへ分担でき、一つの長いキャッチコピーで全部を説明しようとしないことが読みやすさにつながります。
3要素を見出し・根拠・次の行動へ落とし込む
3要素が決まったら、画面上の部品へ割り当てます。見出しは注意を引くためだけの言葉ではなく、誰に何を提供するページかを最短で伝える場所です。
画面上の役割を先に決める
| 画面要素 | 役割 | 確認する質問 |
|---|---|---|
| 見出し | 対象と提供価値を結ぶ | 誰向けの何が分かるか |
| 補足文 | 方法や対象範囲を補う | 抽象語を具体化できているか |
| 根拠 | 判断材料を示す | 事例や数字の出典を説明できるか |
| 画像 | 利用場面や雰囲気を補う | 文章と同じ意味を伝えているか |
| CTA | 次の行動を示す | 押した後に何が起きるか分かるか |
たとえば「未来をつくるソリューション」という見出しは、会社の姿勢は示せても、訪問者が得られる情報は少ないままです。仮の原稿なら、「採用情報を整理し、応募前の疑問を減らす採用サイト制作」のように、対象、作業内容、目指す状態を置くと具体性が増します。
根拠は、見栄えのよい数字を飾る場所ではなく、公開できる事例、担当者の専門領域、対応範囲など、社内で説明できる事実だけを使います。
出典や条件を説明できない実績値は載せない判断も必要です。
問い合わせ導線は、ボタンの色より文言を先に確認し、「詳しくはこちら」ではなく、「制作の進め方を見る」「相談内容を送る」のように、押した後の行き先を示し、
問い合わせを増やす導線全体は、ホームページの問い合わせを増やす改善手順でも整理しています。
順番原稿、根拠、画像の順で考える
伝える内容を決め、裏付けられる材料を選んで最後に画像で補い、写真に合わせて言葉を作るのではなく、言葉の役割に合う写真を選ぶ順番なら、画面の意図がぶれにくくなります。
業種別に変える原稿例
同じ3要素でも、訪問者が確認したい内容は業種やページの目的で変わります。
次の例は実在企業の実績ではなく、原稿を具体化するための仮例なので、自社の事実に置き換えて使ってください。
製造業なら対応領域と相談の入口を示す
製造業では、製品名だけでなく、加工領域、素材、ロット、相談できる工程などが判断材料になり、「精密加工のことならお任せください」より、「試作段階の図面相談から量産方法を検討」のように、相談する状況を置くと対象が伝わります。
BtoBサービスなら課題と支援範囲を結ぶ
BtoBサービスは成果までの工程が長く、抽象語が増えがちです。「業務を効率化」だけで終わらず、情報整理、設計、導入支援、運用など、どこからどこまで関わるかを補足します。
地域サービスなら対象地域と予約方法を近づける
店舗や訪問型サービスでは、対象地域、営業時間、予約方法が早く確認できることが重要です。雰囲気の写真だけでなく、利用できる人と行動方法が同じ画面でつながるかを見ます。
採用ページなら仕事と応募前の判断材料を示す
採用では「挑戦できる会社」だけでなく、募集職種、仕事の内容、勤務地、選考情報への入口を示します。会社の理想像だけを大きく見せ、応募条件を遠くへ置くと、求職者が自分に当てはまるか判断できません。
- 対象は業種名だけでなく、役割や困っている状況まで書く
- 提供価値は抽象的な成果ではなく、支援内容と目指す状態を結ぶ
- 次の行動は検討段階に合わせ、資料、事例、相談などから選ぶ
- 例文はそのまま使わず、自社が説明できる事実へ置き換える
原稿「誰に」だけでも「強み」だけでも足りない
対象と強みを別々に並べるのではなく、その対象のどんな状況に、強みがどう働くかを一続きで考えると、ここまで言葉にできた段階で写真やボタンの選択理由も説明できます。
ホームページのファーストビューサイズに唯一の正解はない
「推奨サイズ」を探すと、パソコン用とスマートフォン用のピクセル値が紹介されていることがありますが、画像ファイルの制作寸法と訪問者が実際に見る表示範囲は別です。
viewportは端末やブラウザによって変わるため、一つの固定値で全環境を保証できません。
レスポンシブデザインでは、端末名に合わせて分けるより、内容が読みにくくなる位置を見てブレークポイントを決めます。見出しが不自然に折り返す、画像の主役が切れる、ボタンが押しにくくなるなど、情報の意味が崩れる場所を基準にしてください。
出典: web.dev「Responsive web design basics」(英語)
横長の写真を狭い画面へそのまま縮めると、人物や商品の位置が切れることがあるため、パソコンとスマートフォンで構図を変える、重要部分が残る位置へ調整するなど、文字だけでなく画像の意味も画面ごとに確認します。
- 幅の狭いスマートフォンで見出しの改行が意味を変えていない
- スマートフォンの横向きで見出しやCTAが隠れていない
- タブレット幅で画像と文章の順番が崩れていない
- パソコンの低い画面で重要情報が画面外へ押し出されすぎていない
- 文字を拡大しても重なりや横スクロールが起きない
ブラウザや端末をまたいだ確認方法は、クロスブラウザ対応の確認ポイントも参考になります。開発ツールの表示だけで終えず、実機でもタップやスクロールを確認してください。
判断サイズを一つ決める代わりに、確認する画面幅と合格条件を決めます。見出し、補足文、画像、CTAの優先順が保たれていれば、見える範囲が端末ごとに違っても問題ありません。
ファーストビューデザインの公開前チェック
原稿とレイアウトが決まったら、読みやすさ、操作しやすさ、表示速度を確認し、印象だけで判断せず、見える、読める、押せる、待たされないの4つへ分けると見落としを減らせます。
文字と背景のコントラストを測る
写真の上に白文字を載せると、明るい部分で文字が消えることがあり、W3CのWCAG 2.2では、通常テキストの最低コントラスト比を4.5対1、大きな文字を3対1としています。
写真の一場面だけでなく、文字が重なる範囲全体を検査してください。
出典: W3C「Understanding Success Criterion 1.4.3: Contrast」(英語)
ボタンは文言と押しやすさを確認する
操作対象は、原則として24×24 CSS px以上、または隣の対象との十分な間隔が必要です。サイズだけでなく、リンクなのか装飾なのかが分かる見た目にし、小さな文字リンクを密集させないようにします。
出典: W3C「Understanding Success Criterion 2.5.8: Target Size」(英語)
画像の役割と代替テキストをそろえる
情報を伝える画像には、そのページ内で果たす役割に合う代替テキストを付け、装飾だけの画像は空のaltを基本とし、画像内の文字だけに重要情報を任せない設計にします。
出典: W3C WAI「Images Tutorial」(英語)
最初の大きな要素が遅くないかを見る
LCPは、viewport内で最大の画像またはテキストブロックが表示されるまでの時間を測る指標です。web.devは良好な目安を2.5秒以内とし、実利用者データの75パーセンタイルをモバイルとデスクトップ別に見るよう案内しています。
ファーストビューの大きな画像がLCP候補になる場合は、HTMLから早く発見できるようにし、遅延読み込みを避けます。表示速度の原因は画像だけとは限らないため、ホームページ表示速度の改善ポイントも含め、計測結果からボトルネックを確認してください。
出典: web.dev「Largest Contentful Paint」(英語)
- 見出しと背景のコントラストを測った
- CTAの行き先と押した後の動作が分かる
- リンクやボタンが狭すぎず、近すぎない
- 画像のaltが画像の役割と合っている
- 重要情報が画像内の文字だけになっていない
- モバイルとデスクトップでLCPを確認した
- キーボード操作や文字拡大でも内容を追える
注意動きがあることを価値にしない
動画やスライダーは、内容を補う理由がある場合に使いますが、文字が読めない速さで切り替わる、操作方法が分からない、読み込みを遅くするなら、静止画や固定表示のほうが目的に合います。
ホームページのファーストビュー改善を小さく検証する
公開後の改善では、見出し、写真、ボタン、レイアウトを一度に変えないことが重要で、全部を変えると反応が変わっても理由を切り分けられません。
目的を一つ決め、一要素ずつ変更します。
最初に「相談ページへ進む人を増やしたい」「サービス内容の誤解を減らしたい」など、改善目的を一つ選び、次に、CTAのクリック、次のセクションまでの到達、問い合わせ内容など、目的に近い確認材料を決めます。
数値だけでなく、問い合わせで繰り返し聞かれる質問や、営業担当者が補足している説明も手掛かりです。ファーストビューで不足している情報が見つかったら、見出しや補足文へ反映し、変更前と同じ条件で見比べます。
アクセスが少ない段階で、短期間の変化だけを成功や失敗と決め付けないことも大切です。季節、広告、検索流入など入口の違いも確認し、一つの数字だけで結論を急がないようにします。
検証変更理由を一文で残す
「対象が伝わりにくいため、見出しに役割名を加えた」のように、仮説と変更点を記録すれば、何を直したかより、なぜ直したかが残り、担当者が変わっても検証を続けられます。
ホームページのファーストビューに関するよくある質問
Qファーストビューには何を載せればよいですか?
A誰のどの状況に向けたページか、何を提供しどんな状態を目指すか、次に何を確認または実行できるかの3要素を優先します。詳細情報を全部詰め込まず、続きを読む判断に必要な内容へ絞ってください。
Qキャッチコピーは短いほどよいですか?
A短さだけで決める必要はありません。対象と提供価値が伝わる長さを優先し、方法や対象範囲は補足文へ分けます。短くても意味が曖昧なら、訪問者は自分向けか判断できません。
Q推奨の高さや画像サイズはありますか?
Aすべての端末に共通する固定値はありません。画像ファイルの制作寸法と実際の表示範囲を分け、複数の画面幅で見出し、画像、CTAの順番と読みやすさを確認してください。
QスマートフォンとPCで同じ画像を使えますか?
A同じ画像でも重要な部分が切れなければ使えます。横長画像で人物や商品が見えなくなる場合は、画面条件に応じて別の構図を用意するか、表示位置を調整します。
QCTAは一つに絞るべきですか?
A最優先の行動は一つ決めると迷いにくくなります。ただし、すぐに相談しない人向けに事例や進め方への補助リンクを置く方法もあります。各リンクの優先度が見た目で分かるようにしてください。
Q動画を背景に使ってもよいですか?
A内容を補う理由があり、文字の読みやすさ、操作性、表示速度を損なわない場合は選択肢になります。雰囲気だけを目的にせず、静止画でも同じ役割を果たせないか比較してください。
Q公開後は何を見て改善しますか?
A目的に応じてCTAのクリック、次のセクションへの到達、問い合わせ内容などを見ます。一度に複数要素を変えず、仮説と変更理由を記録して同じ条件で確認してください。
Qデザインと原稿はどちらから決めますか?
A原稿から決める方法を推奨します。対象、提供価値、次の行動を言葉にし、根拠を選んでから、それらを読みやすく補うレイアウトや画像を決めると判断がぶれにくくなります。
3要素を先に決めるとデザイン判断がぶれにくい
ホームページのファーストビュー設計とは、訪問者の状況、提供価値、次の行動を最初の画面で結び付ける情報設計です。
最初に対象を絞り、提供できることを具体化し、次の行動を決め、その後で根拠、画像、レイアウトを選んで、複数の画面幅、読みやすさ、操作性、表示速度を確認してください。
見た目を整える前に、判断できる情報を整えることが出発点です。
結論最初の画面ですべてを説明しない
対象、提供価値、次の行動がつながれば、訪問者は続きを読むか判断できます。情報量を増やすより、優先順位を決めることがファーストビュー設計の中心です。
自社の強みが抽象語から抜け出せない、パソコンとスマートフォンで情報の優先順位が崩れるなど、原稿と画面を切り離せない課題があるため、ノーサイドでは、事業内容と訪問者の判断材料を整理し、サイト全体の導線まで含めて設計できます。ファーストビューから見直したい場合は、お問い合わせフォームからご相談ください。