「AIにコードを書かせたい」「デザインをそのままコードに変換したい」——そんな夢を叶えるのが、AnthropicのClaude CodeとClaude Designです。
この記事では、MacBookでゼロからセットアップし、Claude Designで作成したデザインをClaude Codeに渡すまでの流れを丸ごと解説します。
必要なもの
- MacBook（macOS）
- Node.js（npmが使える状態）
- Claude Proプラン（月額$20〜）
Step 1：Claude Proプランを契約する
claude.ai にアクセスし、Proプランに申し込みます。
Claude CodeはPro・Max・Team・Enterpriseプランで利用可能です。月額$20のProプランから使い始めることができます。
Step 2：Claudeデスクトップアプリをインストール
claude.com/download からMac用のインストーラーをダウンロードし、アプリケーションフォルダにインストールします。
Claudeデスクトップアプリには Chat / Cowork / Code の3つのタブがあります。
| タブ | 用途 |
|---|---|
| Chat | 普通の会話（claude.aiと同じ） |
| Cowork | ファイル操作など複雑な自動作業 |
| Code | コーディング作業（ローカルファイルに直接アクセス） |
Step 3：Claude CodeのCLIをインストール（ターミナル）
ターミナルを開いて、以下のコマンドを実行します。
npm install -g @anthropic-ai/claude-code
成功すると、こんなメッセージが表示されます。
added 9 packages in 19s
npm notice New minor version of npm available! ...
added X packages と表示されればインストール完了です。npmのアップデート通知は無視してOKです。
デスクトップアプリの「Code」タブを使う場合は、このCLIインストールは不要です。
ターミナルから使いたい場合のみ必要です。
Step 4：Claude Codeにログインして起動する
ターミナルで以下を実行します。
claude初回起動時にブラウザが開き、Claudeアカウントへのログインが求められます。ProプランのアカウントでログインすればOKです。
ログイン後、作業したいプロジェクトフォルダに移動してclaudeを起動します。
cd ~/Desktop/myproject
claudeあとは自然言語で指示するだけです。
> このコードのバグを修正して
> READMEファイルを作成して
> テストを書いてファイルを変更する前に必ず確認を求めてくれるので、安心して使えます。
デスクトップアプリでもClaude Codeは使える
ターミナルが苦手な方には、デスクトップアプリの「Code」タブがおすすめです。
- Node.jsやCLIの別途インストールが不要
- ファイルの変更をビジュアルで確認できる（diff viewer）
- 複数プロジェクトを同時に進められる
- ドラッグ＆ドロップでファイルを渡せる
- HTMLやPDFをアプリ内でプレビューできる
デスクトップアプリを開いて「Code」タブをクリックするだけで、すぐに使い始めることができます。
Claude Designとは？
Claude Designは、Anthropic Labsが提供するAIデザインツールです。claude.ai/designまたはClaudeデスクトップアプリから利用できます（Pro/Max/Team/Enterprise対象）。
テキストで説明するだけで、Webデザイン・プロトタイプ・スライドなどを自動生成してくれます。さらに強力なのが、そのデザインをそのままClaude Codeに渡せる「Handoff」機能です。
主な用途：
- Webページ・UIのプロトタイプ作成
- スライド・ピッチデッキの作成
- プロダクトワイヤーフレームの作成
- デザインをClaude Codeに渡して本番コードを生成
Claude Design → Claude Code へのHandoff方法
手順
1. Claude Designでデザインを作成する
claude.ai/design を開き、作りたいものをテキストで説明します。
例：「シンプルなタスク管理アプリのトップページを作って。
ダークモード対応で、モバイルファーストなデザインで」2. デザインを確認・調整する
生成されたデザインはチャットで修正できます。インラインコメントや直接編集も可能です。
3. 「share」→「Hand off to Claude Code」をクリック
デザインが完成したら、エクスポートボタンから「Hand off to Claude Code」を選びます。すると、ハンドオフバンドル（デザインファイル＋README＋コンポーネント情報）が自動生成され、Claude Codeに渡すためのプロンプトが生成されます。
4. Claude Codeに貼り付けて実装開始
生成されたプロンプトを、ターミナルのClaude CodeまたはClaude Code Webに貼り付けるだけです。
「Local Coding Agent」と「Claude Code Web」の違い
Handoff先として2つの選択肢があります。
🖥️ Send to Local Coding Agent（ローカル）
あなたのMac上で動くClaude Codeに送ります。
- ✅ 自分のMacのファイルを直接読み書きできる
- ✅ 既存のプロジェクトフォルダと連携できる
- ✅ ターミナルで作業中の方はこちらが自然
- ❌ PCを閉じると作業が止まる
やり方： 生成されたプロンプトをコピーして、ターミナルのclaudeに貼り付けるだけ。
☁️ Send to Claude Code Web（クラウド）
AnthropicのクラウドVM上で動くClaude Codeに送ります。
- ✅ MacBookを閉じても作業が継続される
- ✅ GitHubリポジトリに直接接続してPRを作成できる
- ✅ ブラウザ・スマホからも進捗を確認できる
- ❌ GitHubとの連携が必要
どちらを選ぶ？
| 状況 | おすすめ |
|---|---|
| ターミナルでローカル作業中 | Local Coding Agent |
| GitHubでチーム開発中 | Claude Code Web |
| 長時間の自動作業をしたい | Claude Code Web |
| まず試してみたい | Local Coding Agent |
まとめ
Claude CodeとClaude Designを組み合わせると、こんな流れで開発できます。
テキストで説明
↓
Claude Design でプロトタイプ生成
↓
Export → Hand off to Claude Code
↓
Claude Code が本番コードを実装
↓
レビュー・修正
Figmaでデザインして、エンジニアに渡して、コードに落とし込む——という従来の流れが、会話一つで完結するようになりました。
まずはターミナルで claude と打ってみるところから始めてみてください！
この記事は2026年4月時点の情報をもとに作成しています。
