Claude Codeで最初のプロジェクトを作ろう ── ゼロからWebサイトを公開するまで

「Claude Codeを使ってみたいけど、何を作ればいいかわからない」

そんなあなたのために、完全なゼロからWebサイトを1つ作って、インターネットに公開するまでを、一歩ずつ解説します。プログラミングの知識はまったく必要ありません。この記事の手順どおりに進めるだけで、世界中からアクセスできる自分のWebサイトが完成します。

今回作るのは、自己紹介サイト（ポートフォリオサイト） です。名前、自己紹介、スキル、趣味などを載せたシンプルなWebページを作ります。

このチュートリアルの全体像

Step 1

準備

→

Step 2-3

フォルダ作成

→

Step 4-5

サイト作成

→

Step 6

カスタマイズ

→

Step 7

公開！

所要時間：約30分〜1時間

前提条件

始める前に、以下の2つが必要です。

必須

Claude Code がインストール済み
Node.js（サーバー環境）がインストール済み

まだの方は「Claude Codeとは？使い方・料金・インストールまで完全解説」の記事を先にお読みください。

公開に必要（Step 7で使用）

GitHubアカウント（無料）
Cloudflareアカウント（無料）

Step 7で初めて使うので、そのタイミングで登録しても大丈夫です。

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

まだClaude Codeがパソコンに入っていない場合は、以下の手順でインストールします。

ターミナル（Macなら「ターミナル」アプリ、Windowsなら「PowerShell」）を開いて、以下のコマンドを入力してEnterキーを押します。

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

ℹ️

npmとは？

npm（エヌピーエム）は、Node.js用のパッケージ管理ツールです。かんたんに言うと「アプリをインストールするためのコマンド」です。App Storeでアプリをインストールするのと同じようなことを、コマンドで行っています。

インストールが完了したら、以下のコマンドで正しくインストールできたか確認しましょう。

claude --version

バージョン番号が表示されれば成功です。

⚠️

エラーが出た場合

「command not found」と表示された場合は、Node.jsがインストールされていない可能性があります。nodejs.org にアクセスして、LTS版（安定版）をダウンロード・インストールしてから、もう一度試してください。

Step 2：プロジェクト用のフォルダを作る

Webサイトのファイルを入れるためのフォルダを作ります。ターミナルで以下のコマンドを順番に実行してください。

mkdir my-portfolio

かんたんに言うと、mkdir（メイクディレクトリ）は「フォルダを作る」コマンドで、my-portfolioがフォルダの名前です。

次に、作ったフォルダの中に入ります。

cd my-portfolio

cd（チェンジディレクトリ）は「フォルダを移動する」コマンドです。

# あなたが入力するコマンド
$ mkdir my-portfolio
$ cd my-portfolio
$ pwd
/Users/あなたの名前/my-portfolio
# ↑ このように表示されればOK

pwd（プリントワーキングディレクトリ）は「今いるフォルダの場所を表示する」コマンドです。正しいフォルダにいることを確認できます。

Step 3：Claude Code を起動する

いよいよClaude Codeを起動します。先ほどのmy-portfolioフォルダにいる状態で、以下のコマンドを実行してください。

claude

たったこれだけです。Claude Codeが起動し、入力待ちの状態になります。

$ claude
╭──────────────────────────────────────╮
│  Claude Code                          │
│  Type your message to get started     │
╰──────────────────────────────────────╯
↑ こんな感じの画面が表示されます

これで、Claude Codeにお願いごとをする準備が整いました。

Step 4：「自己紹介ページを作って」とお願いする

ここが最もワクワクするステップです。Claude Codeの入力欄に、以下のように日本語で入力してください。

Astroを使って自己紹介サイトを作ってください。

内容：
- 名前：山田太郎
- 職業：会社員
- 自己紹介：「IT企業で働く30代。最近AIに興味を持ち始めました。」
- スキル：Excel、PowerPoint、Python（勉強中）
- 趣味：読書、カフェ巡り、映画鑑賞

デザイン：
- モダンでおしゃれな見た目
- ダークモード風の配色
- レスポンシブ対応（スマホでも見やすいように）
- アニメーション（ふわっと表示される感じ）
- 各セクションを区切って見やすくする

Tailwind CSSを使ってスタイリングしてください。

ℹ️

用語解説

Astro（アストロ）：Webサイトを作るためのフレームワーク（ツール）です。高速なサイトが作れます。
Tailwind CSS（テイルウィンドCSS）：デザインを効率よく作るためのCSSフレームワークです。
レスポンシブ対応：パソコンでもスマホでも、画面サイズに合わせて自動的にレイアウトが変わることです。

Enterを押すと、Claude Codeが自動的に作業を開始します。

