Claude Codeで実践的なプロジェクトを作る

Claude Codeを使えるようにする

Claude Proのサブスクリプションが必要です

Claude Proを使えるようにする

Claudeのサブスクリプションを開始する

https://claude.ai/

Visual Studio Codeをダウンロードする

VS Codeをダウンロードする（無料）

Claude Code公式のエディタ

https://code.visualstudio.com/

Claude Code拡張機能をインストールする

新しいプロジェクトフォルダを作成する

Claudeアカウントを接続する

適切なモデルを選ぶ

まずは初期設定のままで、より良い結果が欲しいときはOpusに切り替えます。

Ask Before Editsを使う

変更が適用される前に、自分で確認できる状態を保てます。

Edit Automaticallyを試す

慣れてくると作業がぐっと速くなります。

必要に応じてPlan Modeを使う

作り始める前の計画づくりに役立ちます。

手間のかけ方をちょうどよく保つ

ほとんどの作業では中程度がちょうどよいです。

アイデアから始める

難しく考えず、やりたいことをそのまま書けば大丈夫です。

プロンプトを生成する

Claudeに構成の整ったプロンプトを作ってもらいます。

プロジェクトをビルドして実行する

プロンプトを貼り付けて最初のバージョンを実行します。

エラーを直す

APIキーの不足など、よくある問題を解消します。

デザインを改善する

プロンプトを使ってUIを良くします。

デザインとUIを改善する

このサイトをとても高級感のあるモダンな見た目にしてください…

Make this website look very premium and modern. Improve UI, spacing, typography, and colors with beautiful gradients. Add dark mode, smooth animations, and upgrade all components. Also add sign up and sign in pages. Keep everything working.

プロジェクトをデプロイする（公開する）

プロジェクトをデプロイして、自分のドメインで公開するまでのステップ別ガイド。

デプロイ完全ガイドを見る

デプロイ完全ガイド

Step-by-step

https://youtu.be/s_2taeO8KRI?si=3aAO45uIe8S8BLJ9