Slide 1

Slide 1 text

© 2023 Reiwa Travel, Inc. デザイナーとPMの両ロール 3つのポイント toy

Slide 2

Slide 2 text

自己紹介 戸井 椋也 福岡のデザイン会社でUIデザインを中心にクライアントワークで デザイン経験を積んだのちに、2024年5月に令和トラベルにデザ イナーとしてジョイン。 旅行アプリNEWTのプロダクトデザイナー、PMとして従事。 デザインシステムなども担当しています。 経歴 パーソナリティ アウトドアよりもイ ンドア派です! 家に猫がいます! © 2023 Reiwa Travel, Inc.

Slide 3

Slide 3 text

今日お話しすること PMとデザイナーの両ロールが働きやすいという話 © 2023 Reiwa Travel, Inc.

Slide 4

Slide 4 text

デザイナーとPMと両ロールの働き方 デザイナーとPMと両ロールは © 2023 Reiwa Travel, Inc. UIと仕様の行き来がすぐできる

Slide 5

Slide 5 text

デザイナーとPMと両ロールの働き方 © 2023 Reiwa Travel, Inc. PMとデザイナーの両ロールの具体的なメリットを 3つの観点、最近の事例からお話しします

Slide 6

Slide 6 text

デザイナーとPMと両ロールの働き方 © 2023 Reiwa Travel, Inc. @ PM領域のスキルがデザインに生き` @ 仕様が悪いとデザインも悪F @ 引き算がしやすい

Slide 7

Slide 7 text

デザイナーとPMと両ロールの働き方 © 2023 Reiwa Travel, Inc. その前に

Slide 8

Slide 8 text

チームについて © 2023 Reiwa Travel, Inc. ミッション : タビマエ体験 PM プロダクトデザイナー バックエンドエンジニア フロントエンドエンジニア QAエンジニア アプリエンジニア ミッション : 検索体験 PM プロダクトデザイナー バックエンドエンジニア フロントエンドエンジニア QAエンジニア アプリエンジニア ミッション : ツアー商品開発 PM プロダクトデザイナー バックエンドエンジニア QAエンジニア プロジェクトA マーケ担当 コミュニケーション デザイナー プロジェクトB コミュニケーション担当 コミュニケーション デザイナー

Slide 9

Slide 9 text

チームについて © 2023 Reiwa Travel, Inc. Designer, PM Product owner QA Engineer ⁨⁨Backend Engineer ⁨Backend Engineer, PM ⁨⁩iOS⁨ Engineer ×2 ×2 ×2 Frontend Engineer ⁨⁩Android Engineer 検索体験を良くしようチーム 10人のチーム

Slide 10

Slide 10 text

PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. PM領域のスキルがデザインに生きる

Slide 11

Slide 11 text

PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. 仕様読み取り UI磨き込み・議論 アウトプット UIデザインしかしない場合

Slide 12

Slide 12 text

PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. 仕様読み取り UI磨き込み・議論 アウトプット UIデザインしかしない場合 PMのスキル領域があると、 ここより前段階からUIやカスタマー体験を想定しながら関われる

Slide 13

Slide 13 text

PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. 複数の観点からプロダクトのあるべきを考えられる Biz 事業KPI ⁨⁩⁨⁩Data ツアー在庫などの内部データ カスタマーの行動データ Design 競合他社から得られるUIの意図 体系的なUIやUXの知識

Slide 14

Slide 14 text

PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. データからアプローチした事例

Slide 15

Slide 15 text

Case. 「カテゴリchips」の開発 © 2023 Reiwa Travel, Inc. 9:41 ホノルル 1/26(水) - 1/29(日) 1室, 2名 しぼりこみ おすすめ順 マップ 検索結果 200軒 日本語OK! あと1室 ザ リッツ カールトン ミレニア シンガポール 4.5 / 5 (1,000件) 会員割引 ¥40,000 1泊 ¥24,000 9:41 ホノルル 1/26(水) - 1/29(日) 1室, 2名 しぼりこみ 料金 ホテルグレード 検索結果 200軒 日本語OK! あと1室 ザ リッツ カールトン ミレニア シンガポール 4.5 / 5 (1,000件) 会員割引 ¥40,000 1泊 ¥24,000

Slide 16

Slide 16 text

Case. 「カテゴリchips」の開発 © 2023 Reiwa Travel, Inc. 9:41 ホノルル 1/26(水) - 1/29(日) 1室, 2名 しぼりこみ おすすめ順 マップ 検索結果 200軒 日本語OK! あと1室 ザ リッツ カールトン ミレニア シンガポール 4.5 / 5 (1,000件) 会員割引 ¥40,000 1泊 ¥24,000 9:41 ホノルル 1/26(水) - 1/29(日) 1室, 2名 しぼりこみ 料金 ホテルグレード 検索結果 200軒 日本語OK! あと1室 ザ リッツ カールトン ミレニア シンガポール 4.5 / 5 (1,000件) 会員割引 ¥40,000 1泊 ¥24,000

Slide 17

Slide 17 text

Case. 「カテゴリchips」の開発 © 2023 Reiwa Travel, Inc. 9:41 ホノルル 1/26(水) - 1/29(日) 1室, 2名 しぼりこみ 料金 ホテルグレード レビュー ホテル設備 ベッドの数 予約条件 部屋の設備 検索結果 200軒 日本語OK! あと1室 ザ リッツ カールトン ミレニア シンガポール 4.5 / 5 (1,000件) キャンセル無料 会員割引 ¥40,000 1泊 ¥24,000 他お支払い金額:¥10,000 10,000ポイント〜 たまる カスタマーの行動データからどの順 番でいくつまで表示するかを検討

Slide 18

Slide 18 text

Case. 「カテゴリchips」の開発 © 2023 Reiwa Travel, Inc.

Slide 19

Slide 19 text

PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. AIを使用してSQLが書けて便利 AIエディタ「cursor」

Slide 20

Slide 20 text

PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. できることが増え、 複数の視点からデザインを検討できる

Slide 21

Slide 21 text

仕様が悪いとデザインも悪い © 2023 Reiwa Travel, Inc. 仕様が悪いとデザインも悪い

Slide 22

Slide 22 text

仕様が悪いとデザインも悪い © 2023 Reiwa Travel, Inc. 仕様とデザインどちらも責任持つしかない この仕様だとこんな感じのUIが限界... みたいな仕様とデザインの間の揺れからできる妥協策が減る

Slide 23

Slide 23 text

仕様が悪いとデザインも悪い © 2023 Reiwa Travel, Inc. デザインの意図が説明できる 責任を持つとは?

Slide 24

Slide 24 text

Case. 「以前のしぼりこみ」の開発 © 2023 Reiwa Travel, Inc. 9:41 しぼりこみ ならびかえ おすすめ順 ️料金が低い順 ️料金が高い順 以前のしぼりこみ 座席クラス:エコノミー(23) ヒルトン ハワイアン ビレッジ ワイキキ ビー チリゾート(23) 周遊プラン (23) オーシャンビュー(23) 朝食つき(23) 1人あたりの旅行代金 下限なし 〜 ¥1,000,000+ ホテルグレード

Slide 25

Slide 25 text

Case. 「以前のしぼりこみ」の開発 © 2023 Reiwa Travel, Inc. なぜ、ならびかえの後なの? なぜ、ラベルは「以前の」し ぼりこみなの? なぜ、座席クラスだけしぼりこ みのタイトルがついてるの? なぜ、表示する項目は5個な の? 9:41 しぼりこみ ならびかえ おすすめ順 ️料金が低い順 ️料金が高い順 以前のしぼりこみ 座席クラス:エコノミー(23) ヒルトン ハワイアン ビレッジ ワイキキ ビー チリゾート(23) 周遊プラン (23) オーシャンビュー(23) 朝食つき(23) 1人あたりの旅行代金 下限なし 〜 ¥1,000,000+ ホテルグレード

Slide 26

Slide 26 text

Case. 「以前のしぼりこみ」の開発 © 2023 Reiwa Travel, Inc. なぜ、ならびかえの後なの? 「以前のしぼりこみ」はならびかえを含 まない、以前しぼりこみで使った項目5 つが表示されるようになっています。故 に、対象外のならびかえの下に配置する ことで、ならびかえが含まれないことを 構造で伝えています。 なぜ、ラベルは「以前の」し ぼりこみなの? 複数案から最終的に「以前の」に決定し ました。 たとえば、「前回の」だと、1回前に使用 したしぼりこみのみに対応のように受け 取られてしまうため、不採用にしまし た。 なぜ、座席クラスだけしぼりこ みのタイトルがついてるの? 「エコノミー」や「ビジネス」のような 単語だけだと何なのかわかりにくい項目 にはタイトルをつけるようにしていま す。全てにつけると逆に情報が多くなり すぎるため、意味が伝わりにくい項目の みにタイトルをつけています。 他の項目には「行き/帰りの出発時間」な どがあります。 なぜ、表示する項目は5個な の? ベンチマーク各社の調査結果とNEWTの 過去データから判断して決定しました。 似た機能のあるベンチマークのUI調査か ら仮説を立て、最終的にNEWTカスタ マーの平均しぼりこみ項目選択数と照ら し合わせて、最終的に5がUI的に使いやす いと判断しています。 9:41 しぼりこみ ならびかえ おすすめ順 ️料金が低い順 ️料金が高い順 以前のしぼりこみ 座席クラス:エコノミー(23) ヒルトン ハワイアン ビレッジ ワイキキ ビー チリゾート(23) 周遊プラン (23) オーシャンビュー(23) 朝食つき(23) 1人あたりの旅行代金 下限なし 〜 ¥1,000,000+ ホテルグレード

Slide 27

Slide 27 text

開発チームのスタンス © 2023 Reiwa Travel, Inc. なんでこうなの?に論理的に答えられるが デザイナーとしての役割

Slide 28

Slide 28 text

開発チームのスタンス © 2023 Reiwa Travel, Inc. なんでこうなの?に論理的に答えられるが デザイナーとしての役割 開発に関わる人全員 「なんでこのデザインなんですか?」のスタンス

Slide 29

Slide 29 text

開発チームのスタンス © 2023 Reiwa Travel, Inc. 例えば、QAの方から...

Slide 30

Slide 30 text

開発チームのスタンス © 2023 Reiwa Travel, Inc. 例えば、QAの方から... これ、カスタマー視点から見ると気になるんだけど、あってる? 既存の仕様で気になる箇所を、今だとどうあるべきか考えられてる?

Slide 31

Slide 31 text

開発チームのスタンス © 2023 Reiwa Travel, Inc.

Slide 32

Slide 32 text

開発チームのスタンス © 2023 Reiwa Travel, Inc. たとえ、やり直しになっても PMとデザイナーの両ロールなので、 すぐに仕様とデザインの修正を両方から正せる

Slide 33

Slide 33 text

まとめ © 2023 Reiwa Travel, Inc. 開発関係者が全員デザイン批評できる環境 PMとデザイナーの両立 意図のないデザインがなくなる

Slide 34

Slide 34 text

引き算がしやすい © 2023 Reiwa Travel, Inc. 引き算がしやすい

Slide 35

Slide 35 text

引き算がしやすい © 2023 Reiwa Travel, Inc. 機能開発に加えて、デザイナー視点から いらないものの削除が提案しやすい

Slide 36

Slide 36 text

引き算がしやすい © 2023 Reiwa Travel, Inc. 引き算のデザインが生きた事例

Slide 37

Slide 37 text

Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル&リ&リトゾー ... 周遊プラン 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 キャンセル無料 10,000ポイント〜 たまる SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ローマー ワイキキ アット ザ アンバサダー エミレーツ航空 乗継便 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 10,000ポイント〜 たまる

Slide 38

Slide 38 text

Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル&リ&リトゾー ... 周遊プラン 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 キャンセル無料 10,000ポイント〜 たまる SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ローマー ワイキキ アット ザ アンバサダー エミレーツ航空 乗継便 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 10,000ポイント〜 たまる

Slide 39

Slide 39 text

Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. 要素少ない 航空会社名の上限:5文字 航空会社名の上限:7文字 航空会社名の上限:7文字 要素多い 1行 3_飛行機アイコンあり 航空会社写真あり 2_飛行機アイコンなし 航空会社写真あり 1_飛行機アイコンあり 航空会社写真なし SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル&リ&リトゾー ... エミレーÈÃ 乗継便 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 10,000ポイント〜 たまる SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル&リ&リトゾー ... エミレーツ航空 乗継便 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 10,000ポイント〜 たまる SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル&リ&リトゾー ... エミレーツ航空 乗継便 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 10,000ポイント〜 たまる

Slide 40

Slide 40 text

Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. この中で一番優先度が低い情報をけずる? それって何? 航空会社のロゴ? 航空会社名が見切れてもいい? フライトの種類? 出発/帰りの時間帯? 要素増えるけど、カード高くする?

Slide 41

Slide 41 text

Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. この中で一番優先度が低い情報をけずる? それって何? 目的である一覧上での カードの差別化から外れる。 考えられて今のカードの高さに なっているのを変えるのか? 航空会社のロゴ? 航空会社名が見切れてもいい? フライトの種類? 出発/帰りの時間帯? 要素増えるけど、カード高くする?

Slide 42

Slide 42 text

Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル&リ&リトゾー ... 周遊プラン 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 キャンセル無料 10,000ポイント〜 たまる 既存からあったホテルとフライトアイコンがなくてもいいのでは?

Slide 43

Slide 43 text

Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. 他社見てもアイコンで示さずとも何の情報かわかるように設計してある

Slide 44

Slide 44 text

Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル&リ&リトゾー ... 周遊プラン 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 キャンセル無料 10,000ポイント〜 たまる SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ローマー ワイキキ アット ザ アンバサダー エミレーツ航空 乗継便 行き 午前発 帰り 午後発 おとな1名・5日間(燃油込み) ¥150,800〜 10,000ポイント〜 たまる

Slide 45

Slide 45 text

引き算がしやすい © 2023 Reiwa Travel, Inc. CEOもニッコリ

Slide 46

Slide 46 text

引き算がしやすい © 2023 Reiwa Travel, Inc. デザイナーからじゃないと発信できない 意思決定者が多いとできにくい 引き算のデザインがしやすい

Slide 47

Slide 47 text

終わりに © 2023 Reiwa Travel, Inc. デザイナーとPMの両ロールは良い! F できることが増え、複数の視点からデザインを検討でき… F 意図のないデザインがなくな… F 意思決定者が多い場合や、デザイナーからじゃない発信し にくい引き算のデザインがしやすい