100個の小売アプリを調査してみえてきた、使われるアプリのポイント
はじめまして。サイバーエージェントの鬼石と申します。現在DXデザイン室という組織で、様々な業界DXプロジェクトのUIUXデザインに携わっています。
今回は弊社でも特に力を入れている小売業界のアプリについて、約100近くの小売系アプリの調査をしてきた中でみえてきた、使われるアプリが工夫している点や、気をつけておくべきポイントをまとめてみました。
なぜ弊社が小売DXに注力しているのか？に関してはこちらのサイトでも紹介していますので、是非見ていただければと思います。
略歴
06年に株式会社博報堂アイ・スタジオへ新卒入社。デザイナーとしてWEB制作に携わった後、2012年にサイバーエージェントへ中途入社。複数のサービス立ち上げにデザイナーとして携わった後、2016年にUIデザインリードとしてABEMAの立ち上げに従事、その後クリエイティブ責任者に就任。2020年からはAI事業本部のDXデザイン室室長として、DXプロジェクトのUIUXデザインに携わる。現在、兼任で社長室の全社クリエイティブ統括室に所属。
小売アプリはストレスを感じやすい
まず前提として、小売系のアプリは他アプリと違い店頭でアプリを使うことが多く、ストレスを感じやすいアプリだといえます。理由はいくつかあります。
①アプリをDLするきっかけの多くは店頭のポスターや店員さんの紹介によるので、買い物を中断して立ったままインストールする必要がある。
②レジでクーポンやポイントカードを扱う時に複雑な操作で時間がかかってしまうと他のお客さんに迷惑がかかってしまうので焦りやすい。
③狭い店内で、買物をしながらチラシやクーポンなど「ながら見」をすることになるので、周りに注意を払いながら利用する必要がある。
④買い物かごや商品を持っていることが多いので、片手で利用する必要がある。
⑤店員さんがスマホに慣れていない場合、想定外のエラーなどの事態に対応できなかったり、アプリをのことを深く理解していないケースがある。
このように、店頭でのお買い物というリアルの世界との兼ね合いがある事が、他アプリとの違いであり注意すべきポイントかと思います。この点を踏まえて、アプリを制作する上での基本的な対策を挙げていきます。
【対策1】 容量を抑えてDLを早くする
モバイル回線のスピードは年々早くなっているとはいえ（5Gの普及は未だ15%程度で20代が中心）、店舗によって電波の状況が悪かったり、通信制限に掛かっているユーザーもいることを考えると、アプリの容量は抑えるべきです。買い物を中断してDLすることを考えると、この時間は短いほどストレスが少ないです。
さらに、小売アプリは毎日使うものではないので、アプリ容量が大きいと削除されてしまう可能性が高いです。また、久しぶりに使うために再度DLしたが、パスワードを忘れてログインできないこともストレスに繋がります。
具体的な数字については、小売アプリの中でもEC機能が入っているものは比較的容量が大きくなりがちですが、50MB以下には抑えたいところです。好例はユニクロアプリです。アパレル系小売アプリは高解像度の画像を多用しがちで150MB超えのものもある中、30MB程度に抑えられています。
Segmentが行った調査ではアプリサイズを3MB→150MBに増やすとDL数が66%減少したという結果も出ていますので、画像を最適化するなどの対策でアプリの容量を下げることは必須と言えると思います。
画像を最適化させることは通信を早くすることにも繋がります。チラシやクーポン、キャンペーン等で高解像度の画像を使ってしまうと、表示が遅くなりストレスに感じます。なるべく画像を使わずテキストで表現したり、無駄に高解像度の画像の利用は控える必要があります。
【対策2】 登録の手間を減らす
レジで店員さんからアプリを紹介されたものの、会員登録が面倒でストレスを感じた経験は皆さんもあると思います。自分の後ろにお客さんが並んでいる時はさらにプレッシャーを感じるでしょう。
このようなストレスを減らすための工夫は、登録は極力後回しにさせることだと思います。
ベストな方法は「仮会員」というステータスを設けることで、会員登録をせずにポイントを貯められて、決済が終わった後の時間がある時に本登録を済ませてもらう形です。
次にできる方法としては、登録を極力簡単にするために、初期登録項目を極力少なくし、別のタイミングで入力させるように登録を分散する方法です。
例えば登録時はメールアドレス、パスワードのみの入力にして住所等は別のタイミングで、住所を登録するメリット訴求とともに登録を促すなどの工夫ができると思います。
また、DL後すぐにプッシュ通知や位置情報の許可設定を求めるケースも多いですが、何の説明もなく出しても許可してもらえる確率は低いと思います。こうした設定ダイアログは、最初に全部を出さずに、適したタイミングで、かつきちんとメリットを説明した上で出す事が大事です。設定ダイアログは一度しか出せないので、気をつけたいところです。
【対策3】 片手で使える工夫をする
冒頭に述べたように、店舗でのアプリを使うときは基本的に買い物中なので、片手が塞がっていることが多いです。昨今のスマートフォンのサイズは片手で操作するには大きすぎるため、小売アプリは特にこの点をケアする必要があると思います。
iOS15からsafariの検索窓が下付きになったことが最近話題になりましたが、ボタンなどのアクションが必要なものはなるべく下部に設置するとともに、大きめのボタンにするなどの工夫が必要だと思います。
さらにゼスチャーを使ったページ遷移ができるようにしておくことも大事です。Appleの標準では画面の端をスワイプする「エッジスワイプ」で前の画面に戻る仕様ですが、InstagramやTwitter、Facebookなど多くのアプリでは端ではなくどこをスワイプしても前のページに戻れるような工夫がされています。フルスクリーンのモーダルなどは閉じる為に画面最上部を押す必要があるため、半モーダルビューを使って画面下部でアクションが完結できるようにすることも効果的です。
スーパーやドラッグストアなど、女性が多く利用されるケースでは特に手の小さい方を想定してこれらを意識する必要があると思います。
【対策4】 階層を浅く、シンプルな構造にする
様々な小売アプリを見ていると、クーポンやチラシなどはネイティブ実装されているものの、EC機能はwebサイトをそのままアプリに組み込んででいるものが非常に多いです。
最近では親アプリの中に複数のwebアプリを統合させた「スーパーアプリ」が日本でも増えてきています。webアプリは、ネイティブのようにAppstoreの申請が不要で更新可能なことや、アプリ間をID連携することで会員登録自体を無くせるため、今後もこの動きは加速すると思います。
ただし、webビューとネイティブではページ遷移の仕方が異なるのでユーザーとしては非常に迷いやすく、織り交ぜると操作難易度が一気に上がります。1ページだけ戻るつもりが、TOPページまで戻ってしまうというような想定外の遷移が起きやすいです。
webビューを組み込む際には、極力ページ遷移が少なくなるように階層を浅くしたり、スワイプジェスチャーで前のページに戻れるようにするなど、ネイティブの挙動に近くなるような実装の工夫があると良いと思います。ただ、特に店頭やレジで扱うメイン機能に関してはネイティブ実装で安定した挙動を提供することが大事だと思います。
【対策5】 店員さんがオススメできるアプリにする
最後になりますが、小売アプリにおいて最も大事なことは店員さんの存在です。
小売のAppStoreレビューを各社見ていると、アプリそのものよりも、お店の商品や店員さんの対応に対して書かれていることが非常に多いです。
「スマホが全くわからない老人の私に親切に教えてくれました」「少しでも安価で購入できる方法を教えてくれました。また来ます」など、接客が良かったために高評価のレビューをつけるケースがとても多いと感じます。
逆に店員さん自身が「使いづらくてお客さんにおすすめしたくない」「お願いだから改善してほしい」というネガティブレビューを投稿するケースもよく見かけます。便利でお得にお買い物するためのアプリが、お店へのロイヤルティを下げることにも繋がってしまいます。
アプリ開発者は店員さんのオペレーションも含めたUIUXを考える必要があります。DLやクーポンを促すタイミング、バーコードの読み取り易さやディスプレイの明るさなども関わってきます。これらを実際の店舗や模擬店舗などを利用して、継続的にテストと改善をして精度を上げることが大事だと思います。
そして店員さんがアプリに詳しい状態をつくるために、店員さんにもユーザーとして使ってもらうことや、店員さんの声を定期的にヒアリングして開発に活かすことも大事だと思います。
まとめ
今回はアプリを使う上でマイナスになりやすいポイントを主に紹介しました。昨今の小売アプリは、無人決済や店内モード、BOPISなど、お買い物が便利になるようにどんどん進化しています。
DXデザイン室では新しいお買い物体験を作るべく、日々UIUXの調査や制作を行っています。一緒に働く仲間を募集していますので、興味がある方は是非、ご連絡下さい！