ウェブマーケティングの戦国時代を切り拓くマーケターのメディア baxooka:バズーカ

スマホサイトのCVRを向上させるUI/UX改善ポイント5つ

こんにちは。龍田です。
6月からクールビズが始まり、すっかりノージャケット・ノーネクタイですがみなさんはどうですか?
さて、季節的なところも関係してくるECサイトのCVRを向上させるためのUI/UXについて解説します。
今回は、スマホ普及率7割(※1)を超え、よりモバイルファーストに注目が集まっているスマホサイトの改善ポイントを5つご紹介します。

※1 総務省「インターネットの普及状況 」参照

スマートフォンの体験が今後のサイト訪問を左右する!?

スマホサイトでありがちなユーザーが離脱しやすい5つの注意点

まずは基本中のキホンから。
ECサイトをスマホで見ていて、こんなことはありませんか?

  1. 検索して開こうとするが、開くまでが遅い。また、タップしてページが開く時間が総じて遅く感じる。
  2. サイトを見てもどこに何があるのかわからない。
  3. PCサイトにある情報がスマホサイトにはない。
  4. バナーをタップすると、404エラー(404 Not Found)と表示が出る。
  5. 買い物かご~注文完了までの工程がやたらと長い(5ページ以上ある)

この中の1つでも当てはまっていると、それはユーザーにとって不親切なサイトになってしまっています。
せっかく買いに来てくれたユーザーが離脱する原因になります。

街のお店で考えてみましょう。これがどういう状態かというと、

  1. 検索して開こうとするが、開くまでが遅い。また、タップしてページが開く時間が総じて遅く感じる。
    →お店の通路が狭くて入りにくい(人混み、物積み等)、店員に声をかけても返事に時間がかかる。
  2. サイトを見てもどこに何があるのかわからない。
    →棚に無造作に積まれていて、欲しいものが見つからない。
  3. PCサイトにある情報がスマホサイトにはない。
    →同じお店に来ているが、東口から入ると全て回れるが、西口から入ると一部見れない商品がある。
  4. バナーをタップすると、404エラー(404 Not Found)と表示が出る
    →棚には商品が置いてあるように見えるが、実際はもう販売が終了している。
  5. 買い物かご~注文完了までの工程がやたらと長い(5ページ以上ある)
    →レジに持っていったら、会計以外に会員制で会員登録作業とアンケート等、いろんな作業や質問をされる。

このようにイメージすると、実感が湧きますよね!実際の店舗でこのような事があると煩雑なお店で対応も悪いイメージがついてしまいますよね。これはECサイトも同じことが言えます。むしろ、顔が見えないECサイトの方がユーザーの評価が手厳しくなってしまうのではないでしょうか。

このような対応をしないことを前提にして、実際にUI/UXが良いサイトとはどのようなお店なのか見てみましょう。

スマホサイトのCVRを向上させるポイント5つ

いつでもサクサク!ページの読み込み速度を意識したサイト作り

読み込みが重いと、それだけでせっかく購入しようと思っていたユーザーのモチベーションが下がってしまいます。そうならないために、ページの読み込み速度を意識して制作しましょう。
具体的には、以下の対策をした上で複数の端末や環境で閲覧時のストレス度合いをチェックします。

[ 1 ] 画像の大きさをWebサイズに合わせるようにしてください。

スマートフォンやカメラで撮った写真のまま投稿すると、1~4MBほどあると思います。
仮に写真を含めたWebページの総数を20MBとすると、PCのインターネット回線の平均通信速度30MBで転送すると5.6秒程度かかります。
また、これがスマートフォンになると、平均が25Mbpsということなので6.7秒程度かかることになります。
ユーザーは2秒以上かかると直帰率が50%と格段に上がることから、5秒以上と言うのは致命的なことがわかります。
では、どのくらいのサイズが適正なのでしょう?
答えは、Webで表示させるサイズに合わせることと目的に合わせた品質で表示させることの2点です。
Photoshopや無料のリサイズソフトを使用してトリミング、画像サイズの変更を行うようにしましょう。

[ 2 ] 動画は極力軽量かつ必要最低限に。

こちらも上記と同様、iPhoneで撮った動画を例にすると30秒で50M程度と重たいです。
出来る限り軽量にするために秒数を短くしたりコマ数を少なくして対応しましょう。
困ったときはプロにお願いする方法もありだと思います。

[ 3 ] JavascriptやCSSの動き(ギミック)は最適化する。

