この記事でわかること

Claude CodeでWebサイトやWebアプリケーションを作りたい人向けに、静的なサイトとの違い、実際に手を動かして作っていく流れ、公開後の運用や注意点までを整理します。あわせて、本サイトの運営者がClaude Codeを使ってWebアプリケーション(「競馬予想ラボ」)を作った実体験も紹介します。

Claude CodeでWebサイト制作はどこまでできるのか

Claude Codeは、Anthropicが提供するAIコーディングツールです。公式サイト(code.claude.com、2026年9月22日確認)では「コードベースを読み込み、ファイルを編集し、コマンドを実行し、開発ツールと連携するエージェント型のコーディングツール」と説明されています。

見た目だけのシンプルなWebサイトはもちろん、指示の出し方次第で、データベースを使うWebアプリケーションのような、より複雑な仕組みの制作にも対応できます。ただし、何を作るかを決めて、その通りに動くかを確認しながら進めるのは、AIに任せきりにできる部分ではなく、作る側の役割として残ります。

静的なWebサイトとWebアプリ・Webシステムの違い

一口に「Webサイトを作る」といっても、大きく分けて2種類のイメージがあります。

  • 静的なWebサイト: あらかじめ用意されたHTML・CSSなどの内容を基本的にそのまま表示するサイトです。シンプルな会社案内やランディングページなどで使われることがあります。
  • Webアプリ・Webシステム: 検索・予約・会員機能など、ユーザーの操作やデータに応じて処理・表示が変わる仕組みを持つサイトです。データベースに情報を保存・検索する場合も多くあります。

どちらを作りたいかによって、必要な知識や準備の量が変わってきます。まずは自分が作りたいものが、このどちらに近いのかをイメージしておくと、Claude Codeへの指示も出しやすくなります。

制作前に決めておきたいこと

本格的に作り始める前に、次のような内容を簡単に整理しておくと、Claude Codeとのやり取りがスムーズになります。

  • 誰に向けたサイトか、何を実現したいか
  • 必要になりそうなページや機能(トップページ、記事一覧、問い合わせフォームなど)
  • データを保存しておく必要があるか(単なる表示だけでよいか)

完璧に決め切ってから始める必要はなく、大まかな方向性が決まっていれば十分です。

Claude Codeで作る基本的な流れ

ここでは、実際にClaude Codeへ指示を出しながら制作を進める場合の、一般的な流れを紹介します。指示の出し方や順番はこの通りでなければならないわけではなく、あくまで一つの例です。

ステップ1: 何を作りたいかを日本語で伝える

「競馬予想のページを作って」のように、作りたいものを日本語でそのまま伝えるところから始められます。最初から細かい仕様をすべて決めておく必要はなく、大まかなイメージを伝えることから始めても、そこからやり取りを重ねて形にしていくことができます。

ステップ2: 必要なページ・機能を整理する

伝えた内容をもとに、どんなページや機能が必要かを、Claude Codeとやり取りしながら具体化していきます。この段階で、必要なファイルやフォルダの土台(プロジェクトの雛形)が作られることもあります。

ステップ3: 画面やプログラムを実装してもらう

整理した内容にもとづいて、HTML・CSSなどの画面部分や、Pythonなどのプログラミング言語を使ったサーバー側の処理(バックエンド)を、Claude Codeに実装してもらいます。Pythonの基本的な学び方についてはPythonを学ぶ方法:独学・スクール・AIツールの選び方でも解説しています。

ステップ4: ブラウザ等で実際に確認する

実装してもらった内容を、実際にブラウザなどで表示・操作して、意図した通りに動いているかを確認します。

ステップ5: 問題点を日本語で修正指示する

うまく表示されない、思っていたのと違う、といった点があれば、その内容をそのまま日本語でClaude Codeに伝えて修正してもらいます。エラーメッセージが出ている場合は、その内容をClaude Codeに伝えて、原因の調査や修正を依頼できます。

ステップ6: Gitで変更を管理する

ある程度まとまった変更ができたら、Gitを使って変更内容を記録します。Claude Codeは、変更のステージング・コミットメッセージの作成・ブランチの作成・プルリクエストの作成まで、Gitを使った一連の作業に対応しています(code.claude.com、2026年9月22日確認)。

ステップ7: サーバーへ公開する

動作確認ができたら、レンタルサーバーやホスティングサービスにアップロードして公開します。公開に必要なものは、レンタルサーバーやホスティングサービス、必要に応じて独自ドメイン、HTTPS化などの基本的なセキュリティ設定です。独自ドメインの取得方法と選び方は独自ドメインの取得方法と選び方で解説しています。

ステップ8: 公開後も修正・運用を続ける

公開して終わりではなく、実際に使ってみて気づいた不具合の修正や、機能の追加を、公開後も同じようにClaude Codeへ指示しながら続けていくことができます。

データベースが必要になるケース

