AIツールを組み合わせて一気通貫でiOSアプリ作成してみた！

今回、複数のAIツールを組み合わせて、企画からデザイン、実装まで一気通貫でiOSアプリを作成してみました。
本記事では、その過程で得られた知見や各ツールの使い分けを共有します。

今回作成したアプリ

水分摂取管理アプリ（HydrationTracker）

年齢・体重・性別などから1日に必要な水分摂取量を算出し、定期的に通知でお知らせするアプリです。

主な機能

• 初期情報入力（年齢、体重、活動時間など）
• メイン画面での摂取量記録
• カレンダーとグラフでの履歴確認
• 設定画面

技術スタック

• OS: iOS
• UIフレームワーク: SwiftUI
• アーキテクチャ: MVVM + Clean Architecture

使用したAIツール・プロダクト

今回の開発で使用したツールは以下の5つです。

ツール連携フロー

開発の流れ

1. Kiroで要件定義・設計

まずはKiroを使って、ふんわりとしたアイデアを具体的な要件に落とし込みます

Kiroに以下のような情報を入力しました：

• アプリのテーマと概要
• 必要な画面構成
• 水分量の計算式

Kiroは対話形式で要件を深堀りしながら、以下のドキュメントを自動生成してくれました：

今回Kiroはあくまでも要件定義等上流工程を任せるだけなのでここまででKiroは止めておく

1. 要件定義書(requirements.md)

requirements.md

# 要件書## 概要

水分摂取管理アプリは、ユーザーが日々の水分摂取量を記録・追跡し、健康的な水分補給習慣を身につけることを支援するiOSアプリケーションです。SwiftUIを使用してモダンで直感的なユーザーインターフェースを提供し、ユーザーが簡単に水分摂取を記録できるようにします。

## 要件

### 要件1

**ユーザーストーリー:** ユーザーとして、日々の水分摂取量を記録したいので、健康的な水分補給習慣を維持できるようにしたい

#### 受け入れ基準

1. WHEN ユーザーがアプリを開く THEN システムは今日の水分摂取量を表示する SHALL
2. WHEN ユーザーが水分摂取ボタンをタップする THEN システムは摂取量を記録し、今日の合計を更新する SHALL
3. WHEN ユーザーが摂取量を入力する THEN システムは100ml、200ml、300ml、500mlの定型量と、カスタム入力オプションを提供する SHALL

### 要件2

**ユーザーストーリー:** ユーザーとして、1日の目標水分摂取量を設定したいので、適切な水分補給目標を持てるようにしたい

#### 受け入れ基準

1. WHEN ユーザーが設定画面にアクセスする THEN システムは目標水分摂取量の設定オプションを表示する SHALL
2. WHEN ユーザーが目標量を設定する THEN システムは1500ml〜3000mlの範囲で設定を許可する SHALL
3. IF 目標量が設定されていない THEN システムは2000mlをデフォルト値として使用する SHALL

### 要件3

**ユーザーストーリー:** ユーザーとして、水分摂取の進捗を視覚的に確認したいので、目標達成状況を把握できるようにしたい

#### 受け入れ基準

1. WHEN ユーザーがメイン画面を表示する THEN システムは円形プログレスバーで進捗を表示する SHALL
2. WHEN 摂取量が目標の50%に達する THEN システムは進捗バーの色を黄色に変更する SHALL
3. WHEN 摂取量が目標の100%に達する THEN システムは進捗バーの色を緑色に変更し、達成通知を表示する SHALL

### 要件4

**ユーザーストーリー:** ユーザーとして、過去の水分摂取履歴を確認したいので、長期的な習慣を把握できるようにしたい

#### 受け入れ基準

1. WHEN ユーザーが履歴画面にアクセスする THEN システムは過去7日間の摂取量をグラフで表示する SHALL
2. WHEN ユーザーが特定の日付をタップする THEN システムはその日の詳細な摂取記録を表示する SHALL
3. WHEN データが存在しない日がある THEN システムは0mlとして表示する SHALL

### 要件5

**ユーザーストーリー:** ユーザーとして、水分摂取のリマインダーを受け取りたいので、定期的な水分補給を忘れないようにしたい

#### 受け入れ基準

1. WHEN ユーザーがリマインダー設定を有効にする THEN システムは1〜4時間間隔でのリマインダー設定を提供する SHALL
2. WHEN 設定された時間が経過する AND 最近の摂取記録がない THEN システムはローカル通知を送信する SHALL
3. IF ユーザーが就寝時間を設定している THEN システムは就寝時間中はリマインダーを送信しない SHALL

