【初心者向け】HTML知識ゼロでもOK？
Claudeで始めるWebサイト制作、はじめの一歩

はじめに

「自分のホームページ、いつか作ってみたいな」
「でもHTMLとかCSSとか聞くと、なんだか難しそう…」

そんなふうに感じている方、実はすごく多いんです。
文字入力はできるし、WordやExcelもある程度使える。
ネット検索だって毎日やってる。
でも「Webサイトを作る」となると、急にハードルが高く感じてしまう…。

「AIを使えばWebサイトも作れる」という話を聞いたことはありませんか？
ChatGPT（愛称：チャッピー）という名前は聞いたことがあっても、「本当に私にもできるのかな？」と半信半疑な方も多いのではないでしょうか。

今回は、AI「Claude（クロード）」を使ったWebサイト制作について、初心者さん向けに大まかな流れをご紹介します。
むずかしいプロンプト（命令文）の話などはありません。
まずは大まかにイメージを持つことから始めてみましょう。

Webサイト制作に「Claude」がおすすめな理由

生成AIと聞くと、ChatGPTを思い浮かべる方が多いかもしれません。
しかし「Claude」という名前は、今回はじめて聞いたという方もいるのではないでしょうか。

実はAIにもそれぞれ得意分野があり、Claudeは特に「文章の読み書き」や「コード作成」に強いと評価されているAIです。
会話の中で意図を丁寧にくみ取ってくれる自然なやり取りにも定評があり、Webサイト制作のように「イメージを共有しながら形にしていく」作業と相性が良いのが特徴です。

もちろん他のAIでもWebサイト制作は可能ですが、「初めてAIでコードを触ってみる」という方にとって、Claudeは扱いやすい選択肢のひとつと言えます。

私も仕事でコーディングやプログラミングが必要な時は、Claudeさんに助けてもらっています。

Claude Code？ Claude Design？
使わなきゃダメなの？

Claudeについて調べていると、「Claude Code」や「Claude Design」というサービス名も目にすることがあるかもしれません。「これも使わないといけないの？普通のClaudeと何がちがうの？」と不安になった方もいるのではないでしょうか。

結論から言うと、初心者さんがはじめの一歩を踏み出すなら、これらを使う必要はありません。

どちらも便利なツールですが、「始めてWebサイトを作ってみたい」という段階では、普段お使いのブラウザやアプリでClaudeとチャットするだけで十分です。
まずは普通の会話画面から始めて、慣れてきたらこうした専門ツールも視野に入れる、というくらいの気持ちで大丈夫だと思います。

今回は「Claude.ai」（https://claude.ai）を無料の範囲で使うことを想定して、この後の話を進めていきますね。

Webサイトって、自分にも作れるの？

結論から言うと、答えは「YES」です。
これまでWebサイトを作るには、HTMLやCSSといった専門知識を一から勉強する必要がありました。
でも今は、AIに「こんなサイトを作りたい」と伝えるだけで、コードの部分をAIが考えてくれる時代になっています。

もちろん、魔法のように何もせず完成するわけではありません。
でも「知識がないから無理」と諦める必要はなくなってきている、というのが今の現実です。

Claudeって何ができるの？（超ざっくり）

Claudeは、Anthropic社が開発している生成AIです。
ChatGPTと同じように、チャット形式で会話をしながら、文章の作成や質問への回答、そしてプログラムのコード作成まで幅広くこなしてくれます。

Web制作においては、「こんな雰囲気のサイトを作りたい」と伝えると、その内容をもとにHTMLやCSSのコードを考えて、実際に動くWebサイトの形にしてくれます。

つまり、こちらが専門用語を知らなくても、会話の中でイメージを伝えるだけで形にしていける、というのが大きな特徴です。

Webサイト制作、実はこんな流れで進む

「大まかな流れ」と言っても、実際どんな画面でどう進むのかイメージが湧きにくいですよね。
もう少しだけ具体的に、流れを追ってみましょう。

Claudeのチャット画面を開き、作りたいサイトのイメージを伝える

ブラウザでClaudeのサイトを開き、チャット欄に「カフェの紹介ページを作りたいです。落ち着いた雰囲気で、お店の写真とメニュー、営業時間を載せたいです」というように、思い描いているものをできるだけ具体的な言葉で伝えます。

Claudeがコードを考えて、その場でサイトの形にしてくれる

