5月, 2019 | omotenashi.design

RettyのUX研究

2019/05/26時点

RettyはFacebookでの利用を強く推奨している。友人など信頼のおける人の口コミには大きな価値がある、というコンセプトなのであろうか。

コメント機能によって、情報の付加価値を圧倒的に上げているところが、NewsPicks と似たような考え方なのかもしれない。

近々、海外展開にも力を入れているとのこと。ログイン前トップで言語を選ぶことができる。

Facebookでないと、すべての機能は使えないとあるが、LINEとメールアドレスにもログインは対応。

ログイン後トップ。ユーザーがアプリを開く目的は、ほぼ検索行動なので、ホームタブの上部は、頻度高く使われる検索オプションがアイコンつきで設置されている。

「現在地周辺」及び「マップ」が一番左上の特等席をとってるので、Rettyが最も使われるユースケースとしては、「まさに今、この近くで」レストランを探すシーンがメインなのであろう。

「居酒屋」アイコンが3番目にある。居酒屋探しに使われることが多いからであろう。これは場所や時間帯に応じて、他のアイコンに変わるようにチューニングされているとかはあるのだろうか？（筆者は新宿で、夜に利用したため。）

現在地周辺を押すと、以下の画面。「営業中」で絞れるのは気が利いてる。今まさに行きたい店を探すシチュエーションからしたら、嬉しい気遣いだ。

並び順ロジックはわからないが、ある程度、人気のある店が上に来るようになっているであろう。

検索一覧の下部には、常に「マップ」ボタンがあり、いつでも場所を気にしながら検索が出来るのが嬉しい。

地図検索。Rettyの登録店がマップにピン表示さらており、画面下部のカードをずらしていくと、地図上のピンも反応して画面中央がその店のピンになる。このあたりはGoogleより気が効いている。

LINEPayの UX研究

2019/05/20、LINEペイが300億円キャンペーンを開始した。

トーク詳細画面に必ず吹き出しを表示。しかもタップするまで消えない仕様。MAUが7,500万人を超えるというLINE、これはかなり強めにアピールしてきているなーという印象。

キーボードエリアにアイコンが並んでおり、ペイのアイコンに「300億円祭」と併記。

22日、初速のユーザー数がまだまだ足りなかったのか、がっつりモーダルでも訴求してきている。

ただ、利用には本人確認が必要であり、ここの手間がかかると多くの人には使ってもらえない。

方法は３つあり、銀行口座、スマホ、郵送がある。銀行口座が推奨されている。スマホで身分証送るのはよくやられているが、一気に申し込みがあったのか、この方法はとれなくなっていた。

複数の銀行と提携。

上記の複数項目を入力したあと、さらに銀行側のサイトでも口座振替の手続きが必要。正直大変だ。

ここまでくるのに、かなりのユーザーが落ちてしまうと思われる。ただ、ユーザーの口座情報を獲得できるのには今後のサービス展開において大きな意味があると言えるであろう。

この1,000円を実際に使ってみよう。

PayPayの UX研究

※2019/05/14時点

電話番号とパスワードで登録。最初に500円もらえるだけあり（それだけが理由ではないと思うが）ダミーアカウントが量産されないように工夫がされている。

トップページ。残高がわかりやすく表示され、支払い用のバーコードとタップで簡単に切り替えることができることが示されている。

ホームタブに沢山のメニューが並んでいるが、ここはけっこう整理できそうだ。「支払い履歴」と「利用レポート」の区別がわかりづらいし、「アカウント」タブにも似たような項目が存在しているから、区別がわかりづらい。

支払い用のバーコードも表示されるが、これはタブ中央の「支払う」ボタンと被っている。支払いのためにだけ使うアプリなので、支払い方法がわからないことを絶対に避けたいという設計になっており、普段使いする場合の煩雑さは、ほぼ無視されているといえる。

また、バーコードは5分ごとに更新がかかっており、画面キャプチャがシェアされた場合のリスクヘッジになっている。

