もくじ
ホームページを開いたとき、最初に目に入る画面。
「なんだか地味に見える」
「他社のサイトのほうが洗練されて見える」
と感じたことはありませんか？
ファーストビュー（FV）とは、ホームページを開いてスクロールする前に見える範囲のことです。
ファーストビューのデザインは、会社やお店の第一印象を大きく左右します。
ただ、見た目をおしゃれにすれば成果が出る、というわけではありません。
大切なのは、自社が一番伝えたいことに合った「型」を選び、写真・文字・余白を整えることです。
今回は、よく使われるファーストビューのデザインを10パターンに分けて、それぞれ向いている会社と、デザイナーが意識しているポイントをご紹介します。
ファーストビューのデザインは「型」から考える
ファーストビューのデザインというと、写真の美しさやキャッチコピーの言葉に目が行きがちです。
でも、私たちデザイナーが最初に考えるのは、画面の中で何を主役にするかです。
主役になりうるのは、大きく分けて次の3つです。
・写真・映像：雰囲気や世界観、人や場所の魅力を伝えたいとき
・言葉（キャッチコピー）：考え方やメッセージ、強みをはっきり伝えたいとき
・商品・サービスそのもの：何を売っているのか、何ができるのかを見せたいとき
どれを主役にするかで、選ぶべき「型」が変わります。
ファーストビューに何を載せるかという中身の話は、ホームページのファーストビューには何を載せる？伝えるべき5つのことで詳しくご紹介しています。
この記事では、それをどう見せるかに焦点を当てます。
写真・映像を主役にするファーストビュー5パターン
写真・映像を主役にするファーストビュー5パターン
1．写真全面型
画面いっぱいに写真を敷き、その上にキャッチコピーを重ねる、もっとも定番の型です。
・向いている会社：ホテル・旅館、飲食店、住宅・不動産、観光など、空間や景色そのものが魅力になる業種
・デザイナーが気をつけること：写真の上に文字を置くので、文字が読める明るさの場所を選ぶか、写真に薄く暗さをかけて読みやすくします。スマホでは画面が縦長になるため、写真の左右が切れても主役が残る構図かを確認します。
2．人物を大きく見せる型
社員や代表者、お客様の写真を大きく配置する型です。
人の顔や表情には目が向きやすく、「誰がやっているのか」という安心感を伝えられます。
・向いている会社：士業、医療・介護、教育、採用サイトなど、人柄や信頼が選ばれる理由になる業種
・デザイナーが気をつけること：人物の視線の先にキャッチコピーを置くと、見る人の目線も自然とコピーに向かいます。素材写真よりも、実際の社員の写真のほうが伝わることが多いです。
3．左右分割型
画面を左右に分け、片方に写真、もう片方にキャッチコピーやボタンを置く型です。
写真と文字がぶつからないので、どちらも読みやすいのが特長です。
・向いている会社：伝えたいメッセージと見せたい写真が両方ある会社、BtoBのサービス、「法人向け／個人向け」など2つの入口がある会社
・デザイナーが気をつけること：スマホでは左右が上下に並び替わります。どちらを上に出すかまで決めておくことが大切です。
4．動画背景型
背景に短い動画を流す型です。
工場の様子、料理ができあがる瞬間、施設の雰囲気など、写真では伝わりにくい「動き」を見せられます。
・向いている会社：製造業、飲食、イベント・エンターテインメント、空間づくりに強みがある会社
・デザイナーが気をつけること：動画はデータが重くなりやすく、表示が遅くなる原因になります。短く、音なしで、ループしても違和感のない映像を選びます。動画が読み込まれるまでの代わりの画像も用意しておきます。
5．スライドショー型
複数の写真が自動で切り替わる型です。
複数の事業や商品を紹介したい会社でよく使われます。
・向いている会社：事業や店舗が複数ある会社、季節ごとに見せたいものが変わるお店
・デザイナーが気をつけること：切り替わるたびに伝える内容が変わると、どれも印象に残りにくくなります。キャッチコピーは固定にして、写真だけを切り替えるのがおすすめです。
写真選びのコツは、ホームページ制作で失敗しない写真選び｜伝わるサイトを作るポイントもあわせてご覧ください。
言葉・イラストを主役にするファーストビュー3パターン
6．タイポグラフィ型
写真を使わず、または控えめにして、大きな文字そのものをデザインの主役にする型です。
タイポグラフィとは、文字の書体や大きさ、配置で見せるデザインのことです。
・向いている会社：考え方や理念で選ばれたい会社、デザイン・クリエイティブ系の会社、良い写真素材がまだない会社
・デザイナーが気をつけること：伝えるメッセージを1つにしぼることが前提です。書体選びで印象が大きく変わるので、会社の雰囲気に合う書体を選び、文字と文字の間隔まで細かく整えます。
7．イラスト型
オリジナルのイラストをメインビジュアルにする型です。
写真では表現しにくいサービスの仕組みや、やわらかい雰囲気を伝えられます。
・向いている会社：IT・アプリなど形のないサービス、子ども・ファミリー向け、親しみやすさを大切にしたい会社
・デザイナーが気をつけること：イラストのタッチが、そのまま会社のイメージになります。ファーストビューだけでなく、サイト全体やパンフレットでも同じタッチで使えるかを考えて描き起こします。
8．余白を広くとるミニマル型
画面の余白を広くとり、小さめの写真やロゴ、短いコピーだけを置く型です。
情報を減らすことで、上品さや落ち着き、高級感が生まれます。
・向いている会社：高価格帯の商品、美容・ファッション、建築・インテリア、ブランドイメージを大切にしたい会社
・デザイナーが気をつけること：情報が少ない分、「何の会社か」が伝わらないことがあります。小さくても、何を提供しているかが分かる一言は必ず入れます。
商品・情報を主役にするファーストビュー2パターン
9．商品・画面を見せる型
商品の写真や、アプリ・システムの画面をパソコンやスマホの枠に入れて大きく見せる型です。
「何ができるのか」がひと目で分かります。
・向いている会社：メーカー、ネットショップ、ソフトウェア・アプリの会社
・デザイナーが気をつけること：商品の良さが伝わる角度や、画面のどの部分を見せるかを選びます。画面の文字が小さすぎて読めない場合は、伝えたい部分だけを拡大して見せることもあります。
10．情報まとめ型
キャッチコピーに加えて、実績の数字、受賞歴、主なサービスの入口などを、ファーストビューの中にコンパクトに並べる型です。
・向いている会社：問い合わせや資料請求を増やしたい会社、選ばれる理由を数字で示せる会社、ランディングページ
・デザイナーが気をつけること：情報を詰め込みすぎると、どこを見ればよいか分からなくなります。一番伝えたいキャッチコピーを最も大きく、ほかの情報はその下に整理して並べ、強弱をはっきりつけます。数字は出典や時点も添えて正確に示します。
まだまだある！ファーストビューのデザイン＋10パターン
ここまでの10パターンは、よく使われる基本の型です。
ほかにも、見せ方を少し変えた型がたくさんあります。
ここからは、さらに10パターンをご紹介します。
11．斜め・変形レイアウト型
写真や色の面を斜めに切ったり、あえてずらして重ねたりする型です。
まっすぐな配置よりも、勢いや動きが感じられます。
・向いている会社：スポーツ・フィットネス、イベント、若い世代に向けたサービスなど、元気さや躍動感を伝えたい会社
・デザイナーが気をつけること：角度や重なりを増やしすぎると、落ち着きのない印象になります。斜めにする要素は1〜2か所にしぼり、文字はまっすぐ読めるように置きます。
12．コラージュ型
大きさの違う複数の写真を、重ねたり散らしたりして1枚の絵のように見せる型です。
1枚の写真では伝えきれない、雰囲気や活動の幅を表現できます。
・向いている会社：雑貨店やカフェ、地域のイベント、活動内容が幅広い団体など、にぎわいや楽しさを伝えたい会社
・デザイナーが気をつけること：写真の色味や明るさをそろえないと、まとまりのない印象になります。どの写真を一番大きく見せるかを決め、主役をはっきりさせます。
13．グリッド・タイル型
写真や商品を、格子状にきっちり並べて見せる型です。
たくさんの写真を整然と見せられるので、品ぞろえや実績の多さが伝わります。
・向いている会社：アパレル、飲食のメニュー紹介、制作実績を見せたいデザイン・建築の会社
・デザイナーが気をつけること：写真が並ぶだけだと、何の会社かが伝わりにくくなります。キャッチコピーやロゴを置く場所をきちんと確保し、写真の切り抜き方や大きさをそろえます。
14．色面型
写真を使わず、会社のブランドカラーなどの色を大きく敷いて見せる型です。
色そのものが、会社の印象として記憶に残りやすくなります。
・向いている会社：ブランドカラーがはっきり決まっている会社、新しく立ち上げたサービス、写真素材がまだそろっていない会社
・デザイナーが気をつけること：色の面積が大きいので、選ぶ色がそのまま第一印象になります。背景の色と文字の色の差を十分にとり、読みやすさを確認します。
15．中央配置型
ロゴやキャッチコピーを画面の真ん中に置き、左右対称に整える型です。
安定感があり、堂々とした印象になります。
・向いている会社：老舗のお店、ホテル・式場、伝統や格式を大切にしたい会社
・デザイナーが気をつけること：中央に置いた文字が長いと、左右に広がって読みにくくなります。コピーは短くし、ボタンなどほかの要素も中心線にそろえて配置します。
16．縦書き型
キャッチコピーを縦書きで配置する型です。
日本語ならではの見せ方で、和の雰囲気や落ち着きが生まれます。
・向いている会社：旅館、和食店、和菓子店、寺社、日本の伝統工芸に関わる会社
・デザイナーが気をつけること：縦書きは長い文章には向かないので、短いコピーに使います。スマホでは文字が小さくなりやすいため、行数や文字の大きさを画面に合わせて調整します。
17．動く文字・スクロール演出型
キャッチコピーが一文字ずつ現れたり、スクロールに合わせて写真や文字が動いたりする型です。
見る人の目を引きつけ、印象に残りやすくなります。
・向いている会社：デザイン・映像などクリエイティブ系の会社、新商品やキャンペーンの特設ページ
・デザイナーが気をつけること：動きが長いと、肝心の内容を読む前に離れてしまう人も出てきます。動きは短く控えめにし、動きが止まった状態でも内容が伝わるようにします。
18．立体・3D型
商品や建物、ロゴなどを立体的に見せる型です。
回したり、角度を変えたりする表現で、ものの形や質感を伝えられます。
・向いている会社：メーカー、住宅・建築、新しい技術や製品を紹介したい会社
・デザイナーが気をつけること：立体表現はデータが重くなりやすいため、表示の速さを必ず確認します。古いスマホでも問題なく見られるか、代わりの画像を用意するかまで考えます。
19．検索・予約フォーム型
ファーストビューの中に、検索窓や予約フォームを大きく置く型です。
サイトに来た人が、すぐに探す・予約するといった行動に移れます。
・向いている会社：不動産の物件検索、ホテル・旅館の宿泊予約、求人サイト、ネットショップ
・デザイナーが気をつけること：入力する項目が多いと、ファーストビューがフォームで埋まってしまいます。最初に見せる項目は最小限にし、背景の写真やコピーで「どんなサービスか」も伝わるようにします。
20．手描き・アナログ素材型
手描きの線や文字、紙の質感、スタンプなど、手作業の雰囲気がある素材を使う型です。
ぬくもりや親しみやすさ、作り手の顔が見える印象を伝えられます。
・向いている会社：パン屋やカフェ、雑貨・ハンドメイド、保育園・幼稚園、地域に根ざしたお店
・デザイナーが気をつけること：手描きの要素を増やしすぎると、情報が読み取りにくくなります。キャッチコピーや店名など大事な文字は読みやすさを優先し、手描きはアクセントとして使います。
ファーストビューの型は、まだまだたくさんあります
ここでご紹介した20パターンも、ほんの一部です。
実際のホームページでは、いくつかの型を組み合わせたり、会社に合わせてアレンジしたりして、数えきれないほどの見せ方が生まれています。
型はあくまで考えるための出発点です。
自社の強みや伝えたいことに合わせて、組み合わせ方まで考えてみてください。
自社に合うファーストビューのデザインを選ぶ判断基準
10パターンの中から、どれを選べばよいのでしょうか。
私たちが提案するときは、次の4つの質問から考えます。
質問1：一番伝えたいのは「雰囲気」「言葉」「商品」のどれか
・雰囲気・世界観 → 写真全面型、人物型、動画背景型、ミニマル型
・言葉・考え方 → タイポグラフィ型、左右分割型
・商品・機能 → 商品・画面を見せる型、情報まとめ型
質問2：使える写真や映像はあるか
写真全面型や人物型は、写真の質がそのまま第一印象になります。
撮影の予定がない、良い写真がない場合は、タイポグラフィ型やイラスト型のほうがきれいに仕上がることがあります。
質問3：お客様はどこから見ているか
スマホから見る人が多いサイトでは、スマホの縦長の画面でどう見えるかを優先して型を選びます。
パソコンでは美しい横長の写真も、スマホでは主役が切れてしまうことがあります。
質問4：見た人に、次に何をしてほしいか
問い合わせ、来店予約、資料請求、採用への応募など。
次の行動がはっきりしているなら、ボタンをファーストビューの中に置きやすい型を選びます。
デザイナーが意識する写真・文字・構図のポイント
どの型を選んだ場合でも、共通して大切なポイントがあります。
キャッチコピーは短く、一番大きく
ファーストビューで一番大きな文字は、キャッチコピーです。
長い文章は読まれにくいので、短く言い切ります。
補足したいことは、小さめのサブコピーで添えます。
コピーの考え方は、短冊のようにシンプルに。伝わるキャッチコピーの考え方もご覧ください。
視線の流れを意識して配置する
横書きのホームページは、ふつう左上から読み始められます。
ロゴ、キャッチコピー、サブコピー、ボタンと、読んでほしい順に並べていくと、迷わず目で追えるファーストビューになります。
余白で「主役」を引き立てる
要素と要素の間を詰めすぎると、全部が同じくらいの重さに見えてしまいます。
主役の周りに余白をとることで、見る人の目が自然と主役に集まります。
色は写真と文字の両方を見て決める
写真の上に文字を置くときは、写真の色に負けない文字色を選びます。
ボタンの色は、サイト全体の中でボタンにだけ使う色にすると、押す場所がすぐに分かります。
パソコンとスマホ、両方で確認する
デザインを確認するときは、パソコンだけでなく、必ずスマホの実機でも見ます。
文字が写真の大事な部分に重なっていないか、ボタンが画面に収まっているかをチェックしましょう。
まとめ｜ファーストビューのデザインは「主役」を決めて型を選ぶ
ファーストビューのデザインのポイントをふり返ります。
・まず「写真・映像」「言葉」「商品」のどれを主役にするかを決める
・主役と手持ちの素材に合わせて、10パターンから型を選ぶ
・お客様がスマホで見るかパソコンで見るか、次に何をしてほしいかも判断材料にする
・キャッチコピーを一番大きく、余白と視線の流れで主役を引き立てる
まずは、自社のホームページを開いて「この画面の主役は何か」を一言で言えるか、確かめてみてください。
ファーストビューのデザインにお悩みの方はTEMPRONTにお任せください
TEMPRONTでは、会社の強みやお客様像をお聞きしたうえで、写真の撮り方やキャッチコピーまで含めてファーストビューを設計しています。
「今のトップページの印象を変えたい」「どの見せ方が合うか分からない」といったご相談も歓迎です。
詳しくはウェブ制作のサービスページをご覧ください。
