BtoBサイトにおける「ファーストビュー攻略法」

池田 彩華のプロフィール画像
デザイナー 池田 彩華

3,233 view

数年前、BtoBサイトの「詳細ページ」で次のような構成にしたことがある。ページの目的を踏まえて、ページタイトルの下に写真を配置した。

ワイヤーフレームのイメージです

ベイジで取り扱っているBtoBサイトは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのこと。コンバージョン数/率で成果を出したいので、勝ちパターンを踏襲して制作する。

弊社の経験でいえば、コンバージョンの約30~50%は、最終訪問でホームからフォームに直行する。コンバージョンの約10~20%は、初回訪問でいきなりお問い合わせに直行するので、ページのファーストビューにコンバージョン導線を設置するのは、理にかなっている。

コンバージョン目的のユーザーを取りこぼしてしまう確率を1%でも下げることを考えると、やはりファーストビューの、視線が始まる300px~500pxあたりに、明確に視認できるCTAを設置しておきたいところです。

https://baigie.me/officialblog/2020/12/17/btob_wireframe/

見えてきた課題と原因

公開後、そのページを訪れたユーザーの中には、スクロールをせずにグローバルナビゲーションあたりをうろついている人がいる、という仮説データが共有された。

ビジネスパーソンがノートPCでサイトを閲覧する際、写真だけで画面が埋まる状態になる。サイト訪問時に何の情報があるのかよく分からず、スクロールしない可能性があるということだ。

複数の要因が絡むため1つの推測に過ぎないが、改善策として「ファーストビューだけでページの要点が分かるようにするといいのでは?」という話が上がった。

ファーストビューでページの要点を伝える

ライターの五ノ井さん(@gonoiippei)と話すと、詳細ページも、そこにある情報含めて、ファーストインプレッションはとても大事なのでは、という議論をした。

全体的に余白を狭くするという細部の話ではなく、ターゲットユーザーの割合が多い解像度で、ファーストビューにどんな情報を置くといいのか。どうすれば詳細ページでも、情報を取得しやすくするための見た目の工夫ができるか

ユーザーは、最初のハードルを超えられないとそこから先には行けない。認知負荷を軽減し情報取得を容易にすること、ユーザーが直感的に「なんか良さそう」と感じる技術が必要だ。

例えば、BtoBサイトでよくあるフォームと同じ発想で、ファーストビューにページの要点を入れて、あわよくば、それだけで完結してもいいだろう。

もっと詳しくみたければ、ページをスクロールして読んでもらうようなイメージだ。ファーストビューに情報を詰め込むと、雑多なチラシみたいになってしまうので、そこがデザイナーの腕の見せ所だと思う。

最後に

これがきっかけで、他社のサイトをみるときに、ファーストビューだけでどんな情報を伝えているか、を重点的にみるようになった。

例えば、Airレジのサービスサイトでは、レイアウトはオーソドックスでありつつも、「図」でユーザーが取得できる情報を工夫していた。手がけるサイトの種別に大いに影響があるが、世の中のサイトをみると、ファーストビューにいろんな工夫がみられる。

https://airregi.jp/jp/start_support/?ref=airregi_navi
https://airregi.jp/jp/cost/?ref=airregi_navi

ここまで書いたことは、手がけるサイトの種別によって当てはまらないこともある。過去の成功パターンに固執せず、プロジェクトや商材に応じて最適な情報設計・ビジュアル表現を模索していきたい。

関連する日報

    「わかりやすい」ミーティングの3原則

    7,651 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
    フリー素材のアイコン・イラストを流用する時のコツ

    3,050 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    業務アプリの設計は「もっといい方法があるのでは?」と疑おう

    783 view

    板垣 琴音のプロフィール画像
    板垣 琴音 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,506 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,750 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
上に戻る