見出し画像

コスメ通販・ECアプリのUI/UXデザイン改善 -ドクターシーラボ

ぽこしー📊SaaS企業データアナリスト

経済産業省の調査によると、2016年の日本国内BtoC向けEC市場規模は15.1兆円（前年比9.9%増）にまで拡大し、EC化率も5.43%（前年比0.68ポイント増）にまで成長しています。スマホアプリを見てもAmazon（アマゾン）、楽天市場、ゾゾタウンなどの通販・ECアプリに加え、メルカリやフリルといったフリマアプリも合わせると非常に多くのショッピングアプリが市場に出回っています。

今回はコスメ通販・ECアプリの「ドクターシーラボ」アプリを題材として、今後も成長していくであろう通販・ECアプリのUI/UXデザインについて考えていきます。

スマホアプリのUI/UXデザインにご興味ある方は以下の過去記事も合わせてご覧ください。

ドクターシーラボアプリの基本情報

「ドクターシーラボ」アプリのUI/UXデザインを検討する前にアプリの基本情報や企業の特徴などを大まかに見ていきます。

画像1

「ドクターシーラボ」アプリのカテゴリはショッピングですが、App Storeの評価は5点満点中1.7点と決して良い評価とは言えない結果になっています。App Store内のカテゴリ別ランキングでもしばらく圏外が続いているようです。ユーザーのレビューコメントを見ると、起動や動作速度が遅く、アプリ特有のサクサク感がないことに不満の声が多く集まっていました。この通信速度を改善するだけでもUI/UXがだいぶ改善されるのではないかと考えられます。

次にドクターシーラボアプリを運営しているシーズホールディングスはどのような企業なのでしょうか？EC事業が主力でないのであれば、アプリの運用・追加開発コストなどを考えると、そもそも通販・ECアプリを廃止するという選択肢も考えられます。

ドクターシーラボの強み・特徴は？

画像2

シーズホールディングスの特徴を以下に簡単にまとめました。

１．通信販売（EC）が主力チャネル
1999年の会社設立から化粧品・コスメ商品の販売主力チャネルは通信販売・ECで、現在、売上の約60%を占めています。

２．メディカルコスメ市場のリーディングカンパニー
シーズホールディングスは専門家が医学的見地から開発に関わる化粧品「メディカルコスメ」に強みを持ち、国内メディカルコスメ市場において約40%のシェアを占めています。

３．30代〜40代前半の女性ファンが多い
シーズホールディングスの2010年決算説明資料を見ると、ドクターシーラボのポジショニングマップが記載されており、30代〜40代前半の女性ファンが多いことが推察されます。価格帯は5000円前後で、中価格の一般ユーザー層向けになっているようです。

ドクターシーラボの課題は何か？

もう少し詳しくドクターシーラボの通販・ECサービス状況を見ていきましょう。シーズホールディングスのセグメントは化粧品・コスメ商品などの小売事業を担っているドクターシーラボ事業とエステ・サロン事業があります。セグメント別売上はドクターシーラボが94%を占めていて（セグメント別利益も95%を占める）、主力事業になっています。

画像3

ドクターシーラボのチャネル別売上比率は、前述した通り、通信販売・ECが56.9%と主力チャネルになっています。その後に卸売販売（21.5%）、海外向け（11.5%）、対面型店舗販売（10.1%）と続いています。

確かに通信販売・ECはドクターシーラボにとって主力チャネルなのですが、国内EC市場規模が拡大している中、前年同期比が-1.8%とマイナス成長していて、今後の成長戦略が課題となっています。

画像4

ドクターシーラボの通信販売購入者数の前年比をリピート、新規、復活で分類すると、リピートと新規が2016年、2017年ともに100%未満、つまり減少していることが分かります。新規購入者数の増加については広告やキャンペーンなどのプロモーションが施策の一つとして考えられます。一方、リピート購入者数の増加施策はECサイトやアプリのUI/UXデザインを改善することが挙げられます。特にスマホアプリはプッシュ通知機能が使えたり、WEBよりも動作が早かったり、リピートユーザーを増やすための有効手段になりえます。

