プロジェクトを成功に導く、デザイナーの仕事

2024.05.10開催の「視点邂逅#1」の登壇資料です。
半年間の機能開発「PICK機能の分解プロジェクト」を例に、プロジェクトを成功に導くために行った他職種とのコミュニケーションやデザインデータの工夫についてお伝えさせていただきました。

Transcript

1. プロジェクトを成功に導く、デザイナーの仕事 Uzabase / NewsPicks 吉川 亜香音 視点邂逅 #1
2. 視点邂逅 私について #1 Akane Yoshikawa Product Designer akanyoshi.com 2018.09 ~ NewsPicks X: @yossiyossi923
3. 視点邂逅 #1
4. 視点邂逅 #1
5. 視点邂逅 今日のテーマ デザイナーとして 何を意識してプロジェクトを進めているのか #1
6. 視点邂逅 今日のテーマ コミュニケーション と デザインデータ デザイナーとして 何を意識してプロジェクトを進めているのか #1
7. NewsPicksのボタン「PICK」を「保存・おすすめ・コメント」の 3つの機能に分ける施策を実施しました。先行してアプリ開発から 2023年7月にスタートし12月にリリース、約半年間のプロジェク トとなりました。 PICK分解プロジェクト 視点邂逅 #1
8. 視点邂逅 #1 Owner PdM Server Designer QA iOS Android 2023.07 - 12 期間 メンバー構成
9. 視点邂逅 人に合わせて役割を変える (to PdM) 1 2 3 合意形成は早めに・こまめに (to Designer) 隔週30分のMTGで不満を回収 (to Engineer) #1 コミュニケーション
10. 視点邂逅 #1 人に合わせて役割を変える to PdM ラフデザインまで仕上げるタイプのPdM、要件が決まっていない段 階からデザイナーを巻き込むタイプのPdM、分析が得意で具体は デザイナーに任せるタイプのPdMなど得意領域ややり方が違い、 PJの内容によっても変わります。 …と合わせつつも、めちゃくちゃ意見いいます（大事） 仕様はデザインで洗い出しますね デザインはお任せください 要件から一緒にやりましょう 仕様はデザインで洗い出しますね デザインはお任せください 要件から一緒にやりましょう 先にデザインで提案しますね リサーチしてきました 細部は後で詰めましょう 仕様に合わせますね 先にデザインで提案しますね リサーチしてきました 細部は後で詰めましょう 仕様に合わせますね
11. 視点邂逅 #1 合意形成は早めに・こまめに デザインの決定の遅延はリリースの遅延に直結するため、決定をス ムーズにするテクニックは結構重要。デザインメンバーには早めに こまめに出して巻き込み「同じ課題に向き合う一員」として意見を 募るスタンスで持ち込んでいくと批評になりにくい。 デザイナー to Designer アイデアください！ アイデアください！ アップデートしました！ 気になるところあれば教えて！ アップデートしました！ 気になるところあれば教えて！
12. 視点邂逅 #1 隔週30分のMTGで不満を回収 通常プロジェクトの振り返りはリリース後で、些細な問題も解消が 後回し。問題が小さいうちに解消できるよう、エンジニア（アプ リ）との雑談時間で定期的に不満を回収。PJ期間以外はデザインシ ステムの進め方などを相談しています。 私 エンジニア エンジニア to Engineer
13. 視点邂逅 仕様書とFigmaのページ構成を揃える 段階的に渡して開発を止めない フローで作って漏れをつぶす 既存デザインに影響させないコンポーネント管理 #1 1 2 3 3 デザインデータ
14. 視点邂逅 #1 仕様書とFigmaのページ構成を揃える 通常画面単位でページ分けするが、仕様書とFigmaを行き来するエンジニ アが一致させやすいよう仕様書と同じ構造に。仕様書にユニークIDを振 り、仕様書ID/TitleをFigmaページ名にします。またそれを実装日ごとに 並べておくことで何がいつ実装される・されたのがすぐにわかります。
15. 視点邂逅 #1 既存デザインに影響させないコンポーネント管理 既存の画面に影響が出ないよう、開発中はvariantsにV2としてパ ターンを追加します。施策デザインの画面のみ共通コンポーネント 内部の要素をV2に切り替えて使用。リリース後に古いものを削除 し、すべて最新(V2)に変更していきました。 PICK 既存 PICK 既存 PICK_V2 追加 PICK_V2 追加
16. 視点邂逅 #1 フローで作って漏れをつぶす 大きめの開発になるほど、認識齟齬が起きてトラブルになりやすく なります。会員種別/操作/ステータスなど全ての状態を流れで起こ して理解を深めます。仕様の漏れを発見しやすくなるだけでなく、 リリース後以降に最新の設計を確認するためにも役立ちます。 会員別フロー 会員別フロー 操作別フロー 操作別フロー 状態別フロー 状態別フロー
17. デザインPh1 Ph2 開発Ph1 Ph2 テスト 要件 仕様 視点邂逅 #1 段階的に渡して開発を止めない 開発者へのデータの渡し方を工夫するとリソースの無駄を最小限にす ることができます。各仕様書（ページ）ごとに完成したものからエン ジニアに展開。開発的に作業量が少なく仕様もシンプルな画面類をま とめて先出しし、複雑なものは開発進行中に議論を進めました。
18. 視点邂逅 #1 ちなみにこのプロジェクトの成果は
19. 視点邂逅 #1 2024.12.20〜2024.1.22 保存/おすすめ/コメント いずれかのボタンを押す人の割合 コメントを押す人の割合 1.5倍 1.2倍
20. 視点邂逅 仕様書とFigmaの構成を揃える 段階的に渡して開発を止めない フローで作って漏れをつぶす 既存に影響させないデータ更新 #1 1 2 3 4 まとめ 人に合わせて役割を変える コミュニケーション デザインデータ 1 2 3 合意形成は早めに・こまめに 隔週30分のMTGで不満を回収
21. 視点邂逅 #1 おわりに
22. 視点邂逅 #1 デザイナー募集中です なんと アプリデザイナー現在2名あと1名募集中！ YOU
23. 視点邂逅 #1 恥ずかしい方はQRからでも 視点邂逅 STAFFパス を下げている社員に お気軽にお声がけください
24. 視点邂逅 ご清聴ありがとうございました #1