今回のテーマは「縦長ページのヘッダにご注意」です。
■ヘッダも縦長になってくる
縦長ページを効果的に使っている店舗は多くありますが、それらのサイトでありがちな傾向があります。それは「ヘッダも縦に長い」という点です。
店名や、ナビゲーションが載る、サイトの共通ヘッダ。本来は縦長になるような場所ではありません。ところが、お店を運営していると、徐々に縦に伸びて行く傾向があります。バナー常設エリアを1段作り、お知らせメッセージを1段設置。このくらいなら普通ですが、更にバナーをもう1段。ここからは2段、3段…と加速度的に増えて行きます。
■スクロールしても続くヘッダ
とあるデザインのキレイな有名店ページも、徐々にヘッダが膨張しました。そのバナーエリアを数えてみると、大小合わせてなんと11段。当然1stビューではボディ部分は見えません。ノートPCなど小さめの画面で見ると、ヘッダは2画面分もの長さがありました。
これは極端な例でしたが、1stビューがヘッダで終わってしまっている店舗は、決して少なくありません。どの店舗もしっかりと縦長ページを作っているため、それに比例してヘッダも伸びてしまったかのようです。実際ボディ部分が長いと、ヘッダが少々長くなっても気にならないのでしょう。ただしそれは作り手である運営関係者ゆえの感覚に過ぎません。
■長いヘッダによる致命的な問題
サイト内の共通部分であるヘッダに情報を載せると、効率的に全ページに情報を掲示できます。大変便利で、ついつい情報を増やしてしまう気持ちは、大変よくわかります。しかし長すぎるヘッダは、とても見づらいもの。さらに大きな問題も抱えています。
それは、バナーをクリックしてもページ遷移した事に気づきにくいという事です。1stビューのままヘッダのバナーをクリックすると、リンク先も同じヘッダのページが表示されます。つまり、1stビューが全く変わりません。普段はスピーディーにブラウジングする方ほどこの問題にハマるようです。ページが遷移していないと思い、何度もクリックしてしまうのです。
加えて、ページ遷移後にボディの商品情報にたどり着く為に、相応のページスクロールが必要です。明らかにユーザビリティーで問題があると言えるでしょう。
■スッキリと解決を
多くの情報を詰め込みたくなるヘッダ。ここは情報を極限まで削り、縦幅も短くスッキリさせましょう。どうしてもすぐに改善が難しい場合は、簡単に解決できるテクニックがあります。それは、アンカーリンクでヘッダ下、ボディの最上部を表示させる事です。やり方は「HTML アンカー」等で検索してみてください。私共の関わっている店舗の中には、ほぼ全てのリンクをアンカーでボディ最上部に飛ばしているサイトもあります。遷移が分かりにくい点とスクロールが必要な点、双方の問題を解決できる、シンプルかつ有効な手段です。
せっかく作りこんだページ。見る前に離脱する理由を作らないよう、ご注意くださいね。
