そのヘッダ、縦に長すぎですよ

20140709

アマゾンが2014年4月より、直販による酒類取扱いを開始しました。特に地酒には力を入れており、日本酒では1,000種以上、焼酎では1,400種以上。非直販も含め合計15万種以上におよぶ酒類の取り揃えは、日本最大級の規模です。お得感のある価格設定、送料無料、最短で当日配送など、既存のお酒ショップには大きな脅威かと思います。

既存ショップがAmazonに対抗する為には、店舗の独自性を出すこと。そして、商品の魅力を引き出してアピールする事が不可欠です。商品の魅力をしっかりと伝えるには、楽天やヤフー等のモールではおなじみの、縦長ページが最適です。

■ヘッダも縦長になってくる

縦長ページを効果的に使っている店舗は多くありますが、それらのサイトでありがちな傾向があります。それは「ヘッダも縦に長い」という点です。

店名や、ナビゲーションが載る、サイトの共通ヘッダ。本来は縦長になるような場所ではありません。ところが、お店を運営していると、徐々に縦に伸びて行く傾向があります。バナー常設エリアを1段作り、お知らせメッセージを1段設置。このくらいなら普通ですが、更にバナーをもう1段。ここからは2段、3段…と加速度的に増えて行きます。

■スクロールしても続くヘッダ

とあるデザインのキレイな有名店ページも、徐々にヘッダが膨張しました。そのバナーエリアを数えてみると、大小合わせてなんと11段。当然1stビューではボディ部分は見えません。ノートPCなど小さめの画面で見ると、ヘッダは2画面分もの長さがありました。

これは極端な例でしたが、1stビューがヘッダで終わってしまっている店舗は、決して少なくありません。どの店舗もしっかりと縦長ページを作っているため、それに比例してヘッダも伸びてしまったかのようです。実際ボディ部分が長いと、ヘッダが少々長くなっても気にならないのでしょう。ただしそれは作り手である運営関係者ゆえの感覚に過ぎません。

■長いヘッダによる致命的な問題

サイト内の共通部分であるヘッダに情報を載せると、効率的に全ページに情報を掲示できます。大変便利で、ついつい情報を増やしてしまう気持ちは、大変よくわかります。しかし長すぎるヘッダは、とても見づらいもの。さらに大きな問題も抱えています。

それは、バナーをクリックしてもページ遷移した事に気づきにくいという事です。1stビューのままヘッダのバナーをクリックすると、リンク先も同じヘッダのページが表示されます。つまり、1stビューが全く変わりません。普段はスピーディーにブラウジングする方ほどこの問題にハマるようです。ページが遷移していないと思い、何度もクリックしてしまうのです。

加えて、ページ遷移後にボディの商品情報にたどり着く為に、相応のページスクロールが必要です。明らかにユーザビリティーで問題があると言えるでしょう。

■スッキリと解決を

多くの情報を詰め込みたくなるヘッダ。ここは情報を極限まで削り、縦幅も短くスッキリさせましょう。どうしてもすぐに改善が難しい場合は、簡単に解決できるテクニックがあります。それは、アンカーリンクでヘッダ下、ボディの最上部を表示させる事です。やり方は「HTML アンカー」等で検索してみてください。私共の関わっている店舗の中には、ほぼ全てのリンクをアンカーでボディ最上部に飛ばしているサイトもあります。遷移が分かりにくい点とスクロールが必要な点、双方の問題を解決できる、シンプルかつ有効な手段です。

せっかく作りこんだページ。見る前に離脱する理由を作らないよう、ご注意くださいね。

ネットショップ運営代行サービスについてはこちら

ネットショップコンサルティングサービスについてはこちら