業界最高の売上のあがるスマホECサイトデザイン回答集

Pocket

あなたは今、スマホサイトを新しく作ろう、もしくはリニューアルをしようと思って、何かいいサイトはないか探していることだろう。

一人でも多くのユーザーに自社のサービスや商品に触れて欲しいと誰もが思っているはずである。

多くの方はかっこいいサイトでブランディングもできるようなサイトデザインが良いと考えているようだが、それは一度改まった方が良いだろう。なぜならば、私が各業界のリーディングカンパニー(たとえばジャパネットやニッセン様、えがお様など)のスマートフォンサイトのデザインを任せていただく中で、ユーザーはサイトのかっこよさで購入しているわけではないというデータが出ているからである。

売上が立つサイトには最低14個のポイントを改善した方が良い。

サイトの9つの制作原則「上場企業が採用!スマホサイト制作におけるCV向上戦略視点」についても合わせて確認していただくといいだろう。

あなたのサイトCVRが1%を切っているのであれば、必ずこの記事にあることを確認してほしい。

私は今までサイト構築コンサルティングを100社以上行ってきた結果、CVRは確実に2倍以上にアップ、売上も2倍以上に改善してくることが出来た。

ただ、特別なことをしてきたわけではないので、本気になれば誰にでも出来ることである。

これから話すことを1つずつ確認して、改善構築していただければ必ず欲しい結果を手に入れることができるはずだ。

<目次>
1)最高の「TOP画面」とは?
2)「検索」の注意点
)「商品一覧ページ」の注意点
4)究極の「商品詳細ページ」はこれ!
5)「カート」の理想形!
6)最高に入れやすい「入力フォーム」
7)「ログイン」時、3つの注意点
8)「注文完了ページ」で行うこと。
9)「メルマガ登録」の理想ページ
10)EC三種の神器「ランキング」「お客様の声」「リコメンド」の理想パターン
11)「アップセル」と「クロスセル」で売上UP
12)押さえておきたい制作の基本ルール27ポイント

1)最高のTOP画面とは?

ECサイト最高のTOP画面はアマゾン!

まず下記のアマゾンTOPを見てほしい。

amazonTOP

 

見た目も大事だが、売り上げをアップするには、売り上げをアップする構成要素を全部網羅していることの方が重要だ。

そこで真似をしたいのが、世界で最大のオンライン売上を誇るAmazonの要素である。

  1. 店名
  2. ログイン(会員専用
  3. 入口 カート
  4. カテゴリー検索
  5. フリーワード検索
  6. おすすめボタン
  7. ランキング
  8. タイムセール
  9. お気に入り
  10. カテゴリー検索
  11. 閲覧履歴
  12. お問い合わせ
  13. ヘルプサポート
  14. PCサイト表示
  15. 利用規約

年間国内売上7000億円を売り上げるサイトだけあって徹底的に研究し尽くされている。ECを活用していてAmazonで買い物を一度もしたことがない方はほとんどいないだろう。

ということは、Amazonが業界のベースになっており、ユーザーが見慣れている可能性が高い。ECとはそういうものだという考えがユーザーにあるということは、その通りでないと、ユーザーは逆に落ち着かないということである。

そこで、画像でピックアップした15個の要素はあなたの運営するECサイトには全て入れよう。

初心者は表示順序もそのまま真似たいくらいだ。

スマホユーザーの1割~2割はスマホ機でPCサイトを見たがっているというデータがあるので、図の14は入れておくことをお勧めする

ここから順番に1つずつ説明をしていきたいと思う。

1:店名の表記

当たり前だと感じる人は多いが、実際に60%の会社様がTOPにロゴが出ていないという現状がある。
まずは「店名」がしっかりファーストビューに入っていること。
どこの企業(またはお店)がやっているか一目でわかることが重要だ。

2: 「ログイン(会員専用)入口」

これで既存会員もすぐに購入の行動をとることが可能となる。新規ユーザーのために「会員登録」ボタンを、ここに置くことがあるが、それはやめたほうが良い。どんなサイトまたは商品かわかならい初訪問者に
いきなり会員になれと言っているのと等しいわけで、当然そこからの流入も少ないからだ。会員登録は、購入いただく段階になってはじめて訴求すればよい。

3: 「カート」

重要なボタンだ、リアルの世界と同様に、現在の商品数が見えていて、それも常にどこのページでも目に入っていることが望ましい。よって必然的にグローバルメニューに位置されることになる。

4と10:「カテゴリー検索」

アマゾンの場合は、商品点数が膨大なため、
ファーストビューにカテゴリー名ボタン類が置けないので、リンクで飛ばすように
設置されている。通常の企業はファーストビューのぎりぎり下の方にカテゴリーのボタン類が見えていることがベストだろう。購入意欲はここで決まる(カーソルを下に移動する)と言っても過言ではない。

5: 「フリーワード検索」

商品数が多い企業がよく用いる機能である。
商品点数が少ない企業は置いてはいけない、理由は検索してもヒットしないからだ。ユーザーにとっては邪魔な機能となり、離脱を招く。

6: 「おすすめ」ボタン

企業のイチオシ商品や、セール特集、キャンペーンなどでも使われるエリアである。「企業が一番告知したい情報を入れるエリア」となる。必然的にファーストビューの真ん中に位置することがベストだ。
フリック(横スクロール)で商品を何点も見せる場合もここのエリアを使い、なるべく目立つ配置にしておこう。画像は手動でフリックできるようにしておくことも重要である。5枚(5画像)は許容範囲だ。自動(カルーセル)で移動するサイトがあるが、自動だとユーザーがしっかり目視認識できずに次に移動してしまう可能性があるため、やめた方がいい。

7: 「ランキング」

ECサイトにとっては三種の神器になる物で、必ず入れたい機能である。特にスマホでは、商品をなるべく悩ませることなく、購入意思の後押しをしてあげる機能として、威力を発揮する。どの企業もランキングのクリック(タップ)率は常に高い。

8: 「タイムセール」

「アウトレット」や「期間限定」「半額セール」など安さを訴求するボタン(機能)も是非揃えたい。デザインとしては目立つバナーがふさわしい。

9: 「お気に入り」

「マイページ」とも重なる。保存機能が備わっていることが重要であり、商品保存は非会員でも利用できることが望ましい。

10:「カテゴリー検索」

1カラムと2カラムで作るのを悩む企業が多いが、ユーザー視点からすると1カラムでボタンがあったほうが押しやすく、見やすい。
またアイコンや画像サムネイルなどがあると更に視認性が増すのでお勧めする。

11: 「閲覧履歴」

「購入履歴」にも使われる。再訪問したユーザーにとっては、大変役立つ機能である。

12: 「お問い合わせ」

企業との接点としては、必ず欲しいサービスである。メールだけなく、可能であれば、電話での受付も欲しいところである。

13: 「ヘルプサポート」

「Q&A」「FAQ」「ご質問」など書き方は様々だが、新規ユーザーのためには必ず欲しいメニューである。多くのサイトの場合、平均して約1割のユーザーはここを通過する。

14: 「PCサイト」

現状ではスマホユーザーの1割~2割は、スマホ機でPCサイトを見たがっている。理由は、PCサイトのほうが見慣れている場合であったり、情報量がPCサイトのほうが多かったりするからだ。スマホでPCサイトを見るのは苦労するが、あえてそういうユーザーが存在することを認識しておく必要がある。

15: 「利用規約」

「個人情報方針」や「会社概要」など、企業としてのポリシーを明記しておくと、ユーザーにとっては、安心感が増す。記述はページの最下部に置くのが通常だ。

そのほか、「SNSボタン」や、「メルマガ登録ボタン」、「はじめての方への使い方ボタン」などがあってもいいだろう。以上がTOP画面の理想形となる、自社のサイトを見比べてみて、足りない要素があれば是非加えてみて欲しい。
日本のトップ通販企業であるニッセン、千趣会、ディノス、ヨドバシカメラ、楽天、ZOZOTOWN、ビックカメラ、ユニクロなど、大手ECサイトはほとんどがこの形のTOPページであることがわかる。

次に各機能の詳細を説明していく、どれも重要なポイントばかりなので、是非参考にしてほしい。

2)「検索」の注意点

