Clik here to view.
Clik here to view.
MUJI passport
価格：無料
店舗での購入時に見せることでマイルが貯まる、一種の会員証のようなもの。他にも、店舗へのチェックインでマイルを貯めたり、商品や店舗の在庫検索、またクーポンやニュース配信などメディア的側面も持つMUJI passport。ダウンロード数は累計300万を超える。
無印良品のアプリ「MUJI passport」は、リニューアル前、多機能であるが故にデザインが盛りだくさんで、パスポートモチーフの採用によって、マイルとポイントの違いがわかりづらくなっているなどの課題を抱えていました。2014年に受けたUX侍の取材でも、上下タブやページめくりのデザインなどを指摘され、2014年8月にバージョン2をリリース。機能はそのままに、デザインとUIを刷新しました。
主な改善点はこちら。
- 会員証のメイン画面
- マイルは円グラフに、ポイントは別表記にすることで差異をつけた
- 店舗へのチェックインが完了していることが一目でわかるアイコン
- 幅広い世代にとってのわかりやすさを重視して言葉を選ぶ
年齢や性別、リテラシーを越えてわかりやすいデザインを心がけて行ったリニューアル。前回の取材からアプリがどう改善されたのか、UX侍の森田さんと深津さんが再びインタビューに臨みました。本記事は、公開インタビュー形式で行われた「UX侍夜会の第一部」レポートです。
Clik here to view.
前バージョンよりは洗練された印象を受けましたが、ユーザー視点を根拠とする改善の余地はまだまだありそうですね。今後にも期待です。
Clik here to view.
大きく前進しました!! ただ、やはりちょっと政治的な機能が多すぎる印象はあります。お店で使うアプリに「これ本当に必要か？」というのを整理していければよいかなと。
店舗でMUJI passportを見せる人は来店数全体の20％
――リニューアルをして、ダウンロード数などはどれくらい伸びたんでしょうか。
Clik here to view.
株式会社良品計画
風間バージョンアップしたから伸びたかはわからないですけど、カーブとしては右肩上がりです。アクティブユーザーはある程度一定です。
深津アプリをアップデートしたとしても、それがいきなりみんなに知れ渡ってダウンロードだ！ とはならないので、最初の効果としては離脱率が減るみたいなところから始まるんでしょうね。
――リニューアルの目標はありましたか。
風間ダウンロード数と店舗でのMUJI passportの提示率です。リニューアル前の提示率は、お客様全体の15％位でしたが、現在は20％です。これはアプリの改善によるものと、店舗のスタッフの徹底した声かけによる案内の成果だと思います。広告をかけてダウンロードを増やすことはやっていないので。
――今回はUXの視点を取り入れてアプリをリニューアルされたということですが、ユーザーや社内の反応はいかがですか。
風間普段から店舗スタッフやカスタマーサポートなどから、色んな形でフィードバックが届いています。お店のスタッフ間でも、MUJI passportを使ってお客様とコミュニケーションをとることで店舗に来店してくれるという意識が高まっていますね。
深津普通、こういうアプリを用意しても、店舗の人たちはオペレーションが増えるから面倒だっていう反応が多いと思うんですけど、ちゃんと受け入れられているのがすごいですよね。
Clik here to view.
株式会社良品計画
川名アプリの存在意義を共有できているからですかね。たとえば、このアプリを提示してくれる人とそうでない人では、客単価がどれくらい違うかといったデータを毎週自動的に共有しています。ちゃんと共有することでスタッフのモチベーションが高まって、店舗で「パスポートはお持ちですか」と声をかけることが徹底されて、それがダウンロード数に直結していますね。
機能過多の左メニューをいかにスッキリさせるか
森田リニューアル後のアプリを見てみて、前回の取材で「これはない」と伝えた上下タブはなくなっていますよね。このメイン画面のUIは以前のものより、意図がはっきりしたと思います。
Clik here to view.
ただ、左上のハンバーガーがよくないですね（笑）。通常のアプリの挙動から想像すると、メニューからメイン画面を切り替えると思うんですが、コンテンツは画面下から現れるポップアップウィンドウ的な表示なんですよね。
Clik here to view.
あと、メイン画面のメニューは5個に整理されましたけど、左メニューの機能が多過ぎだと思いました。
Clik here to view.
風間これはまた斬られているわけですね（笑）。
一同笑
深津僕もこの左はすごいなと思いました。ひとまずたくさんあった機能が隔離できたことはイイと思います。次バージョンに向けて、左メニューの利用頻度などの統計をとって、エンゲージメントが低いものは外せるといいですね。もし、次に何かを入れるとなると、何かを削る必要があるので、どういったトレードオフをして次のバージョンが生まれてくるのかなと。
森田メイン画面にある5個のメニューは、リニューアル前のときに、ユーザーに良く使われていた機能が残っているということですか？
風間それもありますし、ここを使ってほしいというこちらの意志も含めた最終的な5つですね。
――お気に入りを使うシナリオってどんなことを想定していますか。
Clik here to view.
風間お気に入りの使用用途としては、お店に行く際のメモ代わりに使ってくれている人がいますね。あと、商品検索の機能は、商品を検索するというより、自分が欲しい商品の在庫がある店舗を調べることに使われています。
深津そこまであるなら、ここからオンラインで購入できるようにしちゃえばよくないですか？ 検索してそのまま買うっていう強力な導線になりそうですけど。
川名確かにアプリで購入できるようにしようと思えば、アプリ内に入れることもできます。ですが、アプリの機能が散漫になっちゃうんですよね。無印良品は、店舗もEコマースもありますけど、そのなかでもリアル店舗の体験がすごく大事だと思っています。お客様が無印の商品を想起して店舗に行こうと思ったときに、お店を探して商品を見つけてそれをレジまで持って行ってアプリを出す。この辺の利用シーンを想像して、何を入れるべきかを決めていきました。
森田僕もおすすめがあるなら、そのまま購入できた方がいいかなとは思う。けれどそうすると川名さんが言うようにどんどん肥大化していってしまう。深津くんのアプリデザインのスタンスは「シンプル側に振る」だと思うんだけど、今言ったような機能を足す方向になるのってどんな基準なの？
深津決済までできるようにしても、ユーザー行動的には「購入ボタン」と「住所」を押すっていう2クリックが増えるくらいかなと。2クリック増えるだけで、無印良品に関する買い物がアプリで全部解決するなら、トータルで見ればシンプルになるから。「アプリで検索して、Safariを開いて、購入する」というよりも全然いいかなって。
店舗流入を踏まえておすすめの精度を上げるには
深津逆に、店舗に流入することに特化するなら、おすすめを分けるより、おすすめの中に検索を入れてしまってユーザーが検索をする前におすすめに目が留まるようにするとか。今は、おすすめの中に1画面1カードで色んな商品を出していますけど、ここでユーザーをお店に誘導するならデイリーで切り替わるクーポンにした方が効果的かなとか。色んな商品をローテーションさせていく感じ。
Clik here to view.
川名それはいいかもしれないですね。
深津色んな商品をおすすめするのはいいんですけど、5年に1度買い替えるかどうかのベッドをおすすめされてもって感じが……（笑）。
森田おすすめ機能のおすすめ基準って何ですか？
川名店舗やEコマースでの購入履歴などを解析した巨大なレコメンデーションエンジンが生み出しています。
深津ベッドを買うならオンラインで届くのが嬉しいなって思うので、アプリですすめられてもなって思います。しかもメイン画面の一番左って一等地過ぎませんか（笑）。
川名次のバージョンでは情報の種類や見せ方などを見直したいねって話してます。
森田購入履歴からのレコメンドには、もう少しコンテクストがほしいと感じますね。
深津結局、好きなものとか買ったものだけでフィルタリングしてもあまり役に立たなくて。嫌いなものを学習させないと精度が出ないけど、嫌いなものを学習させるUIって面倒だったり政治的に難しかったりするんですよね。
非言語化するのであれば、アプリに入れる機能は3つ以下が理想的
――機能の追加よりも削除する方が難しいとよくいわれますが、そこはどう削ぎ落として洗練させていくのがいいのでしょうか。
川名色んな意見があるから難しいですよね。A/Bテストとかアプリ内解析のロジックやデータだけで社内を説得するのは、ハードルがすごく高いんですよね。コールセンターの窓口からはお客様の声がそのまま届くし、社内からは「おすすめ」のところに情報をどんどん出せばいいじゃないかとか。だから、深津さんがおっしゃっていたドロワーのなかに押し込めておいて、知らないうちにそっと外すみたいな2段階での対応がいいのかもしれないです（笑）。
風間ラベル一つをとっても議論があるんですよね。たとえば、サイドメニューを開くアイコン（ハンバーガー）を電話応対ではお客様に説明できないので、3本線の下に「サイドメニュー」と書いてほしいとか。
森田メニューっていうラベルも難しいですよね。下のもメニューだし、上のもメニューだし区別がつかない。
風間それでいうと、できるだけ非言語化していきたいと思っているんです。このプロジェクトで海外展開もしていくので、言葉を削ぎ落としていきたいなと。
深津すごくわかるんですけど、非言語化しようとするとアプリに入れる機能は3個とかにしないと難しいですね。両手以上の数のものを非言語化しようとすると、人間の記憶に新たなマークとそのマークを使う環境を覚えさせなきゃいけないから、チャレンジですよね。非言語化するのであれば、機能を削ることが現実的だと思います。
森田深津くんならどこから削る？
深津ダメユーザーの僕が付ける基準だと、アプリを開いた瞬間にパスポートが出ていて、真ん中にバーコードとチェックインボタンとポイントが書いてあるくらいだと使いこなせるな。パスポートを使う瞬間はお店にいることが多いはずなので、パスポートとチェックインを一緒にするのは上手くいきそうだなとか。機能をくっつけることで減らして行く。それ以外のものは隔離して別アプリだといいなと思います。
森田僕ならば、検索は店舗検索しかなくていい気がする。商品の検索はきついかな。
今も残る「マイル」と「パスポート」の混乱
――リニューアルの開発期間はどれくらいでしたか。また改善の最優先事項は？
風間開発期間は8か月くらいですかね。我々と開発サイドで改善点をどんどん可視化していって、そのなかで優先度を定めてアプローチしていきました。
川名前回のUX侍の取材で斬られたところから、といいたいんですけど（笑）。やっぱり、一番の優先順位はマイルのわかりづらさを解決するところでしたね。
深津マイルのコンセプトは初心者にはわかりづらいですよね。
川名そうですね。ソーシャルでの反響をこまめに見ていても、「1年経つとマイルがリセットされます」と案内したときに初めて「マイルとポイントってどう違うんだっけ？」という声があったりして。
風間マイルとポイントの違いは、一定のマイル数が貯まれば、それが自動的にポイントになって付与されます。ポイントが実際の買い物で使えるものです。
深津パスポートモチーフから来るスコア単位として「マイル」ってことですよね。たとえば、「MUJI 健康手帳」とかだったら、その単位はカロリーだったかもしれないんですよね。
風間そうです。こういうネーミングにも悩みましたね。結局、一般的にわかりやすいものが一番だろうとマイルに落ち着いた経緯があります。
深津ポイントを「コイン」という言葉にしたら一発で解決するかもしれないですね。購入時のディスカウントに直接使えるものだから。
森田メイン画面でマイルを全面に出すのは、自己顕示欲エリアだからいいんですけど、ポイントが自己顕示欲の結果としてもたらされた、自分用のお財布だってことがわかるように、ポイントの横にコインのマーク（お金）っぽい目印を付けて、差別化した方がいいですよね。
森田さらに、自己顕示欲を満たすという意味では、今の「次のステージまで1万3000マイル」より「2万分の3000マイル」という表示の方がいいかなと。今自分がどれだけ満たしているのか、ということの明示として。このエリアは誰が何のために見るのか？ という考え方をして、優先すべきエレメントを決める必要があると思います。
Clik here to view.
新しいことをやるより、あくまで使いやすさを重視
――iBeacon※とかってアプリに搭載する予定はありますか。
※Appleの提唱するBluetoothを用いた拡張位置情報サービス。無線電波を出す小型デバイスを店舗などに設置することで、特定の場所に近づいたときにiPhoneに通知をだしたり、店舗を自動認識したりできるようにすること。
川名やりたいねっていう話はあるんですけど、やっぱりiBeaconありきで何をやる？ という話になるとだいたいコケるんですよね。技術ありきではなく、たとえば、レジ待ちが長いとか売り場の課題解決のために技術を活用する形じゃないと。だから最近は、一回深呼吸をして落ち着いてから、頭の片隅に置いておくようにしています。
深津僕の中にある課題意識でいうと、店舗でレジの支払いをするときに店員に「アプリありますか」と聞かれますよね。そこから、スマホを出して、ロックを解除して、アプリを立ち上げて、バーコードを出すって、動作がもたついちゃうと恥ずかしいから、「アプリは持っていません」とか言っちゃうんですけど。そこiBeaconを使って、レジ付近に行くとプッシュで「アプリを出しましょう」とかってやってくれると、レジでの流れがスムーズでいいかなと思います。
森田今後も新しいバージョンを出していくんだと思うんですけど、アプリ内解析の結果と、ユーザーニーズの掘り起こしの掛け合わせを改善の主軸にしてみてほしいなと思います。小さい単位でいいと思うんですけど、施策の姿勢自体を一回振り切らないと、「捨てる・捨てない」の判断に思惑がどうしても影響しちゃうと思うので。機能を取り出して単体のアプリに分割するっていう道もあると思います。
深津Facebookのメッセンジャーアプリみたいなことですよね。
――では、川名さんと風間さん、今後アプリをどうリニューアルしていきたいかを聞かせてください。
川名MUJI passportを持っていると、お店でちょっとお得になったり、買い物が便利になったりという店舗体験を主軸において改善していきたいですね。
風間世の中にまだない新しいことを提供しようという意志はないのですが、アプリを使う側の立場で考えて、バラバラ使い勝手が違うよりは、極端な話、同じフォーマットにすることを含めて使いやすいさを重視していきたいですね。
森田リアルの店舗もオンラインもやっている他のブランドがパクってくれるくらいのね。
風間逆でもいいんですけどね（笑）。たぶん提供するサービスはそんなに変わらないと思うので。
森田わかりやすいことで使う人が定着するのはあると思います。僕としては、自己顕示欲エリアをきちんとデザインしてもらえると嬉しい。起動時の画面の満足度次第で、そのアプリを1日複数回起動するかどうかが決まるから。頻繁に使ってくれる人たちにとって、最初に見る画面が適切であることは大切だと思います。
深津これから、どうバージョンアップしていくのか楽しみですね。
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：MUJI passportアプリは、リニューアルしてホントに良くなったの？ 無印良品 × UX侍 | UXサムライ | Web担当者Forum
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.
Clik here to view.
森田 雄（もりた ゆう）
東芝EMI、マイクロソフト、ビジネス・アーキテクツなどを経て、現在はツルカメ代表取締役社長、ネコメシ代表取締役CEO、KDDIウェブコミュニケーションズ顧問。IA/UXデザイン、アクセシビリティ、ユーザビリティのスペシャリスト。趣味は料理とカメラ。
→Facebookページ
→Twitterページ
→ブログ
（インタビュー）
Clik here to view.
深津 貴之（ふかつ たかゆき）
インターフェースデザイナー、株式会社THE GUILD代表。スマートフォンのアプリやウェブを中心に、使い易さと気持ちよさを追求している。ネット上ではfladdict名義で活動。
→Facebookページ
→Twitterページ
→ブログ
（インタビュー）
Clik here to view.
三橋 ゆか里（みつはし ゆかり）
ITライター・編集者。ECショップ、UIコンサル会社などを経て2009年に独立。Markezine、The Bridge、Japan Timesなどで執筆。Hanakoなどのウェブ・スマホ特集なども手掛ける。
→techdoll.jp（ブログ）
→Facebookページ
（執筆）
撮影：Web担当者Forum編集部
協力：イマジカデジタルスケープ
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.