ファーストビューとは？最初の画面に入れる3つとサイズの考え方

「ファーストビューが大事、と言われても、何をどこに置けばいいのか分からない」
ホームページを作る・作り直すときに、制作会社からこの言葉を聞いて戸惑う方は少なくありません。

先に結論です。ファーストビューは、ホームページを開いてすぐ、スクロールせずに見える範囲のことです。
お店のホームページなら、ここで「何の店か」「どこにあるか」「何をしてほしいか（予約・問い合わせのボタン）」の3つが伝われば十分です。
画面の大きさは機種によってばらばらなので、決まったサイズはありません。
小さめのスマホで開いても3つが画面に収まっているかを、実際に確かめてください。

こんにちは。
三重県でホームページ制作をしているMYコンサルティング株式会社、代表の宮本です。

この記事では、ファーストビューに何を入れればいいかを、お店の目線で書きます。
写真の選び方、スマホでの見え方、「サイズ」の考え方、ありがちな失敗、自分のサイトで確かめる方法まで、表でまとめました。

ファーストビューとは

ファーストビューは、ホームページを開いたときに、スクロールせずに見える範囲のことです。
新聞の一面で、折り目より上に見える部分にたとえられることもあります。

ホームページを開いた人は、最初の画面を見て、読み進めるか、閉じて別のお店を探すかを決めます。
ここで「自分が探していたお店だ」と分からなければ、下に良いことが書いてあっても、そこまで読み進めてもらえないことがあります。

似た言葉がいくつかあるので、整理しておきます。

制作会社と話すときは、「ファーストビュー＝最初の画面全体」「メインビジュアル＝その中の写真」と分けておくと、話がかみ合いやすくなります。

開いてすぐ伝わればいい3つのこと

お店のホームページのファーストビューに、たくさんの情報は要りません。
まず次の3つが伝わるかを考えてください。

アドレスバー

お店の写真（主役は真ん中） ① 伊勢市の小さな美容室 ② 駅から徒歩5分 ③ LINEで予約する

ここまでが最初の画面。この下は指を動かさないと見えない

営業時間・定休日・こだわりの説明など

店名やロゴはもちろん入れますが、店名だけで何の店か分かるとは限りません。
初めて見る人の目線で、「店名を知らなくても伝わるか」を確かめてください。

営業時間や定休日、こだわりの説明は、ファーストビューのすぐ下に置けば十分です。
全部を最初の画面に詰めると、文字が小さくなって、かえって何も伝わらなくなります。

写真の選び方

メインビジュアルの写真は、見た人が「何の店か」を想像できるものを選びます。
雰囲気の良さより、中身が分かることを先に考えてください。

最後の行は見落とされがちです。
パソコンでは横長に見えている写真も、スマホでは左右が切り取られて、真ん中だけが映ることがよくあります。
写真を渡すときは、主役が中央に写っているものを選ぶと安心です。

人の顔が写る写真を使うときは、写っている方の了解を取ってください。
お客様が写り込んでいる写真は避けるほうが無難です。

スマホでの見え方は、パソコンと別物

お店を探すとき、スマホで検索してそのままホームページを開く人は少なくありません。
ところが、ファーストビューの確認はパソコンの画面だけで済まされがちです。

スマホでは、見出しを短くして、ボタンを最初の画面に入れることを優先してください。
スマホに合わせた作りそのものについては、ホームページのスマホ最適化とはとレスポンシブ対応とはに書いています。

ファーストビューのサイズは決まっている？

「ファーストビューのサイズは何pxですか」と聞かれることがありますが、決まった1つの数字はありません。
スマホもパソコンも、機種や画面の設定、ブラウザの種類によって、見える範囲が変わるからです。
同じスマホでも、アドレスバーが出ているときと隠れたときで、見える高さが変わります。

そのうえで、作るときの考え方として、一般的な目安を挙げておきます。

ここでのpxは、画面の画素数そのものではなく、ホームページを作るときに使う単位です。
同じ機種でも、カタログに載っている解像度の数字とは一致しません。