「近くのお店」タブを開くと、位置情報をとるための許可を求める説明とボタン。ユーザーに能動的にボタンを押させてから通知許諾をとることで確実に設定してもらえるように工夫がみられる。

ユーザーにとっては、周囲でPayPayが使える店がわかるこの位置情報機能、そこまで意味はなさそうだが。。タブにしてまで主要機能にする意味があるかは疑問である。

Pintarestの UX研究

※2019/05/11時点

メアド、Facebook 、Googleでの登録が可能。登録ではなく、「続行」という言い方は珍しいが、これは、ユーザーが登録している場合にも、ログインが出来るようになっていることによるもの。

「メールアドレスから続行」で既に登録済みのメアドを入力すると、以下のようにログイン導線に誘導される。これは嬉しい。

メアド、パスワードを一画面ずつ入力させる登録フロー。一問一答形式なので、ユーザーの気が散らない。かつ、3ステップで登録が終わることを示し、早くサービスを使いたい気持ちに対してストレスないように設計されている。

最後に年齢とユーザー名設定して終わり、、と思いきや

意外とこのあと、「あなたに合うコンテンツを表示するため」と、静かに国と性別を聞いてくるのである。

これらをアカウント登録とは一緒にせず、あくまで別としてユーザーに情報を登録させるのはうまい。

このあと、5件以上トピックを選ばせるところも強制しており、初回訪問のユーザーにサービスの魅力を知ってもらうための工夫がみられる。どこまでテストされているかわからないが、5件がPinterestのマジックナンバーなのだろう。（Twitterでも同じように最初に5人をフォローさせている。）

Pinterestにおいて秀逸なのは、ついついダラダラ見てしまうサービス設計だ。気になった写真の詳細を開くと「似ているピン」とあり、似たような画像が続く。普通のサービスであれば、これが数件出ているだけだが、Pinterestが凄いのは、この下スクロールが永遠に続けられるところにある。あと1スクロール、、とやっているうちに、ついつい時間が経ってしまうのだ。

Amazonの UX研究

※2019/05/09時点

言わずと知れたECの王者。今や何の企業かわからないが、GAFAと呼ばれるように、これからの世界をテクノロジーで変えていくこの会社から目が離せない。

スマホ利用の割合は7 から８割。

アプリのヘッダーには、プライム会員ならそれがわかるようにプライムと記載されている。

常に画面上部にはどこに届けるか？の情報が常時表示されており、ワンタップで購入が完了するだけに、しっかり間違いがないようにヘッジされている。

画面下部には、ほしい物リストが商品の画像つきで並んでいる。少し前からこのUIが採用されており、変更されてない点を鑑みると、一定の成果はあげられていそうだ。

左上のハンバーガーメニューは、様々な機能、メニューへの導線になっている。注文履歴や、欲しいものリストが上の方にあり、当然ではあるが、再注文など購入につながる機能が重視されている。

ECに特化したアプリだけあり、大事なメイン機能にフォーカスするため、複数のメイン機能を並列に並べやすいタブUIは採用されていない。

一方で、「ギフトアイデア」「プライム」など、一見して意味のわからないメニューもあり、少なくとも日本版のアプリ文言にはあまり気が配られていなさそうである。

ヘッダーエリアがだいぶ混雑していて何がなんだかわかり辛い。前画面に戻るアイコンがあるため、ハンバーガーメニューも左端をキープ出来ていない。カートや、お知らせといったアイコンも所狭しと並んでいる。

タブUIを採用したほうが、わかりやすいし、端末が大型化する中で使いやすさも向上しそう。（一覧性を損なうデメリットはあるが、ZOZOがやっているようにスクロール時に隠すなど工夫できる）

Origamiの UX研究

※2019/05/08時点

日本で群雄割拠となっているペイメントサービスの１つ。

もともとは、ECサービスを提供していたが、2015年からQR・バーコード決済に舵を切っている。