Claude Codeがやってくれること

自動

Astroプロジェクトの初期設定（必要なファイルを全部作ってくれる）

自動

Tailwind CSSのインストールと設定

自動

自己紹介ページのHTMLとCSSの記述

自動

アニメーションの実装

Claude Codeが作業を進めるとき、「ファイルを作成していいですか？」「コマンドを実行していいですか？」と確認を求めてくることがあります。内容を確認して、問題なければ「y」と入力してEnterを押してください。

⚠️

途中で許可を求められたら

Claude Codeは安全のため、ファイルの作成やコマンドの実行前に確認を求めることがあります。表示された内容を読んで「y」（はい）を入力してください。よくわからないコマンドが表示された場合は「n」（いいえ）を押して、Claude Codeに「このコマンドは何をするものですか？」と質問しても大丈夫です。

Step 5：作ったサイトをブラウザで確認する

Claude Codeが作業を完了したら、実際にWebサイトがどんな見た目になっているか確認しましょう。

Claude Codeに以下のように入力します。

開発サーバーを起動してください

すると、Claude Codeがnpm run devというコマンドを実行してくれます。ターミナルに以下のようなメッセージが表示されるはずです。

  Local:   http://localhost:4321/
↑ このURLをブラウザで開きます

ブラウザ（Chrome、Safari、Edgeなど）を開いて、アドレスバーに http://localhost:4321/ と入力してください。

あなたの自己紹介サイトが表示されるはずです。

かんたんに言うと、localhost（ローカルホスト）は「自分のパソコン」という意味です。今はまだインターネットに公開されておらず、自分のパソコンの中だけで動いている状態です。

💡

サイトが表示されない場合

もし何も表示されない場合は、Claude Codeに「サイトが表示されません。エラーがないか確認してください」と伝えてみてください。エラーがあれば自動的に修正してくれます。

Step 6：サイトをカスタマイズする

基本のサイトができたら、あなた好みにカスタマイズしていきましょう。Claude Codeに日本語でお願いするだけで、どんな変更もしてくれます。

カスタマイズ例1：色を変える

サイト全体の配色を、青と白をベースにした爽やかなデザインに変更してください。

カスタマイズ例2：セクションを追加する

「経歴」セクションを追加してください。
- 2015年：○○大学 経済学部 卒業
- 2015年：株式会社ABC 入社
- 2020年：IT部門に異動
- 2023年：プロジェクトリーダーに昇進

タイムライン形式（時系列が見える形）でデザインしてください。

カスタマイズ例3：プロフィール画像を追加する

ヘッダー部分にプロフィール画像のスペースを追加してください。
丸くトリミングされたアバター画像にして、
画像は public/images/profile.jpg を使うようにしてください。

画像を使う場合は、自分の写真ファイルを public/images/ フォルダに置いてください。

カスタマイズ例4：お問い合わせフォームを追加する

ページの下部に、シンプルなお問い合わせフォームを追加してください。
項目は名前、メールアドレス、メッセージの3つ。
デザインは他のセクションと統一してください。

カスタマイズのコツ

具体的に伝える

「もっとかっこよくして」より「ダークブルーの背景にして、文字は白で、角丸のカードデザインにして」の方が、イメージ通りのデザインになります。

一度に1つずつ

大量の変更を一度に頼むより、1つずつ確認しながら進めた方が、思い通りのサイトになります。

参考サイトを伝える

「AppleのWebサイトみたいな雰囲気にして」のように、参考にしたいサイトやデザインのイメージを伝えると、希望に近いものができます。

やり直しOK

「前のデザインに戻して」「やっぱり青より緑がいい」と言えば、何度でも修正してくれます。遠慮する必要はありません。

Step 7：インターネットに公開する

サイトに満足できたら、いよいよインターネットに公開して、世界中の人が見られるようにしましょう。ここではCloudflare Pages（クラウドフレアページズ）という無料のホスティングサービス（Webサイトをインターネットに置いてくれるサービス）を使います。

7-1. GitHubにコードをアップロードする

まず、GitHubにサイトのコードをアップロードします。Claude Codeに以下のように伝えてください。

このプロジェクトをGitHubにアップロードしてください。
リポジトリ名は my-portfolio でお願いします。

ℹ️

GitHubとは？

GitHub（ギットハブ）は、プログラムのコードを保存・管理するためのサービスです。かんたんに言うと、「コードのクラウドストレージ」です。Google DriveやDropboxのプログラミング版だと思ってください。無料で使えます。

Claude Codeがいくつかのコマンドを実行してくれます。途中で確認を求められたら「y」を入力してください。

もしGitHubにログインしていない場合は、ターミナルでログインを求められることがあります。その場合は画面の指示に従ってください。

