数年前、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レジのサービスサイトでは、レイアウトはオーソドックスでありつつも、「図」でユーザーが取得できる情報を工夫していた。手がけるサイトの種別に大いに影響があるが、世の中のサイトをみると、ファーストビューにいろんな工夫がみられる。
ここまで書いたことは、手がけるサイトの種別によって当てはまらないこともある。過去の成功パターンに固執せず、プロジェクトや商材に応じて最適な情報設計・ビジュアル表現を模索していきたい。