４タブ構成。アプリを開くと、ホームタブが開き、利用開始のボタンが一番最初に目につくような構成になっている。

ECとなるマーケットタブは3タブ目に位置しており、優先度が低い機能になっていることが伺える。

また、クーポンが画面の中心に表示され、金銭メリットが訴求されている。

登録はオーソドックスに、メールとFacebookを利用するもの。

登録時、電話番号認証も入る。

登録が完了すると、画面上部に支払い方法が表示される。スキャン支払い、コード支払い。この２つがどうやら支払い方法の模様。

ホームタブに「支払い」機能と、クーポンの宣伝エリアが同居しており、ややビジーな印象を受けるが、お得情報が自然とユーザーの目に入るように、主要機能を触る際のファーストビューに入るように工夫した結果ととれる。

ここのページを「なんかお得情報ないかな？」とユーザーはたびたび開くことになるであろう。

支払い機能をタップすると、クレジットカードか、銀行口座を設定する画面となる。ここではクレジットカードを選択。「スキャン」ボタンでクレジットカードを直接カメラで読み込むことで、入力が簡単になるのは嬉しい。

クレジットカード情報が入力されると、キーボードの上に「クレジットカードを追加する」ボタンがオレンジ＝強調色で表示される。コンバージョンボタンが一目でわかりやすい。

登録が終わると、支払い用のQRコードが表示されるようになる。コード支払いと、スキャン支払いは画面下部で切り替えが出来る。

使い方ガイドへの導線も画面下部に配置され、使い方がわからない場合の配慮がらみられる。

さて、メッセージタブを開くと、機能説明のポップアップが表示される。

支払いが終わったあとのレシートが届くとのこと。また、早速一件のメッセージが。

Origamiのキャラクターが案内人となり、このサービスの機能説明をしてくれている。最初にやるべきことを案内してくれているのは嬉しい。ただ、多くのユーザーはわざわざこの内容をしっかりは読まないであろう。

ただ、こういったサービスのお知らせを代弁してくれるキャラクターがあることで、今後、タイミングを図ってユーザーとコミュニーケーションをしやすい。

早速、松屋で利用してみた。

クーポンがあるものの、それを全く意識せずに店舗のQRリーダーにOrigamiの支払い用QRコードを読み込ませて利用したが、問題なく利用できた。

支払いが終わると、レシートが届く。ここは松屋から届いた。店舗ごとにメッセージルームを分けている様子。店舗ごとにお知らせをユーザーに送ったり、コミュニケーションしていくプラットフォームとなっていく狙いがあるのであろう。

レシートも簡単に確認できる。

一点、残念だったのが、レビューをお願いするタイミング。ほとんど利用していないタイミングでメッセージ画面を開いたときにレビューをお願いされた。このタイミングではまだサービスの利用経験が浅いので、良い感想は持てているユーザーはいない。もう少し後から訴求したほうが良いのではないか。

利用明細はメッセージで届く。割引額も表示されることで、どれだけ得したか？を知ることができる。

メルカリのUX研究

※2019/05/06時点

出品アイコンは下タブの中心に配置されている。これまでは以下画像のように、タブUIは採用されておらず、画面右下に出品ボタンを配置しており、ハンバーガーメニューを採用していたが、方針転換している。

タブUIと比較したハンバーガーメニューのメリットとして、画面下部を占拠しないのでメインコンテンツの一覧性を高く保てることが挙げられるが、

タブ機能のほうが、メインとしている機能がわかりやすくユーザーがサービスで出来ることをすぐに理解しやすく、ワンタップで機能を行き来することができる。加えてハンバーガーメニューの中はスペースに余裕があるので、色んな機能を無思考に加えてしまいやすく、UIが煩雑になりやすい。

iphoneXリリース頃から端末の縦画面サイズは十分に確保されるようになったため、タブUIに変更したほうが使いやすいものになると判断したのであろう。

出品アイコンをタップすると、アクションシートが開く。バーコード出品というのがある。本やCDはこれで出品に必要な項目が自動入力されるので非常に楽である。

