ファーストビューのデザインのコツとは、開いた瞬間の画面だけで「誰の、何のサイトで、次に何をすればいいか」が伝わるように、要素を絞って大きさの差をつけることです。写真の美しさや動きの派手さは、その土台の上に乗る要素にすぎません。この記事では、Web制作会社としてサイトを作ってきた現場の基準をもとに、ファーストビューに入れる要素、レイアウトの型、見出しの書き方、写真と配色、スマホでの見え方、表示速度、公開前のチェックまでを順番に解説します。2つのデザイン案で迷ったときの比べ方も紹介します。

ファーストビューとは、開いて最初に見える画面のこと

ファーストビューは、ページを開いてスクロールせずに見える範囲のことです。パソコンなら横1280〜1920px・縦700〜900px前後、スマートフォンなら横360〜430px・縦640〜900px前後が目安になります。画面の大きさは人によって違うので、「この高さまでがファーストビュー」と1つに決めることはできません。制作の現場では、よく使われる画面サイズで実際に開いて確かめます。

最初の数秒で「読み進めるか」が決まる

検索や広告からやってきた人は、自分の探しているものがここにあるかを、ほとんど読まずに判断します。ファーストビューで「違うサイトに来たかもしれない」と感じさせると、どれだけ下に良い内容があっても見てもらえません。逆に、最初の画面で用件が伝われば、少し長いページでも読み進めてもらえます。

「かっこいい」より「わかる」が先

大きな写真に短い英語のコピーだけを置いたファーストビューは、雰囲気は出ますが、初めて来た人には何の会社なのかが伝わりません。ブランドの世界観を優先してよいのは、すでに名前を知っている人が多く訪れるサイトです。知らない人が多く来るサイトほど、まず「わかる」を優先します。

ファーストビューに入れる要素は5つ

迷ったら、次の5つがそろっているかを確認します。全部を大きく見せる必要はなく、優先順位をつけて大きさに差をつけることが大切です。

主役は1つに決める

見出し、写真、ボタンのどれを一番目立たせるのかを先に決めます。全部を目立たせようとすると、結局どこも目に入りません。ファーストビューは「いちばん大きいもの」「次に大きいもの」「小さいもの」の3段階に分けると、自然と視線の順番ができます。

ボタンは1つ、多くても2つ

「お問い合わせ」「資料請求」「電話する」「LINEで相談」と4つ並べると、どれを押せばいいか迷わせてしまいます。いちばん押してほしいものを色のついたボタンに、2番目を枠線だけのボタンにする、という形が基本です。電話番号は、ヘッダーの右上に置けば十分なことが多いです。

レイアウトの型は4つ

ファーストビューのレイアウトは、ほとんどが次の4つの型のどれかに当てはまります。業種と目的に合わせて選ぶと、大きく外すことはありません。

全面写真型

画面いっぱいに写真や動画を置き、その上に見出しを重ねる型です。飲食店・ホテル・住宅など、空気感が商品そのものになる業種に向いています。写真の上の文字は読みにくくなりやすいので、写真を暗くする・文字の後ろに帯を敷くなどの工夫が必要です。

左右分割型

左に見出しとボタン、右に写真やサービス画面のイメージを置く型です。士業・BtoBのサービス・SaaSなど、内容を言葉で伝えることが重要なサイトに向いています。文字が白い背景の上に乗るので、読みやすさを確保しやすいのが利点です。

文字主役型

写真を使わず、大きな文字と色だけで見せる型です。写真素材が用意できない場合や、言葉に強さがあるブランドに向いています。文字の大きさと余白で勝負するので、フォント選びの比重が大きくなります。日本語フォントの選び方は「Google Fontsのおすすめ日本語フォント」で紹介しています。

イラスト・図解型

イラストや図で世界観を伝える型です。子ども向け、医療・福祉、アプリなど、やわらかさや親しみやすさを出したいサイトに向いています。イラストのタッチがサイト全体の印象を決めるので、下層ページまで同じタッチで描けるかを先に確認しておきます。

キャッチコピーの書き方

ファーストビューの見出しは、デザインの一部であると同時に、いちばん読まれる文章です。短く、具体的に書くのがコツです。

「誰に」「何を」を入れる

「未来をつくる」「想いをカタチに」のような言葉は、どの会社にも当てはまってしまいます。「大阪の中小企業の、経理の確認待ちをなくす」のように、相手と内容が入ると、自分に関係があるかどうかをすぐに判断してもらえます。