「検索」には2種類存在することはおわかりいただけるだろう。
「フリーワード検索」と「カテゴリー検索」だ。
まずフリーワード検索から説明しよう。

①「フリーワード検索」の注意点

商品数が数百レベル以上でなければ設置しないことをお勧めする。なぜなら入力していただいてもヒットする可能性が低いからだ。ユーザーはこの時点で離脱してしまう。万一ヒットしなかった場合用に、下記のようにすぐに再検索できるよう設計しておくことが望ましい。

 

2-1-1

 

検索窓に「×(全削除)」は使用しないこともお勧めする。「検索ボタン」や「検索枠」をタップしたときに誤って入力文字を削除してしまう恐れがあるからだ。

 

2-1-2

 

またよく入力される関連キーワードを「検索枠」の下に記載してあげるとより親切だろう。

 

2-1-3

 

②「カテゴリー検索」の注意点

1)で伝えたとおり、1カラムと2カラムで作るのを悩む企業が多いが、ユーザー視点からすると1カラムでボタンがあったほうが押しやすく、見やすい。
またアイコンや画像サムネイルなどがあると更に視認性が増すのでお勧めする。

 

2-2-1

 

またユーザー購入動機をあげるために、商品点数を記載することをお勧めする。
掲載商品数を見ることで、探す楽しみ(ユーザーの期待値)が増すからだ。

 

2-2-2

 

「絞り込み」で検索させるような場合は、サーバー負荷にも関わるが、プルダウンで選択していくごとにリアルタイムで該当商品数が可変表示されるとよいだろう。
これにより、細かい絞り込みをした結果「該当ゼロ」になり、離脱してしまうことを防ぐのに役立つからだ。

 

2-2-3

 

3)「商品一覧ページ」の注意点

商品一覧ページにも王道がある。
下の3サイトを見て欲しい。どれも最高の商品一覧ページである。

 

商品一覧

 

必ずある情報は、「商品写真」「商品名」「金額」「サイズ・色」「配送」「ユーザーレビュー」だ。

大企業のように商品数が多い場合は、「並び替え」「絞り込み」ボタンを装填している。しかしこれらの機能は全体ユーザーの5%程度しか使われていないことが多い。
通常は「人気順」に並んでいるからである。

ここに1行キャッチコピーがあると更にユーザー視点にたった一覧ページになるだろう。

また、忘れがちなのが、各商品のどこの場所をタップしても「詳細ページ」に行けるように導線をつけておくことをお勧めする。

