ファーストビューとは？PC・スマホで伝わるLPの作り方

ファーストビューは、画像ではなく最初に見える範囲

最初に見える範囲には、見出し、説明、写真、メニューなど、その時点で表示されている内容が入ります。メイン画像そのものと同じ範囲とは限りません。

横長の大きな写真を作っても、ブラウザーでページを開いたときに写真の一部しか見えないことがあります。逆に、写真の上に見出し、横に説明、下に条件が見えていれば、それらを合わせた範囲が最初の画面です。ページ全体はさらに下へ続きます。

画面の広さだけでなく、ブラウザーの表示領域、向き、文字の拡大などでも見える量が変わります。「PCはこの高さ、スマホはこの高さに固定」と決め、その中へ文字を詰め込むことから始めないでください。MDNの表示領域の説明も、現在見えているページの範囲と、端末の画面や文書全体を区別しています。

一番上の画像と、最初に見える範囲はどこが違うでしょうか。図では、ページ全体、表示の窓、画像の枠を別々に見てください。

原寸画像を開く

画像の枠と表示の窓は別です。説明用の窓の位置をそのまま仕様にせず、作るページを実際に開き、最初にどの言葉と画像が見えるかを確かめます。

ファーストビューの役割は、すべての説明を終えることではありません。訪問した人が「自分が知りたいことを扱うページか」「何を読めば判断できそうか」をつかみ、必要な続きへ進めるようにすることです。長い条件まで必ず一画面へ押し込むと、読むための文字が小さくなる場合があります。

何を頼めるかを、短い説明と具体物で示す

主文で提供することを伝え、補足で確かめる内容を説明し、画像でその話を具体化します。先に言葉と画像の役割を決めると、目立つ物を足し続ける状態を避けられます。

この例では、社内研修の冊子を用意する総務担当へ、冊子印刷の見積相談を案内します。対象読者は決まっている前提です。誰の用事を主にするか自体が未決なら、LPの対象読者を相談前の用事から絞る考え方の範囲を先に整理できます。リンク先の設備点検例と、ここからの冊子印刷例は別の架空案件です。

主文・補足・画像で、別々の説明を担当する

「印刷で未来をつくる」という抽象的な言葉だけでは、研修冊子を原稿から相談できるかは分かりません。この架空案では、主文を「研修用の冊子印刷を、原稿から相談」とします。何を相談するページかを最初に読める形です。

補足は「ページ数・部数・希望日をもとに、仕様と見積条件を確かめます。」です。画像では、同じ研修冊子の表紙と見開き、確認用の印刷原稿を見せます。主文が冊子の相談なのに、建物や観光地の写真だけを大きく置いても、その相談内容を具体化できません。

ここでは、料金や納期がまだ決まらないという条件も残しています。見た目を簡潔にするために「即日」「無料」「必ず間に合う」と置き換えることはしません。実案件では、会社が確認できた内容と受けられる相談だけで原稿を作ります。

主文に必要な説明をすべて足すのではなく、短い主文、すぐ隣の補足、詳しい条件へ読み分けます。短さは固定文字数で判定せず、読者が何を頼めるかを言い直せるか、重要条件を見落とさないかで確かめます。

PCとスマホで、同じ説明を読める順に並べる

広い案の画像と文字を丸ごと縮小する前に、狭い画面で読む順を作ります。必要な意味は残し、横に置いていた物を縦に並べるなど、配置を変えてください。

冊子印刷のPC案では、左に主文と補足、右に冊子と原稿の画像を置きます。条件と次の行き先は説明の続きです。スマホの別案では、主文と補足、画像、条件、次の行き先、続く説明の順に縦へ並べます。二案は同じ架空原稿を使い、変更前後の実測ではありません。

スマホ案で、冊子の相談という意味と、仕様確認後に料金・納期を案内する条件が残るでしょうか。図では、同じ冊子と説明のまとまりを近くで見比べてください。

原寸画像を開く

スマホ案はPC案の小型写真ではありません。文と画像を読む順に置き直し、条件を消さず、続きへつなげる配置です。すべてが一度に見えるか、実際に理解されたかは別に確認します。

横並びを縦へ変えた結果、画像だけで長い画面を占めるなら、画像の大きさと位置を見直します。逆に画像を削ったため何を頼めるか分からなくなるなら、必要な具体物は残します。説明の優先順位に応じて並べ方を調整し、「写真は常に先」「ボタンは常に最上部」という一律の型にはしません。

主要な説明をスマホだけ消さない

PCでは補足を画像の上に置けても、スマホでは文字が小さくなることがあります。そのときは補足を写真の下へ移すなど、必要な意味を読みやすく残す案を作ります。Googleのモバイルサイトの説明は、主要内容を同等に保ちながら表示方法を変える考え方を示しています。スマホだけ必要な説明を削ればよい、配置を変えれば順位が上がる、という意味ではありません。

文を画像へ焼き込むと、画像を狭める際にその文も小さくなります。説明文は可能ならページ上の文字として持ち、写真とは別に改行や読む幅を調整します。実装方法は制作する仕組みによりますが、必要な文を読めることを要件にしてから決めます。

画像の切取りと、文字・条件の残し方を確かめる