大事なのは数字を覚えることより、小さめの画面で開いても3つのことが見えるかです。
制作会社には「何pxで作りますか」より、「小さいスマホで開いたとき、ボタンは最初の画面に入りますか」と聞くほうが、話が早く進みます。

ありがちな失敗と直し方

お店のホームページでよく見かけるファーストビューの失敗を、直し方と一緒にまとめました。

表のはじめの3つ（大きな写真だけ・スライダー・文字が写真に埋もれる）は、デザインを良くしようとした結果として起きやすい失敗です。
見た目の格好よさと、伝わりやすさは別のものとして考えてください。

自分のサイトで確かめる方法

今のホームページのファーストビューは、特別な道具がなくても確かめられます。
スマホを1台手に持って、次の順に見てください。

確かめた結果、3つのうち1つでも欠けていれば、直す価値があります。
写真や見出しの入れ替えで済むこともあります。
どこをどう直せばいいか迷う場合は、今のホームページのURLを送っていただければ、最初の画面を見て、手直しで済むか、作り直したほうがよいかをお答えします。

全体が古くなっている場合の判断は、ホームページが古いとどうなる？にまとめています。

当社のファーストビューで変えたこと

当社のホームページ制作のトップページでも、2026年10月に、ファーストビューの見出しの下にある一文を書き換えました。
変えたのはこの一文だけです。

書き換えたのは、前の文を読み返して、AIが書いたような決まり文句に聞こえると判断したためです。
「新しい発注の形」は、何をしてくれるのかが読み取りにくい言葉でした。
後の文では、何をするかを具体的に書き、「見てから決めてください」で次にしてほしいことを伝えています。
その下には「まずは無料デモから」のボタンを置いています。

ファーストビューは、言葉で説明されるより、自分のお店の名前が入った画面をスマホで見るほうが、良し悪しを判断しやすくなります。
当社では契約の前に、お店の名前を入れたデモサイトを無料で作っています。
写真がまだなくても、フリー素材で形にできます。
デモを見て、合わないと思えば断っていただいて構いません。

制作の進め方はご利用の流れ、プランごとの内容と料金は料金プランに載せています。

最初の画面の見出しに置く一文の作り方は、ホームページのキャッチコピーの作り方にまとめています。

よくある質問

Q. ファーストビューとトップページは同じものですか？

違います。
トップページはホームページの入口になる1ページ全体で、ファーストビューはそのページを開いてすぐ見える範囲だけを指します。
下層のページにも、それぞれファーストビューがあります。

Q. ファーストビューに動画を使ってもいいですか？

使えますが、何の店か分かる映像であることと、表示が重くならないことが条件です。
動画の上に見出しやボタンを置くなら、文字が読めるかをスマホで確かめてください。

Q. 写真が手元にありません。ファーストビューは作れますか？

作れます。
はじめはフリー素材で形にして、あとからお店の写真に差し替える進め方もあります。
ただ、何の店か伝わりやすいのはお店自身の写真なので、公開までに1枚は用意できると安心です。

Q. スマホとパソコンで、ファーストビューの中身を変えてもいいですか？

変えて構いません。
スマホでは見出しを短くする、写真を縦長に切り替える、といった調整は珍しくありません。
ただし、伝える3つのこと（何の店か・どこか・何をしてほしいか）と大事な情報は省かず、スマホでもパソコンでも同じ内容が読めるようにしてください。

Q. ファーストビューだけ直すこともできますか？

できることがあります。
見出しの文や写真の入れ替え、ボタンの追加なら、ページ全体を作り直さずに済むことがあります。
まずは今のホームページを作った会社に、どこまで直せるかを聞いてみてください。
連絡が取れない、作った会社がもうない、という場合は、当社にURLを送っていただければ、最初の画面を見てお答えします。

まとめ

ファーストビューは、お店の入口の看板のようなものです。
通りがかった人が、看板を見て何の店か分からなければ、扉を開けてはもらえません。
自分のお店ならどんな最初の画面になるか見てみたい、という方は、無料のデモからお気軽にご依頼ください。