エンジニア駆動でデザインツールの刷新ができた

こちらはDroidKaigi2022で登壇した際のドキュメントです。

概要:
昨今では、アジャイル開発でのスタイルが主流となりつつある中で、デザイナーとエンジニアは密なコミュニケーションを取りながら要件決め・プロダクトの実現性や設計などを一緒に作っていく必要があると思います。
デザイナーとのキャッチボールがうまくいかないと開発スピードが十分に出ない事や要件の認識違いなど致命的な問題に遭遇することもあります。
そういった問題をツールの刷新で解消できたお話です。

Transcript

1. © Pioneer Corporation 1 エンジニア駆動で デザインツールの刷新ができた DroidKaigi 2022 Day2 モバイル開発部 bami(Risa Katabami) パイオニア株式会社
2. © Pioneer Corpora-on 2 Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 2 Agenda 01 ⾃⼰紹介 02 デザインツールはみんなのもの 03 なぜデザインツールを変えなればならなかったのか 04 デザインツールの選定 05 ツールを変更できるまでの道のり 06 まとめ
3. © Pioneer Corporation 3 Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 3 Agenda 01 ⾃⼰紹介 02 デザインツールはみんなのもの 03 なぜデザインツールを変えなければならなかったのか 04 デザインツールの選定 05 ツールを変更できるまでの道のり 06 まとめ
4. © Pioneer Corpora-on 4 © Pioneer Corporation 4 01 ⾃⼰紹介 bami(Risa Katabami) •お仕事 •2022年 パイオニア株式会社⼊社 •Androidエンジニア兼、プロダクトの要件設 計〜実装まで⼀連の開発業務を担当 •技術広報活動やエンジニア教育、モダンな 開発ができる環境を整えることに尽⼒してい る •趣味 • 愛⽝2匹と遊ぶ •クラフトビール •友⼈とお店を検索できるアプリ 「BeerHolics」をFlutterで作ってます
5. © Pioneer Corporation 5 Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 5 Agenda 01 ⾃⼰紹介 02 デザインツールはみんなのもの 03 なぜデザインツールを変えなければならなかったのか 04 デザインツールの選定 05 ツールを変更できるまでの道のり 06 まとめ
6. © Pioneer Corpora-on 6 © Pioneer Corporation 6 6 何気なく使っていて、 デザインツールはデザイナーさんのものと思っていませんか? 02 デザインツールはみんなのもの
7. © Pioneer Corporation 7 © Pioneer Corporation 7 7 デザインツールを使うのはデザイナーさんだけじゃない。 開発チーム全員で使うことによって 開発スピードやアプリそのものの クオリティ・付加価値を作り出すのを助けてくれる！ 02 デザインツールはみんなのもの
8. © Pioneer Corpora-on 8 © Pioneer Corporation 8 8 ①開発スピード アジャイル開発でも、ウオーターフォール開発でも共通して⾔えることは、開 発スピードを上げるためには、作りたいものをいかに早くコーディングできる 状態になるかが⼤事。 開発チーム全員でこれから作る機能に対して共通認識を持つことによって、⼿ 戻りや仕様変更が起きにくい状態を作り出すことができ、結果的に開発スピー ドが上がります。 開発チーム全員で使うことによって⽣まれるメリット 02 デザインツールはみんなのもの
9. © Pioneer Corporation 9 © Pioneer Corporation 9 9 開発チーム全員で使うことによって⽣まれるメリット ②クオリティ 画⾯の遷移やボタンを押した時の動作などプロトタイプを作って検証すること によって、ユーザーがつまづきそうな箇所やサービス全体としての動きをあら かじめ確認することができる。 プロトタイプを実際に触ることにより、アプリそのものの不便さや改善点の発 ⾒につなげることをができます。 02 デザインツールはみんなのもの
10. © Pioneer Corporation 10 © Pioneer Corporation 10 02 デザインツールはみんなのもの 10 開発チーム全員で使うことによって⽣まれるメリット ③付加価値 開発チーム全員でディスカッションできることにより、プロダクトとして 実現したい世界観をより深く考えることができたり、新しいアイディアが 発⾒できたりします。 プロダクトのフィードバックやアイディアはいろいろな⼈が参加してくれ ることにより、プロダクトがグロースできる可能性は広がります。
11. © Pioneer Corporation 11 Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 11 Agenda 01 ⾃⼰紹介 02 デザインツールはみんなのもの 03 なぜデザインツールを変えなければならなかったのか 04 デザインツールの選定 05 ツールを変更できるまでの道のり 06 まとめ
12. © Pioneer Corporation 12 © Pioneer Corporation 12 12 case: 私が関わっているプロジェクトの場合 ツール ワイヤーフレーム/画⾯遷移はエクセル作成されており、視認性が 悪く全体俯瞰しにくい データ共有 XDのWEB共有の場合、細かいデザインスペックが表⽰されないこ とがあり社内チャットで最新版のデザインデータの共有がされる 開発プロセス 分業制のウォーターフォール開発の為、次の開発プロセスへ進む ための情報連携のコストが⾼い レビュー⼿法 仕様やデザインレビューは必ずMTG 03 なぜデザインツールを変えなければならなかったのか?
13. © Pioneer Corporation 13 © Pioneer Corporation 13 13 どちらも⾜りておらず コラボレーションがしにくい環境だった 最適なツール選択 ツールにあったやり⽅ ❌ 03 なぜデザインツールを変えなければならなかったのか?
14. © Pioneer Corporation 14 © Pioneer Corpora-on 14 14 ツールを変えることで解決できること 視認性が悪く全体俯瞰しにくい データの受け渡し作業が発⽣ 常にブラウザで⾒れる わかりやすく・参照しやすい 03 なぜデザインツールを変えなければならなかったのか?
15. © Pioneer Corporation 15 © Pioneer Corporation 15 03 なぜデザインツールを変えなければならなかったのか? 15 ツールにあったやり⽅で解決できそうなこと コメント機能を活⽤し、好きな タイミングでレビューできる 分業制 誰でもディスカッションに 参加でき、情報連携コストも削減 レビューをMTGで⾏う
16. © Pioneer Corporation 16 Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 16 Agenda 01 ⾃⼰紹介 02 デザインツールはみんなのもの 03 なぜデザインツールを変えなければならなかったのか 04 デザインツールの選定 05 ツールを変更できるまでの道のり 06 まとめ Confidential
17. © Pioneer Corporation 17 © Pioneer Corporation 17 04 デザインツールの選定 17 デザインツールを選ぶ時に重要視したポイント 1. MacとWindowsどちらも対応していること 2. 直感的に使えるツールであること 3. コミュニケーションがとりやすくなること 4. クラウド(できればWebベース)で使えること 5. コストが⾼くないこと 6. 移⾏作業が可能であること 7. バージョン管理もできる 8. モックアップが作れる
18. © Pioneer Corporation 18 © Pioneer Corporation 18 04 デザインツールの選定 18 選んだツールは?
19. © Pioneer Corporation 19 © Pioneer Corpora-on 19 04 デザインツールの選定 19 なぜFigmaなのか? Mac & Windows ◦ ◦ ✖ 直感的に使える ◦ ◦ ◦ コミュニケーション △ ◎ ◦ クラウド (Webベース) △ ◎ ✖ コスト ◦ ◎ △ 移⾏作業が可能 - ◦ ◦ バージョン管理 ✖ ◎ ◦ モックアップ △ ◦ ✖
20. © Pioneer Corporation 20 Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 20 Agenda 01 ⾃⼰紹介 02 デザインツールはみんなのもの 03 なぜデザインツールを変えなければならなかったのか 04 デザインツールの選定 05 ツールを変更できるまでの道のり 06 まとめ
21. © Pioneer Corporation 21 © Pioneer Corpora-on 21 05 ツールを変更できるまでの道のり 21 まずは体当たりで相談 結果 • 不便さをそこまで感じられていなかった • 既存開発への影響があるのでは?という懸念 • 以前ツール変更をした時に⼤変だった
22. © Pioneer Corporation 22 © Pioneer Corporation 22 05 ツールを変更できるまでの道のり 22 PoC開発などの⼩さい新規開発で導⼊ PoCで導⼊できた点 • プロダクト発⾜時に使いたいツールを 決められた • トンマナはあるものの、アプリを跨いだ コンポーネントやシステムデザインがな かった • デザイナーさんや開発メンバーの⼈数も 少ないことが多く、無料で賄える場合も あり、お試しで使ってみるというのがで きる
23. © Pioneer Corporation 23 © Pioneer Corpora-on 23 05 ツールを変更できるまでの道のり 23 Figmaの布教活動 アクション • Figmaでのデモ • 隙あらばFigmaの話をする • 事前に懸念点をヒアリング
24. © Pioneer Corporation 24 © Pioneer Corporation 24 05 ツールを変更できるまでの道のり 24 提案結果 ツール提案を受けてくれた理由 • ツールを変えることでデザイナー×エ ンジニアのコラボレーションが⽣まれ るようになると考えが変わった • ユーザーの技術ブログの多さ • XDからFigmaへのデータ移⾏も可能
25. © Pioneer Corporation 25 © Pioneer Corpora-on 25 05 ツールを変更できるまでの道のり 25 現在は 徐々に移⾏中 • 新しく作られる画⾯や 新たに修正が⼊るものから移⾏ • レビューも⾮同期になり作業時 間圧迫が減った • Figmaに情報を集約できたこと で、仕様作成のプロセスまで変 わろうとしている • 他のプロダクトにも横展開
26. © Pioneer Corporation 26 Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem 26 Agenda 01 ⾃⼰紹介 02 デザインツールはみんなのもの 03 なぜデザインツールを変えなければならなかったのか 04 デザインツールの選定 05 ツールを変更できるまでの道のり 06 まとめ
27. © Pioneer Corporation 27 © Pioneer Corpora-on 27 06 まとめ 27 • デザインツールは開発メンバー全員で使うことで⽣まれるメリットは⼤きい • メンバー同⼠のコラボレーションには最適なツールと⼿法、どちらも必要 • ツールの導⼊は既存プロダクトに影響ができにくい新規開発や PoC開発から⾏うのが吉 • Figmaは無料で使える機能も豊富なので、お試しでワイヤーフレーム作成か ら導⼊してみる • ツールを変えたことで⼿法が変わり、さらにはプロセスも変わりつつある
28. © Pioneer Corporation 28 © Pioneer Corporation 28 最後に 28 パイオニア株式会社では、変⾰に向けて⼀緒に働く仲間を募集中です！ パイオニア公式note おれは…Figmaで⾏く！ UIデザインツール選定 (デザインツール刷新のお話)