大企業の中にも、写真のみ、商品名のみしかタップできないようになっているサイトが多い。これはユーザーとしては、不便である。カラム全体をボタンにしておくことは必須である。

1ページに表示する商品数も最低20商品は表示しておくようにしたい。10商品では物足りない。ここで業種によっては、このページの段階で、「お気に入り保存」できてもいい。是非これらを参考にして欲しい。

4)究極の「商品詳細ページ」はこれ!

①商品ページの究極はゾゾタウンが理想だろう。

最低でも以下の要素が整っていてほしい。

  • 商品名
  • 写真(3枚~5枚)
  • そのすぐ下にキャッチコピーまたは商品説明文
  • 金額
  • カートボタン

 

zozo

 

カートボタンは最低でもそのページに2つ~3つは欲しいところだ。(コンビニでもレジは2台~3台あるようなイメージだ。)

さらに、カートボタンがスマホサイトの液晶表示画面内にスクロールしないでも少しでも見えている状態が一番望ましい。

「・関連商品」「・ソーシャルSNS」「・レコメンド」「・お気に入り登録」までついているため、ユーザーとしては、至りつくせりといったところだろう。

長いページで、一番下にカートボタンが1つだけあるサイトは、ほとんど売る気がないサイトと同然である。是非この順番と並べ方を意識して改善しよう。

②商品詳細ページでは、すべての情報が表に出ている考え方が必要だ。

例えば、このページでプルダウンなどはなるべく避けるべきである。

上記ZOZOTOWNでは、「サイズ・カラー」がプルダウンで隠されているが、それは他機能メニューが多彩なため、ページ長さを調整してのことだろう。

一般の企業では、サイズや色などもすべて画像と文言をページ上に掲載しておくことをお勧めする。ユーザーにとってはその方が視認性が増し、すぐに選択してもらえる可能性が高いからだ。下記サイトが参考になる。

 

4-2-1

 

③ここでECサイトにとっては禁断のやり方を紹介する。

これで誰もが知っている私のクライアントの大手企業は売上を1.7倍にすることができたからだ。

「カート」ボタンの下に「電話で注文する」ボタンをつけて、電話で注文を取ってしまうのだ。これは電話受注環境がある企業でしか行えないが、環境がある企業は是非お勧めする。

言うまでもなく、スマホは「電話ができるパソコン」だ。

サイトのCVRは1%や3%であっても、電話注文で受注率は一桁異なることを忘れてはいけない。電話をかけてもらって、途中離脱(電話を勝手に切る)は殆ど存在しない。
それは単なるいたずら電話だからである。

TOP画面、商品一覧ページ、商品詳細ページ、個人情報入力ページ、理想はすべてのページからいつでも一押しで電話ができる状態に、なっていることだ。

下記のようにカートボタンを優先にして、その下に電話ボタンをつけるといいだろう。

商品番号を書いておくこと(メモしていただく)も忘れないようにしていただきたい。
ユーザーは、紙とペンをもって商品番号を写して、その後電話ボタンでタップしてくるはずだ。これでサイトのカートからの売上は一定数確保しつつ、電話からの新規の売上もたつことになる。

 

tel

 

現在のほとんどの企業はスマホ=インターネット通販の考え方であり、担当者もいかに「カートに入れてもらえる」かのみを考えているはず。

ここがそもそもの誤解であることは明白で、お客様の中で半数は、電話で済むなら電話でもいいと考えていることを忘れてはいけない。

あの小さい機械(スマホ)で、自分の名前、住所、電話番号等々、入れるのは大変な労力であることは我々自身が日常感じているはずである。特に30代以降40代、50代の客層が多い企業には、是非この電話ボタン設置を検討するようアドバイスさせていただく。

まったくといっていいほどライバル会社は行っていない。

5)カートの理想形!

世の中に様々なカートツールが存在するが、実際に理想のカートがどういうものか説明したいと思う。
カートでの注意点は7点だ。

①カート画面でどの商品をカートに入れているかが視認できる

②合計でいくら支払えばよいか分かりやすく表示されている

③購入フローへ進みやすい

④買い物を続ける操作がしやすい

⑤カート上で個数変更ができ、再計算ができる

⑥カートから商品を削除することができる

⑦カートに入れた商品とは別の商品がオススメされる

①カート画面でどの商品をカートに入れているかが視認できる

カート画面へ商品画像を入れることは必須だ。

商品のサムネイル画像をカート画像に表示することによって注文しようとしている商品が間違っているのではないかと心配するお客様を安心させることが出来るからだ。

下記のように楽天を例に見ると商品詳細ページで使われている写真がそのまま小さくなってカート画面へ表示される。ZOZOTOWNでも同じく商品画像がカートに表示されている。

それに対して「ニッセン」では商品画像が入っていない。どちらが、ユーザー視点にたっているかは明白だ。

 

cart1

 

②合計でいくら支払えばよいか分かりやすく表示されている

いくら支払えばよいか?カートの一番重要な情報だ。

カートでその記載が不十分だとお客様は心配してしまい、離脱に繋がる。ただ税込の商品の金額を合計するのではなく、送料も明確にする必要がある。

下記のとおり、ZOZOTOWNがよい例だ。
このサイトではカートページの上部に「商品合計」の欄と「配送料」の欄がファーストビューにあり、金額が明確である。

ZOZOTOWNでは全品送料が無料でTOP左のロゴに固定のテキストとして「全品送料無料」と書いているが、カートページでも「配送料0円」と明確に書いている。
合計いくら必要なのかは、しつこいぐらい書いてもよい情報だ。