### 要件6

**ユーザーストーリー:** ユーザーとして、誤って記録した摂取量を修正したいので、正確な記録を維持できるようにしたい

#### 受け入れ基準

1. WHEN ユーザーが今日の摂取記録を長押しする THEN システムは編集・削除オプションを表示する SHALL
2. WHEN ユーザーが記録を削除する THEN システムは確認ダイアログを表示し、承認後に削除を実行する SHALL
3. WHEN ユーザーが記録を編集する THEN システムは新しい摂取量の入力を許可し、合計を再計算する SHALL

2. 設計文書 (design.md)

design.md

# デザイン文書## 概要

水分摂取管理アプリは、SwiftUIを使用したiOSネイティブアプリケーションとして設計されます。MVVMアーキテクチャパターンを採用し、Core Dataを使用したローカルデータ永続化、UserNotificationsフレームワークを使用したリマインダー機能を実装します。

## アーキテクチャ

### アプリケーション構造

“`
HydrationTracker/
├── Models/
│ ├── HydrationRecord.swift (Core Data Entity)
│ └── UserSettings.swift (Codable Struct)
├── ViewModels/
│ ├── MainViewModel.swift
│ ├── HistoryViewModel.swift
│ ├── CalendarViewModel.swift
│ └── SettingsViewModel.swift
├── Views/
│ ├── ContentView.swift (TabView)
│ ├── MainView.swift
│ ├── HistoryView.swift
│ ├── SettingsView.swift
│ └── Components/
│ ├── ProgressRingView.swift
│ ├── IntakeButtonView.swift
│ ├── IntakeHistoryItemView.swift
│ ├── ChartView.swift
│ └── CalendarGridView.swift
├── Services/
│ ├── DataManager.swift (Core Data管理)
│ ├── NotificationManager.swift (ローカル通知)
│ └── UserDefaultsManager.swift (設定管理)
├── Utils/
│ ├── Extensions.swift
│ └── Constants.swift
└── HydrationTracker.xcdatamodeld/ (Core Dataモデル)
“`

### MVVMアーキテクチャ

– **Model**: Core DataエンティティとCodable構造体によるデータモデル
– **View**: SwiftUIビュー（宣言的UI、@StateObjectでViewModelを保持）
– **ViewModel**: @MainActor付きObservableObjectでUIの状態管理とビジネスロジックを担当
– **Services**: データ永続化、通知、設定管理の責務を分離

## コンポーネントとインターフェース

### 0. メインアプリ (ContentView)

**UI要素:**
– TabView（ホーム、履歴、設定の3タブ）
– 各タブにNavigationViewを配置
– カスタムアクセントカラーの適用

### 1. メインビュー (MainView)

**UI要素:**
– 円形プログレスリング（今日の進捗表示）
– 現在の摂取量 / 目標量の数値表示
– クイック摂取ボタン（100ml, 200ml, 300ml, 500ml）
– カスタム量入力ボタン
– 今日の摂取履歴リスト（スワイプで削除可能）

**インタラクション:**
– タップで摂取量を記録
– カスタム量入力アラート
– スワイプアクションで記録削除
– 削除確認アラート

### 2. 履歴ビュー (HistoryView)

**UI要素:**
– タブ切り替え（グラフビュー / カレンダービュー）
– グラフビュー: 過去7日間の棒グラフ、平均摂取量の表示
– カレンダービュー: 月間カレンダー、各日の達成状況を色分け表示
– 日別摂取量の詳細リスト

**インタラクション:**
– タブ切り替えでビューモード変更
– グラフの棒をタップして詳細表示
– カレンダーの日付をタップして詳細表示
– スワイプで日付範囲の変更

### 3. 設定ビュー (SettingsView)

**UI要素:**
– ユーザー情報セクション
– 体重入力フィールド（30kg – 200kg）
– 年齢入力フィールド（18歳 – 100歳）
– 計算された推奨摂取量の表示
– 目標設定セクション
– 推奨値使用 / カスタム値設定の切り替え
– カスタム目標摂取量スライダー（1000ml – 4000ml）
– リマインダー設定セクション
– リマインダー設定トグル
– リマインダー間隔選択（1-4時間）
– 就寝時間設定
– データ管理セクション
– データリセットオプション

