ウェブサイト（ホームページ）の訪問者は、そのウェブサイトに目を通す意味があるか、訪問直後の一瞬で判断します。そのため、訪問直後にパソコンやスマートフォンの画面内に表示されるファーストビューで「目を通す意味あり」「自分にとって価値がありそう」と判断してもらわなければ、競合ウェブサイトとの比較対象候補にすらならずに敗退、という厳しい結果を招いてしまいます。
ファーストビューに何の情報をどの大きさで配置するかによって、営業ツールとしてのウェブサイトを軌道に乗せられるかが、大きく左右されます。
トップページで検討したい3つの典型的なファーストビュー
ここでは、士業ウェブサイトのトップページで比較的反応を得やすい典型的な3つのファーストビューのパターンを紹介します。
ヘッダー部分に、どんな情報を落とし込んでいけばよいか悩んでいる士業さんは、まず以下いずれかのパターンを活用できないか、検討してみるのがスムーズかと思います。
1．シンプルなパターン
できるだけシンプルにファーストビューのコンテンツを配置するなら、以下のようなパターンで組むことになります。
念のため最初に触れておきますが、画像の例はかなり簡略化したものになっています。画像に「お困りの方へ」と書いてあっても、実際そう書かなければならないわけではなく、訪問者の立場からキャッチコピーを組むという例示のひとつにすぎません。士業の資格や事務所、業務内容ごとに適切なアレンジを要します。
なお、図はパソコンの横長の画面を想定して描いています。スマートフォンでの見え方は、3つのパターンを紹介したあとで触れます。
シンプルではありますが、
- 士業事務所の主張ではなく、訪問者の立場からキャッチコピーが始まっている
- 「誰の」「どんな悩みに」「どんな人が」「いくらで」「どのくらいの期間で」対応・解決してくれるのか、必要最低限の情報が提示されている
- 相談・依頼するための連絡先もファーストビューで把握できる
（電話番号がわかりやすい大きさで配置されている）
といった、訪問者が最初に把握したい要素をほぼ押さえた内容・配置になっていることから、「ここも検討候補に入れておこう」と思ってもらいやすくなります。
料金や日数に関しては、業務の規模や金額が小さい場合は掲載してしまったほうが良いのですが、この部分は状況に応じて表示する、しないを検討したい箇所です。
ウェブ上で料金を大きく目立たせると安売り競争に巻き込まれる危険もありますので、業務内容や競合の状況に応じた程度問題になります。
「特徴」と書かれた部分は、士業事務所さんごと、業務ごとの特徴（長所）を列挙する部分ですが、コピーからの流れができているなら「選ばれる理由」として配置することも考えられます。
あるいは、サービスの特徴ではなく訪問者がサービスを利用することでどのようなメリットが得られるのか、その内容を記載できるなら、そのほうがベターです。
業務特化型ウェブサイトの立ち上げや開業当初に活用しやすい
シンプルなパターンは、案を練るのにそれほど時間を要しません。
そのため、業務特化型ウェブサイトを早期に立ち上げたいときは、いったんこのパターンで作ってしまうのも手です。また、開業当初に業務特化型ウェブサイトを公開する場合にも、経験不足によるコンテンツ準備の困難を生じにくいことから、活用しやすいパターンといえます。
もし士業さんの写真が怖い雰囲気のものであったり、証明写真のように正面向きで無表情なものであるなら、電話番号の横に配置しないほうがよいです。「電話したらこの怖い人につながるのか……。」と躊躇されてしまっては、写真を配置することが逆効果になってしまいます。
おすすめできないシンプルなファーストビュー
逆に、こう作ってしまうと受任率を上げるのがむずかしい、おすすめできないシンプルなファーストビューの典型は、以下のようなものになります。
図では、「○○なら△△事務所にお任せください！」「お客様の○○を解決いたします！」というコピーと大きな写真が並び、その下にサービス1から3の紹介が続いています。
まだ全くの初対面の人に対して、フォローすることもなく最初から「お任せください！」と主張から入ってすぐサービス紹介につなげてしまうのは、訪問者に拒絶反応を起こさせやすいパターンです。士業は国家資格者というだけでも、相談しにくい雰囲気を持っているということも忘れないようにしてください。
（より詳しくは、士業がホームページを活用するために持っておきたい２つの意識をご参照ください）
同じく、初対面で士業さんの写真をドーンと置くことも、関係性を構築できていない段階では知らない人への不信感を与えてしまう危険があります。
そして上記パターンでは、もし仮に興味を持ってくれた訪問者が存在しても、連絡先がひと目でわかりにくいため、もしリスティング広告を活用して急ぎの見込み客を誘導する場合には、最終的な反応までつなげにくい可能性もあります。
なお、「お任せください！」から入る形のほうが合う場合もあります。どのようなときかは、以下の記事で触れています。
2．業務切り分けパターン
1つの業務特化型ウェブサイトであっても、訪問者のおかれた状況などに応じて、早めにいくつかの業務に切り分けてしまいたいというニーズもあるかと思います。
このようなときは、ファーストビューで各業務への切り分け（ボタン設置）を配置することも多いですが、その場合の典型的パターンは以下のようになります。
図では、上から順に、訪問者の立場から始まるキャッチコピーと料金や日数、写真と電話番号が並び、その下に「○○でお困りの方」と書かれたボタンが3つ置かれています。それぞれの「詳しくはこちら」から、状況に合ったページへ進んでもらう形です。
行政書士を例に挙げるなら、建設業許可のウェブサイトで「はじめて許可を取りたい方」「更新の期限が近づいている方」「工事の種類を増やしたい方」といったボタンを並べるイメージです。訪問者は、自分に当てはまるボタンを押せば、自分向けの説明から読み始められます。
おすすめできない業務切り分けパターン
こちらもご参考までに、反応率の向上が難しいと思われる、おすすめできないパターンを紹介してみます。
キャッチコピーが士業事務所側からの主張だけで終わっているのは、1つめのおすすめできないパターンと同様です。加えて、切り分け先の各業務ボタンについても、訪問者の立場ではなく士業事務所側の都合で「○○に関する業務」と見出しがついてしまっています。
先ほどの建設業許可の例でいえば、「新規許可に関する業務」「更新に関する業務」「業種追加に関する業務」と並んでいる状態です。案内している内容は同じでも、訪問者は「自分はどれに当たるんだろう」と、一度考えることになります。
結果、ファーストビューに表示される情報が、最初から最後まで士業事務所側の主張のみで終わっていることから、よほど配置している写真から相談しやすい人柄がにじみ出ているなどしない限り、訪問者の共感は得にくい状況といえるでしょう。
3．ランディングページ的なパターン
1枚もののチラシのように、トップページ（ランディングページ）でほとんどの情報を提供してしまうタイプのウェブサイトでは、ファーストビューは以下のように途中で切れているほうが、下に情報が続いていることが把握しやすいため目を通してもらいやすくなります。
図では、キャッチコピーと電話番号の下に「こんなお悩みはございませんか？」という箇条書きが始まり、2つめの項目の途中で画面が切れています。
この配置を採用する場合、パソコンのモニターサイズやスマートフォンの機種によってどこで切れるかはまちまちですから、ヘッダーのメイン部分のすぐ下に置くブロック（つまり意図的に途切れさせたいブロック）は、縦を大きめに作るほうがスクロールを促しやすいものになります。
フックとなって下にスクロールしてもらうことを重視する
このランディングページ型（1枚もの）でウェブサイトを作るときは、ヘッダーのメイン部分では敢えて電話番号や写真を配置せず、より訪問者の気持ちをフォローするコピーを重視して組むパターンも考えられます。
これは、1つめや2つめに挙げたパターンとは異なり、ファーストビューですべての情報を提示しつくしてしまうことにこだわらずとも、ヘッダー部分が訪問者に強い印象を与え、その後の滞在のフックとして機能すれば、それで十分だからです。
おすすめできないランディングページ的なパターン
このパターンにおいて反応率を上げにくい典型的なものとしては、以下のようなファーストビューがあります。
図では、「こんなお悩みはございませんか？」の3項目と、「○○のこと相談してみませんか？」という電話番号のバナーが、ちょうど画面の下端で終わっています。
画面内にきっちりと情報が収まっていることから、訪問者は下へウェブサイトが続いていることを認識しにくく、ランディングページ型で作りこんでもスクロールしてもらえない可能性が高くなります。
画像でいえば、電話番号より下の部分に良質のコンテンツをいくら配置したところで、そこに至る前に訪問者の多くが離脱してしまうため、意味がなくなってしまうのです。
また、ランディングページ型でウェブサイトを制作する場合、
- 情報の取捨選択
- 下方向へのスムーズな流れ
以上2点の重要度が増します。
図では、悩みの箇条書き、料金、実績、アクセス、事務所の特徴3つ、自己紹介、出張相談の案内、営業時間、電話番号までが、1つの画面に詰め込まれています。
上の画像のように「あれもこれも伝えたい！」「書いておかないと不安」と、なんでも掲載してしまうと、ファーストビューでの情報量が多くなりすぎて、訪問者に「読むのが面倒そう」「わかりにくそう」との思いを抱かせてしまいます。結果、訪問直後の離脱に繋がりかねません。
3つのパターンからどれを選ぶか
3つのうちどれが合うかは、そのウェブサイトで扱う業務と、訪問者の状況がどのくらい揃っているかによって変わってきます。目安としては、次のように考えられます。
- 業務が1つに絞られていて、訪問者の状況も似ている場合はシンプルなパターン
- 同じ業務でも、訪問者の状況によって案内する内容が分かれる場合は業務切り分けパターン
- 広告などから1ページへ誘導して、そのページの中で判断してもらう場合はランディングページ的なパターン
行政書士を例に挙げるなら、車庫証明のように訪問者の状況が似ていることの多い業務はシンプルなパターン、建設業許可のように新規・更新・業種追加で案内が分かれる業務は業務切り分けパターン、といった分け方です。
「うちの業務はどちらとも言えないな」と迷われた士業さんは、シンプルなパターンで公開しておいて、問い合わせの内容にばらつきが見えてきたところで切り分けのボタンを足す、という進め方も考えられます。
ランディングページ的なパターンで、1ページの中に何を載せて何を後回しにするかは、以下の記事で触れています。
入口になっている業務案内ページにも当てはめる
ここまでトップページを前提にお話ししてきましたが、検索結果から業務案内のページへ直接入ってくる訪問者も少なくありません。その方にとっては、入ってきたページの冒頭がファーストビューになります。
アクセスの多い業務案内ページがあれば、そのページの冒頭にも、同じ3つのパターンを当てはめてみることができます。
スマートフォンでは同じパターンでも切れる位置が変わる
ここまでの図は、パソコンの横長の画面を想定したものです。業務にもよりますが、いまは士業事務所のウェブサイトも、スマートフォンで見る方のほうが多いことが珍しくありません。
スマートフォンの画面は縦に細長いため、パソコンでは横に並んでいた要素が、縦一列に積み直されます。3つのパターンの考え方はそのまま使えますが、最初の画面に入る量が少なくなるぶん、どこで画面が切れるかが変わってきます。
シンプルなパターンは電話番号が2画面目に回りやすい
シンプルなパターンを縦に積むと、キャッチコピー、料金や日数、特徴の3つ、電話番号という順番になります。パソコンでは横一列に収まっていた特徴1から3が、スマートフォンでは3段に重なりますので、その下の電話番号が2画面目へ押し出されてしまうことがあります。
特徴をそれぞれ1行で読める短さにしておくと、電話番号までが最初の画面に収まりやすくなります。下の図は、特徴を1行ずつにして、そのすぐ下に写真と電話番号を置いた例です。
「いやいや、うちの特徴は1行では書ききれないよ」と思われた士業さんは、詳しい説明は電話番号の下に続けることにして、最初の画面には見出しにあたる一言を置く、という形も考えられます。
また、スマートフォンでは、電話番号を押すとそのまま発信できるボタンにしておけます。電話ボタンの置き方は、以下の記事で触れています。
業務切り分けパターンはボタンが途中で切れていてもよい
業務切り分けパターンでは、切り分け用の3つのボタンも縦に並びます。3つすべてを最初の画面に入れようとすると、キャッチコピーや電話番号のほうを削ることになりかねません。
この場合は、1つめと2つめのボタンが見えていて、その下にもまだ続いていると伝わる状態であれば、役割を果たせることが多いです。下の図では、3つめのボタンが画面の下端で切れています。
ボタンの言葉は、訪問者の状況を書いた短い1行にしておくと、縦の長さを抑えられます。
ランディングページ的なパターンは冒頭の写真の大きさに気をつける
ランディングページ的なパターンは、スマートフォンではもともと画面の途中で切れることが多いので、下に続いていることは伝わりやすくなります。下の図でも、「こんなお悩みはございませんか？」の3つめの項目が、画面の下端にかかっています。
気をつけたいのは、冒頭に大きな写真を置いている場合です。写真が画面いっぱいに表示されて、キャッチコピーがその下に回っていると、訪問者には写真が1枚あるだけのページに見えてしまうかもしれません。最初の画面には、キャッチコピーの文字と、その下に続く内容の頭が見えている状態にしておきたいところです。
コピーや電話番号は文字のまま置いておく方法もある
図では、コピーや電話番号を1枚の絵のように描いていますが、実際に作るときは、文字のまま置いておく方法もあります。文字であれば、画面の幅に合わせて折り返されますので、スマートフォンでも読める大きさを保てます。検索エンジンやAIにも、書いてある言葉が伝わりやすくなります。背景に写真を敷いて、その上に文字を重ねる形でも問題ありません。
最初の画面をスクリーンショットに撮って図と見比べる
ご自身の事務所のウェブサイトがどのパターンに近いのかは、スマートフォンでトップページを開いて、指を動かす前の画面をスクリーンショットに撮ってみるとわかりやすいです。その1枚に写っているものが、訪問者が最初の一瞬で目にしている情報ということになります。
撮った1枚は、次の点から眺めてみましょう。
- 訪問者の立場から始まる言葉が入っているか
- 誰が何をしてくれるのかが読み取れるか
- 電話番号などの連絡先が見えているか
- 下に続きがあることが伝わるか
- 写真や余白で画面の大半が埋まっていないか
スクリーンショットにしておくと、スクロールした先に何が書いてあるかを知っている立場からいったん離れて、「この1枚だけを見た人」の目線で確かめやすくなります。
「書いてあるからわかるだろう」は通用しない
以上、ファーストビューの典型的な配置を、3つのパターンに分けて紹介してみました。「ここはおすすめできないパターンに陥っているかも」「この部分は、より効果的な方法で実現できている」など、貴事務所ウェブサイトの再確認に活用いただければ幸いです。
ウェブサイトはスクロールやクリックを要する
紙媒体のチラシであれば、手に取った人は気の向くまま好きなところから目を通すことができますから、配置はそれほど気にせずとも目的を達成できることも多いでしょう。しかし、ウェブサイトは一番上からスクロール（またはクリック）しなければ、先を読むことができない構造になっています。
そのため、ウェブサイトを営業ツールとして活用するのであれば、「（ここを見れば）書いてあるからわかるだろう」は通用しません。
何の情報をどこに、どれくらいのバランスで、どの順番で配置することが効果的なのか。各ウェブサイトの構造や目的にあわせて個別具体的に検討し、訪問者が直帰してしまわないよう、ファーストビュー内のコンテンツを選別することが大切です。