ニッセンでは「あといくらで送料無料!」とカート内に書かれているのは便利だが、「合計金額」+「送料」で結局いくらお支払いするのかは書かれておらず、ZOZOTOWNと比べ不親切な印象を持たれる。

 

cart2

 

③購入フローへ進みやすい

カートからまっすぐに購入させるための工夫として「購入フロー」へ進みやすくさせるという視点もとても重要だ。

ZOZOTOWNでは合計金額の下に大きく「レジへ進む」とボタンを配置している。

Amazonもボタンの配置はZOZOTOWNに似て、上部に合計金額があり、そのすぐ下に「レジに進む」ボタンがあるが、Amazonの工夫はカートページ内で下の方へスクロールをしても「レジに進む」は隠れずに固定されて表示され続ける点だ。
これは是非見ならいたいポイントである。

 

cart3

 

④買い物を続ける操作がしやすい

カートへ商品を入れた後、まだ購入手続きへは進まず、「他の商品も買いたい」お客様へ向けてカートから買い物を続けるメニューがあることが必要だ。

重要なのはサイトのどこに戻すのかという視点であり、下記のニッセンはいい例になる。

ニッセンでは「お買い物を続ける」欄にて進みたいカテゴリー(TOPページへも移動できる。)を選択できるようになっている。
総合通販の場合、レディースアパレル商材をカートに入れた方が次にキッチン用品や家電を探したい気持ちはあるので、お客様本位に進む先を選ばせているのは大変参考にしたいところだ。

 

cart4

 

⑤カート上で個数変更ができ、再計算ができる

同じ商品を複数購入するのに向いている商材ではカート上で「もう1つ買っておこうか」と考えたお客様向けにカート上で個数変更をできるようにしたほうがよい。

これは商品の特性による。家庭雑貨や生活用品はそうあるべきだが、例えばZOZOTOWNでは個数変更はカート上からは出来ない。アパレル商品を買う時はほぼ1点ずつだからだ。

 

cart5

 

⑥カートから商品を削除することができる

スマホECのカート上で削除をしたら即非表示になるほうがスマホらしい使い方だ。

ZOZOTOWNや楽天ではそうなっている。是非参考にしてもらいたい。

 

cart6

 

⑦カートに入れた商品とは別の商品がオススメされる

カートに商品を入れた瞬間というのは「一息いれる一瞬」でもある。欲しいと思っていた商品が見付かって買おうと思っている状態ということだ。

その時に「こういう商品もいかがですか?」とオススメするのは購入意欲が続いているので大変よいタイミングだ。

クロスセルやアップセル、レコメンドが対象になる。下記にサイトが参考になる。

 

cart7

 

6)最高に入れやすい「入力フォーム」

入力フォームはECサイトにとって一番ユーザー心理のハードルが高いことは誰もが認めるところだろう。入力をしてもらうもっとも重要なポイントは4つだ。
これらは必ず確認してもらいたい。

  1. 例を必ず記載する。
  2. 必須項目は、左側に「必須」を赤く書く。※では弱い。
  3. 天地を大きく取る。・・・・入力しやすくするため。
  4. 未入力があったときは、最後の「確認ボタン」を表示させない。

この4つを改善するだけでも大きく離脱を防ぐことになるから是非やっていただきたい。

ずばり究極の入力フォームは以下になる。1つ1つ説明していこう。

 

6-0-1

 

以下に注意する点を記載しておくので、是非自社のフォーム改善の参考にしてもらいたい。

①名前

まずは名前だが、氏名と名前は分けないこと。もし分けてデータベースが入っているようであれば、横で並びではなく、縦に並べて欲しい。
スマホの横幅は狭いために、入力しずらさを解消できる。天地も大きくとって(8mm~1cm)、例は必ず入れることも必須である。必須のマークも※などではなく、しっかり「必須」と赤く左側に表示させることも必要だ。右側ではなく左側に置くことで、左から読むユーザー心理として視認性を高めておけるからだ。

 

6-1-1

 

②ふりがな

ふりがなは、カタカナ表示ではなく、ひらがな表示が望ましい。スマホの入力キーボードはひらがなが最初にでてくるからだ。カタカナだと一度カタカナキーボードに変換させる必要が生じるためにユーザー負担になり、離脱につながる。

 

6-2-1

 

③郵便番号

郵便番号では、自動変換機能は必須だ。都道府県、市町村まではこれで表示されるため、ユーザー入力負担が少なく済むからだ。注意したいのは、このときにキーボードは数値入力用になっていることが重要だ。

 

6-3-1

 

④電話番号

電話番号は1枠で入力させることが望ましい。3枠設けているサイトがあるが、これもユーザー側から見ると、カーソルを枠ごとに移動させる手間が発生するからだ。
注意したいのは、このときもキーボードは数値入力用になっていることが重要だ。

 

6-4-1

 

⑤性別

性別は、そのサイトの顧客属性が多い方をデフォルトでラジオボタン表示させておくことが必要だ。例えば女性服専門のサイトであれば、女性に●デフォルト表示させておくことが必要ということだ。

 

6-5-1

 

⑥生年月日