### 4. カスタムコンポーネント

#### ProgressRingView
“`swift
struct ProgressRingView: View {
let progress: Double
let goal: Int
let current: Int
}
“`

#### IntakeButtonView
“`swift
struct IntakeButtonView: View {
let amount: Int
let action: () -> Void
}
“`

#### IntakeHistoryItemView
“`swift
struct IntakeHistoryItemView: View {
let amount: Int
let timestamp: Date
let onDelete: () -> Void
}
“`

#### ChartView
“`swift
struct ChartView: View {
let data: [HydrationRecord] let goal: Int
}
“`

#### CalendarGridView
“`swift
struct CalendarGridView: View {
let month: Date
let hydrationData: [Date: Int] let dailyGoal: Int
let onDateSelected: (Date) -> Void
}
“`

## データモデル

### Core Dataエンティティ

#### HydrationRecord
“`swift
@objc(HydrationRecord)
public class HydrationRecord: NSManagedObject {
@NSManaged public var id: UUID
@NSManaged public var amount: Int32
@NSManaged public var timestamp: Date

// Core Data用のFetchRequest
@nonobjc public class func fetchRequest() -> NSFetchRequest<HydrationRecord> {
return NSFetchRequest<HydrationRecord>(entityName: “HydrationRecord”)
}

// 便利なファクトリーメソッド
static func create(context: NSManagedObjectContext, amount: Int, timestamp: Date = Date()) -> HydrationRecord {
let record = HydrationRecord(context: context)
record.id = UUID()
record.amount = Int32(amount)
record.timestamp = timestamp
return record
}
}
“`

#### UserSettings
“`swift
struct UserSettings: Codable, Sendable {
var weight: Double = 60.0 // kg (30kg – 200kg)
var age: Int = 30 // 歳 (18歳 – 100歳)
var useRecommendedGoal: Bool = true
var customDailyGoal: Int = 2000 // (1000ml – 4000ml)
var reminderEnabled: Bool = false
var reminderInterval: TimeInterval = 3600 // 1 hour
var bedtime: Date?
var wakeupTime: Date?

// バリデーション
var isValid: Bool {
customDailyGoal >= 1000 && customDailyGoal <= 4000 &&
weight >= 30 && weight <= 200 &&
age >= 18 && age <= 100
}

/// 年齢別必要水分量の計算
/// 計算式：必要水分量（ml/日）＝体重（kg）×年齢別必要水分量（ml/kg/日）
/// – 22歳～54歳：1日あたり35ml/kg
/// – 55歳～64歳：1日あたり30ml/kg
/// – 65歳以上：1日あたり25ml/kg
var recommendedDailyIntake: Int {
let multiplier: Double
switch age {
case 22…54:
multiplier = 35.0 // ml/kg/日
case 55…64:
multiplier = 30.0 // ml/kg/日
case 65…:
multiplier = 25.0 // ml/kg/日
default:
multiplier = 35.0 // 22歳未満の場合はデフォルト値
}
return Int(weight * multiplier)
}

/// 実際に使用する目標摂取量
var effectiveDailyGoal: Int {
return useRecommendedGoal ? recommendedDailyIntake : customDailyGoal
}
}
“`

### ViewModelインターフェース

#### MainViewModel
“`swift
@MainActor
class MainViewModel: ObservableObject {
@Published var todayIntake: Int = 0
@Published var dailyGoal: Int = 2000
@Published var todayRecords: [HydrationRecord] = [] @Published var progress: Double = 0.0
@Published var showCustomAmountAlert = false
@Published var showDeleteConfirmation = false
@Published var customAmount: String = “”

func addIntake(amount: Int)
func addCustomIntake()
func prepareDeleteRecord(_ record: HydrationRecord)
func deleteRecord()
func loadSettings()
func loadTodayRecords()
}
“`

#### SettingsViewModel
“`swift
@MainActor
class SettingsViewModel: ObservableObject {
@Published var settings: UserSettings
@Published var notificationPermissionGranted = false
@Published var showResetConfirmation = false

func saveSettings()
func updateWeight(_ weight: Double)
func updateAge(_ age: Int)
func toggleUseRecommendedGoal(_ enabled: Bool)
func updateCustomDailyGoal(_ goal: Int)
func toggleReminder(_ enabled: Bool)
func requestNotificationPermission()
func resetAllData()
}
“`

