ネットショップのヘッダーは見られない!
ネットショップのヘッダーのありかた
色々と思う所があり、楽天市場店のヘッダーを修正しています。
現在のヘッダーは会社案内などの業務的な情報が網羅されてるものの、特に目を引く情報が無い状態。
この状態にしたのにも理由があって『ネットショップのヘッダーは見られない』その情報と自分の経験が合致したからなのですが、まぁなんというか業務的と言うか勢いがなく整理されえ過ぎているというか、落ち着いて仕舞ってるのです。
もうちょっとワイガヤした状態にしたいと思い、ヘッダー修正に踏み切りました。
ヘッダーは1stビューが大切
お客様は商品を見に来店されます。
その為、商品以外の情報は殆ど素通り。
商品情報だって読み飛ばして要点だけしか見ないのですから、ヘッダーなんて見るわけがありません。
だから、最初に飛び込む情報は購入を後押しする重要な店舗の特徴を記載します。
例えば『あす楽対応店!』とか『3000円以上送料無料!』とか。
こんな情報をでっかい文字でヘッダーに記載してファーストビューを押さえます。
迷子防止機能も大切
お客様は自分がセオリーと思っている通りに情報が記載されていないと不安と不信に駆られます。
デザインを売りにしている店舗があえてセオリーを外す事はありです。
でもそれで目的のページが見つからない迷子になるのはNGです。
ヘッダーには必要情報をすべて網羅し、会社案内や送料情報への導線をしっかり確保します。
ヘッダーによくある情報を一覧にしました
目的/用途 | 情報名 | 詳細 | |
---|---|---|---|
1 | 店舗基本情報1stビュー候補 | 基本送料 | 送料の確認ボタンを押さなくても大体の見当がつく様にフォローする役割 |
2 | 送料無料ライン | 「後いくら買えば」で追加購入を促す役割 | |
3 | 選択可能支払方法 | 特に特殊な支払方法を扱っている場合は記載する事でPRになる | |
4 | 店舗の特徴 | 1フレーズで端的に判り易く大きい文字で書くと目に留まりやすい。 | |
5 | 店舗基礎情報へのアクセス | TOPへ戻る(TOPへ) | 迷子防止機能。店舗トップへ戻る※顧客は店舗トップに探しやすいナビゲーションがあると思っている。 |
6 | ご利用ガイド(初めての方へ) | まず見る方はいないが、無いと不安に駆られる要素。そのため必ず入れておく。 | |
7 | 店舗情報(会社案内) | 購入を検討した方のみが見る。ヘッダーにある事で探しやすい。探せないと離脱につながる。 | |
8 | 送料/お支払 | 同じく購入を検討した方のみが見る。離脱防止の機能的ナビゲーション | |
9 | お問合せ | 商品カート近くの問合せボタンの用途が高いため利用される事はあまりないがないと不安になる。 | |
10 | カートを見る | 合計金額を確認するときなどに使うため、ヘッダーに完備されている事が望ましい。 | |
11 | 取扱品目の伝達 | カテゴリナビ | 店舗内の導線を確保するために設置する。沢山のジャンルを扱っている場合はそれが分かるように配置するとまとめ買いの発生率が高まる。 |
12 | 主要商品POPバナー | 素通りされる事が多いが、賑わいを演出できる。 | |
13 | 決定率アップ | モールイベント情報 | 特にモールイベントに便乗してポイントアップを行うときには設置がベター。差別化に貢献する。 |
14 | 店舗イベント情報 | 上記と同じ。『今うちの店で買った方がいい理由』を記載する事で決定を後押しする。 | |
15 | 店舗内商品へのアクセス | 検索BOX | お客様はキーボードを打つことを嫌う為、あまり利用はされないが、他があるため無いと不親切と判断される。検索キーワードと共に設置する事で利用率が高まる。 |
16 | 人気検索キーワード | 検索ボックスをフォローする役割。クリックで検索結果を表示する仕様にしても良いし、コピペで検索ボックスに入れやすい仕様にしても良い。 |
パッと目にはいる文字の大きさは 32px以上
これよりも小さい文字の方が配置をしやすいのですが、サッと流してしまう場面では読まれない可能性があります。
ちなみに文字サイズを比べるとこんな感じです。
36px
34px
32px
30px
28px
26px
24px
22px
20px
18px
16px
14px
12px
まとめ
ヘッダー作成の心得をリスト化します。
- どんなに作り込んでもスルーされると思え
- 目に留まるためにはインパクトが大切
- 言いたいことは32px以上で書く
- 人気店舗でヘッダーによくある情報は必ず網羅する
-
前の記事
楽天市場のCSSを見直したらゴミ置き場だった 2018.10.05
-
次の記事
備忘録Laravelの起動コマンド 2018.10.11
コメントを残す