Claude Codeの始め方。最初のサイトが動くまでの全手順

結論：Claude Codeがあれば、約1時間でWebサイトが動く

「プログラミングができないと、Webサイトは作れない」

僕もそう思っていました。特にターミナル（黒い画面）を初めて開いたときは、正直ちょっと怖かった。「これ、エンジニアの世界だ」と。

でも、設定さえ終わってしまえば、自分が入力するのはコードじゃなく日本語だけでした。UIが黒いだけで、やっていることはChatGPTに話しかけるのとまったく同じ。そう気づいてからは、怖さはゼロになりました。

Claude Codeに日本語で伝えるだけで、1時間後にはブラウザに自分のサイトが表示されていました。

この記事では、Claude Codeのインストールからサイトが動くまでの全手順を、実際に僕がやった通りに紹介します。

必要なもの

始める前に、以下の3つを用意してください。

料金プランについて

Claude Codeを使うには、Claudeの有料プランが必要です。

プラン	月額	Claude Codeの使用感
Pro	$17	使えるが、サイト構築中に上限に達しやすい
Max	$100	上限を気にせず作業できる

僕はProプラン（当時¥3,400/月・Google Play経由）から始めました。最初は問題なかったのですが、サウナブログの開発でやりたいことが次々と出てきたら、すぐ上限に達するようになりました。一番困ったのは、処理の途中で上限に達して止まってしまうこと。中途半端な状態で翌日まで待つのがストレスで、結局Proプラン時代に追加クレジットを自分で購入して使用量を増やしていたら、トータルで$100くらいになっていました。

「それならMaxの方が絶対お得だな」と。奥さんに相談して、「自分のお小遣いの範囲内でやるから」と伝えたら、「それならいいんじゃない」とOKをもらいました。お小遣いはかなり減りましたが、やりたいことを好きなだけやれているので満足しています。

実際、Maxプランにしてからは**普通に使って1日の上限の20%、ガッツリやっても50〜60%**程度。Agent Teamsという機能でサブエージェントを複数立ち上げても全然上限にいきません。個人ブロガーであれば、やりたいことが好きなだけやれるレベルです。

Step 1：Claude Codeをインストールする

Claude Codeは、ターミナル（黒い画面）で動くツールです。インストールはコマンド1行で終わります。

インストールコマンドはこちらです。

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

インストールが終わったら、claude と入力してEnterを押します。初回はブラウザが開いて認証画面が表示されるので、Claudeのアカウントでログインしてください。

claude

Step 2：プロジェクトを作ってClaude Codeを起動する

次に、サイトのファイルを入れるフォルダ（プロジェクト）を作ります。

mkdir my-blog
cd my-blog
claude

mkdir はフォルダを作るコマンド、cd はそのフォルダに移動するコマンドです。覚えなくて大丈夫です。この3行をコピペするだけでOK。

Claude Codeが起動したら、いよいよAIとの対話が始まります。

Claude Codeが自動でセットアップを進めてくれます。途中で「ファイルを作成していいですか？」と確認されるので、許可してください。

セットアップには2〜3分かかります。完了すると、プロジェクトの基本ファイルが自動で生成されます。

Step 3：「トップページを作って」と伝える

ここからが一番楽しいパートです。Claude Codeに、どんなサイトにしたいかを日本語で伝えるだけ。

ポイントは、完璧な指示を出す必要がないことです。

「シンプルなデザインで」「自己紹介を入れて」くらいのざっくりした指示で、Claude Codeがコードを書いてくれます。出来上がりを見て「もう少し色を変えて」「文字を大きくして」と追加で伝えれば、その場で修正してくれます。

プログラミングの知識は一切不要。「こういうページが欲しい」を言葉にできれば、それだけで十分です。

Step 4：ブラウザで確認する

Claude Codeが作ってくれたサイトを、自分のパソコンで確認してみましょう。

pnpm dev

このコマンドを実行すると、自分のパソコンの中だけで動くプレビュー環境（ローカルサーバー）が起動します。ブラウザで以下のURLを開いてください。

