最初の3秒で決まる|ホームページのファーストビューに入れるべき要素と見直し方

「アクセス解析を見ると、それなりに人は来ている。でも問い合わせにはつながらない」——ホームページを持つ経営者の方から、よくいただくご相談です。原因はいろいろ考えられますが、意外と見落とされがちなのがトップページの一番上、開いた瞬間に目に入る部分です。ここが伝わっていないと、その下にどれだけ丁寧な内容を書いていても読まれないまま閉じられてしまいます。
ファーストビューとは、開いた瞬間に見えている画面のこと
ファーストビューとは、訪問者がホームページを開いてスクロールする前に見えている範囲を指します。パソコンなら画面上部の横長のエリア、スマートフォンなら縦に細長い一画面分です。呼び方は業界用語ですが、要するに「第一印象を決める場所」だと考えてください。
ここで意識したいのは、訪問者は最初から自社に興味を持っているわけではない、ということです。検索結果やSNSのリンクから偶然たどり着いた人が大半で、「自分に関係がありそうか」を短時間で判断しています。関係がなさそうだと感じれば、内容を読む前に戻るボタンを押します。スクロールは、訪問者が「読む」と判断した結果なのです。
ファーストビューの役割は売り込むことではなく、「ここは自分が探していた場所かもしれない」と思ってもらい、続きを読む理由をつくることです。
ファーストビューに入れたい3つの要素
盛り込みたいことは多いはずですが、限られた面積に全部を並べると、結局どれも印象に残りません。まずは次の3つに絞るところから始めるのがおすすめです。
1. 何をしている会社か(誰に向けた、どこの、何屋か)
最も大事なのがこれです。「株式会社◯◯へようこそ」だけでは、何の会社かは伝わりません。業種、対応エリア、対象となるお客様の3点が一言で分かる状態が理想です。たとえば「福岡市の戸建て専門リフォーム会社」「北九州の製造業向け 金属加工・小ロット対応」のように、業種と範囲を具体的な言葉にします。
社名やロゴだけを大きく置いたデザインは一見きれいですが、名前で選ばれる段階に至っていない会社ほど、「何屋か」を文字で書く必要があります。
2. 選ぶ理由になる一言(強みや、応えられる要望)
次に、その会社を選ぶ理由になる情報を短く添えます。創業年数、対応の速さ、専門分野の絞り込み、資格、施工実績の件数など、事実として書けることで構いません。「丁寧な対応」「お客様第一」といった、どの会社にも当てはまる言葉だけで終わらせないことがポイントです。比較検討している人には判断材料になりません。
自社の強みが言葉にしづらいときは、実際に選ばれた理由をお客様に聞いてみるのが近道です。社内で考えた強みと、選ばれた理由が違っていることは珍しくありません。
3. 次にどう動けばいいかの案内
興味を持ってもらえたときに迷わせないことも大切です。問い合わせ、見積依頼、電話、資料請求など、この会社に何を頼めるのかを分かる位置に置きます。文言も「送信」「Contact」ではなく「無料で見積もりを依頼する」「まずは相談してみる」のように、押した先で何が起きるか想像できる言葉にすると押しやすくなります。
ボタンを複数並べたくなりますが、同じ大きさで3つも4つも並ぶと選べません。最も取ってほしい行動を1つ決めて、それを目立たせ、他は控えめにするのが基本です。
よくある「伝わらないファーストビュー」と直し方
ご相談をいただくサイトでよく見かけるパターンを、直し方と合わせて整理しました。心当たりがないか、自社のトップページと見比べてみてください。
| よくある状態 | 起きていること | 直し方 |
|---|---|---|
| 大きな写真だけで文字がない | 雰囲気は伝わるが、業種も地域も分からない | 写真の上に業種と対応エリアの一文を重ねる |
| 抽象的なキャッチコピー | 「未来を創る」等では事業内容が想像できない | コピーは残し、下に事業内容の説明文を添える |
| スライドショーが自動で切り替わる | 読んでいる途中で切り替わり、内容が頭に残らない | 一番伝えたい1枚に固定し、他は下の段に回す |
| 文字が写真に溶けて読めない | 背景と文字色の明暗差が足りず、読む前に諦められる | 写真を暗くする、文字を濃い色にするなど明暗差をつける |
| お知らせが最上部を占めている | 初訪問の人に不要な情報が一等地を使っている | お知らせは2段目以降へ移し、最上部は事業紹介に |
確認はパソコンよりスマートフォンを優先する
個人のお客様が中心の事業では、スマートフォンからの閲覧が多数を占めることが一般的です。にもかかわらず、確認をパソコンだけで済ませてしまうケースが少なくありません。
スマートフォンでは画面が縦に細く、パソコンで横に並んでいた要素が縦に積み上がります。その結果、パソコンでは一画面に収まっていたキャッチコピーとボタンが、画面外に押し出されていることがあります。実機で開いて、スクロールせずに何が見えているかを確かめてください。
- スクロール前に業種と対応エリアが読み取れるか
- 問い合わせ手段が画面内、または画面下に固定で見えているか
- 文字が小さすぎず、拡大せずに読めるか
- 読み込みに時間がかかり、写真が出るまで白い画面になっていないか
表示の速さも第一印象に含まれます。この点はスマホ対応と表示速度の見直し方でも詳しく触れていますので、あわせてご確認ください。
キャッチコピーは「社内の言葉」を「お客様の言葉」に置き換える
文章づくりでつまずきやすいのが、社内で使い慣れた言葉をそのまま載せてしまうことです。業界の専門用語や自社の工法名は、社内では通じてもお客様には通じません。
手がかりは、普段お客様から実際に聞かれる言葉の中にあります。「雨漏りが心配で」「相続の相談がしたい」「小ロットでも作ってもらえますか」——問い合わせの電話やメールで使われている表現は、そのまま検索されている言葉でもあります。専門用語の見出しをこうした表現に置き換えるだけで、伝わり方は変わります。
なお、伝わりやすさを優先するあまり、事実と違うことや、根拠のない「地域No.1」「必ず◯◯できます」といった表現を書くのは避けてください。景品表示法の観点で問題になりますし、来店・相談の段階で期待とのずれが起きると、かえって信頼を損ないます。
まずは今のトップページを開いてみてください
ファーストビューの見直しは、写真の差し替えと文章の書き換えだけで済むこともあり、サイト全体を作り直すより手をつけやすい改善です。まずはスマートフォンで自社のトップページを開き、「知らない人がこの画面だけで何の会社か分かるか」を確かめてみてください。
WEB PREPAでは、福岡を中心に中小事業者・個人事業主の方のホームページ制作をお手伝いしています。見せ方の実例は制作実績、費用の目安は料金のご案内でご確認いただけます。どこを直せばよいか分からない段階のご相談でも構いません。無料でデザインを依頼するところから、お気軽にお声がけください。