アプリのオンボーディング画面をClaude Designで設計した話——3画面で離脱率を下げたプロセス全公開

やろうとしたこと

社内ツールのスマホアプリに、初回起動時のオンボーディング画面が必要になった。スライド式の3画面構成で、「機能紹介→権限許可説明→ログイン誘導」という流れ。デザイナーに頼める時間はなく、Claude Designでプロトタイプを出してから開発に渡すことにした。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※プロトタイプ: 実際の開発前に作る試作品。Claude Designでは操作可能なUIプロトタイプを生成できる。

最初のプロンプトで全然違うものが出た

最初に投げたのはこれだった。

モバイルアプリのオンボーディング画面3枚を作ってください。
機能紹介とログインCTAがあるやつ

出てきたのは、ガチガチのアメリカ風デザイン。英語テキスト、ネオンっぽいグラデーション、アイコンも全部ポップなイラスト系。日本のBtoBアプリには全然合わない。ここで「指示が曖昧すぎた」と気づいた。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。※CTA: Call To Action（行動喚起）。ボタンやリンクでユーザーに次の行動を促す要素。

ユーザー像と業種を最初に書いたら変わった

3回やり直してわかったのは、ターゲットユーザーと業種を書かないと、Claude Designはアメリカのコンシューマー向けアプリを基準にしてしまうということだ。

こう書き直した。

ユーザー: 40代・製造業の現場管理者
デバイス: iPhone、会社支給
アプリ目的: 製造ラインの進捗確認ツール
トーン: シンプル・信頼感・日本語テキスト
カラー: 紺 #1A3A6B とホワイト、アクセントのみオレンジ

画面1: 主要機能3点をアイコンつきで紹介（進捗確認・アラート通知・履歴閲覧）
画面2: プッシュ通知の権限許可を促す説明
画面3: メールアドレスログインボタン＋QRコード読み取り案内

このプロンプトで出てきたデザインは落ち着いた紺ベース、ゴシック体の日本語テキスト、アイコンも業務系でまとまっていた。一発で「これでいける」という手応えがあった。

Claude Codeへの橋渡しが想像以上にスムーズだった

生成されたデザインをそのままClaude Codeに「React NativeコンポーネントにしてFlat Listで3画面スライドさせて」と渡したら、かなり素直なコードが出てきた。テキストと色の変数を変えるだけで3画面が揃い、1時間かからずプロトタイプが動いた。

「デザインを作る」と「実装へ渡す」の間にあった壁が、思ったより薄かった。

※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。

やらかしたこと3つ

• プログレスバーの位置指示を忘れた: 毎回ランダムな場所に出た。最初から「上部中央に3点インジケーター」と書けば良かった
• 「戻るボタン」の有無を指定しなかった: 画面によってあったりなかったりした。全画面共通のナビゲーションルールを最初に書くべき
• アニメーション指示ゼロだった: 静的デザインは完成できたが、「次の画面へのスライドはどっちから来るか」は別途指示が必要。最初からトランジションを書くと結果が安定した

オンボーディング画面はインタラクションが命なので、静的デザインとして完成させてから、別プロンプトでトランジション・アニメーションの指示を追加するのが現実的なフローだった。