モバイルアプリ開発のためのDesign Doc実践ガイド

After DroidKaigi 2025 at LINEヤフー & ZOZO
https://zozotech-inc.connpass.com/event/367457/

参考文献
M.Ubl,DesignDocsatGoogle, IndustrialEmpathy,https://www.industrialempathy. com/posts/design-docs-at-google/ （参照2025年4月19日）
石川宗寿,DesignDocの書き方/HowtoWriteaDesignDoc(Javer.),SpeakerDeck, https://speakerdeck.com/munetoshi/how-to-write-a-design-doc-ja-ver-dot （参照2025年4月19日）

Transcript

1. Mori Atsushi LINEヤフー株式会社 / Androidアプリエンジニア 2025/09/17 After DroidKaigi 2025 at LINEヤフー & ZOZO モバイルアプリ開発のための Design Doc実践 ガ イド
2. LINEヤフー株式会社 / Android 2019年度 未踏スーパークリエータ 『良いコードの道しるべ』著者 Mori Atsushi 森 篤史 X: @at_sushi_at 詳解 Kotlin Coroutines [2021] mori-atsushi/compose-callable
3. 良いコードの道しるべ 変化に強いソフトウェアを作る原則と実践
4. 今日の内容 1 Design Docとは 2 サンプルアプリで考える Design Docの例 📝
5. Design Docとは 1
6. 💡 開発者間のコミュニケーションのために用いられる 開発者自身が主体となって作成する プロジェクトの全体像や方針についてチーム内で議論する Design Doc
7. Design Docの目的 大きな手戻りを防ぐ： 開発の後半で致命的な問題に気がつくと影響が大きくなる 品質改善： 問題が起きそうな点に早いフェー ズ で気がつく 情報を残す： 後から意思決定の背景について確認できる
8. Design Docのコツ チームで議論しながら作る： 最初から完璧なドキュメントを目指さない 開発途中でも方針を変更する： 設計書が制約にならないようにする 追加の開発時は新しいDesign Docを作る： 既存のドキュメントを更新し続けるのは困難
9. サンプルアプリで考える Design Docの例 2
10. 例題：画像メモアプリ 画像に対して指定した座標にメモを書き込めるアプリ • ユー ザ がタップした位置にメモが書ける • メモはテキストのみ • メモはローカルのみで管理する • メモは吹き出し形式で表示される • 吹き出しの色は選択できる
11. まずは目的を書く ユー ザ が任意の画像に対して簡単かつ直感的にメモを付与できる環境を提供す る。これにより、スクリーンショットや写真に対して補足説明や気づきを直接残 すことが可能となる。 MVP（Minimum Viable Product）フェー ズ として、まずはローカル完結で動作 するアプリケーションを作成する。 画像メモアプリ MVP 目的
12. 全体像を書く 全体像 デ ータベース UI Photo Picker アプリ固有の ストレージ メモ書き込み メモ参照 画像 画像をコピー 起動
13. 詳細設計 画像の取得はAndroidが提供するPhoto Pickerを利用する。これにより、特別な 権限なく画像の取得が可能となる。 共有ストレージから画像が消されたり移動されるリスクを考慮し、アプリ固有の ストレージにコ ピ ーしてから利用する。 詳細設計 画像の取得
14. 他に検討した方法を残しておく アプリにandroid.permission.READ_MEDIA_IMAGES権限を付与すると、 ContentResolverを使って共有ストレージの画像ファイルにアクセスできるよう になる。 これはプライバシーおよびセキュリティ上のリスクや、ユー ザ ーからの拒否・離 脱の可能性を高めるため、本アプリでは採用しない。 参考：https://developer.android.com/training/data-storage/shared/ media?hl=ja 画像の取得の代案
15. DB設計 デ ータベース Name Type Primary Description id String ̋ UUIDを使う image_uri String アプリ固有のストレージ内のURI text String x Int X座標（px） y Int Y座標（px） background_color String 吹き出しの背景色。例：#d9f4 f created_at_millis Long 作成時間（epochミリ秒） Roomを使って管理する
16. チームで議論してみる 👨💻 吹き出しの位置ってどうやって決定します？ 指定した座標が画像の上の方だったら、下に配置したほうが良さそ うですが、画像の下の方だったら逆のほうが良いですよね。
17. ブ ラッシュアップ 吹き出しの位置決定ロジック 上部に吹き出し分の 余白がある 上下方向の位置 左右方向の位置 左右両方に 吹き出しの半分の 余白がある 左側に吹き出し分の 余白がある 上部に配置 下部に配置 中央に配置 左寄せで配置 右寄せで配置 YES NO YES YES NO NO
18. ブ ラッシュアップ イメージ
19. 宿題：バックアップ機能 課金したユー ザ に対し、画像及 び メモのバックアップを可能にします。 バックアップされた項目は複数 デ バイスで確認できるようにします。 • 課金状態のチェックタイミン グ • 同期のタイミン グ • エラーハンドリン グ 、リトライ処理 • 同時に複数端末で 編 集したときは？
20. まとめ：Design Docを書こう 重要なところのみにフォーカスする 図を多用して一見して動作がわかるように 議論しながらどんどん ブ ラッシュアップする 参考文献 M.Ubl,DesignDocsatGoogle, IndustrialEmpathy,https://www.industrialempathy. com/posts/design-docs-at-google/（参照2025年4月19日） 石川宗寿,DesignDocの書き方/HowtoWriteaDesignDoc(Javer.),SpeakerDeck, https://speakerdeck.com/munetoshi/how-to-write-a-design-doc-ja-ver-dot（参照2025年4月 19日）