#### HistoryViewModel
“`swift
@MainActor
class HistoryViewModel: ObservableObject {
@Published var selectedTab = 0
@Published var weeklyData: [HydrationRecord] = [] @Published var averageIntake: Int = 0

func loadWeeklyData()
func calculateAverage()
}
“`

#### CalendarViewModel
“`swift
@MainActor
class CalendarViewModel: ObservableObject {
@Published var selectedMonth: Date = Date()
@Published var hydrationData: [Date: Int] = [:] @Published var selectedDate: Date?

func loadMonthData(for month: Date)
func selectDate(_ date: Date)
func previousMonth()
func nextMonth()
}
“`

## エラーハンドリング

### Core Dataエラー
– データ保存失敗時のリトライ機構
– データ破損時の復旧処理
– メモリ不足時の適切なエラーメッセージ

### 通知エラー
– 通知許可が拒否された場合の代替UI表示
– バックグラウンド実行制限時の対応

### バリデーション
– 摂取量の範囲チェック（1ml – 2000ml）
– 日付の妥当性検証
– 設定値の境界チェック

## テスト戦略

### 単体テスト
– ViewModelのビジネスロジック
– データ変換処理
– バリデーション機能

### UIテスト
– 主要な操作フローの自動化
– アクセシビリティ対応の検証
– 異なる画面サイズでの表示確認

### 統合テスト
– Core Dataとの連携
– 通知システムとの連携
– UserDefaultsとの連携

## パフォーマンス考慮事項

### データ管理
– Core Dataのバッチ処理による効率的なデータ操作
– 古いデータの自動削除（90日以上前のデータ）
– メモリ使用量の最適化

### UI応答性
– 非同期処理によるメインスレッドのブロック回避
– LazyVStackを使用した大量データの効率的な表示
– アニメーションの最適化

## セキュリティとプライバシー

### データ保護
– ローカルデータのみ使用（外部送信なし）
– iOS標準の暗号化機能を活用
– アプリ削除時の完全なデータ削除

### 権限管理
– 通知権限の適切な要求タイミング
– 権限拒否時の代替機能提供

## アクセシビリティ

### VoiceOver対応
– 全てのUI要素に適切なアクセシビリティラベル
– 進捗情報の音声読み上げ対応
– ボタンの役割と状態の明確な表現

### 視覚的配慮
– Dynamic Typeサポート
– ハイコントラストモード対応
– カラーブラインドネス対応の色選択

## 国際化

### 多言語対応
– 日本語と英語のローカライゼーション
– 数値フォーマットの地域対応
– 日付・時刻表示の地域対応

3. 実装タスクリスト (tasks.md)

tasks.md