画像のサイズ名だけで決めず、置く枠で何が残るかを見ます。写真の主題、補足の読みやすさ、条件と行き先、下に続く説明を一緒に確かめてください。

写真の主題を、説明と切り離さない

冊子の写真を横長に切り取るなら、冊子の表紙だけでなく、見開きとの関係が必要かを見ます。スマホで左右を切ると冊子が消え、机だけになるなら、切取り位置か画像自体を変えます。背景を広く見せることより、主文の「冊子印刷」が何を指すかが分かることを優先します。

別の縦長画像を用意する場合も、PCと異なる商品や未確認の実績を足しません。同じ意味を補う素材を選び、実物写真なら利用許可と撮影対象を確かめます。この記事のAI画像は説明用の架空素材で、実会社の品質や実績を証明するものではありません。

文字を小さくする前に、余白とまとまりを見る

主文の途中で不自然に改行される、背景写真と重なって読めない、条件と行き先が離れて何の条件か分からない。そのような箇所は、文字をさらに縮める前に、写真と文字の領域、読む幅、まとまりの間隔を直します。ページの見出しを画像に頼らず文字で残すと、同じ意味を読み直しやすくなります。

制作会社のファーストビュー制作の実務説明も、何を優先するかと実際の表示確認を扱っています。本稿では固定文字数や離脱率の型は使わず、このページに必要な言葉が読めるかで判断します。

一画面の下にも、読む理由をつなぐ

この案では「見積前に確認する資料」という見出しを次に置きます。全部を最初の画面に押し込まず、資料の内容へ続くことを伝えるためです。大きな余白や強い区切りだけでページが終わったように見えないか、実際に下へ読み進めて確かめます。

NN/gのスクロールと注意に関する研究を、重要な内容を先に置き続きを示す参考にしています。研究で示された過去のデスクトップの割合を、この架空LPや現在のスマホの実績として転用してはいません。最適な長さや配置は、今回の用事に近い人と確かめます。

画面案と実ページを確かめ、具体的に修正を頼む

まず原稿と配置案の対応を読み、次に組み込んだページを実際に開きます。見た目の案を作ったこと、読者が理解したこと、行き先へ到達したことは別々の確認です。

1. 同じ原稿で説明を照合する。

   主文、補足、画像、条件、行き先、続く見出しを順に読みます。PCとスマホで言い分が変わっていないかを確認します。原稿にない料金や納期の約束は足しません。

2. 実際に開いた直後と、その続きで読む。

   対象の端末・ブラウザー・向きや拡大の状態を控え、最初に見える説明と切れた画像を確認します。次に下へ読み進め、条件と行き先が自然につながるかを見ます。縮小した画像一枚の確認だけで、実ページを確認済みにしません。

3. 読者に近い人へ、読み取った内容を聞く。

   「何を相談できるページに見えるか」「先に何を用意すると思うか」「この行き先では次に何が起こると思うか」を聞きます。感想だけでなく、意図と違った言葉を記録し、該当する説明を直します。ここでは実際の利用者試験を行っていません。

4. 操作と、問い合わせの結果を分ける。

   実ページで行き先へ移動できるかを確認しても、送信や会社の受付を確認したことにはなりません。試験が必要なら、会社が認めた環境と宛先で別に実施します。見た目が変わっただけで成果が増えたとは判断しません。

修正依頼は、残す原稿と困る場所まで書く

冊子印刷の相談LPについて、総務担当が「研修用の冊子印刷を、原稿から相談」できることと、仕様確認後に料金・納期を案内する条件を読み取れるようにしたいです。

PC案は説明の右に冊子と原稿の画像、スマホ案は主文と補足、画像、条件、必要資料の確認先の順で見たいです。補足を消したり、画像ごと小さく縮めたりせず、同じ内容が読める案にしてください。

実際に表示する枠で冊子の表紙と見開きが残るか、条件と行き先が続けて読めるか、「見積前に確認する資料」へ読み進められるかを確認したいです。実案件では、対象URL・版・見た環境と画面の該当箇所も添えます。

この依頼文は制作のための架空見本です。実案件の料金・納期、更新システムの制約や、修正後の結果はまだ分かりません。全原稿と二案の設定は、次の補足で確認できます。

広告から相談受付まで全体のどこを直すか迷うなら、広告・LP・フォームを分ける改善の考え方へ、サイト全体のスマホ修正や部分改修の範囲は、ホームページのスマホ対応と制作会社への頼み方へ分けて相談できます。

まとめ：意味を残して、最初の画面を組み立てる

ファーストビューはページを開いた直後の可視範囲で、メイン画像やページ全体とは別です。何を相談できるかを主文で示し、補足と具体物の画像、必要条件、次の行き先をつなげます。

スマホではPC案をそのまま縮めず、同じ意味を読める順へ並べ直します。画像の主題が残る切取りと、文字・条件の読みやすさ、下へ続く内容を実表示で確認してください。全説明を一画面へ押し込む型や、配置だけで成果が上がる約束は不要です。

DREEXYでは、会社サイトやLPの説明と画像、制作範囲の整理を相談できます。対象ページと、最初に伝えたい内容、読みにくい箇所をお知らせください。対応範囲・費用・条件は個別に確認します。Webサイトの制作・改善を相談する