生年月日は必要でなければ入力不要だ。ユーザー(特に女性)の中には年齢を入れることを嫌がる心理が働くからだ。入力をさせる場合も以下のように1枠で数字入力にしてあげる必要がある。「年」「月」「日」をプルダウンで入力させるサイトを見受けるが、これよりも数字入力のほうがユーザーは楽である。

 

6-6-1

 

⑦メールアドレス

メールアドレスは、メルマガを取る以外に必要はないので、メルマガを発行しないのであれば、入力枠は不要である。会員登録の際に、IDとして用いる場合は、あらためてその説明をしたうえで、入力してもらう心配りが必要だ。よく2度入力させるサイトを見受けるが、それもユーザー負担につながるため、1回の入力が望ましい。
またキーボードも英数字入力用に切り替えておくことも忘れないでほしい。
ユーザーにとっては、この切り替えで離脱が多くなることが実証されているからだ。

 

6-7-1

 

⑧備考

サイトによっては、メモや問い合わせ、備考欄などの枠を設けることがある。
その際は、「1000文字まで」など、文字数制限を書いてあげるとより親切だろう。

 

6-8-1

 

⑨「確認する」ボタン

「確認する」ボタンだが、これも大きく目立つボタンにしてあげて欲しい。
その際、未入力項目があった場合は、このボタンは表示をさせずにする工夫が必要だ。

 

6-9-1

 

その他入力フォームでの注意点を15個説明しよう。それぞれ自社のサイトの入力フォームと比較していただきたい。

⑩「決済方法選択」

自社サイトの利用頻度の高さの多い順にならべてあげることが親切である。

 

6-10-1

 

⑪「決済方法」や「性別選択」などのラジオボタン

タップ(クリック)範囲をラベル全体にすることで、ユーザーは押しやすくなる。

 

6-11-1

 

⑫「カード番号入力」

クレジットカードは通常4文字づつになっている。そしてユーザーは自分の前にカードを出して目視しながら入力していくのが通常だろう。そのため、4文字ずつ確実に入力してもらう必要がある。よってカードの表記どおり、4枠設けてあげると入力しやすくなる。

 

6-12-1

 

⑬「カード番号入力」

カードの画像を追記することで、より視認性が高まり、ユーザー入力の心理負担が小さくなる。

 

6-13-1

 

⑭プルダウン

スマホ(アンドロイド、iPhone)用のプルダウン機能があるが、これは、便利そうでいて実際には使いづらいことが多い。
例えば「都道府県入力」「西暦入力」「サイズSML表示」などがそうだ。
下記のつぼ八を見て欲しい。スマホの機能を使わずプルダウン選択させている良い例だ。どちらが使いやすいか実際に体験して見て欲しい。

 

6-14-1

 

⑮「西暦入力」

生年月日の年号を入れるプルダウンの場合、西暦または和暦のみの表示は不親切で、視認性が悪い。両方記載することで、ユーザーが確認する負担が小さくなり、安心感も生まれる。

 

6-15-1

 

⑯「余計なリンクは削除する」

登録や注文に関係の無い情報ボタンは極力入力フォーム上から削除して、押し間違い(誤タップ)を避ける工夫をする。

 

6-16-1

 

⑰「次ページへの<ボタン>は内容を明記する」

「次へ」はユーザーを不安にさせる言葉である。できるだけ、次の内容がわかるボタン名にすることで、完了ページまでモチベーションを保ち続けることができる。

 

6-17-1

 

⑱「入力フォームの所要時間を明記してあげる」

入力の手間がどのくらいかかるのかを最初に説明しておくと、ユーザーとして納得しながら進むことができる。

 

6-18-1

 

⑲「エラー文言を使い分ける」

どこの何がエラーなのかをユーザーにしっかり伝えてあげることで、離脱を防ぐ効果がある。

 

6-19-1

 

⑳「エラー文言はページ上部に記載する」

入力フォームでエラーが発生した場合、どこでエラーになっているのかをページの一番上に記載してあげることで、ユーザーに確認してもらいやすくなり、離脱を防ぐ効果がある。

 

6-20-1

 

㉑「利用規約の同意確認はボタン内に設置する」

チェックボックスでユーザー同意を得るのではなく、ボタン表記内に入れることで、1つタップ数が減る。
またチェック漏れも防ぐことができ、離脱防止に役立つ。

 

6-21-1

 

㉒「入力フォームにあったソフトウエアキーボードを表示させる」

参考までに下記のように自動表示させることで、ユーザーの入力負担を防ぐことができる。

 

6-22-1

6-22-2

 

㉓入力が複数ページにわたる場合は、ステップを明記してあげる。

ユーザーの心理を軽くしてあげる効果がある。

 

6-23-1

 

㉔「ハイフンをつけるのか、半角か全角かを迷わせない」

(例)にしっかり明記して且つ、データ上でも、ユーザーがどちらを入れてきてもいいように自動変換かけられるようにしておく。

 

6-24-1

 

7)「ログイン時」3つの注意点

いうまでもなく、ログインユーザーはすでにサイト訪問者であり、優良顧客であるため、できるだけ簡便に店舗(サイト内)に入ってきてもらう必要がある。

その際の注意点は3つだ。

①入力は1回。
②パスワードを見せながら入力させる。
③パスワードを忘れた人用に、すぐ下にメールアドレス枠をつける。

①   入力は1回

ほとんどのサイトがIDとパスワードで管理しているはずだ。その際お客様に2回続けてメールアドレスとパスワードを入力させるサイトも多い。ユーザー視点から考えると、1回が妥当だ。

 

