スマホECユーザビリティの極意:Fujisan

Pocket

雑誌定期購読のFujisanスマホサイトはサイトに訪れたユーザー自身が気付かなった潜在的なニーズを提案しています。ユーザビリティ上の一番の特徴は『提案型の商品詳細ページ』です。紙版の雑誌はもちろん、デジタル版も同時に見せることにより自社で取り扱う商品と触れ合う機会を創出しています。

提案力のある商品詳細ページ

Fujisanサイトに訪れたユーザーは定期購読がしたいと思っているのみで、購読期間は1年間がよいのか、それとも3年間がよいのか等は考えていないことが多いのではないかと私は思います。紙版の雑誌がいいのか、デジタル版の雑誌がよいのかも、ユーザーごとの習慣に従ってなんとなくのイメージをしているだけだと思います。それを考えると商品詳細ページにたどり着く前に敵購読期間の条件指定や、紙版かデジタル版を指定する商品の絞り込みがあるとユーザーは「そこまで考えていない」ということになってしまうでしょう。Fujisanがユーザビリティを工夫して実現しているのはデジタル版を買おうと思っているユーザーに対して紙版も紹介している点や、様々な購読期間があることを提案している点です。

 

ユーザーは商品詳細ページにたどり着いて初めて「買おうと思っていた雑誌にデジタル版もあること」や「一年間だけではなく三年間の定期購読もある(=期間が長いほうが一冊あたりの割合は安くなる)」ことを知ります。ユーザーが知らなかったことを商品詳細ページで知らせることになるので新たな気付きや発見、興味を与えることになるでしょう。ユーザーは一つの雑誌を探しながら詳細ページにたどり着き、その雑誌の『複数の商品』に接触します。

 

このスマホサイトのユーザビリティの特徴は商品提案をする詳細ページになっている点です。ユーザーに新たな気付きを与える提案力があります。

 

画像1

 

タブの切り替えによる商品構成

定期購読ができる別のサイトである「セブンネットショッピング」ではデジタル版の購入をすることもできますが、商品詳細ページの「電子版はこちら」という小さなボタンから遷移する必要があるのに対して、Fujisanでは各商品詳細ページに「紙」と「デジタル」をタブでかんたんに切り替えられるように配置しています。これは紙版が欲しいと思って遷移しても、考えてみたらデジタル版がいいと思うきっかけになるかもしれませんし、逆もまたあるでしょう。このようにユーザーが気付いていなかったニーズに触れることがしやすい構成を目指してタブ構造にしているのだと考えられます。この並列構造はユーザーに気付きを与えることになるでしょう。

 

画像2

 

デジタル版の商品の豊富さ

「週刊ダイヤモンド」では「月額払い」、「3カ月」、「学割1年」、「1年」、「2年」、「3年」の6種類の商品がデジタル版として販売しています。紙版の商品は6種類で、それとは別にデジタル版の6種類の商品を用意している豊富な商品構成はお客様を惹き付けると思います。『+-』を使って開閉式のメニューで提供するインターフェースですが、一番上の商品のみ開いた状態がデフォルト表示(初期)です。6種類ある商品のすべてを開いたままにした場合、商品説明欄に場所を取られてしまうので、開くメニューと閉じるメニューを制御しているのはユーザーに対するサイト側の気遣いだと思います。商品の種類をラジオボタンなどで選択してから『買い物かごに入れる』のではなく、各商品ごとに『買い物かごに入れる』ボタンを配置しているのはユーザーのタップ数を減らすことに繋がるユーザビリティ上の工夫です。デジタル版の雑誌であるから期間を変えることで商品数を増やすことができるということもあるので、すべてのECに該当する訳ではありませんが、ユーザーがタップ数を一つでもしないで買い物かごに入れられる構成になっているかチェックしてみましょう。

 

買い物かごのユーザビリティの工夫

買い物かごへ来たユーザーの行動は2種類です。購入するための手続きを進めるのか、買い物を続けるのかです。Fujisanの買い物かごではどちらでもスムーズに対応できるように両方のボタンをファーストビューに入れています。「ご購入手続きへ」のボタンを押した場合は下部のログイン欄にページ内リンクで移動します。「他にも商品を買う」のボタンを押した場合は商品詳細ページへ戻ります。買い物かごページのファーストビューに両方のボタンを配置している点がスマホユーザーの操作のしやすさを考えた証だと思います。Fujisanではページ右上部に「メニュー」と「買い物かご」、フッターには利用規約やマイライブラリなどのメニューが配置されています。購入前には遷移のしやすさを提供するためにヘッダーとフッターメニューを充実させるのはよいでしょう。しかし買い物かごに入ってからは購入完了までにユーザーの『逃げ道』を提供しないように購入に無関係なリンクは省くべきです。PCサイトでも考え方は同じですが離脱のしやすいスマホではなおさらです。Fujisanでは買い物かご以降、ヘッダーとフッターからリンクを外し、一直線に購入完了に至ることができるように工夫しています。

 

画像3

 

商品のサンプルに触れてもらう

多くの雑誌で「サンプル」を見ることが出来ます。表紙と目次と数ページを画像で閲覧することが出来ます。これはユーザーの商品に対する期待値のアップにつながりますし、実物イメージのギャップを埋めることにもなるでしょう。サンプルが見られる雑誌はバックナンバーでも閲覧をすることが出来ます。商品購入前の不安を払拭する方法としてサンプルを見せる施策は非常に有効です。デジタルコンテンツであるから提供できるということもありますが、ここで重要なのは購入前のユーザーの不安を取り除く方法を検討することでしょう。

 

PCでは最上部に表示しているカテゴリー一覧をスマホでは最下部に表示

PC版では「カテゴリー一覧」が最上部の左側に配置されています。これはWebサイト設計上、最重要な場所なのでPCではカテゴリー一覧が重要視されていることが分かりますがスマホサイトではカテゴリー一覧は最下部にあります。ページ内リンクで上部から移動できますがテキストリンクで小さく設置されています。それよりもより抽象化された大分類のアイコンによるタップができるように設計されており、ユーザーを迷わせない工夫の一つだと思います。

 

まとめ

ユーザーが知らなかった商品に触れる機会をFujisanスマホサイトは演出しています。ユーザーが自分の意思で商品を探すだけではなく、ユーザー自身が気付いていなかったニーズをサイトのユーザビリティ上の工夫で実現しています。雑誌の定期購読だから出来ることもあると思いますが、Fujisanスマホサイトの狙いは参考になる点も多いと思います。

Pocket

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

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

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

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

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

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

【弊社実績一例】



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

コメントをどうぞ

*