おめでとうございます！

インストール済みツール

PCに作成されたプロジェクト構成

📁 ~/my-first-app/
├── 📂 public/                ← 画像、アイコン
├── 📂 src/
│   ├── 📂 app/               ← ページ（Next.js）
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── 📂 domain/            ← ビジネスロジック
│   │   ├── models/
│   │   └── services/
│   ├── 📂 ports/             ← インターフェース定義
│   └── 📂 adapters/          ← 外部連携
│       ├── api/
│       └── ui/
├── 📄 CLAUDE.md               ← AIアーキテクチャルール
├── 📄 next.config.ts          ← Next.js設定
├── 📄 tailwind.config.ts      ← スタイル設定
├── 📄 tsconfig.json           ← TypeScript設定
└── 📄 package.json

AIに最初のひと言を投げる

Claude CodeまたはCursorのどちらでもOK。一発で完璧じゃなくて大丈夫。会話を続けながら直していけばいいです。

___というウェブサイトを作りたいです。

どんなサービスかというと：
___

主に使う人：
___

最初に必ず必要な機能3つ：
1. ___
2. ___
3. ___

まずどこから始めればいいですか？

日程調整ウェブサイトを作りたいです。

どんなサービスかというと：
友達のグループLINEで「いつ空いてる？」って聞くのが面倒なので、
リンクを一つ共有すれば、みんなが空いてる日に投票できるサイトです。

主に使う人：
20〜30代の社会人。会員登録なしでリンクだけですぐに使えること。

最初に必ず必要な機能3つ：
1. 候補日を複数登録して、参加者が空いてる日にチェック
2. 会員登録なしで名前だけ入力してすぐ参加
3. 投票結果を一目で確認できる画面

まずサイトを紹介するランディングページから作ってください。

その次はこんな感じで続けましょう

最初のプロンプトを送ると、AIがコードを作ってくれます。その後は短く会話するように頼めばOKです。

うまく言えなくても大丈夫です。「さっきのやつ取り消してやり直して」と言えばOKです。

💡 次のステップでサイトを公開すると、5つのカテゴリ(テキスト・色・新セクション・グラデーション・フォント)に整理されたガイドがまた登場します。

デザインに困ったら

Claude Design — AIで画面を先に作り、自分のプロジェクトにそのまま取り込めます。

1. 1claude.ai/designにアクセスして「ログインページを作って」のように作りたい画面を説明してください
2. 2気に入ったらExportメニューで「Send to local coding agent」を選び、Copy commandを押してください
3. 3プロジェクトフォルダを開いたClaude Codeのターミナルに貼り付け — デザインが自動で適用されます
4. 4Cursorなど他のAIエージェントを使うときは「Download zip instead」にチェックしてZIPを取得し、解凍して~/my-first-app/フォルダに入れてください

Claude Pro・Max・Team・Enterpriseの加入者のみ利用可能です。リサーチプレビュー中で独自の週次上限があり、ここでの使用量は他のClaude上限には含まれません。