デザイナーとPMの両ロール_３つのポイント

Transcript

1. © 2023 Reiwa Travel, Inc. デザイナーとPMの両ロール ３つのポイント toy
2. 自己紹介 戸井 椋也 福岡のデザイン会社でUIデザインを中心にクライアントワークで デザイン経験を積んだのちに、2024年5月に令和トラベルにデザ イナーとしてジョイン。 旅行アプリNEWTのプロダクトデザイナー、PMとして従事。 デザインシステムなども担当しています。 経歴 パーソナリティ アウトドアよりもイ ンドア派です！ 家に猫がいます！ © 2023 Reiwa Travel, Inc.
3. 今日お話しすること PMとデザイナーの両ロールが働きやすいという話 © 2023 Reiwa Travel, Inc.
4. デザイナーとPMと両ロールの働き方 デザイナーとPMと両ロールは © 2023 Reiwa Travel, Inc. UIと仕様の行き来がすぐできる
5. デザイナーとPMと両ロールの働き方 © 2023 Reiwa Travel, Inc. PMとデザイナーの両ロールの具体的なメリットを 3つの観点、最近の事例からお話しします
6. デザイナーとPMと両ロールの働き方 © 2023 Reiwa Travel, Inc. @ PM領域のスキルがデザインに生き` @ 仕様が悪いとデザインも悪F @ 引き算がしやすい
7. デザイナーとPMと両ロールの働き方 © 2023 Reiwa Travel, Inc. その前に
8. チームについて © 2023 Reiwa Travel, Inc. ミッション : タビマエ体験 PM プロダクトデザイナー バックエンドエンジニア フロントエンドエンジニア QAエンジニア アプリエンジニア ミッション : 検索体験 PM プロダクトデザイナー バックエンドエンジニア フロントエンドエンジニア QAエンジニア アプリエンジニア ミッション : ツアー商品開発 PM プロダクトデザイナー バックエンドエンジニア QAエンジニア プロジェクトA マーケ担当 コミュニケーション デザイナー プロジェクトB コミュニケーション担当 コミュニケーション デザイナー
9. チームについて © 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人のチーム
10. PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. PM領域のスキルがデザインに生きる
11. PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. 仕様読み取り UI磨き込み・議論 アウトプット UIデザインしかしない場合
12. PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. 仕様読み取り UI磨き込み・議論 アウトプット UIデザインしかしない場合 PMのスキル領域があると、 ここより前段階からUIやカスタマー体験を想定しながら関われる
13. PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. 複数の観点からプロダクトのあるべきを考えられる Biz 事業KPI ⁨⁩⁨⁩Data ツアー在庫などの内部データ カスタマーの行動データ Design 競合他社から得られるUIの意図 体系的なUIやUXの知識
14. PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. データからアプローチした事例
15. 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
16. 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
17. 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ポイント〜 たまる カスタマーの行動データからどの順 番でいくつまで表示するかを検討
18. Case. 「カテゴリchips」の開発 © 2023 Reiwa Travel, Inc.
19. PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. AIを使用してSQLが書けて便利 AIエディタ「cursor」
20. PM領域のスキルがデザインに生きる © 2023 Reiwa Travel, Inc. できることが増え、 複数の視点からデザインを検討できる
21. 仕様が悪いとデザインも悪い © 2023 Reiwa Travel, Inc. 仕様が悪いとデザインも悪い
22. 仕様が悪いとデザインも悪い © 2023 Reiwa Travel, Inc. 仕様とデザインどちらも責任持つしかない この仕様だとこんな感じのUIが限界... みたいな仕様とデザインの間の揺れからできる妥協策が減る
23. 仕様が悪いとデザインも悪い © 2023 Reiwa Travel, Inc. デザインの意図が説明できる 責任を持つとは？
24. Case. 「以前のしぼりこみ」の開発 © 2023 Reiwa Travel, Inc. 9:41 しぼりこみ ならびかえ おすすめ順 ️料金が低い順 ️料金が高い順 以前のしぼりこみ 座席クラス：エコノミー（23） ヒルトン ハワイアン ビレッジ ワイキキ ビー チリゾート（23） 周遊プラン （23） オーシャンビュー（23） 朝食つき（23） 1人あたりの旅行代金 下限なし 〜 ¥1,000,000+ ホテルグレード
25. Case. 「以前のしぼりこみ」の開発 © 2023 Reiwa Travel, Inc. なぜ、ならびかえの後なの？ なぜ、ラベルは「以前の」し ぼりこみなの？ なぜ、座席クラスだけしぼりこ みのタイトルがついてるの？ なぜ、表示する項目は5個な の？ 9:41 しぼりこみ ならびかえ おすすめ順 ️料金が低い順 ️料金が高い順 以前のしぼりこみ 座席クラス：エコノミー（23） ヒルトン ハワイアン ビレッジ ワイキキ ビー チリゾート（23） 周遊プラン （23） オーシャンビュー（23） 朝食つき（23） 1人あたりの旅行代金 下限なし 〜 ¥1,000,000+ ホテルグレード
26. Case. 「以前のしぼりこみ」の開発 © 2023 Reiwa Travel, Inc. なぜ、ならびかえの後なの？ 「以前のしぼりこみ」はならびかえを含 まない、以前しぼりこみで使った項目5 つが表示されるようになっています。故 に、対象外のならびかえの下に配置する ことで、ならびかえが含まれないことを 構造で伝えています。 なぜ、ラベルは「以前の」し ぼりこみなの？ 複数案から最終的に「以前の」に決定し ました。 たとえば、「前回の」だと、1回前に使用 したしぼりこみのみに対応のように受け 取られてしまうため、不採用にしまし た。 なぜ、座席クラスだけしぼりこ みのタイトルがついてるの？ 「エコノミー」や「ビジネス」のような 単語だけだと何なのかわかりにくい項目 にはタイトルをつけるようにしていま す。全てにつけると逆に情報が多くなり すぎるため、意味が伝わりにくい項目の みにタイトルをつけています。 他の項目には「行き/帰りの出発時間」な どがあります。 なぜ、表示する項目は5個な の？ ベンチマーク各社の調査結果とNEWTの 過去データから判断して決定しました。 似た機能のあるベンチマークのUI調査か ら仮説を立て、最終的にNEWTカスタ マーの平均しぼりこみ項目選択数と照ら し合わせて、最終的に5がUI的に使いやす いと判断しています。 9:41 しぼりこみ ならびかえ おすすめ順 ️料金が低い順 ️料金が高い順 以前のしぼりこみ 座席クラス：エコノミー（23） ヒルトン ハワイアン ビレッジ ワイキキ ビー チリゾート（23） 周遊プラン （23） オーシャンビュー（23） 朝食つき（23） 1人あたりの旅行代金 下限なし 〜 ¥1,000,000+ ホテルグレード
27. 開発チームのスタンス © 2023 Reiwa Travel, Inc. なんでこうなの？に論理的に答えられるが デザイナーとしての役割
28. 開発チームのスタンス © 2023 Reiwa Travel, Inc. なんでこうなの？に論理的に答えられるが デザイナーとしての役割 開発に関わる人全員 「なんでこのデザインなんですか？」のスタンス
29. 開発チームのスタンス © 2023 Reiwa Travel, Inc. 例えば、QAの方から...
30. 開発チームのスタンス © 2023 Reiwa Travel, Inc. 例えば、QAの方から... これ、カスタマー視点から見ると気になるんだけど、あってる？ 既存の仕様で気になる箇所を、今だとどうあるべきか考えられてる？
31. 開発チームのスタンス © 2023 Reiwa Travel, Inc.
32. 開発チームのスタンス © 2023 Reiwa Travel, Inc. たとえ、やり直しになっても PMとデザイナーの両ロールなので、 すぐに仕様とデザインの修正を両方から正せる
33. まとめ © 2023 Reiwa Travel, Inc. 開発関係者が全員デザイン批評できる環境 PMとデザイナーの両立 意図のないデザインがなくなる
34. 引き算がしやすい © 2023 Reiwa Travel, Inc. 引き算がしやすい
35. 引き算がしやすい © 2023 Reiwa Travel, Inc. 機能開発に加えて、デザイナー視点から いらないものの削除が提案しやすい
36. 引き算がしやすい © 2023 Reiwa Travel, Inc. 引き算のデザインが生きた事例
37. Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル＆リ＆リトゾー ... 周遊プラン 行き 午前発 帰り 午後発 おとな1名・5日間（燃油込み） ¥150,800〜 キャンセル無料 10,000ポイント〜 たまる SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ローマー ワイキキ アット ザ アンバサダー エミレーツ航空 乗継便 行き 午前発 帰り 午後発 おとな1名・5日間（燃油込み） ¥150,800〜 10,000ポイント〜 たまる
38. Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル＆リ＆リトゾー ... 周遊プラン 行き 午前発 帰り 午後発 おとな1名・5日間（燃油込み） ¥150,800〜 キャンセル無料 10,000ポイント〜 たまる SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ローマー ワイキキ アット ザ アンバサダー エミレーツ航空 乗継便 行き 午前発 帰り 午後発 おとな1名・5日間（燃油込み） ¥150,800〜 10,000ポイント〜 たまる
39. 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ポイント〜 たまる
40. Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. この中で一番優先度が低い情報をけずる？ それって何？ 航空会社のロゴ？ 航空会社名が見切れてもいい？ フライトの種類？ 出発/帰りの時間帯？ 要素増えるけど、カード高くする？
41. Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. この中で一番優先度が低い情報をけずる？ それって何？ 目的である一覧上での カードの差別化から外れる。 考えられて今のカードの高さに なっているのを変えるのか？ 航空会社のロゴ？ 航空会社名が見切れてもいい？ フライトの種類？ 出発/帰りの時間帯？ 要素増えるけど、カード高くする？
42. Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル＆リ＆リトゾー ... 周遊プラン 行き 午前発 帰り 午後発 おとな1名・5日間（燃油込み） ¥150,800〜 キャンセル無料 10,000ポイント〜 たまる 既存からあったホテルとフライトアイコンがなくてもいいのでは？
43. Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. 他社見てもアイコンで示さずとも何の情報かわかるように設計してある
44. Case. 「ツアーカードに航空会社を追加」の開発 © 2023 Reiwa Travel, Inc. SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ザ・カハラ・ホテル＆リ＆リトゾー ... 周遊プラン 行き 午前発 帰り 午後発 おとな1名・5日間（燃油込み） ¥150,800〜 キャンセル無料 10,000ポイント〜 たまる SALE ホノルル (ハワイ) / 5 - 10日間 青い海が美しい、ワイキキビーチでまったりと過ご す贅沢な旅 ローマー ワイキキ アット ザ アンバサダー エミレーツ航空 乗継便 行き 午前発 帰り 午後発 おとな1名・5日間（燃油込み） ¥150,800〜 10,000ポイント〜 たまる
45. 引き算がしやすい © 2023 Reiwa Travel, Inc. CEOもニッコリ
46. 引き算がしやすい © 2023 Reiwa Travel, Inc. デザイナーからじゃないと発信できない 意思決定者が多いとできにくい 引き算のデザインがしやすい
47. 終わりに © 2023 Reiwa Travel, Inc. デザイナーとPMの両ロールは良い！ F できることが増え、複数の視点からデザインを検討でき… F 意図のないデザインがなくな… F 意思決定者が多い場合や、デザイナーからじゃない発信し にくい引き算のデザインがしやすい