7-1-1

 

②   パスワードを見せながら入力させる

パスワードを入力いただく際に直前の文字を隠さず見せながら入力してもらうように設計しよう。これにより、誤入力によるエラーの発生率を抑えることができる。

 

7-2-1

 

③   パスワードを忘れた人用に、すぐ下にメールアドレス枠をつける。

経験上、ログイン時の2割~3割のユーザーはパスワードを忘れている。
「パスワードを忘れた方はこちら」として、リンクをつけて次のページに飛ばしているサイトが圧倒的だ。これはユーザーに1タップ多く負担をしていることになり、不親切である。
パスワードを忘れているユーザー向けには以下のユーザービリティーが親切である。たったこれだけの改善で、ログイン数が今より上がることを保証する。

 

7-3-1

 

8)「注文完了ページ」で行うこと。

①必要な情報を入れること。

驚くべきことに注文完了ページでお礼を伝えていないサイトが多すぎる。
まずはお買い上げいただいた感謝の意を伝えたい。
下記が究極の完了ぺージだ。
ユーザーが購入したあと知りたいのは、「いつ届くのか」だ。それをメールで伝えることも重要だ。メールは通常注文確認メールとなっているはずなので、そこで配送の事も伝えたい。また問い合わせ(キャンセルなど)にも対応できるように、連絡先のメールアドレス、住所、電話番号なども必須情報だ。もう一度TOP画面に戻りたいユーザーが一定数いることも忘れてはいけない。そのユーザー向けに、TOPに戻るボタンは必須である。

 

8-1-1

 

②購入商品をSNSでシェアできるようにする。

ユーザーは商品を購入した時が一番興奮した(満足した)状態だ。その段階で、友人知人へ伝えたい(自慢したい、肯定したい)心理が働く可能性が高い。
完了ページでは、是非シェアボタンの設置をおすすめする。
(アマゾンでは、カートに商品を入れた段階で、シェアを勧めている。)

③完了ページでは、自社のSNSアカウントをフォローしてもらえるいいチャンスである。

ここから顧客とのコミュニケーションを育む入口となる。SNSアカウントを持っている企業は是非この場所に装着してみてほしい。

 9)「メルマガ登録」の理想ページ

経験上メルマガでの売上貢献度は1割~2割あるのが普通だ。ソーシャル全盛期と言われていても、メルマガはまだまだ貢献度の余地がある。
それにはいかに「登録」していただくかが問題だ。
下記4つの注意点に沿って説明する。

①   「内容(メリット)」「サンプル」「頻度」を書く。

下記が理想のメルマガ登録ページだ。

ユーザーは、このサイトのメルマガを受信するとどんな「メリット」があるかを知りたがっている。

それには、どんな内容(メリット)を差し上げることができるのかを明記する必要がある。そして実際の「サンプル」も欲しい。

さらにサンプルは季節ごとに差し替える必要がある。夏の暑い時期に、冬物のコートのセールサンプルが掲載されていては不自然だからだ。運用可能であれば、毎月1回の差し替えがベストだ。

サンプルページの下段に「メルマガ不要な方はこちらから。」というリンクをつけて「嫌ならすぐに止められる」安心感をつけておくことも忘れないようにしたい。

最後に「頻度」も記載必須だ、ユーザーはたくさんのメルマガ登録をしている、正直メルマガ受信に対し、嫌悪感すらいだいている可能性がある。そこでこのサイトのメルマガはどのくらいの頻度で配信されるのか?週1回なのか、月に1回なのか、不定期なのか?必ず明記するようにしたい。これによりユーザー側も受信の心の準備ができた上で、「登録」していただける確率が高くなるからだ。

 

9-1-1

 

②   ドメイン指定受信の案内をする。

スマホユーザーはドメイン指定受信を設定している人がいる。
その方々に対し、自社のドメインメールが届くよう、指定解除設定をお願いしよう。

理想は下記のとおりだ。キャリア別に必要だからだ。
これによりメールの不着数を抑えられる。

 

9-2-1

 

③   メルマガの解除はしっかりわかりやすいところに置く。

メルマガを解除することを拒むようにわかりづらい個所に解除ページを設置している企業がいるがそれはやめた方がいい。

さらにその企業に対しての不満(ブランド低下)につながり、もう二度とこのサイトには訪問していただけない可能性が高いからだ。

解除は簡単にできるようにしておくことをお勧めする。メルマガの下段に解除ボタン(リンク)をつけておくのが通常だ。

その際、次の解除ページで、「毎月のメルマガは解除いたしますが、年間1回程度、超お得なメールのみ配信希望する」として、チェックボックスを置いておくと、3割程度のユーザーは解除を踏みとどまってくれるので試して見て欲しい。

そのかわりそのユーザーには本当に年1回程度のスペシャルメールのみしか配信できないことになり、運用上手間になることにも気をつけたい。

 

9-3-1

 

④   iPhoneユーザー向け対応

iPhoneユーザーには2つの対応が必要となる。

(1)       SoftBankのiPhoneユーザー向けに「softbank.ne.jp」で登録するか、「i.softbank.jp」で登録するか確認をすることが必要だ。

HTMLメールを配信している場合、「softbank.ne.jp」ではきれいに表示されないからだ。

 

9-4-1

 

(2)       メルマガ登録をmail toで登録をさせている場合、SoftBankのiPhoneユーザー向けに「i.softbak.jpのmail to」だけでなく、「softbank.ne.jpのmail to」も設置する必要がある。

