--- title: PayPayアプリにおけるオンラインとオフラインのユーザー体験 / YJTC19 in Shibuya B-5 #yjtc tags: #yjtc author: [Yahoo!デベロッパーネットワーク](https://www.docswell.com/user/ydnjp) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/W47Z54DGE3.jpg?width=480 description: PayPayは、スマホひとつでカンタン・おトクにお支払いができるアプリです。 本セッションでは、QRコード決済戦国時代に立ち向かうPayPayアプリの「便利」に勝る体験設計への奮闘とUXデザインが浸透した社内でのデザイナーの役割についてお話しました。 published: December 13, 19 canonical: https://www.docswell.com/s/ydnjp/K66DVK-2019-12-13-153240 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/W47Z54DGE3.jpg) PayPayアプリにおける オンラインとオフラインのユーザー体験 PayPay株式会社 デザイナー 青柳 麻紀 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 2 ![Page Image](https://bcdn.docswell.com/page/KYJ6931QJV.jpg) 青柳 麻紀 PayPay株式会社 今年の7月にPayPayにデザイナーとしてJoin 6月まではYahoo! JAPANアプリを担当 好きなものはお酒と女性アイドル 第4代 黒帯：ビジュアル設計 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 3 ![Page Image](https://bcdn.docswell.com/page/5GJ5NL42E4.jpg) 6月までは、Yahoo! JAPANアプリの UX責任者とPayPay機能を担当 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 4 ![Page Image](https://bcdn.docswell.com/page/V9E25LV1ER.jpg) PayPayのご紹介と アプリの体験のデザインにおいて PayPayが大切にしていることをお話します Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 5 ![Page Image](https://bcdn.docswell.com/page/5D7YKQ34JM.jpg) Hello PayPay Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 6 ![Page Image](https://bcdn.docswell.com/page/2VENRKV678.jpg) Hello! PayPay PayPayアプリのご紹介 2018/10/5 launch! Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 7 ![Page Image](https://bcdn.docswell.com/page/GY79MV6RE3.jpg) Hello! PayPay PayPayアプリのご紹介 App Store / Google Play Store アプリストア無料ランキング No.1 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ※2019年12月9日時点 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/5G78LPZGED.jpg) Hello! PayPay PayPayアプリのご紹介 Google Play Award 2019 ユーザー投票部門 アプリカテゴリ 最優秀賞 引用：https://play.google.com/store/apps/uservoting/Apps%20-%20Best%20Of%202019%20User%20Voting%20Page? id=mc̲bestof2019̲uv̲apps̲page Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 9 ![Page Image](https://bcdn.docswell.com/page/ML7LL1DX7R.jpg) Hello! PayPay PayPayアプリのご紹介 ユーザー数 加盟店申込数 2,000 万人 170 万カ所 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 累積決済回数 3 億回超 ※2019年12月現在 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/54EMMWP3EW.jpg) Hello! PayPay PayPayアプリのご紹介 iOS Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. Android # Page. 11 ![Page Image](https://bcdn.docswell.com/page/ZPERVY1R79.jpg) Hello! PayPay PayPayってこんな会社 共同出資会社 2018年6月15日に設立 技術提供 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 12 ![Page Image](https://bcdn.docswell.com/page/NP7XZGYYEX.jpg) Hello! PayPay PayPayってこんな会社 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 13 ![Page Image](https://bcdn.docswell.com/page/637K8434ED.jpg) Hello! PayPay PayPayってこんな会社 余談 実はヤフーとPaytmのカラーリング Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 14 ![Page Image](https://bcdn.docswell.com/page/4LJ32LGD75.jpg) PayPayの開発体制 アプリデザイナーの担当領域 支払いアプリ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. お店のツール # Page. 15 ![Page Image](https://bcdn.docswell.com/page/V8JDZN12EG.jpg) Hello! PayPay PayPayアプリのご紹介 iOS Android あらためてよろしくお願いします！ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 16 ![Page Image](https://bcdn.docswell.com/page/4VEPD5QLE8.jpg) 体験をデザインする上でPayPayが大切にしていること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 17 ![Page Image](https://bcdn.docswell.com/page/L27V1P56EQ.jpg) PayPayが大切にしていること 体験デザインをするうえで大切にしていること リリース時点で完璧は目指さない バランスの良い状態・”完璧”の手前で リリースし、その後改善する Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 18 ![Page Image](https://bcdn.docswell.com/page/Z5JG2P62JL.jpg) PayPayが大切にしていること リリースサイクル MON TUE WED THU FRI 要件・デザイン 開発 開発完了 コードFIX App審査 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. テスト開始 Appリリース テスト終了 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/V47QP249EP.jpg) PayPayが大切にしていること リリースサイクル MON TUE WED THU FRI D：要件・デザイン C：開発 B：開発完了 B：コードFIX A：App審査 B：テスト開始 A：Appリリース 週1回のリリース Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. B：テスト終了 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/DKE4YLLR71.jpg) PayPayが大切にしていること Home画面の変遷 10月 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 12月 4月 5月 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/PL716LLVEG.jpg) PayPayが大切にしていること 体験デザインをするうえで大切にしていること スピーディーなリリースサイクルの中で 多くを実験し、ユーザーの声を聞いて 改善してゆく Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 22 ![Page Image](https://bcdn.docswell.com/page/8G7WWVV372.jpg) PayPayが大切にしていること 体験デザインをするうえで大切にしていること リリース時点で完璧は目指さない バランスの良い状態・”完璧”の手前で リリースし、その後改善する Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 23 ![Page Image](https://bcdn.docswell.com/page/W4JZ544G73.jpg) PayPayが大切にしていること 体験デザインをするうえで大切にしていること 何のバランス？ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 24 ![Page Image](https://bcdn.docswell.com/page/KYE6933QEV.jpg) PayPayが大切にしていること 体験デザインをするうえで大切にしていること オンライン✕オフラインの バランス Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 25 ![Page Image](https://bcdn.docswell.com/page/5GE5NLL274.jpg) PayPayが大切にしていること オンライン✕オフラインのバランス ONLINE アプリの認知 インストール 利用登録 お店の認知 決済 OFFLINE アプリの中と外で行き来が発生する Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 確認 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/V9725LL17R.jpg) PayPayが大切にしていること オンライン✕オフラインのバランス ONLINE アプリの認知 インストール 利用登録 お店の認知 決済 OFFLINE どれか1つでも欠けると体験は止まってしまう Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 確認 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/5DJYKQQ4EM.jpg) PayPayが大切にしていること オンライン✕オフラインのバランス ONLINE アプリの認知 インストール 利用登録 お店の認知 決済 OFFLINE どれか1つでも欠けると体験は止まってしまう Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 確認 # Page. 28 ![Page Image](https://bcdn.docswell.com/page/2V7NRKK6J8.jpg) PayPayが大切にしていること バランス感覚 口座登録の 簡略化 お店の検索 機能を拡充 パフォーマン スを改善 ボーナス還元 の演出 利用登録 お店の認知 決済 確認 加盟店数 拡大 加盟店用 アプリの提供 ONLINE アプリの認知 インストール OFFLINE 体験を止めないよう双方に施策をうつ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 29 ![Page Image](https://bcdn.docswell.com/page/GYJ9MVVR73.jpg) PayPayが大切にしていること バランス感覚 施策 施策 ONLINE OFFLINE Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 30 ![Page Image](https://bcdn.docswell.com/page/5GJ8LPPG7D.jpg) PayPayが大切にしていること バランス感覚 一部のお店でしか 使えない 使えるお店検索の ユーザビリティを 磨き込む OFFLINE ONLINE Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 31 ![Page Image](https://bcdn.docswell.com/page/MLJLL11XJR.jpg) PayPayが大切にしていること バランス感覚 お店が 探しにくい 加盟店を 全国に増やす ONLINE OFFLINE Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 32 ![Page Image](https://bcdn.docswell.com/page/547MMWW37W.jpg) PayPayが大切にしていること バランス感覚 お店が探しやすく すぐ見つかる 使えるお店が いっぱいある ONLINE OFFLINE Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 33 ![Page Image](https://bcdn.docswell.com/page/ZP7RVYYRJ9.jpg) PayPayが大切にしていること バランス感覚 使えるお店がかなり増えた 検索機能のリニューアル Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 34 ![Page Image](https://bcdn.docswell.com/page/NPJXZGGY7X.jpg) PayPayが大切にしていること バランス感覚 オンライン✕オフラインの体験の設計には 双方のバランスの取れた状態を保つことを 心がけている Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 35 ![Page Image](https://bcdn.docswell.com/page/63JK84447D.jpg) PayPayが大切にしていること バランス感覚 担当領域外との密なコミニュケーション Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 36 ![Page Image](https://bcdn.docswell.com/page/4LE32LLDJ5.jpg) PayPayが大切にしていること バランス感覚 アプリの外で何が起こっているかを可視化 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 37 ![Page Image](https://bcdn.docswell.com/page/V8EDZNN27G.jpg) PayPayが大切にしていること スピード どのようにスピードを保っている？ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 38 ![Page Image](https://bcdn.docswell.com/page/4V7PD55L78.jpg) PayPayが大切にしていること スピード ビジュアルで会話する スピードを保つためにやっていること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 39 ![Page Image](https://bcdn.docswell.com/page/L2JV1PP67Q.jpg) PayPayが大切にしていること スピード 要件定義からビジュアルラフで検討する ワイヤーフレームなどでの議論を省く Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 40 ![Page Image](https://bcdn.docswell.com/page/Z5EG2PP2EL.jpg) PayPayが大切にしていること スピード 要件 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. UXフロー # Page. 41 ![Page Image](https://bcdn.docswell.com/page/V4JQP2297P.jpg) 60%程度のビジュアルラフで要件ツメをしていく Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 42 ![Page Image](https://bcdn.docswell.com/page/DK74YLPRJ1.jpg) PayPayが大切にしていること スピード 要件定義 画面フロー ワイヤー フレーム 検証 一般的なデザインフロー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ビジュアル デザイン # Page. 43 ![Page Image](https://bcdn.docswell.com/page/PLJ16L9V7G.jpg) PayPayが大切にしていること スピード 承認会議 要件定義 承認会議 画面フロー ワイヤー フレーム 承認会議 検証 一般的なデザインフロー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ビジュアル デザイン # Page. 44 ![Page Image](https://bcdn.docswell.com/page/8GJWWVQ3J2.jpg) PayPayが大切にしていること スピード プロダクト責任者 レビュー プロダクト責任者 レビュー 要件定義(PM＋Designer） ラフビジュアルデザイン UXフロー作成 検証 PayPayのデザインフロー Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ビジュアル ファイナライズ # Page. 45 ![Page Image](https://bcdn.docswell.com/page/W4EZ54WGJ3.jpg) PayPayが大切にしていること スピード 事例 ・銀行口座登録フローの改善 ・本人確認機能の追加 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. 約2ヶ月でリリース # Page. 46 ![Page Image](https://bcdn.docswell.com/page/KY7693GQ7V.jpg) PayPayが大切にしていること スピード Yahoo!マネーの銀行口座登録画面 ▼ PayPay独自の口座登録画面を開発 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 47 ![Page Image](https://bcdn.docswell.com/page/5G75NLV2J4.jpg) PayPayが大切にしていること スピード PayPay内で簡単に本人確認が できるようにする Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 48 ![Page Image](https://bcdn.docswell.com/page/V9J25L31JR.jpg) 60%程度のビジュアルラフでUXフローを作成 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 49 ![Page Image](https://bcdn.docswell.com/page/5DEYKQ147M.jpg) 議論検証を重ね、何度もアップデート Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 50 ![Page Image](https://bcdn.docswell.com/page/2VJNRK26E8.jpg) PayPayが大切にしていること スピード 初稿のUI Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. リリース版 # Page. 51 ![Page Image](https://bcdn.docswell.com/page/GYE9MV1RJ3.jpg) PayPayが大切にしていること スピード 初稿のUI Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. リリース版 # Page. 52 ![Page Image](https://bcdn.docswell.com/page/5GE8LP4GJD.jpg) PayPayが大切にしていること スピード ビジュアルラフ込みのUXフローで 正常系のみ、全体の70%ほどの要件定義を完了 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 53 ![Page Image](https://bcdn.docswell.com/page/MLELL16XER.jpg) PayPayが大切にしていること スピード ビジュアルで会話することのメリット Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 54 ![Page Image](https://bcdn.docswell.com/page/54JMMW53JW.jpg) PayPayが大切にしていること スピード はじめから最終イメージに近いもので議論ができ、 リリースするもののイメージが経営層含め全職種で 合致した状態でプロジェクトが進行できる ワイヤーではいい感じだったけど ビジュアルにしたらそうじゃなかった…を防げる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 55 ![Page Image](https://bcdn.docswell.com/page/ZPJRVY3RE9.jpg) PayPayが大切にしていること スピード 仕様書やワイヤーフレームだけでは気づかない穴に 早い段階で気がつくことができ、戻りも少ない そのままプロトタイプツールで最終イメージに近いかたちで検証ができる 早い段階で実装難易度がわかる Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 56 ![Page Image](https://bcdn.docswell.com/page/NPEXZG4YJX.jpg) PayPayが大切にしていること スピード ビジュアルで会話する ＝ 総合的に見て効率的 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 57 ![Page Image](https://bcdn.docswell.com/page/63EK84Z4JD.jpg) PayPayが大切にしていること スピード 気をつけるべき点 ・議論中、ビジュアルの細かい点で議論が発散しないよ うに注意が必要 ・要件定義とビジュアルデザインの同時進行はある程度 の知識経験がないと逆効果になる場合がある Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 58 ![Page Image](https://bcdn.docswell.com/page/4L732LDDE5.jpg) PayPayが大切にしていること バランスとスピードをバックアップするもの 良いバランス スピード 2つをバックアップするもの Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 59 ![Page Image](https://bcdn.docswell.com/page/V87DZNP2JG.jpg) PayPayが大切にしていること バランスとスピードをバックアップするもの 質の高いジャッジ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 60 ![Page Image](https://bcdn.docswell.com/page/4VJPD5NLJ8.jpg) PayPayが大切にしていること バランスとスピードをバックアップするもの プロダクト責任者がUX責任者を兼任 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 61 ![Page Image](https://bcdn.docswell.com/page/L2EV1PK6JQ.jpg) PayPayが大切にしていること バランスとスピードをバックアップするもの プロダクト責任者 レビュー プロダクト責任者 レビュー 要件定義(PM＋Designer） ラフビジュアルデザイン UXフロー作成 検証 ビジュアル ファイナライズ 都度プロダクトの責任者であるUX責任者と議論 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 62 ![Page Image](https://bcdn.docswell.com/page/Z57G2PQ27L.jpg) PayPayが大切にしていること PayPayが大切にしていること バランスとスピードをバックアップするもの バランスとスピードをバックアップするもの ビジネス要件とデザイン観点での ビジネス要件とデザイン観点での ジャッジが同時に行える ジャッジが同時に行える Copyright© Copyright© 2019 2019 Yahoo Yahoo Japan Japan Corporation. Corporation. All All Rights Rights Reserved. Reserved. # Page. 63 ![Page Image](https://bcdn.docswell.com/page/V4EQP2K9JP.jpg) まとめ Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 64 ![Page Image](https://bcdn.docswell.com/page/DKJ4YLKRE1.jpg) PayPayが大切にしていること 体験デザインをするうえで大切にしていること リリース時点で完璧は目指さない バランスの良い状態・”完璧”の手前で リリースし、その後改善する Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 65 ![Page Image](https://bcdn.docswell.com/page/PLE16LXVJG.jpg) まとめ アプリの体験デザインをするうえで大切にしていること 良いバランス Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. スピード # Page. 66 ![Page Image](https://bcdn.docswell.com/page/8GEWWVN3E2.jpg) まとめ 良いバランス オンライン✕オフラインの体験の設計には 双方のバランスの取れた状態を保つことを 心がけている Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 67 ![Page Image](https://bcdn.docswell.com/page/W47Z543GE3.jpg) まとめ スピード ビジュアルで会話する スピードを保つためにやっていること Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 68 ![Page Image](https://bcdn.docswell.com/page/KYJ693XQJV.jpg) まとめ スピード UX責任者 レビュー UX責任者 レビュー 要件定義(PM＋Designer） ラフビジュアルデザイン UXフロー作成 検証 早い段階でビジュアルで会話 Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. ビジュアル ファイナライズ # Page. 69 ![Page Image](https://bcdn.docswell.com/page/5GJ5NLX2E4.jpg) PayPayが大切にしていること バランスとスピードをバックアップするもの プロダクト責任者がUX責任者を兼任 ビジネス要件とデザイン観点での ジャッジが同時に行える Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 70 ![Page Image](https://bcdn.docswell.com/page/4LE32LX1J5.jpg) PayPayはまだまだこれから… より良いものをご提供できるよう 日々精進します dummy Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 71 ![Page Image](https://bcdn.docswell.com/page/V8EDZN2K7G.jpg) ご清聴ありがとうございました Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved. # Page. 72 ![Page Image](https://bcdn.docswell.com/page/4V7PD51378.jpg) Copyright© 2019 Yahoo Japan Corporation. All Rights Reserved.