色々こだわって作ってしまったために複雑な動きが多くなったり、修正を繰り返すうちに当初予定していなかった機能が追加してしまったりと
指示が多くなったり、複数のCSSを読み込むと重くなってしまいます。
出来る限り最小限のCSS、Javascriptを使って整理すると読み込み速度アップに繋がります。

サイト設計はシンプルに。流入~購入までが最短で行われるサイトに。

みなさんのECサイトで扱っている商品特徴を踏まえながら、季節物・セール品・カテゴリーが新規ユーザーにとってもわかりやすくなっているか確認してみましょう。
それができていれば、商品ページから購入までのルートを最短に出来るようにしてみましょう。
「カートへ入れる」→「レジに進む」→「購入確認」→「購入完了」と進める際、タップしにくいボタンや別ページに遷移させてしまうリンク等はありませんか?また、ユーザーがあと何ステップで完了するか明示できていますか?さらには、購入完了後に次回のイベント告知等を入れて誘導してあげると戻りやすいですね。
新規ユーザーの場合は「カートへ入れる」→「レジに進む」→「入力フォーム登録」→「購入確認」→「購入完了」となりますが、EFO(エントリーフォーム最適化)が重要です。「入力フォーム」の内容を出来る限り自動で入力できるようにする他、英数字またはひらがな入力の項目は自動で切り替わる仕様にしておくと、親切です。

PCコンテンツ=スマホコンテンツが標準。目的によって使い分けも必要。

基本的にPCサイトがあればスマートフォンサイトも制作されていると思いますが、内容が異なっている場合は、スマートフォンでも同じ内容が閲覧できるようにしましょう。5年ほど前にスマートフォンサイトが制作されだしたときは、スマートフォンは内容を絞って表示することが基本でした。しかし、今はスマホファーストと言われるように、スマホサイトの方がコンテンツ量や情報更新の速度が早いケースも増えています。

まずは、PCのTOPとスマートフォンのTOPに表示されているバナーや、商品ページの画像数など揃えるところから始めましょう。すぐに対応することが難しい場合は、「PCページを表示する」とテキストリンクを設けておく手法もあります。

ただし、戦略上あえてターゲット層に応じて表示内容を変える手法、複数に分けて運用する方法もありです。デバイス毎の利用者層データをチェックしたうえで制作しましょう。

リンクエラーも工夫次第!回遊できる404ページでCVRアップ!

少人数で回している忙しい運営者によくある話ですが、バナーから飛んだ先が404ページだったときのユーザーが受けるショックは想像したくないですよね。
とは言え、気をつけていても知らず知らずのうちにリンクが消えていて見れないことも考えられますので、404の見せ方を工夫してみます。
404にリンクしてユーザーが「あれ?」と思うのは情報が何もないことなので、「もしかしてこちらの商品をお探しですか」とレコメンドを表示したり、選択肢を与えて見たいページに飛ばしてあげるとモチベーションの低下を回避できます。

普段気にしないこういうページにもユニークなアイデアがあると、ユーザーも安心して買い物することができます。

 

最短3タップで注文完了!購入意欲を削がずにリピート購入を促進させる!

既に上記に記載していますが、それ以外の方法もありますのでご紹介します。
Amazon Payや楽天ID等、既に登録している情報を利用して購入する方法です。
この方法を利用すると、ユーザーの手間を省くことができ、セキュリティ面でも安心です。
モバイルファーストでは、スマホ画面での入力が面倒と考えるユーザーが多い傾向にあり、PC以上にEFOを考えなければいけません。
そういった面でも、既存のID決済を利用する価値は充分にあります。

まとめ

CVRに関わる見落としがちなポイントをピックアップしてみましたが、いかがでしたでしょうか?
私も前職でECサイト運用していた時に意識していましたが、担当者1人で手が回らないことが多々ありました。着手すべきだと分かっているのに社内リソースでは取り組めない、スマホサイトを最適化したいけど優先順位がつけられない等、もしお困りでしたらぜひ一度ご相談ください
また次回はCVRアップのツールをご紹介させていただきます!

The following two tabs change content below.
龍田アシカイネン

龍田アシカイネン

WEBディレクター。 サイト分析、UI設計、WEBアプリケーション活用が得意分野。 最新情報はくまなくチェックするミーハー男子、ECサイト運用経験あり。 常にトレンドと使いやすさを考えたサイト設計を考えています。 元柔道部 区大会銅メダリスト。 ユニ◯ロの防臭靴下を愛用、足の裏の手入れは毎日欠かさず行っている
販促の最新トレンド、事例をお届け!
メルマガ登録!
メールアドレス 必須
会社名 必須
* 表示は必須項目です。
SNSでフォローする