ClaudeCodeでWebサイトを作る方法【実践チュートリアル】
「ClaudeCodeを使えばWebサイトが作れると聞いたけど、具体的にどうやるの？」という疑問を持っている方のために、この記事では実際のプロンプト例を使いながら、Next.jsのWebサイトを作るチュートリアルを紹介します。
プログラミングの知識がなくても大丈夫です。ClaudeCodeに日本語で話しかけながら、一緒に進めましょう。
このチュートリアルで作るもの
このチュートリアルでは、シンプルな会社紹介Webサイトを作ります。以下のページを含みます：
- トップページ（会社の紹介）
- サービス一覧ページ
- お問い合わせページ
完成したサイトは、ClaudeCodeが動いているパソコン上で確認できます（インターネット公開はしません）。
事前準備：必要なものを確認する
ClaudeCodeのインストール
まだインストールしていない方は、先に以下の記事を参照してください：
Node.jsのバージョン確認
以下のコマンドでNode.jsがインストールされているか確認します：
node --version
v18.0.0 以上が表示されればOKです。
ステップ1：プロジェクトの準備
作業フォルダを作る
まず、Webサイト用の作業フォルダを作ります。
mkdir ~/Desktop/my-website
cd ~/Desktop/my-website
ClaudeCodeを起動する
claude
ステップ2：Next.jsプロジェクトを作成する
ClaudeCodeに指示して、Next.jsプロジェクトを作ってもらいます。
プロンプト例
> Next.jsを使って、会社紹介Webサイトのプロジェクトを作成してください。
要件：
- Next.js 14（App Router使用）
- TypeScriptは使わない（JavaScriptのみ）
- TailwindCSSでスタイリング
- プロジェクト名：my-website
作業が終わったら、作成したファイルの一覧と、サイトを起動するコマンドを教えてください。
ClaudeCodeが自動でコマンドを実行してプロジェクトを作成してくれます。しばらく待つと完了します。
ClaudeCodeの動きを観察する
ClaudeCodeは以下のような手順で作業を進めます：
npx create-next-appコマンドでNext.jsプロジェクトを作成- 必要なファイルを自動生成
- TailwindCSSの設定を完了
- 完了の報告
この一連の作業をClaudeCodeが自律的にこなしてくれます。
ステップ3：トップページを作る
プロジェクトができたら、トップページのデザインを依頼しましょう。
プロンプト例
> トップページ（app/page.js）を作成してください。
サイトの情報：
- 会社名：株式会社サンプル
- キャッチコピー：「テクノロジーで、あなたのビジネスを加速する」
- 会社の説明：Webシステム開発とAI活用支援を行うIT企業
ページの構成：
1. ヘッダー（ロゴ・ナビゲーションメニュー）
2. ヒーローセクション（キャッチコピーと説明文）
3. 3つの強みを紹介するセクション（カード形式）
4. フッター
デザインの要件：
- TailwindCSSを使う
- シンプルでプロフェッショナルな見た目
- 白・グレー・青系のカラーパレット
- スマートフォンでも見やすいレスポンシブデザイン
ステップ4：サイトを起動して確認する
ページができたら、実際にブラウザで見てみましょう。
プロンプト例
> サイトを起動する方法を教えてください。また、起動するコマンドを実行してください。
ClaudeCodeが開発サーバーを起動してくれます。ブラウザで http://localhost:3000 を開くとサイトが確認できます。
確認時のポイント
- ヘッダーのナビゲーションは表示されているか
- テキストは読みやすいか
- スマートフォンサイズにも対応しているか（ブラウザの幅を狭くして確認）
ステップ5：サービスページを作る
トップページが確認できたら、次はサービス一覧ページを作ります。
プロンプト例
> サービス一覧ページ（app/services/page.js）を作成してください。
掲載するサービス：
1. Webシステム開発
- 説明：企業の業務効率化・DX推進のためのシステム開発
- 特徴：要件定義から保守運用まで一貫対応
2. AI活用コンサルティング
- 説明：ChatGPTやClaudeなどのAIツールの業務活用支援
- 特徴：非エンジニアでも扱えるAI活用の仕組みを構築
3. Webサイト制作
- 説明：企業・ブランドのWebサイト・ランディングページ制作
- 特徴：SEO対策・表示速度最適化込み
ページの構成：
- ページタイトル
- 各サービスをカード形式で表示
- 各カードには「詳しく見る」ボタン（リンク先はまだなくてOK）
- トップページへのリンクつきのフッター
トップページと統一感のあるデザインにしてください。
ステップ6：お問い合わせページを作る
プロンプト例
> お問い合わせページ（app/contact/page.js）を作成してください。
フォームの項目：
- お名前（必須）
- 会社名（任意）
- メールアドレス（必須）
- お問い合わせの種類（Webシステム開発 / AI活用 / Webサイト制作 / その他）
- お問い合わせ内容（テキストエリア、必須）
- 送信ボタン
機能の要件：
- 必須項目が空の場合はエラーメッセージを表示する
- 送信ボタンを押したら「送信しました。ありがとうございます。」のメッセージを表示する
（実際のメール送信機能は今回は不要）
デザインはトップページと統一感を保ってください。
ステップ7：ナビゲーションを整える
各ページ間の移動ができるよう、ナビゲーションを整えます。
プロンプト例
> ヘッダーのナビゲーションを修正してください。
現状：トップページにヘッダーはあるが、リンクが機能していない
修正内容：
- 「ホーム」→ / （トップページ）
- 「サービス」→ /services
- 「お問い合わせ」→ /contact
上記3つのリンクが正しく動作するよう修正してください。また、現在表示しているページのリンクを強調表示（太字やアンダーライン）してください。
ステップ8：全ページに共通ヘッダー・フッターを適用する
プロンプト例
> 現在、ヘッダーとフッターがトップページにしかありません。
> 全ページで共通のヘッダーとフッターが表示されるよう、app/layout.jsを修正してください。
> 各ページ（services, contact）からは個別のヘッダー・フッターを削除してください。
ステップ9：仕上げとチェック
基本的なページができたら、全体をチェックして仕上げをします。
プロンプト例
> 作成したWebサイト全体をチェックして、以下の点を確認・修正してください：
1. 全ページでナビゲーションが正しく動作しているか
2. スマートフォンサイズ（画面幅375px）でも崩れていないか
3. 各ページのタイトルタグが適切に設定されているか（SEO対策）
4. 日本語テキストが文字化けしていないか
問題があれば修正してください。問題なければ「問題ありませんでした」と報告してください。
よくある問題と対処法
「エラーが出てサイトが表示されない」
エラーメッセージをそのままClaudeCodeに伝えましょう：
> サイトを起動したらエラーが出ました。以下のエラーメッセージを見て、原因と解決方法を教えてください：
[エラーメッセージをここに貼り付ける]
「デザインが気に入らない」
具体的にどこをどうしたいかを伝えましょう：
> ヒーローセクションのデザインを変更してください。
> 現在：白背景にテキストのみ
> 希望：濃いネイビーの背景色に白いテキスト、より大きなフォントサイズ
「フォントを変えたい」
> サイト全体のフォントをGoogle Fontsの「Noto Sans JP」に変更してください。
> 日本語表示に最適なフォントです。
次のステップ：もっと高度な機能を追加する
基本的なWebサイトができたら、以下のような機能追加にも挑戦できます：
ブログ機能の追加
> ブログ機能を追加してください。
> Markdownファイルを読み込んで記事として表示する仕組みで、
> ブログ一覧ページ（/blog）と記事詳細ページ（/blog/[slug]）を作ってください。
アニメーションの追加
> ページスクロール時に要素がフワッと表示されるアニメーションを追加してください。
> framer-motionライブラリを使って実装してください。
まとめ
ClaudeCodeを使ったWebサイト作成の流れを振り返ります：
- プロジェクト作成：Next.jsプロジェクトをClaudeCodeに作ってもらう
- ページ作成：トップページ・サービスページ・お問い合わせページを順番に作る
- ナビゲーション整備：全ページで共通のヘッダー・フッターとリンクを設定
- 全体チェック：スマートフォン対応・リンク確認・SEO対策
ClaudeCodeを使えば、プログラミングの知識がなくても、プロンプトを書くだけでWebサイトが完成します。最初は難しく感じるかもしれませんが、「やってほしいこと」を具体的に日本語で伝えるだけでOKです。
良いプロンプトの書き方については プロンプト書き方ガイド も参考にしてください。
関連記事：