← 一覧へ戻る ・ GitHubで開く ・ 元ポスト

Claude Code Guide for Designers - デザイナーのための完全ガイド

2026-02-03 ・ Felix Lee (@felixleezd) ・ 💻 技術Tips / 📖 学習リソース

Claude Code Guide for Designers - デザイナーのための完全ガイド

**投稿者:** Felix Lee (@felixleezd)

**投稿日時:** 2026-02-03

**URL:** https://x.com/felixleezd/status/2018728056249254377

**エンゲージメント:** 大量のブックマーク（Article形式の長文投稿）

**カテゴリ:** 💻 技術Tips / 📖 学習リソース

**有益度:** ⭐⭐⭐ HIGH

---

概要

デザイナーがClaude Codeを使ってコードを書かずに製品を作る方法を完全ガイド化した超大作Article。非エンジニアのデザイナーが48時間で自分のウェブサイト（AIチャット機能付き）を構築し、3日後には成長分析ツールを出荷した実体験をベースにしている。

---

まとめ

🎯 なぜこれが重要か

📝 ステップバイステップの構成

#### Step 1-3: 基礎（インストール〜プロジェクト作成）

#### Step 4-5: イテレーション＆GitHub保存

#### Step 6-7: デプロイ＆カスタムドメイン

#### Step 8-10: Webアプリ化（上級編）

🔑 重要な原則

1. **プラン優先**: `plan.md`を必ず作成してから実装

2. **検証を組み込む**: 「どうやって確認するか？」を常にspec��含める

3. **シンプルから始める**: React不要、vanilla HTML/CSSでまず動かす

4. **プロンプトのパターン化**:

- Research prompt: 「このアプローチの pros/cons をテーブルで比較して」

- Implementation prompt: 「plan.mdに従って実装、[component]から開始」

- Debugging: 「このエラーを見つけて修正」

🚀 成果物の例

💡 Vibe Coder Bootcampへの導線

著者Felix Leeは、これを完全なコースに展開している（https://adplist.org/vibe-code-designers）。

無料ガイド（Notion）とコミュニティあり。

---

X Article 本文（日本語訳）

Claude Codeは、今年学ぶべき最も高レバレッジなスキルです。

デザインの未来はここにあります。その完全ガイドを書きました。

**ストーリータイム...**

私は48時間で、自分の仕事に関する質問に答えるAIチャット機能付きの個人サイトを構築しました。3日後には、成長デザインツールを出荷しました。

私は開発者ではありません。デザイナーです。1年前、エンジニアなしでは1行もコードを出荷できませんでした。今では週末にプロダクトをデプロイしています。

同じ人間、異なるツール（Figmaはもうほとんど使わない）！

これは、デザイナーがClaude Codeを使うための完全ガイドです→ステップバイステップ、コマンドごと。

Claude Codeとは？

Claude Codeはコーディングエージェントです。平易な英語で指示を与えると、コードを書いてくれます。

例えば：「ヒーローセクション、3つの機能カード、フッターを含むランディングページを作成して」→実行。

または：「ポートフォリオに関する質問に答えるAIチャットウィジェットを追加して」→実行。

シンタックスを理解する必要はありません。**何を作っているかを理解すればいい**のです。

個人的には、Cursorや他のツールよりもこれが優れていると思います（2026年現在）。

私が作ったもの

⭐️ プロジェクト1: Tetrisゲーム

これはクレイジーです：FigJamに接続されたFigma MCPだけを使ってTetrisゲームを構築しました。デザインもコードも一切触っていません。

冗談じゃなく、これには度肝を抜かれました（7秒の私のリアクションを見てください）。😂

⭐️ プロジェクト2: 成長デザインツール

メトリクスを分析し、デザイン実験を提案する社内ツール。データベースバックエンド、ユーザー認証、AI駆動の推奨機能付き。3日間。動作するプロダクト。インターネット上で公開。

今では500人以上のユーザーがいます！どれだけクレイジーか。

では、これらについて理解を深めていきましょう。

Step 1: Claude Codeのインストール

Macの場合：ターミナルを開いて（Spotlightで「Terminal」を検索）、以下を実行：