表示するだけのページと違い、次のような場合はデータベースが必要になります。

  • ユーザーが入力した情報を保存しておきたい
  • 検索・並び替え・集計など、データを条件に応じて取り出したい
  • 会員登録やログインなど、ユーザーごとに異なる情報を扱いたい

データベースを使うかどうかは、作りたいものの性質によって決まります。最初は表示だけのシンプルなページから始めて、必要になったタイミングでデータベースを追加する、という進め方も可能です。

実際にClaude Codeで「競馬予想ラボ」を作った

ここからは、本サイトを運営する私自身の実体験を紹介します。私は、Claude Codeを使って「競馬予想ラボ」というWebアプリケーションを作った経験があります。

きっかけは、「競馬予想のページを作って」という日本語の指示でした。最初からHTML・CSS・Pythonなどのコードを自分で書いて制作を始めたわけではなく、この一言の指示から、Claude Codeとやり取りを重ねながら形にしていきました。

作る過程で、単に情報を表示するだけの画面にとどまらず、データベースを使うWebシステムへと発展していきました。データベースの設計やテーブルの構築についても、Claude Codeに任せて進めています。

サーバーへの公開や、公開後の更新作業についても、私はすべてClaude Codeを使って行っています。自分でサーバーの設定ファイルを一から書いたり、コマンドをすべて手作業で打ち込んだりするのではなく、Claude Codeに指示を出しながら進めてきました。

Webサイト制作の面で、私自身が特に困った経験はありません。ただし、これは「確認が不要だった」という意味ではなく、実際にできあがった画面や動作を、そのつど自分の目で確認しながら進めてきました。

もしClaude Codeがなかったら、同じようなWebシステムを自分だけで作るのは無理だったと思います。これはあくまで私自身の経験であり、すべての人が同じように感じるとは限りませんが、Claude Codeを使うことで、それまで自分では手が届かなかったものに挑戦できるようになった、という実感があります。

AIが生成したコードの確認は別の話

私自身は困った経験がなかったと述べましたが、これは「AIが作ったものを確認しなくてよい」という意味ではありません。一般的な注意点として、次のようなことは押さえておく必要があります。

  • AIが生成したコードは、必ずしも意図した通りに動くとは限りません。実際の画面や機能を自分の目で確認することが必要です。
  • エラーが出た場合は、そのエラー内容をそのままClaude Codeに伝えることで、原因の調査や修正を進められます。
  • Gitなどで変更履歴を残しておくと、問題が起きたときに以前の状態に戻しやすくなります。
  • パスワードやAPIキーなどの秘密情報は、ソースコードに直接書き込まないようにしてください。

「自分が困らなかった」ことと、「確認や注意が不要」であることは、別の話として捉えておくとよいでしょう。

セキュリティ上、注意しておきたいこと

Claude Codeは、意図しない操作を防ぐための仕組みを備えています。公式ドキュメント(code.claude.com、2026年9月22日確認)によると、Claude Codeは標準では読み取り専用の権限で動作し、ファイルの編集やコマンドの実行が必要な場面では、実行前に確認を求める仕組みになっています。この確認では、その場限りか、以降も許可するかを選べます。

ただし、Claude Codeが持つ権限は、あくまでユーザーが許可した範囲までです。提案されたコードやコマンドが安全かどうかを確認し、承認するかどうかを判断するのは、最終的に利用者自身の責任です(code.claude.com、2026年9月22日確認)。公開する場合は、特に次の点にも注意してください。

  • パスワードやAPIキーなどの秘密情報を、公開するソースコードやリポジトリに含めない
  • 外部からの入力(お問い合わせフォームなど)を扱う場合は、想定外の入力が来ても問題が起きないか確認する
  • 公開後も、不要になった機能やテスト用のページを残したままにしない

レンタルサーバーではなく、自分で管理するLinuxサーバーに公開する場合は、Claude Codeに任せる範囲と止まる条件を先に決めておく必要があります。進め方はClaude CodeでAlmaLinuxサーバーを構築・運用する方法で扱っています。

初心者がClaude Codeへ指示するときのポイント

  • 一度にすべてを完璧に指示しようとせず、大まかな要望から伝えて、少しずつ調整していく
  • 「動かない」「おかしい」で終わらせず、どの画面で・何をしたら・どうなったか、をできるだけ具体的に伝える
  • 出てきた結果は必ず自分の目で確認し、意図と違えばそのまま日本語で伝え直す
  • 専門用語がわからなくても、困っている状況をそのまま説明すれば、意図を汲み取ってくれることが多くあります

まとめ

Claude Codeを使えば、静的なWebサイトから、データベースを使うWebアプリケーションまで、日本語での指示を重ねながら形にしていくことができます。ただし、指示さえ出せば自動的に完成するわけではなく、何を作るかを決めることや、できあがったものを確認する作業は、引き続き作る側の役割です。Claude Code自体の基本機能はClaude Codeとは?できることを初心者向けに解説もあわせてご覧ください。