画像5

ドクターシーラボ通販・ECアプリのペルソナ（ターゲットユーザー）は？

ドクターシーラボの通販・ECアプリのUI/UXデザインを検討する上でペルソナを定義していきます。

総務省の「通信利用動向調査2016年版」によると、インターネットで商品・サービスを購入する年代で一番多いのが30代で58.8%いることが分かります。

画像6

MMD Laboの「2016年ネットショッピングに関する調査」でもスマホで化粧品・美容関連商品を購入した年代は30代がトップで24.3%いることが分かりました。ドクターシーラボのファン層も30代〜40代前半の女性であることを踏まえると、今回の通販・ECアプリのペルソナも30代女性で良さそうです。また、ドクターシーラボの取扱商品の価格帯が5000円程度と考慮すると、比較的一般的な世帯の女性を想定した方が良さそうです。

画像7

ペルソナは以下のスライドのような女性を想定しました。簡単にドクターシーラボ通販・ECアプリに期待しそうなことをまとめると、

・ECアプリで買いたい商品を簡単に見つけて、購入したい。
・専門家からの情報も見やすくまとまっていてほしい。
・機能はなるべく簡単に使いやすくしてほしい。

という感じになりそうです。

画像8

通販・ECアプリのKGI/KPIデザイン

通販・ECアプリの一般的なゴール（KGI）は売上ですが、売上は以下のように分解できます。

売上　　＝　平均単価　×　購入数
購入数　＝　CVR（コンバージョン率）　×　訪問数
訪問数　＝　リピート　＋　新規

今回のペルソナでは、きちんとした商品説明を見つつも簡単に購入したい要望が高そうであることと、簡単に継続的に使えるUI/UXデザインにすることでリピート数の増加も狙えることから、CVRをKPIとしてUI/UXデザイン時に意識するのが良さそうです。

画像9

ドクターシーラボ通販・ECアプリのカスタマージャーニーマップ

画像10

カスタマージャーニーマップは、①商品を探す、②興味・関心を持つ、③購入する、④シェアする、といったシンプルな行動を想定しました。

探す
お目当の商品を見つけやすいようにキーワード検索はもちろん、バーコード検索やそもそも商品リストのUIデザインを整理して見つけやすくする工夫が必要だと考えられます。また、よく購入するようなお気に入り商品は登録して、マイページなどからすぐに購入できる動線も必要でしょう。

関心
商品の効果・特徴の解説や専門家からのアドバイス、口コミ情報などが見やすいUIデザインにすることで商品に対する安心感を持ってもらう必要がありそうです。

購入
画面遷移や入力項目が多いと離脱の原因になりやすいので、購入画面は1画面にとどめて、キーボード入力項目は極力少なくして、選択式にする方が良いでしょう。

シェア
商品を認知したり、購入を検討する上で知人からの口コミ情報は、いまだに重要な要素であるため、商品購入直後などにシェアできるような機能があった方が良いかもしれません。また知人などへのシェアはTwitterやFacebookよりもLINEを優先的に使用する可能性が高いため、そのようなUIデザインを意識した方が良さそうです。

ドクターシーラボアプリのヒューリスティック分析

次にヒューリスティック分析で既存のドクターシーラボ通販・ECアプリの主要画面における問題点を洗い出していきます。

トップ画面

画像11

①ファーストビューですが、キャンペーン部分の表示領域が大きく、商品カテゴリや一覧がすぐに見つけにく状態になっています。

②フッターメニューに「戻る」ボタンが常に表示されていたり、無料サンプルやキャンペーンなど一つにまとめられそうなメニューがあったり、使い勝手が良くなさそうなUIデザインになっています。

③商品を探すカテゴリ一覧がユーザーから見つけにくい画面の下側にあったり、タブ切り替えやアコーディオン開閉のUIが組み合わさっていて、スマホアプリのUIデザイントレンドから少し異なる印象を受けます。

