筆者は仕事では、UIの検討はかなりのバリエーションを Claude と作っては壊しての繰り返しをしている。それこそ画面レイアウトだけに限らず、画面の構成要素、演出の仕方それぞれをとっても納得いくまで、微調整を含めると数十近く試すことがある。プロトタイプにおけるモックデータの作成は、ペルソナや時系列シナリオを与えた上で、かなりリアルに作り込むこともある。なのでこのセッションの内容自体は、意外と自分もやっているな、と言う感覚だった。
だが目から鱗だったのは、調整UIパネルの実装だった。実際似たようなことは筆者もしていて、アイテム個数などをバリエーション違いで切り替えたいとき（特にアニメーション確認など）、コンテンツ有り/Empty を切り替えて比較するための設定パネルを画面横に表示、みたいなことだが、例示されていたアニメーション調整は、結構自然言語で済ませてしまうことが多かった。フェーズ分けのアニメーションも、検討はするが割と言葉で支持してしまいがち。システマチックに調整パネルに落とし込めば、確かにエージェントと共通言語を築く方法として良さそうだと思った。
Create UI prototypes using agents in Xcode
0:00 – Introduction
- 意図的なプロトタイピングがアプリの差別化において重要な理由を解説
- セッションの内容概観
- Xcode コーディングエージェントとプレビューを使って UI の可能性を探索
- リアルコンテンツを取り込みプロトタイプを充実させる
- 重要な瞬間とインタラクションを調整する
2:56 – Exploring UI possibilities
- NG：「ブッククラブの定期的なミーティングを管理するUIを作って」
- プロンプト画曖昧
- 構成方法の一つにすぎない、不要な機能が含まれ機能過多、最適でないナビゲーション
- より具体的なプロンプト
- より具体的に：解決したい課題はエージェントよりも自分自身の方がよく把握している
- スタイルの手がかりを与える：アプリに込めたい雰囲気や感覚
- 複数の選択肢を求める：最も重要、複数の異なる方向性を探求する
- 複数の UI バリエーションを一度に生成するプロンプトの書き方
- “Create ten different variations of an interfaece for…”
- 機能、スタイルごとに名前付きの Swift Preview の生成を求める
- バリエーションを広げ、最も有望な要素を選び、アイデアをリミックスする、このプロセスを繰り返す
7:31 – Making your app feel lived in
- ユーザーが実際のコンテンツを試せるまでは時間がかかる場合がある
- エージェントがユーザー役を担う
- リアルなサンプルデータでプロトタイプを充実させるためにエージェントを活用
- 複数のパターンを求める
- エンジケースを自分で考える
- UIのどの状態を繰り返すかを具体的に指定する
- エッジケースのカバー
- 空の状態（empty state）
- 長いテキスト
- 境界のないリスト
- サンプルコンテンツを独立ファイルとして再利用可能にするよう指示する
11:19 – Tuning key moments
- アニメーションスタイル：Ease, Spring
- Friction and inertia（摩擦と慣性 e.g. Apple Music 再生画面を閉じるときの重さ）
- デバイスの動き（e.g. Apple Cash のパララックス効果）
- ハプティクス（重要な瞬間、特別なモードをどう伝えるか）
- プロトタイプの動的要素を改善するテクニック
- カスタムチューニングパネルを構築してアニメーションパラメータをリアルタイム調整：これをエージェントに作成依頼する
- 探求したい内容を詳細に説明する（e.g. アニメーションスタイルか、spring curveか、トランジションか）
- 複数フェーズのアニメーションはフェーズ分けして調整可能とする
- パネルを画面に重ねずに並列に並べる（side-by-side）ことで即座に見比べられるようにする
17:31 – Next steps
- エージェントをデザイナーではなくコラボレーターとして扱う考え方
- 最良の体験を見つける鍵は自分自身の判断