「Claude Codeを使えばWebサイトを作れるらしいけど、本当に初心者でもできるの？」
「プログラミングができないと無理？」
「何から始めればいいの？」
Claude Codeに興味を持った方の中には、自分でWebサイトを作ってみたいという方も多いでしょう。
Claude Codeを使えば、日本語で、
「こんなWebサイトを作りたい」
と伝えながら制作を進めることができます。
もちろん、何も知らない状態でいきなり大規模なサイトを作る必要はありません。
まずはシンプルなWebサイトを一つ作って、
指示する → 作ってもらう → ブラウザで確認する → 修正する
という基本的な流れを体験してみましょう。
この記事では、プログラミング初心者でも分かるように、Claude Codeを使ったWebサイト制作の流れをやさしく解説します。
Claude Codeなら日本語でWebサイト制作をお願いできる
通常、Webサイトを作るにはHTMLやCSS、JavaScriptなどの知識が必要になることがあります。
しかしClaude Codeを使う場合、自分ですべてのプログラムを書く必要はありません。
たとえば、
初心者向けのシンプルなWebサイトを作ってください。
と日本語でお願いできます。
さらに、
- 青を基調にしてください。
- お問い合わせページを追加してください。
- スマートフォンでも見やすくしてください。
と追加でお願いできます。
つまり、自分が作りたいものを日本語で伝えながら制作を進められるということです。
STEP1｜まず何を作るのか決めよう
Claude Codeを起動する前に、簡単でいいので「何を作りたいのか」を決めます。
今回は練習として、架空のお店のWebサイトを作ることにしましょう。
必要なページは、
- トップページ
- お店について
- サービス・料金
- お問い合わせ
くらいで十分です。
最初から会員登録やネット決済など、複雑な機能を入れる必要はありません。
STEP2｜Webサイト用のフォルダを作る
次にWebサイトのファイルを保存する場所を作ります。
たとえば、
my-siteというフォルダを作ります。
このフォルダが、今回作るWebサイト専用の作業場所になります。
初心者のうちは、作るものごとにフォルダを分けておくと分かりやすくなります。
STEP3｜作業フォルダでClaude Codeを起動する
ターミナルを開いて、先ほど作った「my-site」フォルダへ移動します。
そして、その場所でClaude Codeを起動します。
ここで重要なのは、Webサイトを作るフォルダでClaude Codeを起動することです。
違うフォルダで起動すると、別のファイルを確認・変更してしまう可能性があります。
作業前に、「今どのフォルダにいるのか」を確認する習慣をつけましょう。
STEP4｜まずClaude Codeに相談する
いきなり制作を始めてもらう方法もありますが、初心者なら最初に相談する方法がおすすめです。
たとえば、次のように伝えます。
初心者向けの練習として、架空のお店のWebサイトを作りたいです。
トップページ、お店について、サービス・料金、お問い合わせのページが必要です。
シンプルで見やすいデザインにしたいです。
まず、どのような構成にすればいいか提案してください。
まだファイルは作らないでください。
Claude Codeから構成案が出てきたら、内容を確認します。
STEP5｜問題なければ制作をお願いする
提案された内容に問題がなければ、
その内容でWebサイトを作ってください。
と伝えます。
さらに条件を追加しても構いません。
- 白と青を基調にしてください。
- 初心者でも読みやすいように文字は少し大きめにしてください。
- スマートフォンでも見やすくしてください。
Claude Codeは、このような日本語の希望をもとに制作を進めてくれます。
STEP6｜Claude Codeがファイルを作る
Claude CodeがWebサイト制作に必要なファイルを作っていきます。
初心者の場合、見慣れないファイル名が出てくるかもしれません。
ここで、「全部理解しないといけない」と思う必要はありません。
分からなければClaude Codeに、
今作ったファイルがそれぞれ何のためのものなのか、初心者向けに説明してください。
と聞けば大丈夫です。
STEP7｜作ったWebサイトをブラウザで確認する
ファイルが完成したら、実際にWebサイトを見てみましょう。
サイトの作り方によって確認方法は異なります。
分からなければClaude Codeに、
作ったWebサイトをブラウザで確認したいです。私は次に何をすればいいですか？
と聞いてみましょう。
現在の状態に合わせて、必要な操作を案内してもらえます。
「localhost」って何？
Webサイトを確認するとき、localhostという文字を見ることがあります。
初めて見ると難しそうですが、簡単にいうと、自分のパソコンの中でWebサイトを確認するための場所だと考えてください。
この段階では、まだインターネット上に一般公開されているわけではありません。
自分のパソコンで制作途中のサイトを確認している状態です。
STEP8｜実際にサイトを見てみる
ブラウザでサイトが表示されたら、実際に確認します。
- 文字は読みやすいか
- 色はイメージ通りか
- ボタンは分かりやすいか
- 必要な文章が入っているか
- 画像は正しく表示されているか
- スマートフォンでも見やすそうか
ここで大切なのは、最初から完璧でなくてもいいということです。
STEP9｜気になるところをClaude Codeに伝える
たとえば、タイトルが小さかったとします。
その場合は、
トップページのタイトルをもう少し大きくしてください。
とお願いできます。
色が気に入らなければ、
全体的にもう少し明るい青を使ってください。
ボタンが分かりにくければ、
お問い合わせボタンをもっと目立つようにしてください。
と伝えます。
修正も普通の日本語で大丈夫
ここでもプログラムの名前を覚える必要はありません。
- 右上にある青いボタンを少し大きくしてください。
- トップページの一番上の画像を変更してください。
- 料金の文字をもう少し目立たせてください。
というように、自分が画面を見て感じたことを、そのまま伝えるという方法で大丈夫です。
STEP10｜スマートフォン表示も確認する
現在のWebサイトでは、スマートフォンでの見やすさも重要です。
パソコンではきれいに見えていても、スマートフォンでは「文字が小さい」「ボタンが押しにくい」「レイアウトが崩れている」ということがあります。
Claude Codeには、
スマートフォンでも見やすいか確認してください。
問題があれば、どこに問題があるか教えてください。
とお願いできます。
STEP11｜リンクやボタンを確認する
見た目だけではなく、実際に操作してみることも大切です。
- お問い合わせを押したら正しいページへ移動するか
- メニューから正しいページを開けるか
- ボタンがきちんと反応するか
などを確認します。
Claude Codeが「完成しました」と言ったとしても、自分でも実際に触って確認しましょう。
STEP12｜最後にClaude Codeにも確認してもらう
一通り完成したら、
Webサイト全体を確認してください。
表示がおかしいところや、動かないリンク、明らかな問題がないか調べてください。
問題があれば、まず教えてください。まだ変更しないでください。
とお願いできます。
問題が見つかったら、説明を聞いたうえで修正してもらいます。
Webサイトを作るときに便利な指示例
最初の指示に迷ったら、次の文章を使えます。
初心者向けの練習として、シンプルなWebサイトを作りたいです。
トップページ、サービス紹介、お問い合わせページを作ってください。
白と青を基調にした、清潔感のあるデザインにしてください。
パソコンとスマートフォンの両方で見やすくしてください。
私は初心者なので、難しい専門用語をできるだけ使わずに説明しながら進めてください。
画像を使いたい場合は？
Webサイトには写真やイラストを使いたくなるでしょう。
その場合も、
トップページに大きな写真を表示したいです。
とClaude Codeに相談できます。
自分で用意した画像を使う場合は、
この画像をトップページで使いたいです。どこに置けばいいですか？
と聞いても構いません。
文章も考えてもらえる？
Claude CodeにWebサイト内の文章を考えてもらうこともできます。
たとえば、
お店紹介の文章も仮で作ってください。
とお願いできます。
ただし、実際のお店や会社のサイトとして公開する場合は、営業時間・料金・住所などの事実が正しいか必ず自分で確認しましょう。
AIが作った文章をそのまま公開するのではなく、最後は人間が確認することが大切です。
作ったサイトはすぐインターネットに公開される？
いいえ。
自分のパソコン上でWebサイトを作っただけなら、通常はまだ一般公開されていません。
インターネット上で誰でも見られるようにするには、公開するための別の作業が必要です。
この作業を「デプロイ」などと呼ぶことがあります。
初心者の段階では、「Webサイトを作ること」と「インターネットに公開すること」は別と覚えておけば十分です。
公開前には必ず確認しよう
Webサイトを公開すると、不特定多数の人がアクセスできる可能性があります。
そのため公開前には、
- 個人情報が入っていないか
- パスワードなどが書かれていないか
- テスト用の情報が残っていないか
- 文章や料金が正しいか
- リンクが正常に動くか
などを確認しましょう。
Claude Codeにもチェックをお願いできますが、最終確認は自分でも行うことが大切です。
最初から大規模サイトを作らなくていい
Claude Codeを使うと、「ネットショップを作ろう」「SNSを作ろう」「会員制サービスを作ろう」と、いきなり大きなものを作りたくなるかもしれません。
しかし初心者の場合は、まず小さなWebサイトを一つ完成させることをおすすめします。
一度、
作る → 確認する → 修正する
という流れを経験すると、次に作るものがかなり分かりやすくなります。
Claude CodeでWebサイトを作る基本の流れ
- 作りたいWebサイトを決める
- 専用フォルダを作る
- Claude Codeを起動する
- 構成を相談する
- 制作してもらう
- ブラウザで確認する
- 日本語で修正をお願いする
- スマートフォン表示やリンクを確認する
- 最終チェックする
難しいプログラムを最初から覚えることより、まずこの流れを体験することが大切です。
まとめ｜まず小さなWebサイトを1つ作ってみよう
Claude Codeを使えば、日本語で相談しながらWebサイト制作を進めることができます。
プログラミング初心者の場合、
「コードが書けないからWebサイトは作れない」
と考える必要はありません。
まず、
こんなWebサイトを作りたいです。
とClaude Codeに伝えてみましょう。
そして、
作ってもらう → ブラウザで見る → 気になるところを伝える → 修正してもらう
という流れを繰り返します。
最初から完璧なサイトを作る必要はありません。
小さなWebサイトを一つ完成させるだけでも、Claude Codeで「何かを作る」という感覚がかなり分かるようになります。
次の記事では、
「Claude Codeで自分専用ツールを作ってみよう」
として、Webサイトとは少し違う、自分の作業を便利にする小さなツールをClaude Codeで作る方法を紹介します。
