コーディングが分からなくてもOK！Claude Designでデザインから公開まで、私の初めてのWebアプリ

1. 本講座では、以下の内容を学びます（受講後に得られること）

• Claudeチャットを企画の補助として活用し、3画面のアプリ企画メモを作成する方法

• Mobbinで実際のアプリ画面を探し、デザインの参考として活用する方法

• Claude Designで最初の画面を確定し、デザインの基準を定めるためのプロンプトの書き方

• チャット・インラインコメント・直接編集・キャンバス調整、状況に応じた4つの修正方法

• クリックで画面同士がつながるインタラクティブプロトタイプを作成する

• Hand off to Claude Codeでデザインの意図や構造をそのままコーディング作業に引き継ぐ

• 技術要件・機能・確認依頼の3段構成プロンプトで実際に動作するWebアプリを実装する

• Firebase AuthenticationでGoogleログイン・新規登録機能を実装する

• Firestoreコレクションに自分のデータを保存し、ログインしたユーザーごとに読み込む

• AIにバグを正確に説明する方法と、GitHub + Vercelで自分のアプリのURLをデプロイする方法

2. 講義の概要

コーディングもデザインツールの操作もできなくて大丈夫です。
この講義では、企画は私とClaudeとのチャット、デザインはClaude Design、開発はClaude Codeが担当する3つの役割分担で、読書記録Webアプリ「私の本棚」を最初から最後まで完成させます。
画面を作って終わりではなく、FirebaseでGoogleログイン・会員登録を実装し、Firestoreコレクションに自分のデータを保存する、実際に動作してスマートフォンからもアクセスできるURLまで作ることが目標です。
一度この流れを身につければ、グルメ記録や運動記録、単語帳など、自分だけのアイデアも同じ方法で形にできます。

完成版で直接確認してみてください

3. セクション別の学習ポイント

セクション1. Claude Designでデザインする — 企画からクリックできるプロトタイプまで

① 3つの役割とClaude Designの始め方（第1〜2回）

企画者（私＋Claudeチャット）、デザイナー（Claude Design）、開発者（Claude Code）の役割を分け、Claude Designの作業画面と使用量を節約する依頼のコツを身につけます。

② Claudeチャットで企画し、Mobbinで参考資料を集める（第3講）

「まず私に3つだけ質問して」の一言でClaudeチャットと対話しながら企画メモを完成させます。
Goodreads、Apple Books、Blinkistなどの実際のアプリ画面をMobbinで探し、「何を参考にするか」を整理します。

③ 最初の画面を確定し、4つの方法でブラッシュアップする（第4〜5回）

一覧画面1つで色・フォント・雰囲気を先に確定し、チャット・インラインコメント・直接編集・キャンバス調整を状況に応じて使い分けて完成度を高めます。
BookCard、StarRatingのように要素に名前を付け、デザインとコードで同じ言葉を使えるようにします。

④ プロトタイプの接続とハンドオフ前の確認（第6～7講）

「同じスタイルで」の一言で追加・詳細画面を作成し、画面間をクリックで移動できるプロトタイプを完成させます。
見落としやすい空の状態（Empty State）やPC画面までチェックします。

セクション2. Claude Codeで実装してデプロイする — ハンドオフから自分のアプリURLの共有まで

⑤ ハンドオフと3段構成の実装依頼（第8〜9講）

Export → Hand off to Claude CodeでデザインをClaude Code Webに渡し、技術条件・機能・確認依頼に分けたプロンプトでリスト画面から実装します。

⑥ Firebase連携とデバッグ（第10～11講）

Firebaseプロジェクトを作成してアプリに接続し、Googleログインとメールアドレスでの新規登録を実装します。
書籍情報をFirestoreコレクションに保存し、ログインユーザーごとに追加・詳細表示・削除ができること、再読み込み後もデータが保持されることを、画面ごとに検証します。
「うまくいきません」ではなく、やったこと・見たこと・望むことを使ってバグを説明する方法を学びます。

⑦ デプロイと修正のループ（第12〜13回）

