2026.07.07
Fable × Claude Design で iOS アプリ UI を作る
Fable × Claude Design で、HIG 準拠の iOS アプリ UI を生成できたメモ。
【朗報】Fable × Claude Design で、iOS アプリの UI デザインを作れる！
「Apple の HIG（Human Interface Guidelines）に準拠して」と指示したら、iPhone そっくりのモック画面をベースにアプリの UI を生成してくれました。
Shipaton に提出するアプリのデザインも、これで簡単に作成できそうです！
詳細なプロンプトはリプ欄に貼ってますので、コピペして使ってみてください！
詳細なプロンプト案はこちらです。
あなたは Apple Human Interface Guidelines（HIG）を熟知したシニアiOSデザイナー兼フロントエンドエンジニアです。以下の【アプリ情報】をもとに、iOSネイティブアプリと見分けがつかないレベルの、**完全に動作するインタラクティブなプロトタイプ**を、単一のHTMLファイルのArtifactとして作成してください。
## 絶対条件
1. **単一HTMLファイル**で完結させる（CSS・JSはすべて同一ファイル内に記述）
2. 静止画のモックではなく、**タップ・スワイプ・入力・画面遷移がすべて実際に動く**プロトタイプにする
3. 外部画像に依存しない（アイコンはSF Symbols風のインラインSVG、写真が必要な場合はグラデーションやCSSで表現）
4. localStorage / sessionStorage は使用禁止。状態はすべてJavaScript変数（メモリ内）で管理する
5. エラーなく動くこと。実装後、全ボタン・全遷移が機能するか頭の中で必ず検証すること
## iOSデザインの再現ルール（HIG準拠）
### デバイスフレーム
- 画面中央に iPhone 15 Pro 相当のフレーム（393×852px、角丸55px程度、Dynamic Island付き）を表示
- フレーム上部にステータスバー（時刻「9:41」、電波・Wi-Fi・バッテリーアイコン）
- 画面下部にホームインジケーター（グレーの横バー）
### タイポグラフィ
- `font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", sans-serif`
- Large Title: 34px/bold、Title: 28px、Headline: 17px/semibold、Body: 17px、Footnote: 13px、Caption: 12px
- 行間・字間もiOS標準に寄せる（letter-spacing: -0.4px 程度）
### カラー（iOSシステムカラーを使用）
- systemBlue `#007AFF`、systemGreen `#34C759`、systemRed `#FF3B30`、systemOrange `#FF9500`、systemGray `#8E8E93`
- 背景: `#F2F2F7`（grouped background）、カード/セル: `#FFFFFF`
- 区切り線: `rgba(60,60,67,0.29)` の0.5px相当
- アプリの世界観に合わせてアクセントカラーを1色選び、tintColorとして一貫して使う
### コンポーネント
- **ナビゲーションバー**: Large Titleがスクロールで通常タイトルに縮むアニメーション、戻るボタンは「‹」+前画面名
- **タブバー**: 半透明（backdrop-filter: blur）、アイコン+ラベル、選択中はtintColor
- **リスト**: Inset Grouped スタイル（角丸10px、左インセット16px、セパレーター）、セル右端に「›」シェブロン
- **ボタン**: Filled（角丸12px）/ Tinted / Plain の使い分け、押下時に opacity 0.4 → 復帰
- **スイッチ・セグメンテッドコントロール・検索バー**などもiOS純正の見た目で再現
- **モーダル/シート**: 下からスライドアップ、上部にグラバー、背景を暗くディム
- **アラート・アクションシート**: iOS純正の見た目（中央角丸14px、ボタン区切り線）
### アニメーション・操作感
- 画面遷移: 右からのプッシュ遷移（cubic-bezier(0.25, 0.1, 0.25, 1)、約0.35秒）
- タップ時のハイライト、スプリング感のある動き
- スクロールは慣性スクロール（-webkit-overflow-scrolling: touch）
- `prefers-reduced-motion` にも配慮
## 実装する内容
- 【アプリ情報】から主要な画面を **3〜5画面** 設計し、タブバーまたはナビゲーションで相互に行き来できるようにする
- 各画面には**リアルで具体的なダミーデータ**（日本語）を入れる。「サンプル1」「テキストテキスト」のような手抜きコピーは禁止
- 主要機能を最低1つは実際に動く形で実装する（例：ToDoアプリなら追加・完了チェック・削除が本当に動く）
- 空状態（データ0件時）の画面も用意する
## 出力の流れ
1. まず、アプリのコンセプト・画面構成・アクセントカラーの方針を3〜5行で簡潔に説明
2. 続けてArtifactとしてHTMLを出力
3. 最後に「操作方法」を2〜3行で案内
---
## 【アプリ情報】（ここを書き換えてください）
- **アプリ名**:
- **アプリの目的・概要**:
- **ターゲットユーザー**:
- **主な機能（3〜5個）**:
- **雰囲気・トーン**（例：ミニマル/ポップ/信頼感/かわいい など）:
- **アクセントカラーの希望**（あれば）:
- **その他の要望**（ダークモード対応、特定の画面が欲しい等）:#shipaton