ホームページのファーストビュー、何を伝える？写真・コピー・ボタンの決め方

ホームページを開いたとき、スクロールする前に見える範囲を「ファーストビュー」と呼びます。ここでは、どんな仕事をしているか、自分に関係があるか、次にどこを見ればよいかが伝わることを大切にしたいと考えています。

大きな写真と短いコピーは、会社の空気感を伝える入口になります。ただ、印象的な言葉だけでは事業の内容が分からないこともあります。会社・店舗・個人事業のサイトを準備する方へ、コピー、説明、写真、ボタンを一組で考える方法を紹介します。

1. キャッチコピーと事業の説明に、別の役割を持たせる

「未来をつくる」「想いをカタチに」といった言葉に、会社の姿勢を込めることはできます。一方、その言葉だけでは、何を頼める会社なのかまでは伝わりません。キャッチコピーを全部説明文に変えるのではなく、近くに具体的な事業の説明を添えてみてください。

説明文に使う材料は、扱う商品・サービス、利用する人、相談できる場面です。専門用語を並べる前に、初めて見る人が「私の探しているものと関係がありそう」と判断できる言葉を選びます。対応地域や条件を入れる場合も、現在の実態を確認できる範囲にとどめます。

一つのコピーで四つの役割を全部担おうとすると、言葉が長くなりがちです。逆に、写真だけに説明を任せると、見た人によって仕事の内容が違って伝わることがあります。それぞれの役割が重なりすぎていないか、並べて確認します。

2. 同じ仕事でも、言葉の組み合わせで伝わり方が変わる

次は、商品写真を撮影する事業を想定した仮の例です。大きな言葉と、小さな説明をセットにする考え方を示しています。

コピーには大切にする姿勢を残し、説明文で仕事内容を確かめられるようにしています。相談につなげたいからといって、すべての訪問者にすぐ問い合わせを求める必要はありません。まず何が頼めるかを知りたい人には、その説明へ進める入口も用意できます。

企業向けの業務支援なら「何の業務をどこまで支えるか」、店舗なら「何を選べる店か」といった説明に変わります。写真の雰囲気だけを参考サイトに合わせる前に、自社の場合の四つの欄を埋めてみましょう。

3. 写真は、文字を置いた状態とスマホの切り抜きまで見る

横長の写真をパソコンで見たときは、人物や商品と文字がきれいに並んでいても、スマートフォンの縦長の画面では端が切れることがあります。写真単体の良し悪しだけでなく、実際に使う文字の量と画面幅を合わせて確認します。

• 見せたい商品や仕事の場面が、切り抜き後にも残っているか。
• 写真の明るい場所や細かな模様に、文字が重なって読みにくくなっていないか。
• 小さな画面で、コピーと説明が不自然な位置で分断されないか。
• 文字を写真の外へ配置した方が、写真と説明の両方を見やすくできないか。

写真に文字を重ねる方法、写真と文章を左右に分ける方法、スマホでは文章を上に置く方法など、組み方には選択肢があります。写真の魅力を残しながら説明を読める形を探します。色の組み合わせの確認は、ホームページの配色の決め方で詳しく扱っています。

イメージ画像は雰囲気を伝える材料ですが、実在する店舗・商品・設備の写真と誤解されないように区別します。動画を使う場合も、再生されるまで仕事内容が分からない構成にせず、言葉で要点を示しておきます。動画が必要か迷ったら、会社紹介動画の企画の考え方も参考になります。

4. ボタンの言葉と、その先の内容を揃える

「詳しくはこちら」と書くだけより、「サービスの対応範囲を見る」「実績と仕事の進め方を見る」など、進んだ先で分かることを具体的に伝える方法があります。リンク先が問い合わせフォームなのに、資料をすぐ読めるような言葉にしないことも大切です。

まだ仕事内容を知らない人と、紹介で会社名を知り相談先を探している人では、必要な入口が違います。今回のトップページで主に迎えたい人を決め、目立たせる案内を選びます。すべてのリンクを同じ強さにせず、補助の入口はナビゲーションや次のセクションで探せるようにする考え方です。

押した先では、ボタンで約束した説明が見つかるか確認します。記事や実績を読んだ人が相談したくなったときには、そのページにも相談先が必要です。入口から連絡までの整理は、問い合わせと予約の案内の分け方につながります。

5. 一画面に詰め込まず、次の説明につなぐ

ファーストビューの範囲は、端末の画面サイズや文字の表示設定によって変わります。「この高さに全部入れる」と決めて文字を小さくするより、事業の要点と読む順番を保ちます。沿革、すべてのサービス、細かな条件まで、最初の一画面に収める必要はありません。

最初のコピーで気持ちに触れ、次の説明で扱う仕事が分かり、具体例や実績で確かめられる。その流れをページ全体でつくります。ブランドらしい余白や写真の大きさも、説明を読めることと一緒に考えたい要素です。

公開前に、三つの問いで確かめる

事業を詳しく知らない人に、最初の画面を見てもらい、次の三つを聞いてみてください。決められた秒数で正解させるテストではなく、何が伝わり、何が足りないかを見つけるための確認です。

1. 何の商品・サービスを扱う会社やお店だと思ったか。
2. どんな人が、どんな用事で相談できそうか。
3. もっと知りたいとき、次にどこへ進むか。

答えが想定と違ったら、すぐ写真を入れ替える前に、事業の説明が足りないのか、写真が別の印象を与えるのか、リンクの言葉が曖昧なのかを分けます。パソコンとスマホの両方で見て、実際にそのリンクをたどってみましょう。

GRAVIへ相談するときは、最初の画面と一言から

今のサイトのURLと、「何の会社か伝わりにくい」「雰囲気は好きだが相談先が分かりにくい」など、気になることを一つお知らせください。新しくつくる場合は、届けたい相手、扱う仕事、好きな雰囲気をメモにするところから始められます。

GRAVIは、整った説明と、その会社らしい表現の両方を考えます。一般的な構成も、まだ見せ方が決まっていないアイデアも、読み手に何が伝わるかを確かめながら具体化したいと考えています。コピー、写真、余白、案内を別々に飾るのではなく、同じ仕事の姿勢が伝わる入口を目指します。

ホームページ制作の内容、GRAVIのブランディングの考え方もご覧ください。原稿を準備する段階なら、仕事のメモから言葉をつくる方法も使えます。

参考：W3C WAIのWeb文章ガイド、Google 検索セントラルの読者を第一にしたコンテンツの指針（2026年10月19日確認）。明確な見出し・リンクと、訪問した人に役立つ内容を考える際の参考にしました。本記事の四つの欄と仮例は、GRAVIの制作上の提案です。