GitHubにアップロードしてVercelでデプロイした後、Firebaseにデプロイ先のURLを登録し、スマートフォンでもGoogleログインできる自分のアプリを開いてみます。
最後に「読んだ日」機能を追加し、デザイン修正 → 再ハンドオフ → コード反映 → 自動再デプロイの修正ループを一通り回します。

4. この講義を受講すべき理由

🧭 1. 企画 → デザイン → 開発 → デプロイまで、全工程を一気に体験

画面をきれいに作って終わりのデモではありません。企画メモから始めて、実際に動作するアプリのURLを共有するところまで進みます。

🤝 2. 役割を分担してAIを使いこなす

Claudeとのチャットは企画、Claude Designはデザイン、Claude Codeは開発。各ツールに合った仕事を任せる方法を学ぶことで、成果物の品質が変わります。

🎨 3. 感覚ではなく、リファレンスをもとにデザインします

Mobbinで検証済みの実際のアプリ画面を探し、「何を参考にするか」まで整理してプロンプトに落とし込む実務的な方法を学びます。

🧩 4. そのままコピーして使えるプロンプト

企画、初期画面、修正、プロトタイプ、実装、デバッグまで、段階ごとのプロンプトを提供します。自分のプロジェクトに合わせて単語を変えるだけで、すぐに使えます。

⏱️ 5. 10〜15分単位で短く、確かな全13講

各講で成果物が一つずつ増えていく構成なので、通勤中に1講ずつ受講しても流れを見失いません。

こうした方々は、受講後すぐに活用できます。

• 開発者なしでアイデアを自らプロトタイプ化して検証したい企画担当者・マーケター・起業家

• デザイン案を実際に動作する画面にして、すぐに試してみたいデザイナー

  
  

5. 受講前の注意事項

📌 Claudeの有料プランが必要です

Claude DesignとClaude Codeは、Claudeの有料プラン（Pro以上）で利用できます。利用量はチャットやClaude Codeと同じ上限から差し引かれるため、講義でお伝えする「まとめて、具体的に」依頼する習慣を身につけてください。

📌 Claude Designは頻繁にアップデートされるサービスです

Claude Designはリサーチプレビュー段階のため、メニュー名や配置が講義画面と少し異なる場合があります。大きな変更があった場合は【講義のお知らせ／補足動画】でご案内します。

📌 講義資料の提供

• 各回の講義スライド（PDF）

• ステップ別プロンプト集

• Mobbinおすすめリファレンスリンク一覧

  
  

  
  

📌 Firebaseは無料プラン（Spark）で実習します。

GoogleアカウントさえあればFirebaseを無料で始められ、実習規模であれば支払い情報は必要ありません。ただし、Firebaseコンソールの画面は変更される場合があるため、補足案内を提供することがあります。

📌 Mobbinは無料アカウントで十分です

無料アカウントではアプリごとに閲覧できる画面数が制限されていますが、実習には十分です。

6. 実習環境

• OS： Windows、macOS（ブラウザがあればOK）

• ブラウザ：Chrome推奨

• AIツール：Claude（Pro以上）— Claudeチャット、Claude Design、Claude Code Web

• リファレンス：Mobbinの無料アカウント

• コードの保存・デプロイ：GitHubアカウント、Vercelアカウント（GitHubでの登録を推奨）

• バックエンド：Firebase（Googleアカウント）— Authentication、Firestore

• インストールするもの：Node.js（LTS） — GitHub連携とFirebaseの設定に必要です。

  
  

7. こんな方におすすめ／事前知識

おすすめの対象

• プログラミングは初めてだけれど、自分のアイデアをアプリにしてみたい方、【推奨対象】

• Claude Designが気になるけれど、どこから始めればいいかわからない方

• デザイン案で止まらず、実際に動く画面まで作ってみたいデザイナー

• 開発者なしで素早くプロトタイプを作成・検証したい企画者・起業家

• AIでWebアプリを作る全プロセスを一度体験してみたい方

事前知識

• 必要ありません。Webブラウザが使えれば十分です。

• HTML/CSSを少し知っていると、9〜10講で作成したコードを理解するのに役立ちます。