http://localhost:4321

ここで、自分のサイトが表示されます。

初めてブラウザに自分のサイトが映った瞬間——僕の場合はサウナブログを作ったときでしたが——正直かなり感動しました。コードを1行も書いていないのに、ちゃんとしたWebサイトが動いている。「これ、本当に僕が作ったの？」という気持ちでした。

使い続けて驚いたのは、デザイン性の高さと文章の自然さです。Claude Codeは本当に人間らしい文章を書いてくれるので、ブロガーにとってはこれだけで大きな武器になります。しかも対話を重ねるごとに精度が上がっていく。最初は「ここ直して」という修正指示が多かったのが、だんだん一発目から僕の求めるものを出してくれるようになっていきました。

もし表示がイメージと違っても、Claude Codeに「ここをこう変えて」と伝えるだけで修正できます。何度でもやり直せるので、気軽に試してみてください。

エラーが出ても怖くない理由

正直に言うと、僕はエラーメッセージの中身を読んでいません。

英語のエラーが画面に出ても、やることは1つだけ。エラーメッセージをそのままコピーして、Claude Codeに貼り付ける。それだけで原因を特定して、修正まで自動でやってくれます。

最初の環境構築のとき、僕はGeminiにターミナルのコマンドを聞いて、返ってきた文字列をそのままコピペしていました。Node.jsのインストールもGeminiの指示通り。自分でコマンドの意味を調べたことはありません。

Claude Codeを使い始めてからは、エラーに限らず困ったことはスクリーンショットを撮ってClaude Codeに貼り付けるのが基本スタイルになりました。「ここのデザインを変えたい」「この表示がおかしい」——言葉にしにくいことも、画面を見せれば伝わります。

つまり、エラー対処のスキルはゼロでも大丈夫です。AIに見せるだけ。それが非エンジニアの戦い方です。

これから始める人に伝えたいこと

調べなくていい。まず触ってみる

一番大事なのは、まず触ってみることです。わからないことがあっても、Claude Codeに聞けば調べて最適な答えを提案してくれます。エラーが出ても怖がる必要はありません。エラー画面のスクリーンショットを撮ってClaude Codeに見せれば、解決策を出してくれます。

今までの学び方は「インプットしてからアウトプット」でした。でもClaude Codeがある今は逆です。先にアウトプットが出てきて、わからないところを後から聞く。これが新しい学び方だと僕は感じています。

まず作りたいものを作って、そこから自分がわからないところを聞いていく。この順番で大丈夫です。

ターミナルが苦手ならデスクトップアプリからでもOK

この記事ではターミナルでの使い方を紹介しましたが、Claude Codeにはデスクトップアプリ版もあります。デスクトップアプリなら本当にChatGPT感覚で使えるので、ターミナルに抵抗がある方はそちらから始めるのもおすすめです。

僕自身も、最初はClaudeのチャットアプリ（ChatGPTのようなもの）から入って、次にClaude Codeのデスクトップアプリに移り、最終的にターミナル版に落ち着きました。ターミナルに移った理由は、Agent Teams（複数のAIを同時に動かす機能）やAuto Modeなど、デスクトップアプリでは使えない機能があったから。使い込むほど「もっとやりたいこと」が出てきて、自然とステップアップしていった感じです。

まとめ

この記事で紹介したのは「サイトをローカル（自分のパソコン上）で動かす」ところまでです。

実際にインターネットに公開するには、もう少しステップがあります。Cloudflare Pages（Webサイトを無料で公開できるサービス）を使えば、サーバー費用0円で公開できます（公開手順は今後の記事で紹介予定です）。

また、Claude Codeにもっと的確な指示を出すための設定ファイル「CLAUDE.md」の書き方も、今後の記事で詳しく解説していきます。

まずは、ぜひ自分のサイトが動く感動を体験してみてください。調べなくていい、怖がらなくていい。AIと一緒に、まず作ってみる。それが今の時代の始め方です。

このブログもClaude Codeで作りました