デザイナーが Androidエンジニアに 挑戦してみた

DroidKaigi2025登壇資料
https://2025.droidkaigi.jp/timetable/946165/

Transcript

1. デザイナーが Androidエンジニアに 挑戦してみた DroidKaigi 2025 | Day1, Sep 11, 16:20 ~ 17:00 Kanon Fujita
2. Speaker Kanon Fujita | Design Engineer 6月末までデザイナー、7月からソフトウェアエンジニア X：@kanonnot_
3. Agenda なぜAndroid開発に挑戦したのか Jetpack ComposeとFigma：共通するUI設計の考え方 OOUIと相性抜群！？Kotlinを書いて感じた「デザイナーにとっての書きやすさ」 MVVMモデルのおかげでUIやインタラクション実装で舞える チーム開発の中で得た気づきと、コミュニケーションの変化 これから挑戦したい人へのメッセージ
4. なぜAndroid開発に挑戦したのか
5. 簡単なプロトタイプを作れるようになりたかった Webは、Web特有の動きがあり思いがけないエラーで実現できない なぜかSafariでは動くけどChromeでは動かない、思いがけないところで再描画される　など 端末のセンサーを使ったインタラクションを試してみたかった 買ったばかりのNothing Phone(2a)にぴったりのイケイケアプリを作ってみたかった とあるモバイルアプリエンジニア Androidは超開発しやすい！！！！ 君もこのAndroidのビックウェーブに乗らないか？
6. どうやって学習したのか 使った教材 : Android Developersの「Compose を用いた Android アプリ開発の基礎」 https://developer.android.com/courses/android-basics-compose/course?hl=ja 学習ステップ 教材をベースに2ヶ月間(週2時間)Androidエンジニアに先生をしてもらう その後、AIを駆使しつつ簡単なアプリを制作 学習ステップ 教材をベースに2ヶ月間(週2時間)Androidエンジニアに先生をしてもらう その後、AIを駆使しつつ簡単なアプリを制作 学習ステップ 教材をベースに2ヶ月間(週2時間)Androidエンジニアに先生をしてもらう その後、AIを駆使しつつ簡単なアプリを制作
7. 半年後、Androidエンジニアとして実案件に入る機会がやってくる 4〜5ヶ月ほど、稼働の30%をAndroidエンジニアとして仕事ができる機会をいただいた 最初の1ヶ月 簡単なUI修正やリファクタ リング 2~4ヶ月目 ある機能改修のUI実装メイ ン担当 終盤 UI実装以外にも挑戦 先輩エンジニアたちが自動化や開発しやすい環境を整えてくれていたおかげでスムーズにジョイン
8. 実際にやってみて思った。Androidめちゃくちゃ開発しやすい なぜAndroid開発だと実装を理解しやすかったのか大考察！ Jetpack ComposeとFigmaはなんだか似ている！？ KotlinってOOUI(オブジェクト指向ユーザーインターフェース)と相性良いかも！！？ MVVMのおかげでなんとかやっていける気がする
9. Jetpack ComposeとFigma： 共通するUI設計の考え方
10. Figmaの設定値をそのまま入れるだけでいいじゃん！！スタイル編 作りたいレイアウト Figmaのサイドバー 実際のコード
11. Figmaの設定値をそのまま入れるだけでいいじゃん！！スタイル編 作りたいレイアウト Figmaのサイドバー 1 2 3 4 実際のコード 1 2 3 4 Figmaと一緒じゃん！！！ Figmaと一緒じゃん！！！ Figmaと一緒じゃん！！！
12. Figmaの設定値をそのまま入れるだけでいいじゃん！！スタイル編 作りたいレイアウト Figmaのサイドバー 実際のコード
13. Figmaの設定値をそのまま入れるだけでいいじゃん！！スタイル編 作りたいレイアウト Figmaのサイドバー 1 2 3 4 5 6 1 2 3 4 5 6 実際のコード Figmaと一緒じゃん！！！ Figmaと一緒じゃん！！！ Figmaと一緒じゃん！！！
14. ちなみに、Webフロントエンドだとこんな感じになる(やや省略版) 縦に並ぶのか横に並ぶのかぱっと見わからない！ 縦に並ぶのか横に並ぶのかぱっと見わからない！ 縦に並ぶのか横に並ぶのかぱっと見わからない！ 親の要素が何なのかすぐにわからない！ 親の要素が何なのかすぐにわからない！ 親の要素が何なのかすぐにわからない！
15. Jetpack Composeのここがわかりやすい Figmaのサイドバーに入れているのと同じ値を、主にModifierなどのパラメータに入れるだけ 直感的に何を書いてるのかわかりやすい（ColumnやRowなど）
16. Figmaの設定値をそのまま入れるだけでいいじゃん！！コンポーネント設計編 タップすると、楽曲が再生されるようなカードコンポーネントを作りたい場合 Title Artist 通常時 Title Artist 再生中 作りたいカード Figmaで設定したプロパティ 実際のコード
17. 実際のコード 1 2 3 Figmaの設定値をそのまま入れるだけでいいじゃん！！コンポーネント設計編 タップすると、楽曲が再生されるようなカードコンポーネントを作りたい場合 Title Artist 通常時 Title Artist 再生中 作りたいカード Figmaで設定したプロパティ 1 2 3 Figmaと一緒じゃん！！！ Figmaと一緒じゃん！！！ Figmaと一緒じゃん！！！
18. Figmaで設計したコンポーネントとほぼ同じ思想でUI実装ができる ViewにはViewに関することしか書かない。 だから、Figmaで設計したコンポーネントとほぼ同じ思想でUI実装ができる
19. Jetpack Composeは、独自デザインでも動作やアクセシビリティは自動で完備できる！ Android開発だと、標準コンポーネントの機能だけ残してデザインは自由に変更できる Cardを使う場合 Cardを使わない場合 とあるデザイナー 前衛的でアーティスティックな カードデザインを考えてみた！ アクセシビリティやパフォーマンスは自動 でいい感じにやってくれる！ リップルや遷移アニメーションも忘れてた けど、簡単にできる！ なんか動作が重い... 操作が競合して変なバグが起こる！ あれも忘れてた！これも！ 自分には実装できる気がしない！
20. OOUIと相性抜群！？ Kotlinを書いて感じた 「デザイナーにとっての書きやすさ」
21. データクラスとOOUIの組み合わせがわかりやすすぎる データクラスに出会い、突如理解した UIデザインを続けているとどこかで絶対に出会う概念。OOUI。 OOUI（オブジェクト指向ユーザーインターフェース）とは UIを考える時に、オブジェクトを起点として設計すること 対比として、タスク指向（操作を起点として設計すること）がある。 音楽プレーヤーアプリの場合、アプリを起動した時に右側のトップ画面だと。。。どう？ オブジェクトを起点としたUI タスクを起点としたUI
22. 実装とOOUIにおけるモデリング ユーザー行動視点にオブジェクトをモデリングするのがOOUIにおけるモデリング システムのデータ視点にオブジェクトをモデリングするのが実装におけるモデリング Android開発だと、サーバーからやってくるさまざまなデータを、ViewModelで指示しやすいように加工（下ごしらえ） する必要がある。そこで出てくるのがデータクラス。 このKotlinのデータクラス。かなりデザイナー視点で書ける気がする！！！ Kotlinのdata classがデザイナー視点で書きやすい理由： 簡潔な記法：プロパティを並べるだけでデータ構造を定義 型安全：コンパイル時にデータの形をチェック 自動生成：equals()、hashCode()、toString()が自動で作られる 分割代入：val (name, age) = userのように値を取り出せる デザイナーがイメージしているオブジェクトの動きをコード上でほぼそのまま表現できるイメージ Kotlinのdata classがデザイナー視点で書きやすい理由： 簡潔な記法：プロパティを並べるだけでデータ構造を定義 型安全：コンパイル時にデータの形をチェック 自動生成：equals()、hashCode()、toString()が自動で作られる 分割代入：val (name, age) = userのように値を取り出せる デザイナーがイメージしているオブジェクトの動きをコード上でほぼそのまま表現できるイメージ Kotlinのdata classがデザイナー視点で書きやすい理由： 簡潔な記法：プロパティを並べるだけでデータ構造を定義 型安全：コンパイル時にデータの形をチェック 自動生成：equals()、hashCode()、toString()が自動で作られる 分割代入：val (name, age) = userのように値を取り出せる デザイナーがイメージしているオブジェクトの動きをコード上でほぼそのまま表現できるイメージ
23. OOUIを例に見るデータクラス: 楽曲はこんな情報を持ってる 9:30 楽曲リスト画面 Horizon Line The Velvet Keys Golden Hour Skyline Drive Midnight Dreams Luna Hayes Electric Pulse The Neon Collective Digital Hearts Echo Chamber Stellar Drift Nova Rain Paper Moon Silver Coast Waves of Tomorr Marcus Reed City Lights Aria Stone Horizon Line The Velvet Keys Golden Hour Skyline Drive Midnight Dreams Luna Hayes 楽曲のシングルビュー = 再生プレーヤーに入ってる楽曲 楽曲のコレクションが、楽曲のシングルを呼び出している コレクション 楽曲 シングル 楽曲 楽曲データ I D 楽曲タイトル アーティスト名 カバー画像 楽曲の長さ その他、投稿日や歌詞等も考えられるが省略 デザイナーが整理するもの 実際のコード
24. OOUIを例に見るデータクラス: 一覧にするにはどうすればいいの？ 9:30 楽曲リスト画面 Horizon Line The Velvet Keys Golden Hour Skyline Drive Midnight Dreams Luna Hayes Electric Pulse The Neon Collective Digital Hearts Echo Chamber Stellar Drift Nova Rain Paper Moon Silver Coast Waves of Tomorr Marcus Reed City Lights Aria Stone Horizon Line The Velvet Keys Golden Hour Skyline Drive Midnight Dreams Luna Hayes その楽曲データのリスト（コレクション） 楽曲のシングルビュー = 再生プレーヤーに入ってる楽曲 楽曲のコレクションが、楽曲のシングルを呼び出している コレクション 楽曲 シングル 楽曲 コード上でも楽曲のコレクションが、楽曲のシングルを呼び出している
25. OOUIを例に見るデータクラス: 再生プレーヤーに入ってる楽曲 再生プレーヤーに入ってる楽曲 楽曲 再生中/停止中 今の再生位置 デザイナーが整理するもの 実際のコード これのデータクラスのおかげで、コレクションビュー（楽曲のリスト画面）にもミニ プレーヤーを表示ができる 再生中の時の表示
26. OOUIを例に見るデータクラス : アルバムという概念が増えたらどうする？ コレクション アルバム シングル アルバム コレクション 楽曲 シングル 楽曲 アルバムのシングルが楽曲のコレクションを呼んでいる画面ができる 実際のコード
27. MVVMモデルのおかげで UIやインタラクション実装で 舞える
28. Googleが推奨していると噂のMVVM 何かしら操作 入力 入力された情報を 送る 情報を処理、編集する 指示を出す 必要な情報を返す 情報を反映させる 指示を出す 反映される ユーザー View 見た目担当 ユーザーが操作できるUI要素 必要な情報を受け取って表示 ViewModel 表示しやすいデータに変換 ViewとModelに指示するやつ Model 生のデータを受け取る モデリング データに関するルールなど アプリケーションの構造 役割を分けて、それぞれの役割で分離させて書く（特にUI部分）おかげで、UI実装だけできるデザイナーでもできること が多くなる気がする
29. プロジェクトに入る場合、デザインとView部分の実装担当。みたいな役割ができる ユーザー View 見た目担当 ユーザーが操作できるUI要素 必要な情報を受け取って表示 ViewModel 表示しやすいデータに変換 指示するやつ Model 生のデータを受け取る モデリング データに関するルールなど Figmaで作ったコンポーネントや画面 と同じものを作るところ Figmaで作ったコンポーネントや画面 と同じものを作るところ Figmaで作ったコンポーネントや画面 と同じものを作るところ ※iOSはどうすんの？みたいな課題はある
30. Viewだけできれば超簡単なインタラクションのプロトタイプくらいなら作れる ユーザー View 見た目担当 ユーザーが操作できるUI要素 必要な情報を受け取って表示 ViewModel 表示しやすいデータに変換 指示するやつ Model 生のデータを受け取る モデリング データに関するルールなど 作れるもの インタラクションスタディ 遷移アニメーション 作れるもの インタラクションスタディ 遷移アニメーション 作れるもの インタラクションスタディ 遷移アニメーション
31. OOUIと同じ要領でモデリングもできれば、けっこうなんでも作れる ユーザー View 見た目担当 ユーザーが操作できるUI要素 必要な情報を受け取って表示 ViewModel 表示しやすいデータに変換 指示するやつ Model 生のデータを受け取る モデリング データに関するルールなど 作れるもの ローカルのモックデータを使ったプロトタイプ サーバー接続のないアプリなど 作れるもの ローカルのモックデータを使ったプロトタイプ サーバー接続のないアプリなど 作れるもの ローカルのモックデータを使ったプロトタイプ サーバー接続のないアプリなど 新機能や営業同行の提案用のプロトタイプ制作として、これくらいできれば問題なく作れそう
32. チーム開発の中で得た気づきと、 コミュニケーションの変化
33. 具体例 : とある画面のデザインを出した時 こんなプロフィール画面を 作りたい！！ こんなプロフィール画面を 作りたい！！ こんなプロフィール画面を 作りたい！！ とあるデザイナー これだけじゃ完成できない...！ これだけじゃ完成できない...！ これだけじゃ完成できない...！ とあるエンジニア 9:30 Kanon Fujita Hi! I'm a Designer • Developer • Dreamer! マイミュージック Horizon Line The Velvet Keys Golden Hour Skyline Drive Midnight Dreams Luna Hayes Electric Pulse The Neon Collective Digital Hearts Echo Chamber Stellar Drift Nova Rain Paper Moon Silver Coast Waves of Tomorr Marcus Reed City Lights A ria Stone Edit Profi le
34. 実装を経験すると、本当はもっと表示パターンがあることに気付ける 9:30 Kanon Fujita Hi! I'm a Designer • Developer • Dreamer! マイミュージック Horizon Line The Velvet Keys Golden Hour Skyline Drive Midnight Dreams Luna Hayes Electric Pulse The Neon Collective Digital Hearts Echo Chamber Stellar Drift Nova Rain Paper Moon Silver Coast Waves of Tomorr Marcus Reed City Lights Aria Stone Edit Profile 9:30 Kanon Fujita Hi! I'm a Designer • Developer • Dreamer! マイミュージック Edit Profile 9:30 Kanon Fujita マイミュージック あなたが作った楽曲はまだありません 投稿してみる！ Edit Profile 全ての情報が集まった状態 アカウント作成後の初期時 アプリ起動時の読み込み時
35. 技術的にはできるけど... （どのタイミングで、追加で 何件取得？ 一番下までスクロールしてか ら取得？スクロール途中？） 技術的にはできるけど... （どのタイミングで、追加で 何件取得？ 一番下までスクロールしてか ら取得？スクロール途中？） 技術的にはできるけど... （どのタイミングで、追加で 何件取得？ 一番下までスクロールしてか ら取得？スクロール途中？） とあるエンジニア 下にスクロールするとど んどん新しいコンテンツ が表示したい！ こんなやつできますか？ 下にスクロールするとど んどん新しいコンテンツ が表示したい！ こんなやつできますか？ 下にスクロールするとど んどん新しいコンテンツ が表示したい！ こんなやつできますか？ とあるデザイナー 具体例 : コンテンツの追加取得の処理タイミング Electric Pulse The Neon Collective Digital Hearts Echo Chamber Stellar Drift Nova Rain Paper Moon Silver Coast Waves of Tomorr Marcus Reed City Lights Aria Stone Horizon Line The Velvet Keys Golden Hour Skyline Drive Midnight Dreams Luna Hayes Electric Pulse The Neon Collective Digital Hearts Echo Chamber Stellar Drift Nova Rain Horizon Line The Velvet Keys Golden Hour Skyline Drive Midnight Dreams Luna Hayes 9:30 Home Favorite Profile
36. 実装を知ることで仕様を詰められる。UIの引き出しが増える メインコンテンツだから、たくさんの 数を見てほしい！だからA案！ スクロール途中で追加取得して、間に 合わなければスピナーを表示して... タイミングと件数は、スムーズにコン テンツが出れば実装にお任せしたい メインコンテンツだから、たくさんの 数を見てほしい！だからA案！ スクロール途中で追加取得して、間に 合わなければスピナーを表示して... タイミングと件数は、スムーズにコン テンツが出れば実装にお任せしたい メインコンテンツだから、たくさんの 数を見てほしい！だからA案！ スクロール途中で追加取得して、間に 合わなければスピナーを表示して... タイミングと件数は、スムーズにコン テンツが出れば実装にお任せしたい A案 B案 サブコンテンツだから、たくさん表示 されるとノイズかも。だからB案！ 必要な時だけ追加で取得で切れば OK（通信量も減るし） サブコンテンツだから、たくさん表示 されるとノイズかも。だからB案！ 必要な時だけ追加で取得で切れば OK（通信量も減るし） サブコンテンツだから、たくさん表示 されるとノイズかも。だからB案！ 必要な時だけ追加で取得で切れば OK（通信量も減るし）
37. デザイナーとしての成長 UIの引き出しが増える 実装の知識のおかげで表現できる幅が 広がる 実装コストを考慮した提案 動くものができるまでの作業イメージがで きるため、気合を入れて作るところと、頑 張らなくていいところを判断できる より一貫した仕様を実現 最初からコンポーネントの必要な状態を予 測できるため、全体的に一貫した仕様を整 備しつつ詰めることができる
38. 一緒により良いプロダクトを作るためのコミュニケーション これで実装できますか？ 工数的に厳しい 諦める この流れに終止符を。「できる/できない」のコミュニケーションから「一緒により良く作る」のコミュニケーションへ 実装を理解していると、どうやって実現するか？のコミュニケーションに誘導しやすい 最終的なイメージはこれだけどコストがかかるので、途中のデザインはこれにして、段階的にリリースすることで実 現できないか？ このUXを実現するためにこんなステータスで考えているけど、別の簡単にできる方法があれば教えて欲しい ここのデザインは譲れない。代わりにあっちは優先度が低いからシンプルなA案でいきたい
39. これから挑戦したい人へのメッセージ
40. デザイナーの人向け 実装を経験してみたかったらAndroidはとてもおすすめ！ Jetpack Compose / Kotlin がデザイナー視点で書きやすい 無料でできる！ Mac Book でも Windows でも開発できる！ 作ったものをその場でプレビューできる！ 公式の教材や資料がかなり豊富！ 実案件に入れるだけのスキルをつけなくても、活きる場面は結構ある！
41. エンジニアの人向け Android最高！
42. ご静聴ありがとうございました！！