伝えた内容をもとに、Claudeがページのコード（HTMLやCSS）を作成します。

また、プレビューのように見た目を確認できます。

環境や機能の状態によって表示は異なりますが、コードだけでなく見た目を確認しながら進められるのが便利なポイントです。

プレビューを見ながら、気になる点を伝えて調整する

「もう少し色を明るくしたい」「文字を大きくしたい」「メニューの並び順を変えたい」など、気になる点をそのまま言葉で伝えると、Claudeがその都度コードを修正し、プレビューに反映してくれます。何度でも会話しながら微調整できるのがポイントです。

完成したコードをファイルとして保存する

イメージ通りに仕上がったら、Claudeが作成したコードをファイルとして保存できます。

サイトを公開する

保存したファイルを、レンタルサーバーなどWebサイトを公開するためのサービスにアップロードすれば、誰でも見られる状態になります。この「公開」の部分は、Claudeとの会話の外で行う作業になります。

思っていたより、シンプルな流れだと感じませんか？

HTML・CSSの知識がなくても進められる理由

「でもやっぱり、コードって書けないと無理なんじゃ…」

そう思う方も多いはずです。でも、Claudeを使う場合、自分でコードを１から「書く」というより、会話をしながら「相談して形にしていく」という感覚に近いのが特徴です。

もちろん完璧を求めるとなると専門知識が必要になる場面も出てきます。
でも「まずは自分のWebサイトを形にしてみたい」というレベルであれば、HTML・CSSの知識がゼロの状態からでも、十分に取り組める範囲だと思います。

Claudeには無料で試せるプランもあり、利用回数に制限はありますが、まずは会話しながらコード作成を体験することができますよ。機能や利用条件は変更されることがあるため、最新の内容は公式サイトでも確認してみてくださいね。

とはいえ、つまずきやすいポイントも正直に

ここまで良いことばかりお伝えしてきましたが、正直にお伝えしておきたいこともあります！

• イメージをうまく言葉にできない
  頭の中にあるイメージを、的確な言葉でAIに伝えるのは意外と難しいものです。
• 思った通りにならないときの直し方がわからない
  「なんだか違う…」と感じても、どう伝え直せばいいのか迷ってしまうことがあります。
• 公開や運用の部分でつまずく
  サイトを世の中に公開する際には、AIとの会話だけでは完結しない作業も出てきます。
• ファイルの管理やルールがわからない
  実は、コードそのものが書ける・書けないよりも、ここでつまずく方が多いかもしれません。
  

Webサイトは1つのファイルだけでなく、HTMLファイルやCSSファイル、画像ファイルなどが決まった形で整理されて、はじめて正しく表示される仕組みになっています。

Claudeが提案してくれたコードを、どこに、どんな名前で保存するのか。
ファイル同士をどう関連づけるのか。

こうした「土台のルール」を知らないと、せっかく良いコードをもらっても、正しく動かせなかったり、あとで修正できなくなったりすることがあります。

こうした場面で「知識があれば、もっとスムーズに進められたのに」と感じる方は少なくありません。

もっと自由にサイトを作れるようになりたい人へ

独学やAIとの会話だけでも、ある程度のところまでは進められます。
でも「思い通りに動かせない」「なぜこうなるのか理解できない」というモヤモヤが残ることも事実です。

そんなときに役立つのが、基礎からしっかり学べる環境です。
HTML・CSSの基本や、AIとの上手な付き合い方を体系的に学ぶことで、「AI任せ」から「AIを使いこなす」へとレベルアップできます。

Winスクールでは、初心者の方でも安心して学べるWeb制作講座をご用意しています。
「もっと自由に、自分の思い通りにサイトを作れるようになりたい」という方は、ぜひ一度チェックしてみてくださいね！

おわりに

「HTMLの知識がないから無理」と感じていたWebサイト制作も、ClaudeのようなAIを使うことで、以前よりぐっと身近になっています。

ただし、AIが作ったものを正しく確認したり、自分の思い通りに直したりするには、Webサイトの仕組みやHTML・CSSの基本を知っていると安心です。

まずは難しく考えすぎず、「AIと一緒に作ってみる」ことから始めてみましょう！
そこからもっと自由に作れるようになりたいと思ったときは、Webサイトの基本的な仕組みから学ぶことで、できることがさらに広がっていきますよ。

関連記事