# 実装計画- [ ] 1. プロジェクト構造とCore Dataセットアップ
– Xcodeプロジェクトの作成とフォルダ構造の設定
– Core Dataモデルファイルの作成とエンティティ定義
– CoreDataManagerクラスの実装
– _要件: 1.1, 4.1, 6.1_- [ ] 2. ドメインレイヤーの実装
– [ ] 2.1 エンティティとモデルの作成
– HydrationRecord、User、DailyGoalエンティティの実装
– UserSettingsモデルの実装
– _要件: 1.1, 2.1, 2.2_- [ ] 2.2 Use Caseの実装
– CalculateWaterIntakeUseCaseの実装（体重・年齢ベースの計算）
– AddHydrationRecordUseCaseの実装
– GetHistoryUseCaseの実装
– ManageNotificationsUseCaseの実装
– _要件: 1.1, 1.3, 2.1, 2.2, 4.1, 5.1, 5.2_- [ ] 2.3 リポジトリプロトコルの定義
– HydrationRepositoryProtocolの定義
– UserRepositoryProtocolの定義
– _要件: 1.1, 2.1, 4.1, 6.1_- [ ] 3. データレイヤーの実装
– [ ] 3.1 リポジトリの実装
– HydrationRepositoryの実装（Core Data操作）
– UserRepositoryの実装（UserDefaults操作）
– _要件: 1.1, 1.2, 4.1, 6.2, 6.3_- [ ] 3.2 データソースマネージャーの実装
– UserDefaultsManagerの実装
– Core Dataエラーハンドリングの実装
– _要件: 2.3, 6.1_- [ ] 4. 通知システムの実装
– [ ] 4.1 NotificationManagerの実装
– ローカル通知の設定と送信機能
– 通知権限の要求処理
– 就寝時間を考慮した通知スケジューリング
– _要件: 5.1, 5.2, 5.3_- [ ] 5. ViewModelの実装
– [ ] 5.1 MainViewModelの実装
– 今日の摂取量と進捗の管理
– 摂取記録の追加・編集・削除機能
– リアルタイムデータ更新
– _要件: 1.1, 1.2, 1.3, 3.1, 3.2, 3.3, 6.1, 6.2, 6.3_- [ ] 5.2 HistoryViewModelの実装
– 過去7日間のデータ取得と表示
– グラフ用データの変換処理
– _要件: 4.1, 4.2, 4.3_- [ ] 5.3 CalendarViewModelの実装
– 月間データの取得と管理
– 日付選択と詳細表示の処理
– _要件: 4.1, 4.2, 4.3_- [ ] 5.4 SettingsViewModelの実装
– ユーザー情報と目標設定の管理
– リマインダー設定の管理
– 推奨摂取量の計算と表示
– _要件: 2.1, 2.2, 2.3, 5.1, 5.2, 5.3_- [ ] 6. カスタムUIコンポーネントの実装
– [ ] 6.1 ProgressRingViewの実装
– 円形プログレスリングの描画
– 進捗に応じた色変更（50%で黄色、100%で緑色）
– アニメーション効果の追加
– _要件: 3.1, 3.2, 3.3_- [ ] 6.2 IntakeButtonViewの実装
– 定型量ボタン（100ml, 200ml, 300ml, 500ml）
– カスタム量入力ボタン
– タップフィードバックの実装
– _要件: 1.3_- [ ] 6.3 ChartViewの実装
– 過去7日間の棒グラフ表示
– インタラクティブなタップ処理
– _要件: 4.1, 4.2_- [ ] 6.4 CalendarGridViewの実装
– 月間カレンダーグリッドの表示
– 達成率に応じた色分け表示
– 日付選択処理
– _要件: 4.1, 4.2, 4.3_- [ ] 7. メインビューの実装
– [ ] 7.1 MainViewの実装
– 円形プログレスリングの統合
– 摂取量表示と目標表示
– クイック摂取ボタンの配置
– 今日の摂取履歴リストの表示
– _要件: 1.1, 1.2, 1.3, 3.1, 3.2, 3.3_- [ ] 7.2 摂取記録の編集・削除機能
– 長押しジェスチャーの実装
– 編集・削除アクションシートの表示
– 確認ダイアログの実装
– _要件: 6.1, 6.2, 6.3_- [ ] 8. 履歴とカレンダービューの実装
– [ ] 8.1 HistoryViewの実装
– タブ切り替え（グラフ/カレンダー）
– ChartViewの統合
– 平均摂取量の表示
– _要件: 4.1, 4.2, 4.3_- [ ] 8.2 CalendarViewの実装
– CalendarGridViewの統合
– 月切り替えナビゲーション
– 選択した日の詳細表示
– _要件: 4.1, 4.2, 4.3_- [ ] 9. 設定ビューの実装
– [ ] 9.1 SettingsViewの実装
– ユーザー情報入力フォーム（体重・年齢）
– 目標設定セクション（推奨値/カスタム値）
– リマインダー設定セクション
– データ管理セクション
– _要件: 2.1, 2.2, 2.3, 5.1, 5.2, 5.3_- [ ] 10. ナビゲーションとアプリ統合
– [ ] 10.1 ContentViewとナビゲーションの実装
– タブビューの設定
– 各ビュー間のナビゲーション
– アプリ起動時の初期化処理
– _要件: 1.1, 2.3_- [ ] 10.2 アプリライフサイクルの処理
– バックグラウンド/フォアグラウンド処理
– データの自動保存
– 通知の更新処理
– _要件: 5.2, 5.3_- [ ]* 11. テストの実装
– [ ]* 11.1 ViewModelの単体テスト
– MainViewModelのテスト
– HistoryViewModelのテスト
– CalendarViewModelのテスト
– SettingsViewModelのテスト
– _要件: 全要件_- [ ]* 11.2 Use Caseの単体テスト
– CalculateWaterIntakeUseCaseのテスト
– AddHydrationRecordUseCaseのテスト
– GetHistoryUseCaseのテスト
– ManageNotificationsUseCaseのテスト
– _要件: 全要件_- [ ]* 11.3 UIテストの実装
– メイン画面の操作テスト
– 設定画面の操作テスト
– 履歴画面の操作テスト
– _要件: 全要件_- [ ] 12. アクセシビリティとローカライゼーション
– [ ] 12.1 アクセシビリティ対応
– VoiceOverサポートの実装
– Dynamic Typeサポート
– ハイコントラストモード対応
– _要件: 全要件_- [ ] 12.2 ローカライゼーション
– 日本語・英語の文字列リソース
– 数値・日付フォーマットの地域対応
– _要件: 全要件_- [ ] 13. 最終統合とポリッシュ
– [ ] 13.1 パフォーマンス最適化
– Core Dataクエリの最適化
– UIアニメーションの調整
– メモリ使用量の最適化
– _要件: 全要件_- [ ] 13.2 エラーハンドリングの強化
– ネットワーク接続エラーの処理
– データ破損時の復旧処理
– ユーザーフレンドリーなエラーメッセージ
– _要件: 全要件_