npm install -g @anthropic-ai/claude-code

npmがない場合、まずNode.jsを https://nodejs.org からインストール。

インストール確認：

claude

Claude Codeが起動します。指示を入力できるテキストインターフェースが表示されます。

**（新）** デスクトップMacアプリもダウンロード可能。Anthropicアカウントが必要（claude.aiでサインアップ）。ダウンロードリンクはこちら。

Step 2: 基本的なターミナルコマンド

Claude Codeはターミナルで動作します。知っておくべきことは以下だけ：

claude                    # Claude Codeを起動
cd folder-name            # フォルダに移動
cd ..                     # 1つ上のフォルダに戻る
ls                        # ファイル一覧（Mac）
dir                       # ファイル一覧（Windows）
pwd                       # 現在の場所を表示（Mac）

これだけです。始めるのに必要なのはこれだけ。

Step 3: 最初のプロジェクトを作成

プロジェクトフォルダを作成：

mkdir my-portfolio
cd my-portfolio
claude

これでClaude Code内の、あなたのプロジェクトフォルダにいます。

**常にプランから始める（重要）:**

コードを書く前に、プランを依頼してください：
個人ポートフォリオサイトを作りたい：
- 名前とタグラインのヒーローセクション
- 最近の4つの作品を表示するプロジェクトセクション
- 経歴を含むアバウトセクション
- TwitterとLinkedInへのリンクを含むコンタクトセクション

最適な構築方法を調査し、以下を含むplan.mdファイルを作成してください：
1. 推奨技術スタック
2. ファイル構造
3. デザイン上の考慮事項
4. ステップバイステップの実装プラン

Claude Codeが`plan.md`ファイルを作成します。開いてレビューしてください。

必要に応じて調整：

プランの中で、技術スタックをReactではなくvanilla HTML/CSSに変更してください。シンプルに保ちます。

実装：

plan.mdに従ってこのプロジェクトを実装してください。HTML構造から始めて、その後CSSスタイリングを追加してください。

ファイルが表示されます：`index.html`、`styles.css`、`images/`。

ローカルプレビュー：「ブラウザでこれをプレビューするにはどうすればいいですか？」

ローカルサーバーの場合：

npx serve

ブラウザで http://localhost:3000 を開きます。

Step 4: プロンプトを通じてイテレーション

ここがデザイナーに有利な点です。すでにフィードバックの仕方を知っています。

スタイリング：

ヒーローセクションをフルハイト（100vh）にしてください。テキストを垂直方向に中央揃えにします。
プロジェクトセクションが窮屈に見えます。カード間により多くのパディングを追加してください — 少なくとも32px。
プロジェクトカードに微妙なホバー効果を追加してください。わずかにスケールアップし、影を追加します。
フォントをGoogle FontsのInterに変更してください。

レスポンシブ対応：

レスポンシブにしてください。
モバイルでは、プロジェクトカードを垂直に積み重ねます。

768px未満の画面では、ナビゲーションをハンバーガーメニューに折りたたみます。

機能性：

ナビゲーションリンクをクリックしたときにスムーズスクロール動作を追加してください。
Formspreeを使用して私のメールに送信を送るコンタクトフォームを追加してください。

デバッグ：

このエラーが発生しています：[エラー]。問題を見つけて修正してください。

各プロンプト → コード変更 → ブラウザ更新。ループは速いです。

Step 5: GitHubにコミット（保存）

GitHubアカウントを作成：https://github.com に行ってサインアップ（無料）。

リポジトリを作成：

リポジトリのURLをコピー。

接続してプッシュ：

Claude Codeで：

このプロジェクトでgitを初期化し、私のGitHubリポジトリに接続してください：https://github.com/yourusername/my-portfolio.git

または手動で：

git init
git remote add origin https://github.com/yourusername/my-portfolio.git
git add .
git commit -m "Initial commit"
git push -u origin main

ドキュメントを作成：

このプロジェクトが何であるか、ローカルで実行する方法を説明するREADME.mdを作成してください。
プロジェクトアーキテクチャと将来のセッションのためのコンテキストを説明するclaude.mdファイルを作成してください。