バーコード出品の画面。いかに出品までの手間を削減するか？ということに非常に工夫がなされている。

さらに、画像解析も導入されており、バーコードを読み取れなかった商品においても、写真を撮ったあとで、画像解析が走る。これはすごい。

画像から推定される商品の選択肢が提示される。

出品までの手間がユーザーにとっての壁なので、ここを超える工夫が随所随所に見られる。

テンプレート機能もその１つ。あらかじて登録してあるテンプレを選択すると自動で入力されるようになっている。出品原稿の品質向上にもなり、購入者側にも良い機能だ。

※2019/06/02追記

いいねや、コメントがついてる商品について、メルカリ側が売れやすくなるように、値下げをおすすめしてくれる機能がある。

売れやすくなるための金額が提示され、ボタン１つで提示された値段に変更できるのが嬉しい。

このあと、すぐに商品が売れ、その効果を実感した。

JapanTaxiのUX研究

※2019/05/05時点

通知の許諾メリットを説明してから、通知のダイアログをだしている。

位置情報の許諾も同様だ。

地図で乗る地点と降りる地点を指定。迎えまでの時間と、移動にかかる所要時間、料金が一目でわかる点は嬉しい。

友人へのシェアをすると、千円割引が受けられる。

端末の言語設定が英語の場合は英語版になる。

このあたりは外人には嬉しい。

ZOZOTOWNのUX研究

※2019/05/05時点

大まかなタブ構成は、一般的なECサイトのアプリとあまり変わらない。

ホームタブを下スクロールしていくと、初めて買い物する人に人気のカテゴリーを表示することで、明確な目的なく買い物検索をしているユーザーが検索しやすくする工夫が見られる。

ヘッダーとフッターがスクロールに応じて閉じるのも素晴らしい。ユーザー回遊時の一覧性を高める工夫だが、ここまで気遣いできているサービスは少ない。（他ではPinterestとかでみられる）

検索画面のUIは、服を選ぶときの重要な要素であるサイズと男女、子供、色、価格が直感的に選べるようになっている。

価格を500円ごとにスライダーで選べる直感的なUI。0→100円のみ、100円刻みとなっている。少額であるが、ニーズが多い価格帯なのだろうか。また、至るところに「ツケ払い」訴求があり、かなりアピールを強めている。

商品詳細。画像を出来るだけ大きく配置しており、価格とブランドに大きなフォントを使用。赤字で「いつまでに届くか」も追記している。右上のアイコンからは、商品画像一覧に飛ぶとこができる。また、左下に×アイコンがあり、端末のサイズが大きくても、詳細画面を閉じやすいようになっている。

この工夫は以下のお知らせ画面でも同様に見られる。

以前買ったことのあるアイテムのサイズと比較できるのは嬉しい。直接試着できないECの弱みを埋めようとする工夫が見られる。

ZOZOのスタッフレビュー。これも直接手に取れないECの弱みを克服する工夫。厚み、柔らかさ、伸縮性、透け感について5段のレベル評価されている。

商品詳細画面で下スワイプ操作で一覧に戻れるインタラクションもバッチリ使い勝手は良い。

ZOZOブランドの特徴として、サイズ指定での購入ができるところが嬉しい。また、ZOZOスーツで計測済であれば、自分サイズからの大小を指定できる。

このサイズ調整がわかりやすい。画像付きで感覚もつかみやすい。

購入プロセス中に数秒間同じ画面に留まっていると、チャットサポートへの導線が出現。ユーザーの疑問をその場で解決し、安心して購買してもらおうという工夫と工数をちゃんとさいている。

決済カードの種類の多さから、24時間自宅外で受け取れるロッカー受け取りへの対応など、さすがZOZOタウンだ。やれることはやり切っている。

購買後の画面で、ユーザーの満足度を尋ねる。好評価レビューが集まれば、ストアでのダウンロード率、初回のオンボードにも効果的だ。