理由は、通常のmail toでは、「softbank.ne.jp」に対応していないためだ。

 

9-4-2

 

10)EC三種の神器「ランキング」「お客様の声」「リコメンド」の理想パターン

EC業者にとって、この3つは是非とも実装したい機能だ。

これをつけるかつけないかでCVRが大きく変わることを断言しておきたい。
未装着の企業は是非やっていただきたい。

①   「ランキング」

PCサイトと異なりスマホユーザーは、整理された情報を欲している。小さい画面でなりべく簡単に目的を探したいと思っているはずだ。

それには、店のランキングが非常に有効である。
この店では何が一番人気なのか、何が一番売れているのか、明確に教えてあげることが望ましい。

「ランキング」位置は、「TOPページ」と「商品カテゴリーページ」のどちらでも使える。下記のサイトが参考になるので、是非見て欲しい。

 

10-1-1

 

②   「お客様の声=ユーザーレビュー」

お客様の声は、ユーザーが注文する際の「最後の判断材料(後押し)」になる。

下記のサイトが参考になるだろう。
システム上機能追加が難しい場合は、はがきがメールなどで集めた声をサイト内に掲載することをお勧めする。そのままの転写では読みずらい場合は、面倒でもテキスト文に打ち直して掲載してほしい。

 

10-2-1

 

③   「レコメンド」

アマゾンがいい例になる。

お客様の購入履歴や閲覧履歴を元にお客様が興味を持ちそうな商品を紹介する。

リアルの店頭で、「こちらもお似合いですよ」と同様に、お客様が「自分のことをわかってくれているなぁ」という気持ちになり購入率UPやサイト継続率が高まる。

 

10-3-1

 

11)アップセルとクロスセルで売上UP

三種の神器が装填できたら、次にやってもらいたいのは、「アップセル」「クロスセル」だ。これも売上拡大に貢献するので、是非検討してもらいたい。

①「アップセル」

お客様が購入しようとしている商品ページで、それより上位の商品を紹介してみよう。
経験上1割~2割のお客様はそちらを選択することが多い。

 

11-1-1

 

②「クロスセル」

お客様が購入しようとしている商品ページとセットで購入できる商品を紹介してみよう。俗に言う「ついで買い」だ。
下記サイトが参考になるだろう。

 

11-2-1

 

12)押さえておきたい制作の基本ルール27ポイント

小さなことも含めて、貴社のサイトの制作チェックリストとして活用してもらいたい。
行っている場合とそうでない場合で、CVRが格段に異なってくることが実感できるに違いないからだ。

①リンクだと一目でわかるようにする

スマホはロールオーバー(マウスを合わせると色が変わるなどの変化生じること)が使用できないのでタップ(押す)できるリンクは「リンクである」とわかりやすくすることが重要だ。

 

12-1-1

 

②見やすい文字の大きさと行間

視認性を高めるために、文章で使用するフォントの大きさは14pt以上で作成する。
行間は、150%~190%が望ましい。

下記ヤフーのスマホ記事が参考になる。

 

12-2-1

 

③ボタンの大きさ

ボタンの縦幅、横幅は、大人の人差し指または親指で押しやすい大きさ(44px以上=8mm~1cm)作成する。

 

12-3-1

 

④   テキストリンクよりボタン画像にする

テキストリンクは押しにくく、誤操作につながるため、できるだけ画像ボタンにする(またはCSSで装飾)

 

12-4-1

 

⑤   タップできるエリアを広く取る

誤タップを防ぐために、リンク間、ボタン間はなるべく広く取る。

 

12-5-1

 

⑥   電話番号はボタンにして、すぐにかけられる(PHONE TO)にしておく。

ボタン内に番号も掲載すると押す率が高い。
シニア層が多いサイトでは、スマホの電話番号を見ながら、自宅の固定電話でかけてくるユーザーがいる。

 

12-6-1

 

⑦   リキッド(可変幅)でデザインする

画像サイズが異なるスマホで、各端末ごとに最適に表示させるためにVIEWPORT(ビューポート)を記述する。

これを設定すると、端末を縦で使う場合、でも横で使う場合でも画像は適切に表示されることになり、使い勝手がよくなる。スマホ制作では必須の条件だ。

 

12-7-1

 

⑧   重要なメニューやボタン、カートなどは、ページの上下に2つ設置する

ランディングページの考え方だが、スマホは縦に長いページ構成が可能なため、重要なボタンは、上と下の両方に設置して操作性をよくする。
ファーストビューの記事でも記載しているので、参考にしてほしい)

 

12-8-1

 

⑨   縦長のページには「上に戻る」リンクを設置する。

下記楽天サイトが参考になる。

縦長のページで、途中で最上部に戻りたい場合に利用してもらう。
縦の長さがそれほど長くないページには不向きである。

 

12-9-1

 

⑩   トップページのリンクを設置する。

グローバルメニューにも必要。PCサイトでは左上の企業のロゴをクリックするとTOPページに遷移することが多いが、スマホでそれを理解しているユーザーは少ない。

グローバルメニューに「TOP」をつけることとページ最下部にも「TOPに戻る」リンクをつけてあげると親切で操作性が増す。

 

12-10-1

 

⑪   パンくずリストを入れる。

スマホサイトではよく自分が、今どのページに居るのか見失ってしまうユーザーが多い。

