今回はこんな感じで、iOS純正アプリさながらのUIを、プロンプトだけでClaude Designに作ってもらいました。この記事では、実際に使ったプロンプトを全文載せているので、コピペしてご自身のアプリアイデアでもぜひ試してみてください！
はじめに
Claude Designは、Anthropic Labsが2026年4月に公開したAI駆動のビジュアル生成ツールです。テキストで要件を伝えるだけで、プロトタイプ・スライド・LP・ワンページャーなどを生成でき、Figmaのようなデザインツールの操作経験がなくても「言葉でデザインする」ことができます。エンジニアであれば、これを使って本実装前の画面イメージを高速に固められるのが大きなメリットです。
そして今回はこのClaude Designに、Anthropicの上位モデル群「Mythos」系統に属する Claude Fable 5 を組み合わせ、iOSネイティブアプリと見分けがつかないレベルの、単一HTMLファイルによる完全に動作するインタラクティブなプロトタイプを作ってみます。題材は、社内チーム向けトークアプリ「KaishaDeTalk」です。
なお、Fable / Mythos系モデルは2026年6月9日に登場した直後、6月12日〜7月1日に米商務省の輸出規制対応のため一時利用停止となり、その後復旧しています。現在はまた通常どおり利用可能です（Anthropic公式アナウンス）。
この記事のポイント
- Apple Human Interface Guidelines（HIG）に準拠した、iOS純正アプリさながらのUIをプロンプトだけで再現する
- 「共通テンプレートプロンプト」と「アプリ情報プロンプト」を分離し、使い回せる形にする
- 実際に使ったプロンプト全文を紹介
- 社内向け業務アプリ（チャット＋タスク管理）という、実務で応用しやすいテーマで実践する
プロンプト設計の考え方
今回は、プロンプトを2つのパートに分けて設計しています。
- 共通テンプレート：iOSのデザインルール（デバイスフレーム、タイポグラフィ、カラー、コンポーネント、アニメーション）を毎回細かく指定する部分。どんなアプリを作る場合でも使い回せます。
- アプリ情報：作りたいアプリごとに書き換える部分。アプリ名・目的・ターゲットユーザー・主な機能・トーン・アクセントカラーなどを埋めるだけのシンプルなフォーマットにしておくと、次のアプリを作るときも迷いません。
## 【アプリ情報】（ここを書き換えてください）
- **アプリ名**:
- **アプリの目的・概要**:
- **ターゲットユーザー**:
- **主な機能（3〜5個）**:
- **雰囲気・トーン**（例：ミニマル/ポップ/信頼感/かわいい など）:
- **アクセントカラーの希望**（あれば）:
- **その他の要望**（ダークモード対応、特定の画面が欲しい等）:
この2つを毎回セットで渡すことで、「iOS流のお作法」は固定しつつ、アプリごとの個性だけを差し替えられるのがポイントです。
共通テンプレートプロンプト（全文）
実際に使っている共通テンプレートの全文です。ベースとなる考え方は他の解説記事などでも見かける一般的なものですが、自分なりに言い回しや条件の粒度を調整してアレンジしています。
あなたはApple Human Interface Guidelines（HIG）を専門とする、
iOSアプリのUI/UXに精通したデザイナー件エンジニアです。
これから提示する【アプリ情報】を読み込み、実機のiOSアプリと
遜色ないクオリティで、実際に手を動かして触れるインタラクティブな
プロトタイプを、単一のHTML Artifactとして仕上げてください。
## 必須条件（例外なく満たすこと）
1. HTML1ファイルの中に構成要素（スタイル・スクリプト含む）を
すべて収める
2. 見た目だけのモックアップは不可。タップ操作、スワイプ操作、
文字入力、画面の切り替えが実際に反応し動作すること
3. HIG（Apple Human Interface Guidelines）への準拠は絶対条件とする。
iOSの標準的な設計思想・余白・階層構造から逸脱しないこと
4. 画像は外部URLに頼らず完結させる（アイコンは線画のSVGで自作、
写真が要る場面はグラデーションや図形で代用）
5. ブラウザの保存領域（localStorage等）は使わず、状態管理は
すべてスクリプト内の変数で完結させる
6. 完成後は、用意した全ボタン・全画面遷移が正しく動作するか
自分の頭の中で一通りシミュレーションしてから提出すること
## 見た目の再現ポイント（HIGに則って）
### 端末の枠
- 画面の中央に、最新世代のiPhone相当の実機フレームを表示する
（横393px×縦852px程度、四隅を大きめの角丸に、上部にノッチ状の
センサー部分）
- 上端にステータス表示（時刻・電波・Wi-Fi・バッテリー残量）
- 下端にホームバー（横長のグレーのインジケーター）
### 文字まわり
- フォントはシステムフォント（-apple-system, BlinkMacSystemFont,
"SF Pro Text", "Hiragino Sans"など）を優先的に指定
- 見出しは大きく太く（Large Titleクラスは34px前後・太字）、
本文は17px前後を基準に、用途に応じて段階的にサイズを変える
- 字間はやや詰め気味（-0.4px程度）にして、iOSらしい締まった
印象に寄せる
### 配色
- iOS標準のシステムカラー（青 #007AFF、緑 #34C759、赤 #FF3B30、
橙 #FF9500、グレー #8E8E93 など）を積極的に採用する
- 背景はうっすらグレーがかったオフホワイト（#F2F2F7相当）、
カードやリスト行は白背景
- 境界線は薄いグレーの極細線で表現する
- アプリの世界観に合ったメインカラーを1色決め、ボタンやアイコンの
強調色として全画面で統一して使う
### 部品まわり
- 上部のナビゲーションはスクロールで大見出しが小見出しへ縮む
挙動を再現し、戻る導線には「‹ 前の画面名」の形式を使う
- 画面下部のタブは半透明・ぼかし処理を効かせ、選択中の項目のみ
強調色で表示する
- リストは角丸のグループ表示（行の両端に余白を持たせ、右端に
「›」の矢印）を基本形にする
- ボタンは塗りつぶし・薄塗り・テキストのみの3種類を場面に応じて
使い分け、押した瞬間はやや透明になり離すと元に戻る
- スイッチや検索欄、セグメント切替なども、実機のiOSに寄せた見た目
で再現する
- モーダルやアクションシートは画面下からせり上がる形にし、
背後は少し暗くする。上部には掴み手がかり（グラバー）を置く
### 動きの質感
- 画面の切り替えは右側から滑り込むプッシュ遷移とし、0.3〜0.4秒
程度でイージングをかけて自然に見せる
- タップした要素は瞬間的にハイライトし、跳ねるような余韻のある
動きを加える
- 一覧のスクロールは慣性が効いた滑らかな動きにする
- モーション低減設定（prefers-reduced-motion）にも配慮する
## 作り込む画面の範囲
- 【アプリ情報】の内容から、主要な画面を3〜5枚選定し、タブや
画面遷移で行き来できる構成にする
- 各画面には、実際の利用シーンを想像できる具体的な日本語の
ダミーデータを入れる。手を抜いた仮テキストは避ける
- アプリの中心機能は最低ひとつ、実際に操作して結果が変わる形
（追加・完了・削除・並び替えなど）で組み込む
- データが0件のときの画面（空状態）も必ず用意する
## 提出のしかた
1. 最初に、アプリのコンセプト・画面構成・メインカラーの方針を
3〜5行程度で簡潔にまとめる
2. 続けて、HTML一式をArtifactとして出力する
3. 最後に、触ってみるときの操作手順を2〜3行で案内する
---
## 【アプリ情報】（ここを書き換えてください）
- **アプリ名**:
- **アプリの目的・概要**:
- **ターゲットユーザー**:
- **主な機能（3〜5個）**:
- **雰囲気・トーン**（例：ミニマル/ポップ/信頼感/かわいい など）:
- **アクセントカラーの希望**（あれば）:
- **その他の要望**（ダークモード対応、特定の画面が欲しい等）:
いくつかポイントを補足します。まず、HIGへの準拠を「絶対条件」として明文化しているのが今回のキモです。単に「iOSっぽく」とだけ伝えると、細部がWebのUIに寄りがちですが、「HIGから逸脱しないこと」を必須条件のひとつに独立させて置くことで、余白の取り方やコンポーネントの階層構造まで含めてブレにくくなります。
また、「動くこと」も同格の必須条件にしている点も重要です。静止画のモックだと実装イメージが伝わりにくく、レビューでも「実際どう動くの？」という手戻りが発生しがちです。最初から「タップ・スワイプ・遷移が本当に動く」ことを条件にすることで、レビュー段階でそのまま触って確認できるプロトタイプになります。
アプリ情報プロンプト（KaishaDeTalk）
今回作成したのは、特定チーム・部署向けの社内トークアプリです。
## 【アプリ情報】
- アプリ名: KaishaDeTalk
- アプリの目的・概要: 特定チーム・部署内でのコミュニケーションを
円滑にする社内トークアプリ。日常のやり取りに加えて、タスクの
依頼・進捗確認までシームレスに行える点が特徴。
- ターゲットユーザー: 特定チーム・部署のメンバー（10〜30名程度を想定）
- 主な機能（3〜5個）:
- グループ/個人チャット（既読確認つき）
- メッセージからそのままToDo化できるタスク連携機能
- タスクの担当者・期限・進捗ステータス表示
- ファイル・画像の共有
- 通知設定（重要メッセージのピン留め等）
- 雰囲気・トーン: 親しみやすい・柔らかめ
（角の丸いUI、優しい配色、堅苦しくないフォント）
- アクセントカラーの希望: 明るめのグリーンやオレンジ系など、
温かみのある色
- その他の要望: 既読確認とToDo紐付けが分かりやすく一目で見える
ホーム画面、ダークモード対応、通知バッジの表示
単なる「チャットアプリ」ではなく、「メッセージ→タスク化→進捗確認」という業務フローそのものをUIに落とし込む必要がある点が、このお題の面白いところです。既読確認とToDoの紐付けをホーム画面でどう一目で見せるか、という要件は、汎用のチャットUIテンプレートだけでは満たせないため、プロンプト側で明示的に指定しています。
実践してみて分かったコツ
-
「絶対条件」は箇条書きで、かつ数値で縛る
角丸12px、Large Title 34px、というように具体的な数値まで指定すると、iOSアプリらしい統一感がぐっと増します。曖昧な指示（「iOSっぽく」）だけだと、Web的なデザインに寄りがちです。 -
ダミーデータは「本物っぽさ」にこだわる
「サンプル1」のような手抜きの文言ではなく、実際の業務チャットで交わされそうな日本語のやり取りを入れることで、レビュー時の説得力が段違いに上がります。KaishaDeTalkの場合は「〇〇さん、資料の件よろしくお願いします」といった具体的なメッセージ例を用意しました。 -
空状態（0件）の画面も必ず要求する
タスクが0件、通知が0件のときの見せ方は忘れがちですが、業務アプリでは地味に重要な画面です。プロンプトに一言入れておくだけで、抜け漏れなく生成してくれます。 -
アプリ情報テンプレートは使い回す
共通テンプレートとアプリ情報を分離しておくと、次に別のアプリを作りたくなったときも、アプリ情報の部分だけ書き換えてすぐに試せます。テンプレート化しておくメリットが大きいポイントです。
実際にできあがったもの
Claude Designで完成した画面
Claude Designでプロンプトを投げてから、キャンバス上でのやり取りを重ねて完成した状態のスクリーンショットです。
Claude Design上ではキャンバス右上のトグルからライト/ダークモードをその場で切り替えて確認できるため、今回のプロンプトで指定したダークモード対応も、生成後すぐに両方の見え方をチェックしながら微調整できました。
動くデモ（CodePen埋め込み）
出力された単一HTMLファイル（スタンドアロン版.html）は、そのままCodePenに貼り付けるだけで動作するデモとして公開できます。今回作成したKaishaDeTalkのプロトタイプは、以下のPenで実際に触って確認できます。
まとめ
Claude Designのような対話型デザインツールに、iOSのHIGを踏まえた詳細なプロンプトを渡すことで、「動くレベルのiOSプロトタイプ」を一気に作ることができます。今回のポイントは、
- 共通テンプレート（HIGのルール）とアプリ情報（要件）を分離して使い回す
- 「動くこと」を絶対条件として明記する
- ダミーデータと空状態まで含めて具体的に指示する
の3点です。企画段階のラフな画面イメージを、エンジニア・PM・非デザイナーでも素早く形にできるので、社内ツールや個人開発のアイデア検証に、ぜひ試してみてください。