1. Stitchでデザイン生成

Kiroで出力された設計文書から、以下の情報をStitchに入力しました

• アプリ概要
• ユーザーストーリー
• コンポーネントとインターフェース

ここでのちょっとしたミス

開発時点でStitchには「標準モード」と「試験運用モード」の2種類がありました。

• 標準モード: Figmaへの直接エクスポートが可能
• 試験運用モード: より高品質なUIが生成されるが、Figmaエクスポート不可

最初、試験運用モードで良いUIが生成されたのですが、Figmaエクスポートができないことが判明。

解決策: HTMLからFigmaへ取り込み(試験運用モードでの取り込み)

可能であればStitchのFigmaへのエクスポート機能を利用して取り込みたかったところですが、
標準モードでのデザインがイマイチだったため試験運用モードで取り込みできるよう対応しました。

試験運用モードはHTMLコードとして書き出せるため、以下の手順でFigmaに取り込みました：

1. StitchからHTMLコードをエクスポート
2. こちらの記事を参考にFigmaプラグインを使用
3. Figmaに取り込み後、崩れた部分を手動で調整

最終的に以下の画面デザインが完成！

メイン画面（水分摂取記録）

履歴画面（グラフタブ）

履歴画面（カレンダータブ）

設定画面

1. Figma MCPのセットアップ

Figma MCPは、Claude CodeがFigmaのデザイン情報にアクセスできるようにするためのツールです。

前提条件

　⚠️ Figma MCPを使用するには、Devシート以上の有料プランが必要ですセットアップ手順

1. Figma側の設定

• 画面左上のメインメニュー → 基本設定

• 「デスクトップMCPサーバーを有効にする」を選択

2. クライアント側のサーバー構成

   # ターミナルで実行（Claude Code内ではない）

   claude mcp add --transport http figma-mcp http://127.0.0.1:3845/mcp 

   注意点：多くの記事では`sse`で構成されていましたが、自分の場合、Figma MCPは`http`で起動していたため、クライアント側も`http`にする必要がありました
(新しいバージョンになって変わったのかも)

3. サーバー一覧の確認

claude mcp list

4. Claude Codeの起動/再起動

• 既に起動している場合は必ず再起動(起動したままだと認識されないことがあります)

5. 接続確認

   Claude Code上で以下のコマンドを実行

/MCP

   以下のようにFigma MCPサーバーが表示されればOKです。

トラブルシューティング

• 再起動しても認識されない場合：

  1. サーバーを一度削除

  2. Claude Codeを完全に閉じる

  3. サーバーを再構成

  4. Claude Codeを起動

• サーバーの削除方法：

claude mcp remove figma-mcp

1. おまけ：Claude Codeの使用量可視化(飛ばしてもOK)

実装前に、トークン使用量などを可視化するツール「Claude-Code-Usage-Monitor」をセットアップしました。

セットアップ手順

1. uvのインストール

   公式サイトの手順に従ってインストール

   補足：`source`コマンドでパスを通す必要がありますが、ターミナルを閉じるとパスが切れます。`.zshrc`に追記しておくと便利です。

2. Claude-Code-Usage-Monitorのインストール

uv tool install claude-monitor

3. 起動

claude-monitor

リアルタイムでトークン使用量やコスト、API呼び出し回数などが可視化されます。

1. Claude Codeで実装

いよいよ実装です。Xcodeで空のプロジェクトを作成した後、Cursorで開き、Claude Codeを初期化します。