2行以内に収める

パソコンで2行、スマートフォンで3〜4行に収まる長さが目安です。それ以上長くなる内容は、見出しの下の補足文に回します。改行の位置は、意味の切れ目で区切ると読みやすくなります。

見出しのすぐ下で補う

見出しで言い切れなかった「誰に向けたサービスか」「どんな実績があるか」は、すぐ下の1〜2行で補います。ここに数字（創業年、対応件数など）を入れると、信頼感が増します。ただし、事実でない数字や根拠のない「No.1」表記は使ってはいけません。

写真と配色のコツ

写真は「人」か「現場」か「商品」から選ぶ

フリー素材の、誰でもわかるきれいな写真は、どこかで見たことがある印象になりがちです。可能であれば、実際の社員・店内・施工現場・商品を撮影した写真を使います。素材写真を使う場合は、業種と雰囲気が合っているか、ほかの会社とかぶりにくいかを確認します。

文字が読めるかを最優先にする

写真の上に白い文字を置くと、写真の明るい部分で文字が読めなくなります。写真全体を少し暗くする、文字の後ろに半透明の帯を敷く、写真の暗い部分に文字を置く、のいずれかで対処します。背景と文字の明るさの差（コントラスト）が十分にあるかは、ブラウザの開発者ツールで確認できます。

色は3色までに絞る

ベースの色（背景）、メインの色（見出しやロゴ）、アクセントの色（ボタン）の3色に絞ると、まとまりが出ます。アクセントの色はボタンなど「押してほしい場所」だけに使うと、自然と視線がそこに向かいます。

スマートフォンでの見え方を先に決める

多くのサイトでは、パソコンよりスマートフォンから見る人のほうが多くなっています。パソコンのデザインを縮めるのではなく、スマートフォンでの見え方を同時に考えます。

縦に並べ替えたときの順番を決める

左右分割型は、スマートフォンでは縦に並びます。見出しが先か、写真が先かで印象が変わります。用件を早く伝えたいサイトは見出しを先に、雰囲気を伝えたいサイトは写真を先にします。

最初の画面にボタンが見えているか

スマートフォンでは、写真を大きくすると見出しやボタンが画面の外に押し出されがちです。開いた瞬間に、少なくとも見出しと1つ目のボタンの上端が見えている状態を目安にします。

表示速度とファーストビュー

どれだけデザインが良くても、表示されるまでに時間がかかれば見てもらえません。ファーストビューは、ページの中でいちばん早く表示されなければいけない場所です。

大きい画像は圧縮して、サイズを合わせる

全面写真型では、画像の大きさがそのまま表示の遅さにつながります。表示する大きさに合わせて書き出し、WebPなどの軽い形式にします。ファーストビューの画像には遅延読み込み（loading=”lazy”）を付けないことも大切です。遅延読み込みは、画面の外にある画像のための仕組みだからです。

動画は短く、軽く

動画を背景に置く場合は、10〜15秒程度の短いループにして、音は消しておきます。YouTubeを使う方法と自前の動画を使う方法の違いは「動画をファーストビューに自動再生ループで置く方法」で解説しています。動きの演出全般については「動きのあるWebサイトの作り方」も参考にしてください。

2案で迷ったときの比べ方

デザインの方向性を2案作ったものの、社内で意見が割れて決まらない、ということはよくあります。そのときは、次の手順で比べると、好みではなく「伝わるかどうか」で判断しやすくなります。

同じ大きさ・同じ画面で並べる

片方だけ大きなモニターで見ると、それだけで印象が変わります。2案を同じ画面サイズで書き出し、横に並べて見比べます。スマートフォンでの見え方も同じように並べます。

関係者以外の人に、5秒だけ見せる

作った本人や社内の人は、内容を知っているので判断が甘くなります。関係のない人に5秒だけ見せて画面を閉じ、「何のサイトだったか」「次に何ができそうか」を聞いてみます。答えが正確だったほうが、ファーストビューとして機能しています。

Webサイトデザインバトルで比べてみる

当社のサイトでは、Webサイトのファーストビューを2つ並べて、好きなほうを選ぶゲーム「Webサイトデザインバトル」を公開しています。多くの人が選んだサイトがランキングの上位に並ぶので、「選ばれるファーストビュー」の傾向を眺めるのにも使えます。