ユーザーの操作の指針にもなるため、できるだけパンくずリストは入れてあげると親切。またSEO対策にもつながる。

 

12-11-1

 

⑫   PCサイトへの誘導リンクをページ最下部に設置する。

いつもPCサイトを見ているユーザーのためにスマホ上でPCサイトを表示させることも重要だ。

下記ヤフーのサイトが参考になる。

 

12-12-1

 

⑬   商品、サービス紹介には、写真をできるだけたくさん使用する。

経験上、写真が多ければ多いほど購入率は高くなる。
できるだけ写真は多用したい。

 

12-13-1

 

⑭   写真や画像を実装する際に使う「フリック(横スクロール機能)」のコツ

いくつかの画像をフリックで表示させる際、隣の画像が少し見えるようにすると閲覧率が高くなる、是非やっていただきたい。

ユーザーにとって、隣にも画像があるとはっきり視認できるため、次の写真を見たくなる心理になる。

 

12-14-1

 

⑮   フリックのローテーション(カルーセル=自動回転)は使用しないほうがよい。

画像をフリックさせる場合、自動で表示移動させると、ユーザーが付いてこなくなるので、注意したい。あくまで手動でのみ切り替えさせたほうが閲覧率が高い。

 

12-15-1

 

⑯   「人物」の写真や画像を使用する

ユーザーに親近感を抱いてもらうため、写真が画像に「人物像」を挿入する。

例えば、サイトの店長写真、電話オペレーター、社長の顔、スタッフの似顔絵などだ。THANK YOUページなどでは是非、女性の笑顔の御礼画像があったほうがよい。こういう小さなことがCVRにつながっていく。

 

12-16-1

 

⑰   動画の再生時間は最長1分

スマホECで動画はとても有効なツールとなる。経験上全体の3割のユーザーは動画ボタンを押し視聴している。長さは15秒~最長1分が限度である。
それ以上長い動画は途中離脱が多くなる。

 

12-17-1

 

⑱   アイコンは伝わりやすいものを使用する。

使用する際の注意点は、企業独特のマークではなく、日常よく使われているアイコンを使うことだ。

利用者の多いアマゾンや楽天、ヤフーショッピングなどを参考にするといいだろう。アイコンを利用することで、ユーザーに直感的にボタンの意味を知らせることが可能だ。

詳しくは別の記事で書いているのでぜひ参考にして欲しい。→「スマホサイトのアイコン事例集|カート|検索|読み込み中

 

12-18-1

 

⑲   ランディングページに関係の無いリンクは削除する

キャンペーンページや、会員登録ページ、購入ページなどで関連の無いボタンやリンクは極力削除して、誤タップを防ぐようにすると離脱が少なくなる。

 

12-19-1

 

⑳   会社概要ページは必須

大手有名会社ではない一般企業のECサイトでは、どこの会社なのかをしっかり明記してあげることがユーザーに安心感を与える効果がある。

会社名、社長名、担当者名、住所、電話番号、メールアドレス、オフィスの概観写真、地図などだ。

 

12-20-1

 

㉑   よくある質問の「Q」と「A」は同じページ上に隠さず表示させる。

FAQなどがよくできている(読みやすい)企業は、お問い合わせが減少している。

 

12-21-1

 

㉒   プライバシーマークはしっかり入れる。

多くのユーザーは個人情報入力に敏感だ。より安心していただくためにもプライバシーマークは必須で入れておきたい。

 

12-22-1

 

㉓   バルーン(ポップアップ)でホーム画面やブックマークを勧めない。

バルーン機能を使うサイトがあるがやめたほうがいい。いくらバルーンで促されても必要性が無い限りユーザーはホーム画面やブックマークに追加しない。

バルーンを設置したことにより表示領域が一時的に狭くなり、スクロールしても表示し続けるので、非常に煩わしい。また突然現れるので、ユーザー心理的に驚いてしまい、離脱につながる。

 

12-23-1

 

㉔   ページ表示スピードを上げる方法

スクロールして対象エリアが表示された際に画像を表示する。

写真が多用されているページは表示に時間がかかる、それを和らげるために、ページを表示する際には、ページを先に取得して、画像はそのあとで取得させることで、ページの表示速度を速めユーザーの離脱を防ぐ。

楽天のTOPページやZOZOTOWNの検索結果では、下にスクロール(移動)してきた際に表示エリアに入ってから画像を取りにいくように設定されている。

是非参考にしたい。

 

12-24-1

 

㉕   文字サイズを変更できるようにする

シニア層が多いサイトでは、文字の大きさを調整できるようにしたほうがよいだろう。

ユーザー自身で変更してもらい、視認性を高めてもらう。

 

12-25-1

 

㉖   アドレスバーは非表示にする。

ページを表示した際に、アドレスバーを非表示にする。そうすることで、表示した瞬間にユーザーが閲覧できるスペースを広げる効果がある。

 

12-26-1

 

㉗   ブラウザ下部にメニューバー(グローバルメニュー)を置かない

iOS7(iPhoneの最新OS)では、ブラウザ(safari)の下部をタップすると「ブラウザ自体のメニューバー」が表示されるようになった。

そのためメニューバーを頻繁に使用するサイトで下部に設置してしまうと、タップするたびに「ブラウザ自体のメニューバー」が表示されて煩わしい。

つまりサイトのメニューバーを2度押さなければならないので、注意したい。

 

12-27-1

 

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*