関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.1M
各ページのテキスト
迷わないUI設計 Findy モバイルアプリのUIデザイン実践術 ～ bannzai 個人開発で役立つ構築フロー〜
自己紹介 id: bannzai X: ̲bannzai̲ 個人開発歴(アプリ): 5年 趣味: OSS公開してスターを集めることです アイコンがよく変わります
作っているアプリ紹介 2つ紹介するお
① Pilll: ピル管理アプリ 👉 https://pilllapp.studio.site
① Pilll: ピル管理アプリ - 女性向けのアプリ - ピルの服用を管理する - デザイナーの人と協業 - 初期からデザイナーがデザイン - iOS/Android対応 - Flutter製
② Focus: スマホ使いすぎ防止 👉 https://apps.apple.com/jp/app/id1663997320
② Focus: スマホ使いすぎ防止 - スマホ使いすぎ防止のアプリ - 可処分時間を増やしたい人向け - 企画デザイン開発全部担当は俺！(bannzai) - iOSアプリ - SwiftUI製
本題: 迷わないUI設計 誰が迷わないのか
本題: 迷わないUI設計 というのは最後に 紹介します
アジェンダ 1. AIってやつが流行っているので、AI中心に話します - UIの開発で意識していること - AIをいつ使うか・いつ使わないか - AIをどう使っているか 2. いい感じにまとめ
UIの開発で意識していること
① UIの開発で意識していること • OS／FWの標準コンポーネントを使う 理由: • 既知の挙動で学習コストがゼロに近い→AIもすでに知っている or Webで情報が見つけやすい • アクセシビリティ／入力系がタダ乗りできる → 細かな調整が必要でも標準であればAIに依頼しやすい • AI補助（生成・保守）との相性が良い → 上にあげた「情報が豊富」という点 How（ルール） • 汎用っぽい独自コンポーネントは作らない → 大体は揃ってます • どうしても作るなら 用途限定 + 最小API + ドキュメント1枚 ◦ “パターンAの時は独自Aを…”の条件分岐指示は作らない（増殖の温床） → AIが調べやすく、既知の物も多いのでうまく働いてくれる。パターンAの時は独自コンポーネントA を使って… みたいな指示は達成されない場合も多い(増えるたびに書く必要もある)
① UIの開発で意識していること
① UIの開発で意識していること 標準の組み合わせでも「UIが良い」 フィードバックがたまに来ます
② UIの開発で意識していること 主張 • コードを見ればUIの骨格が即わかる Why（効果） • レビューしやすい（人間もAIも） • 逆にAIが書いたコードもレビューしやすい • UIは継続的に改善する物。作って終わりではなく変更も多い。細かな変更や調整が他に影響を出さな いようにする How（ルール） • 階層は浅く。0にしろといことではない。UIのエントリーポイント(ページとか)から見てわかりやすい かどうかが大事 • 同じようなコードの重複は気にしない（可読性＞DRY） • 命名も大事
② UIの開発で意識していること これで開発者もAIもUIに関する コーディングについて迷わないね
AIをいつ使うか・いつ使わないか
AIを「いつ使うか・いつ使わないか」 アプリのコア機能じゃない場所は 迷わずAIに作らせてます
AIを「いつ使うか・いつ使わないか」 例: 問い合わせフォーム、 ウォークスルー、アンケート画面
なぜコア機能以外なのか ・コア機能は丁寧にUI作りましょう。という意味ではない ・コア機能は開発者が長く関わる箇所なので、そのコードはよく知っておいた方が良い。この機能 から派生して他の機能にも影響を与え続けることも多い。なのでよく理解できる形を取るべき ・AIを使うな。ではなく、AIを使ってもそれなりの開発コストはかかる部分であり、AIに指示する にしても難しくなりがちである。なのでやり方は考えた方が良い ・コア機能ではない末端の機能はアプリの体験や挙動に関わることが少ない。ミッションさえクリ アできてれば、継続的に開発することも少ない。なのでAIに作らせてそのあとはあまり意識しな い。その点では気軽にAIに精製をさせることができる
コア機能以外の例(Focusのお問い合わせ)
コア機能以外の例 ご飯食べてたらできた
コア機能以外の例 動いているしマージ t ※AIにレビューさせたりはしてます
補足 ちなみにコーディングAIは、 Claude Code, Codex, Gemini, Cursor を使用してます
コア機能の例 …etc
コア機能の例 このホーム画面 すこぶる評判が良い
コア機能の例 ユーザーが迷わないように UIをシンプルにしてよかった
コア機能の例 あ、リポジトリ公開にしているので スターください 👉 https://github.com/bannzai/pilll
AIをどう使っているか
AIをどう使っているか(基本的な部分) ・PRごとにコードレビュー (Claude Code, Codex, Gemini Code Assistant, GitHub Copilot) ・命令だけ出してコード出力(Claude Code, Codex) ・UIのスクショを撮ってUIに関するレビュー(Claude Code, Codex) ・AppStoreのスクショを撮ってレビュー(ChatGPT,Geminiとか) ・多言語対応。すべての言語に翻訳(Claude Code, Codex)
AIをどう使っているか(応用編) 最近全自動で自律的にUIを改善させる作業をさせています(試験運用) 0. 常時稼働のMacを用意します 1. 各SwiftUIのページでXcode Previewsを用意します 2. Xcode UITestingで、iOS Simulator 上でアプリを操作して、Previewsのスクショを撮ります 3. Codexに画像を渡してレビューさせます。誤翻訳が無いか。UIの表示がおかしく無いかを確認します 4. 改善案をGitHub Issueにします 5. Claude Code Actions で 修正します 6. さまざまなLLMがコードレビューします 7. `0`のMacがGitHub Actions Self Hosted Runner として動き、PRごとに変更画面のスクショを撮ります。スクショができたら GitHub の PR にコメントします 8. bannzaiがなんとなくそれらを見てマージしたりクローズしたりします
各SwiftUIのページでXcode Previewsを用意します
Xcode UITestingで、iOS Simulator 上でアプリを操作 して、Previewsのスクショを撮ります アプリにPreviewsの一覧ページを用意する UITest
Xcode UITestingで、iOS Simulator 上でアプリを操作 して、Previewsのスクショを撮ります 一覧から各ページを 開きスクショ https://gist.github.com/bannzai/b2b8b5e8a284115af1e568b492899302
Codexに画像を渡してレビューさせます。誤翻訳が無い か。UIの表示がおかしく無いかを確認します
改善案をGitHub Issueにします
Claude Code Actions で 修正します
実際に作られたIssue
ちなみに指摘箇所
実際のPR
AIをどう使っているか(応用編) ※ 最近作った仕組み
AIをどう使っているか(応用編) 日本語のタイポの指摘が ボロボロ出てきておもろい
AIをどう使っているか(応用編) 大量にPRが上がってきて 継続しようか迷っています(え
良い感じにまとめ
誰が迷わない？その1 A. 提供者(個人開発者)
誰が迷わない？その2 A. 協力者(AI)
誰が迷わない？その3 A. ユーザー
誰が迷ってる？ AIを御しれない仕組み を導入しようとしている ＿人人人＿ ＞ 俺 ＜ ￣Y^Y^Y^￣
迷わないUI設計(完) おしまい\(^o^)/