投票のあとには「サイトを見る」から実際のサイトを開けるので、ファーストビューだけでなく、その下のつながりも確かめられます。公開したばかりのため、いまは当社が制作した架空のサンプルが中心です。エントリーが増えて票が集まったら、上位に入ったファーストビューの共通点をこの記事に追記する予定です。

公開前のチェックリスト

ファーストビューを公開する前に、次の項目を確認します。

• ロゴ・社名が、パソコンでもスマートフォンでも読める大きさになっている
• 見出しを読めば、何の会社・店か、誰に向けたものかがわかる
• 行動ボタンが1つ（多くても2つ）で、背景から浮いて見える
• 写真の上の文字が、どの画面幅でも読める
• スマートフォンで開いた瞬間に、見出しとボタンの上端が見えている
• ファーストビューの画像が圧縮されていて、遅延読み込みが付いていない
• 写真・フォント・イラストの利用規約を確認している
• 事実でない数字や、根拠のない「No.1」表記がない

よくある失敗と直し方

スライダーで何枚も写真を切り替える

自動で切り替わるスライダーは、2枚目以降がほとんど見られません。伝えたいことが複数あるなら、ファーストビューは1枚に絞り、下のセクションで順番に見せるほうが確実に伝わります。

メニューの項目が多すぎる

ヘッダーに10項目以上並べると、文字が小さくなり、ファーストビューの主役を邪魔します。主要な5〜6項目に絞り、残りはフッターや下層ページのメニューに回します。

パララックスなど動きの演出が重い

スクロールに合わせて背景が動くパララックスなどの演出は、印象に残る一方で、端末によっては動きが重くなったり、iPhoneで効かなかったりします。詳しくは「パララックスとは？」で解説しています。

作ったサイトを試しにエントリーする

Webサイトデザインバトルには、ご自身が制作したサイトや自社・自店のサイトでエントリーできます。URLを入れるとファーストビューのスクリーンショットを自動で撮影し、当社で内容を確認したあと対戦に加わります。ほかのサイトと並べたときにどう見えるかを知る機会として使ってみてください。

名刺やロゴのデザインバトルもあります。ロゴの作り方は「選ばれるロゴデザインのコツ」、名刺は「選ばれる名刺デザインのコツ」で解説しています。

よくある質問

Q. ファーストビューの高さは何pxにすればいいですか？

画面の大きさは人によって違うので、決まった数字はありません。パソコンでは画面の高さいっぱい（100vh）にするか、少し下のセクションがのぞく高さにするのが一般的です。下に続きがあることが伝わるよう、次のセクションの一部を見せる作り方もよく使われます。

Q. 動画と写真、どちらがいいですか？

伝えたいものが「動き」そのもの（料理を作る様子、施工の工程など）なら動画、雰囲気や商品なら写真で十分です。動画は表示が重くなりやすいので、使う場合は短く軽くします。

Q. キャッチコピーは英語でもいいですか？

雰囲気づくりとして英語を使うのは構いませんが、日本語の補足を必ず入れます。英語だけだと、何のサイトなのかが伝わりにくくなります。

Q. ボタンの文言は何がいいですか？

「送信」「詳しくはこちら」より、「無料で相談する」「施工事例を見る」のように、押したあとに何が起きるかがわかる言葉にします。

Q. テンプレートのデザインのままでも大丈夫ですか？

テンプレートでも、写真・見出し・ボタンを自社に合わせて差し替えれば十分に機能します。ただし、同じテンプレートを使うほかのサイトと似た印象になるので、写真と見出しで違いを出すことが大切です。

Q. ファーストビューだけリニューアルすることはできますか？

できます。ページ全体を作り直さなくても、見出し・写真・ボタンの見直しだけで、印象が大きく変わることは珍しくありません。

まとめ

ファーストビューのデザインで大切なのは、「誰の、何のサイトで、次に何をすればいいか」が最初の画面だけで伝わることです。要素は5つ（ロゴ、見出し、補足、ボタン、メニュー）に絞り、主役を1つ決めて大きさに差をつけます。レイアウトは業種に合った型を選び、見出しは2行以内で具体的に書きます。スマートフォンでの見え方と表示速度も、デザインと同時に確認しましょう。2案で迷ったら、同じ画面で並べて、関係者以外の人に見てもらうのが確実です。

当社では、ファーストビューの見直しからサイト全体の制作まで承っています。名刺・ロゴ・Webサイトのデザインに関するご相談は、お問い合わせよりお気軽にお寄せください。