7-2. Cloudflare Pagesに接続する

GitHubへのアップロードが完了したら、Cloudflare Pagesに接続します。

Cloudflare Pagesの設定手順

Cloudflareにアクセス

dash.cloudflare.com にアクセスして、アカウントを作成（またはログイン）します。

Workers & Pagesを選択

左メニューから「Workers & Pages」をクリックし、「Create」ボタンを押します。

GitHubと接続

「Pages」タブを選び、「Connect to Git」をクリック。GitHubアカウントを連携させて、先ほど作った「my-portfolio」リポジトリを選びます。

ビルド設定

以下のように設定します：

フレームワーク：Astro
ビルドコマンド：npm run build
出力ディレクトリ：dist

デプロイ！

「Save and Deploy」をクリックすると、自動でビルド（サイトの組み立て）が始まります。数分待つと、公開URLが表示されます。

デプロイ（公開）が完了すると、https://my-portfolio-xxx.pages.dev のようなURLが発行されます。このURLにアクセスすれば、世界中のどこからでもあなたのサイトが見られます。

💡

独自ドメインを使いたい場合

「○○.pages.dev」ではなく、自分だけのドメイン（例：yamada-taro.com）を使いたい場合は、Cloudflareの管理画面からカスタムドメインを設定できます。ドメインの購入は年間1,000〜2,000円程度です。

トラブルシューティング

初めての操作では、うまくいかないこともあります。よくある問題と解決方法をまとめました。

よくあるトラブルと解決法

「npm: command not found」と表示される

Node.jsがインストールされていません。nodejs.org から LTS版をダウンロードしてインストールしてください。インストール後、ターミナルを一度閉じて開き直してください。

「claude: command not found」と表示される

Claude Codeがインストールされていません。npm install -g @anthropic-ai/claude-code を実行してください。

localhost:4321にアクセスしても何も表示されない

開発サーバーが起動していない可能性があります。Claude Codeに「開発サーバーを起動してください」と伝えてみてください。また、ポート番号（4321）が違う場合もあるので、ターミナルに表示されたURLを確認してください。

Claude Codeの実行が途中で止まる

ネットワーク接続の問題か、API（サーバーとの通信）の制限に達した可能性があります。数分待ってから再度試してみてください。

Cloudflare Pagesのビルドが失敗する

ビルド設定を確認してください。フレームワーク：Astro、ビルドコマンド：npm run build、出力ディレクトリ：dist が正しく設定されているか確認しましょう。

どんなトラブルが起きても、Claude Codeに「こういうエラーが出ました」と伝えれば、解決方法を提案してくれます。エラーメッセージをそのままコピーして送るのが最も効率的です。

よくある質問（FAQ）

Q. このチュートリアルにかかる費用は？

Claude Codeの利用料（Anthropic Maxプランまたは APIの従量課金）以外は、すべて無料です。GitHub、Cloudflare Pages、Node.jsはすべて無料で使えます。

Q. Windowsでもできますか？

はい、できます。WindowsではPowerShellまたはWindows Terminalを使ってください。コマンドはMacとほぼ同じです。

Q. 自己紹介サイト以外も作れますか？

もちろんです。ブログ、ポートフォリオ、ランディングページ、ECサイトなど、Claude Codeに「○○を作って」と伝えるだけで、さまざまなWebサイトを作れます。

Q. 作ったサイトをあとから更新するには？

my-portfolioフォルダでClaude Codeを起動して、変更したい内容を伝えるだけです。変更後、GitHubに再度アップロードすれば、Cloudflare Pagesが自動的にサイトを更新してくれます。

Q. HTML・CSSの知識がなくても大丈夫？

まったく問題ありません。このチュートリアルでは、コードを自分で書く必要は一切ありません。すべてClaude Codeが書いてくれます。

Q. 完成したサイトのデザインが気に入らない場合は？

Claude Codeに「もっと○○なデザインにして」と伝えてください。色、レイアウト、フォント、間隔など、どんな調整でも対応してくれます。

まとめ ── あなたも今日からWebサイトのオーナー

おめでとうございます。この記事の手順を完了すれば、あなたは自分のWebサイトを持つ「サイトオーナー」 になれます。

プログラミングの知識ゼロからスタートして、わずか30分〜1時間で、インターネットに公開されたWebサイトが完成する。これが、Claude Codeの力です。

次のステップとして、以下にチャレンジしてみてはいかがでしょうか。

サイトにブログ機能を追加する
仕事で使えるランディングページ（商品紹介ページ）を作る
趣味のWebサイト（レシピ集、旅行記など）を作る

Claude Codeがあれば、アイデアがある限り、何でも作れます。