検索結果画面

画像12

①検索ヒット数やカテゴリなどの領域が大きく、検索した商品一覧をファーストビューで見られないため、都度ユーザーがスクロールしなければならず、手間になりそうです。

②ページャー切り替えになっているため、縦スクロールの方が見やすいスマホにとっては少し使いづらいUIデザインになっています。

商品詳細画面

画像13

①ユーザーが気になるような商品価格、サイズ、解説などの情報が整理して表示されていない。また、購入ボタンが常に表示されないため、離脱してしまう可能性が高くなっている。

②商品詳細情報がタブやアコーディオンに別れていて、情報が見にくくなっている。

注文完了画面

画像14

①シェアボタンがなく、商品情報が拡散しにくい設計になっている。

ドクターシーラボ通販・ECアプリのUI/UXデザイン改善

トップ・検索画面

画像15

・トップページは商品一覧画面にすることで、ペルソナが見つけたい商品をすぐに見つけられるようにしました。
・スワイプすることで商品カテゴリを切り替えられるので、商品カテゴリの切り替えがスムーズになります。さらに細かい分類はヘッダーメニュー下のアコーディオン開閉で切り替えられます。
・並び替えボタンを置くことで、価格順や人気順で切り替えられ、気になる商品を見つけやすくしています。
・バーコード検索機能もつけることで、持っている商品をすぐに検索できます。
・商品画像、商品名、評価点数、価格とペルソナが気になりやすい情報をシンプルに表示することで情報を把握しやすいようにしています。

商品詳細画面

画像16

・ファーストビューに商品情報を整理して表示することで、ペルソナが情報を把握しやすいようにしています。
・カートに入れるボタンやお気に入りボタンをフッターに固定して表示することで、ペルソナがアクションしやすく離脱を防ぎます。
・同じ商品類のサイズ変更もこの画面で簡単にできるようにすることで、サイズ変更の煩わしさを軽減します。
・商品の効果・特徴、使用方法には画像やテキストだけでなく、動画コンテンツも見れるようにすると、商品の良さをよりアピールできるかもしれません。

注文完了画面

画像17

・注文完了後にSNSシェアボタンを置くことで、知人などに簡単にシェアできるようにして、拡散を促進させるようなUIデザインにしました。商品の特性からLINEでのシェアが多いと考えられるため、LINEシェアボタンを先頭に配置しています。
・この商品を購入した他のユーザーが購入した商品をレコメンドする機能をつけることで、ついで買いを促進し、平均購入単価の増加施策として使えるかもしれません。

その他のUI/UXデザインの方向性

画像18

最後にドクターシーラボ通販・ECアプリの他のUI/UXデザインの方向性としては以下のような施策も考えられます。

１．プッシュ通知の最適化
新規のキャンペーン情報やクーポンなどのポイント情報を出すタイミングやお気に入り商品が値下げしたタイミングなどに合わせてプッシュ通知を出すことで、ユーザーの訪問数を増やすことができると考えられます。

２．中国語などの外国語対応
ドクターシーラボの商品も中国などの海外への売上が前年比192.3%とチャネルの中でも一番大幅に増加していることから、アプリも中国語などの外国語対応を進めることで、アプリ経由での売上も増加させることが可能かもしれません。

３．クーポン/ポイントによるシェア促進
アプリのUI/UXデザインを改善しながら、シェアするとクーポンやポイントをもらえるようなキャンペーンなどを実施することで新規訪問数を増やしながら、リピート数も増加させる施策も考えられます。

最後に

いかがでしたでしょうか？

みなさんも気になるWEBサービスやスマホアプリを題材にして、チームなどでUI/UXデザイン改善案を考えて見ると面白い気づきがあるかもしれません。


最後まで読んでいただき、ありがとうございます。

企業やマーケット関連の話など、ツイッターでもつぶやいてますので、フォローして頂けると喜びます。


この記事が気に入ったらサポートをしてみませんか？