/init

実装プロンプト

以下のようなプロンプトで一括実装を依頼しました：

# 以下要件を元にアプリを構築してください

## 構築先

- 以下パスのプロジェクトフォルダ内にアプリを構築して下さい

  ./HydrationTracker

- すでにプロジェクト内には初期化した状態のソースが存在していますが、

  必要のないものは消してしまって問題ないです

## 要件、デザイン、タスク

- 要件、デザイン要件、タスクについては./.kiro/specsフォルダ内の

  下記ファイルを元に構築してください

  - requirements.md

  - design.md

  - tasks.md

## UIデザイン

- 詳細なUIデザインについては以下リンクのデザインを元に構築してください

  - MainView: [FigmaのURL]

  - HistoryView_GraphTab: [FigmaのURL]

  - HistoryView_CalendarTab: [FigmaのURL]

  - SettingView: [FigmaのURL]

## その他

- テストコードの作成は今回は除いてください

Claude Codeは、Kiroで生成した設計ドキュメントとFigmaのデザイン情報を参照しながら、以下を自動生成してくれました：

• 要件のアーキテクチャーに沿ったディレクトリ構成
• ドメインロジック（水分量計算、記録管理など）
• SwiftUIビュー（各画面の実装）
• データ永続化層
• 通知機能

起動してみる！

(最初は何度かエラーが出ますが都度Claude Codeに投げて修正してもらう・・・)

結果は以下のような感じになりました！

こちらはリキッドグラスにも対応してみました

結果と所感

できたこと

• 企画から実装まで、一貫したAI支援フローが構築できた
• 各ツールの得意分野を活かした役割分担ができた
• Figma MCPにより、デザインとコードの連携がスムーズになった
• Clean Architectureなど、きちんとした設計思想に基づいたコードが生成された

苦労した点

1. Stitchのモード選択

• 試験運用モードの品質は良いが、Figmaエクスポートができない
• 標準モードの品質がいまいち
• 結果的にHTMLからの取り込みという手間が発生

2. Figma MCPのセットアップ

• 情報が少なく、`http`と`sse`の選択で迷った
• 再起動が必要など、接続が不安定になることがある
• 有料プラン必須という制約

3. 手動調整の必要性

• Figmaに取り込んだデザインは完璧ではなく、手動調整が必要
• 細かいUI調整は人の手が必要

AIツール活用のポイント

1. 各ツールの役割を明確に

• 要件定義はKiro、デザインはStitch、実装はClaude Codeと分担
• 得意分野に集中させることで品質向上

2. デザインと実装の橋渡しが重要

• Figma MCPのような連携ツールの価値は高い
• ただし、セットアップの手間も考慮が必要

3. 完全自動化は難しい

• 各工程で人間のレビューと調整が必要
• AIは「加速装置」であって「完全代替」ではない

まとめ

複数のAIツールを組み合わせることで、モバイルアプリ開発を大幅に効率化できることが分かりました。

特に、要件定義やボイラープレートコードの生成など、時間のかかる作業をAIに任せられるのは大きなメリットです。

一方で、ツール間の連携やセットアップには試行錯誤が必要で、完全に自動化できるわけではありません。人間の判断とAIの処理能力をうまく組み合わせることが、現時点でのベストプラクティスと言えそうですね。

しかしそんなことも今のAIの進化を見ていると今回のように一気通貫で作ってくれるようなアプリケーションが登場しそうな気もしています・・・。

参考リンク

• [Kiroについて](https://zenn.dev/hirosukekayaba/articles/13973e9f6eb54c)
• [HTMLからFigmaへの取り込み](https://qiita.com/chovin/items/f47d1a35198b01a03dda)
• [Figma MCP + Claude Codeの連携](https://zenn.dev/devtatsu/articles/figma-claude-code-mcp)
• [Claude-Code-Usage-Monitor](https://zenn.dev/rescuenow/articles/0e0b501374eacb)
• [必要水分量の計算式](https://www.meiji.co.jp/meiji-nutrition-info/pdf/science/enteral/basic01.pdf)

使用したツール・プロダクト

• Kiro（要件定義・設計）
• Stitch（デザイン生成）
• Figma + Figma MCP（デザイン管理・連携）
• Cursor（IDE）
• Claude Code（コード実装）
• Claude-Code-Usage-Monitor（使用量可視化）
• Xcode（ほぼビルド用）