これでコードが保存され、バージョン管理されます。

Step 6: Vercelで公開/デプロイ

Vercelアカウントを作成：https://vercel.com に行き、GitHubでサインアップ。

オプション1（Vercelダッシュボード）：

オプション2（Claude Code経由）：

このプロジェクトをVercelにデプロイしてください。

結果：`my-portfolio-abc123.vercel.app`のようなライブURLを取得します。

注意：サイトはインターネット上にあります。今後GitHubへのプッシュごとに自動デプロイされます。

Step 7: カスタムドメインを追加

Vercelで：

ドメインプロバイダーでDNSを更新：

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME
Name: www
Value: cname.vercel-dns.com

5〜30分待ちます。カスタムドメインでサイトが読み込まれます。

Step 8: Webアプリに構築（上級編）

静的サイトはStep 1〜7です。次はユーザー、データ、AIを追加しましょう。

リサーチプロンプト：

このポートフォリオを以下を含むWebアプリに拡張したいです：
- Google sign-in認証
- 私の仕事について質問に答えるAIチャットウィジェット
- サインインしたユーザーがメッセージを残せるコメントセクション

最適なアプローチを調査し、以下を含むimplementation-plan.mdを作成してください：
1. 必要なサービス（認証、データベース、AI）
2. アーキテクチャ概要
3. セキュリティ上の考慮事項
4. ステップバイステップの実装フェーズ

環境変数を設定：

APIキーを保存するための.envファイルを作成してください。また、GitHubから.envを除外する.gitignoreも作成してください。

.envファイル：

SUPABASE_URL=https://xxxxx.supabase.co
SUPABASE_ANON_KEY=eyxxxxx
OPENAI_API_KEY=sk-xxxxx

🚨 このファイルは絶対にコミットしないでください。

Step 9: Supabase（データベース＋認証）

プロジェクトを作成：

Google sign-inを有効化：

Supabaseで：Authentication → Providers → Google → Enable

https://console.cloud.google.com に移動

Step 10: OpenAIでAI機能を追加

APIキーを取得：

Supabaseに安全に保存：

これにより、キーがサーバー側に保持され、ユーザーには決して公開されません。

実装プロンプト：

implementation-plan.mdに従ってWebアプリを実装してください。

使用するもの：
- 認証とデータベース用のSupabase（.envの資格情報）
- チャット機能用のOpenAI（Supabase Edge Functionsに保存されたキー）
- Google sign-inのみ

認証から始めて、その後AIチャットを追加し、次にコメントシステムを追加してください。

そして再デプロイ！

---

クイックリファレンス：カテゴリ別プロンプト

**プランニング：**

[X]の構築方法を調査し、技術スタック、構造、実装ステップを含むplan.mdを作成してください。

**実装：**

plan.mdに従ってこれを実装してください。[component]から開始してください。

**機能追加：**

必要に応じて[service/API]を使用して、[behavior]する[feature]を追加してください。

**デバッグ（エラーのスクリーンショットを含めるのが良い）：**

このエラーが発生しています：[error]。問題を見つけて修正してください。

そして、準備完了です！🎉

この記事は、私の完全なVibe-Codingコース（支援したい場合）⭐️に基づいています。含まれるもの：

⭐️ 無料ガイドを入手：https://adplist.notion.site/cursor-for-designers またはプロダクションアプリを構築したいですか？🏛️ 創立メンバーとしてコミュニティに参加を申し込む（フルコース利用可能）：https://adplist.org/vibe-code-designers

最後の考え...

私は以前、半分のビルダーのように感じていました。アイデアが現実になるには誰かの助けが必要だと感じていました。もうそんなことはありません。

デザイナー、今こそ構築する時です。

読んでくれてありがとう。

🔖 後で戻ってくるためにブックマーク

🔄 これが役に立ったら、リポストまたは転送して、あなたの考えを共有してください。より多くのデザイナーが構築を学べるようになります。

---

活用ポイント

デザイナー・非エンジニア向け

エンジニア向け

Vibe Coder Bootcamp運営者として

---

関連リンク