Claude Codeを利用してDroidKaigi2025公式iOSアプリにContributionをしてみた話

kanagawa.swift Vol.2 @ 面白法人カヤックでの登壇資料になります。

本セッションでは、Claude Codeを活用してDroidKaigi 2025の公式iOSアプリに貢献した実体験を紹介します。

【概要】
検索機能のデザイン変更と絞り込み機能の改善（PR #487）に取り組んだ事例を通じて、AI支援開発の実践的なアプローチを解説します。

【主なトピック】
- Figmaデザイン確認とAndroid版の動作検証による現状把握
- 段階的な改善アプローチ（SearchBarデザイン → UIMenuによる絞込UI → 言語絞込ロジック）
- Claude Codeを活用したVibe Codingによる開発工数削減
- 効果的なプロンプト設計と試行錯誤のプロセス

【キーメッセージ】
Claude Codeの効果的活用によって複雑な画面改修を実現可能。段階的アプローチと明確なプロンプト設計が成功の鍵。

【GitHub PR】
https://github.com/DroidKaigi/conference-app-2025/pull/487

Transcript

1. Claude Codeを利用してDriodKaigi2025公式iOSアプリに Contributionをしてみた話 Fumiya Sakai kanagawa.swift Vol.2 @ 面白法人カヤック 2025/11/02
2. 自己紹介 ・Fumiya Sakai ・Mobile Application Engineer アカウント: ・Twitter: https://twitter.com/fumiyasac ・Facebook: https://www.facebook.com/fumiya.sakai.37 ・Github: https://github.com/fumiyasac ・Qiita: https://qiita.com/fumiyasac@github 発表者: ・Born on September 21, 1984 これまでの歩み: Web Designer 2008 ~ 2010 Web Engineer 2012 ~ 2016 App Engineer 2017 ~ Now iOS / Android / sometimes Flutter
3. 技術書典18では新刊をオンライン頒布しました インプットを整理して次へ繋げる→アウトプットに応用できる様に
4. iOSDC Japan 2025では原稿を1つ寄稿しています 原稿名: 見た目に惑わされないUI設計と実装の勘どころ 〜SwiftUI・UIKitで読み解く複雑度の見極め方〜 iOS/Androidで類似したUIを実装する場合に気になるポイントを整理しました
5. 今回DroidKaigi2025でContributionをしたPRはこちら 公式アプリiOS側の検索機能におけるデザイン変更と絞り込み機能の調整 https://github.com/DroidKaigi/conference-app-2025/pull/487
6. Figma情報＆Android側Buildして挙動や見た目を確認 実際に触ってみて現状とのiOS/Android間の機能差分や実装イメージを持つ https://www.figma.com/design/1YjyMBNVLEGcHP4W7UNzDE/DroidKaigi-2025-App-UI?node-id=54953-72675 DroidKaigi2025 Official Figma:
7. iOSアプリ側の現状把握とどの様な形にするかを決める iOSアプリ側のFigmaデータはないため過去のDroidKaigi等も参考にする 1. 検索画面を改善する： 2. ゼロから作り直すのも大変そうだという所感： ♻ 元々の形と思い描いていた形のBefore/After 🚀 こういう時こそClaudeCodeの力にあやかってみる 元々はChipが3種類横1列に並んでいる絞り込み検索画面であった 素早く市場検証したい初期フェーズ 抜本的な変更は必要ないかもしれないが画面構成も大きく変化する Vibe Codingをする事によって工数や時間削減につながる期待
8. できるだけ小さな改善を小さな範囲で取り組む(1) ステップバイステップの様な形でちょっとずつ改善していく様に進めてみる 1. SearchBarのデザイン変更： 前のSearchBarを変更する Navigation配色を修正したい 🐱 Claude Codehの指示プロンプト 提示したFigmaデザインに合う様に、アプリケーションのデザイ ンを変更してください。 - 改修対象はSearchScreen.swiftになります。 - 他のコードにはできるだけ手を入れないでください。 ※プロンプトは出力結果を保証するものではありません ・Figma内のスクリーンキャプチャも一緒に提出 SearchBarの改善
9. まずはSearchBar部分をその他の画面を合わせる対応 差分はそれ程多いわけではありませんがSearchBar要素の修正ができました https://github.com/DroidKaigi/conference-app-2025/pull/487/commits/ec803b14945e7344782ce570a065944fc7a21938
10. 2. Chipでの絞込検索を修正： できるだけ小さな改善を小さな範囲で取り組む(2) 絞り込みの形を従来の形式からUI自体も含めて抜本的に変更する対応 Androidを参考にUIMenuの形へ変更 🐱 Claude Codehの指示プロンプト SearchScreenのCategroryFilterViewのデザインをFigmaに合わせ てください。 - 改修対象はSearchScreen.swiftになります。 - 他のコードにはできるだけ手を入れないでください。 ※プロンプトは出力結果を保証するものではありません ・Figma内のスクリーンキャプチャも一緒に提出 UIMenuによる絞込 - Day・Category・Languageの3つのFilterViewをUIMenuを利用して絞り込 み検索ができる形に修正してください。
11. 検索操作に関連する部分の構造が抜本的に変化しました 改修範囲はSearchScreen.swiftのみですが画面構成を含めて大きな変更が生じた https://github.com/DroidKaigi/conference-app-2025/pull/487/commits/fa439a3caf953fb17a1f652e95e538fa23e42780
12. 3. 登録データ起因部分の調整対応： できるだけ小さな改善を小さな範囲で取り組む(3) UI自体は良さそうだが言語の絞り込みがうまくいかない点を改善する対応 クライアント側で絞込調整をする 🐱 Claude Codehの指示プロンプト SearchScreenで言語による絞り込みがうまくいっていない様で す。こちらの修正をお願いします。 - 改修対象はSearchPresenter.swiftになります。 - 他のコードにはできるだけ手を入れないでください。 ※プロンプトは出力結果を保証するものではありません ・実際に何度か同じプロンプトて試しては捨ててを繰り返す 検索結果の対応 ・登録されるデータを修正するのではない調整対応
13. デバッグもClaudeCodeにお任せして原因を特定する クライアント側でデータ内の表記揺れ対応をする際の工数が大幅削減ができた https://github.com/DroidKaigi/conference-app-2025/pull/487/commits/8f793e454928912fdb7542a702d0b5ac6da34989
14. まとめ Claude CodeでDroidKaigi2025公式iOSアプリContributionのまとめ Claude Codeの効果的活用によって複雑な画面改修を実現可能。段階的アプローチと明確なプロンプト設計が成功の鍵。 1. Figmaデザイン＆Android実機で現状把握を徹底する： iOS側にFigmaデータがない状況でも、公式Figmaを確認しAndroid版を実際にビルドして動作確認。iOS/Android間の機能差分や実 装イメージを具体的に掴んでから着手する姿勢が重要。 2. Claude Codeで段階的に小さな改善を積み重ねる： SearchBarデザイン → UIMenuによる絞込UI変更 → 言語絞込ロジック調整、と3段階で進行。各ステップでFigmaキャプチャを添 え、改修範囲を限定したプロンプトを投げることで、抜本的な変更でも確実に進められる。 3. Vibe Codingで工数削減しながら品質を担保する： ゼロから作り直すと大変な画面構成の大幅変更も、Claude Codeの力を借りることで素早く市場検証フェーズに対応。プロンプト は試行錯誤を繰り返し、最適な出力を得る工夫が必要。
15. Thank you for listening !