ウェブサイト（ホームページ）の訪問者は、そのウェブサイトに目を通す意味があるか、訪問直後の一瞬で判断します。そのため、訪問直後にパソコン画面内に表示されるファーストビューで「目を通す意味あり」「自分にとって価値がありそう」と判断してもらわなければ、競合ウェブサイトとの比較対象候補にすらならずに敗退、という厳しい結果を招いてしまいます。
ファーストビューに何の情報をどの大きさで配置するかによって、営業ツールとしてのウェブサイトを軌道に乗せられるかが、大きく左右されます。
※公開から数年を経過している記事のため、触れている構造などが時代に合わなくなっている箇所があります。
トップページで検討したい３つの典型的なファーストビュー
ここでは、士業ウェブサイトのトップページで比較的反応を得やすい典型的な３つのファーストビューのパターンを紹介します。
ヘッダーに配置する画像に、どんな情報を落とし込んでいけばよいか悩んでいる士業さんは、まず以下いずれかのパターンを活用できないか、検討してみるのがスムーズかと思います。
１．シンプルなパターン
できるだけシンプルにファーストビューのコンテンツを配置するなら、以下のようなパターンで組むことになります。
念のため最初に触れておきますが、画像の例はかなり簡略化したものになっています。画像に「お困りの方へ」と書いてあっても、実際そう書かなければならないわけではなく、訪問者の立場からキャッチコピーを組むという例示のひとつにすぎません。士業の資格や事務所、業務内容ごとに適切なアレンジを要します。
シンプルではありますが、
- 士業事務所の主張ではなく、訪問者の立場からキャッチコピーが始まっている
- 「誰の」「どんな悩みに」「どんな人が」「いくらで」「どのくらいの期間で」対応・解決してくれるのか、必要最低限の情報が提示されている
- 相談・依頼するための連絡先もファーストビューで把握できる
（電話番号がわかりやすい大きさで配置されている）
といった、訪問者が最初に把握したい要素をほぼ押さえた内容・配置になっていることから、「ここも検討候補に入れておこう」と思ってもらいやすくなります。
料金や日数に関しては、業務の規模や金額が小さい場合は掲載してしまったほうが良いのですが、この部分は状況に応じて表示する、しないを検討したい箇所です。
ウェブ上で料金を大きく目立たせると安売り競争に巻き込まれる危険もありますので、業務内容や競合の状況に応じた程度問題になります。
「特徴」と書かれた部分は、士業事務所さんごと、業務ごとの特徴（長所）を列挙する部分ですが、コピーからの流れができているなら「選ばれる理由」として配置することも考えられます。
あるいは、サービスの特徴ではなく訪問者がサービスを利用することでどのようなメリットが得られるのか、その内容を記載できるなら、そのほうがベターです。
業務特化型ウェブサイトの立ち上げや開業当初に活用しやすい
シンプルなパターンは、案を練るのにそれほど時間を要しません。
そのため、業務特化型ウェブサイトを早期に立ち上げたいときは、いったんこのパターンで作ってしまうのも手です。また、開業当初に業務特化型ウェブサイトを公開する場合にも、経験不足によるコンテンツ準備の困難を生じにくいことから、活用しやすいパターンといえます。
もし士業さんの写真が怖い雰囲気のものであったり、証明写真のように正面向きで無表情なものであるなら、電話番号の横に配置しないほうがよいです。「電話したらこの怖い人につながるのか……。」と躊躇されてしまっては、写真を配置することが逆効果になってしまいます。
おすすめできないシンプルなファーストビュー
逆に、こう作ってしまうと受任率を上げるのがむずかしい、おすすめできないシンプルなファーストビューの典型は、以下のようなものになります。
まだ全くの初対面の人に対して、フォローすることもなく最初から「お任せください！」と主張から入ってすぐサービス紹介につなげてしまうのは、訪問者に拒絶反応を起こさせやすいパターンです。士業は国家資格者というだけでも、相談しにくい雰囲気を持っているということも忘れないようにしてください。
（より詳しくは、士業がホームページを活用するために持っておきたい２つの意識をご参照ください）
同じく、初対面で士業さんの写真をドーンと置くことも、関係性を構築できていない段階では知らない人への不信感を与えてしまう危険があります。
そして上記パターンでは、もし仮に興味を持ってくれた訪問者が存在しても、連絡先がひと目でわかりにくいため、もしリスティング広告を活用して急ぎの見込み客を誘導する場合には、最終的な反応までつなげにくい可能性もあります。
２．業務切り分けパターン
１つの業務特化型ウェブサイトであっても、訪問者のおかれた状況などに応じて、早めにいくつかの業務に切り分けてしまいたいというニーズもあるかと思います。
このようなときは、ファーストビューで各業務への切り分け（ボタン設置）を配置することも多いですが、その場合の典型的パターンは以下のようになります。
おすすめできない業務切り分けパターン
こちらもご参考までに、反応率の向上が難しいと思われる、おすすめできないパターンを紹介してみます。
キャッチコピーが士業事務所側からの主張だけで終わっているのは、１つめのおすすめできないパターンと同様です。加えて、切り分け先の各業務ボタンについても、訪問者の立場ではなく士業事務所側の都合で「○○に関する業務」と見出しがついてしまっています。
結果、ファーストビューに表示される情報が、最初から最後まで士業事務所側の主張のみで終わっていることから、よほど配置している写真から相談しやすい人柄がにじみ出ているなどしない限り、訪問者の共感は得にくい状況といえるでしょう。
３．ランディングページ的なパターン
１枚もののチラシのように、トップページ（ランディングページ）でほとんどの情報を提供してしまうタイプのウェブサイトでは、ファーストビューは以下のように途中で切れているほうが、下に情報が続いていることが把握しやすいため目を通してもらいやすくなります。
この配置を採用する場合、各パソコンのモニターサイズ（解像度）によってどこで切れるかはまちまちですから、ヘッダーに配置するメイン画像直下の画像（つまり意図的に途切れさせたい画像）は、縦を大きめに作るほうがスクロールを促しやすいものになります。
フックとなって下にスクロールしてもらうことを重視する
このランディングページ型（１枚もの）でウェブサイトを作るときは、ヘッダーのメイン画像では敢えて電話番号や写真を配置せず、より訪問者の気持ちをフォローするコピーを重視して組むパターンも考えられます。
これは、１つめや２つめに挙げたパターンとは異なり、ファーストビューですべての情報を提示しつくしてしまうことにこだわらずとも、ヘッダー画像が訪問者に強い印象を与え、その後の滞在のフックとして機能すれば、それで十分だからです。
おすすめできないランディングページ的なパターン
このパターンにおいて反応率を上げにくい典型的なものとしては、以下のようなファーストビューがあります。
画面内にきっちりと情報が収まっていることから、訪問者は下へウェブサイトが続いていることを認識しにくく、ランディングページ型で作りこんでもスクロールしてもらえない可能性が高くなります。
画像でいえば、電話番号より下の部分に良質のコンテンツをいくら配置したところで、そこに至る前に訪問者の多くが離脱してしまうため、意味がなくなってしまうのです。
また、ランディングページ型でウェブサイトを制作する場合、
- 情報の取捨選択
- 下方向へのスムーズな流れ
以上２点の重要度が増します。
上の画像のように「あれもこれも伝えたい！」「書いておかないと不安」と、なんでも掲載してしまうと、ファーストビューでの情報量が多くなりすぎて、訪問者に「読むのが面倒そう」「わかりにくそう」との思いを抱かせてしまいます。結果、訪問直後の離脱に繋がりかねません。
「書いてあるからわかるだろう」は通用しない
以上、ファーストビューの典型的な配置を、３つのパターンに分けて紹介してみました。「ここはおすすめできないパターンに陥っているかも」「この部分は、より効果的な方法で実現できている」など、貴事務所ウェブサイトの再確認に活用いただければ幸いです。
ウェブサイトはスクロールやクリックを要する
紙媒体のチラシであれば、手に取った人は気の向くまま好きなところから目を通すことができますから、配置はそれほど気にせずとも目的を達成できることも多いでしょう。しかし、ウェブサイトは一番上からスクロール（またはクリック）しなければ、先を読むことができない構造になっています。
そのため、ウェブサイトを営業ツールとして活用するのであれば、「（ここを見れば）書いてあるからわかるだろう」は通用しません。
何の情報をどこに、どれくらいのバランスで、どの順番で配置することが効果的なのか。各ウェブサイトの構造や目的にあわせて個別具体的に検討し、訪問者が直帰してしまわないよう、ファーストビュー内のコンテンツを選別することが大切です。
IWAMOTO
最新記事 by IWAMOTO (全て見る)
- 【制作事例】東京都世田谷区の法律事務所様（総合サイト） - 2023年11月13日
- 【制作事例】宮城県仙台市の税理士法人様（総合サイト） - 2023年11月13日
- 【制作事例】東京都千代田区の社会保険労務士法人様（助成金） - 2023年11月11日
