CursorやClaudeなんて自分に使えるの？——AIでホームページを作る、実際の画面と手順

「生成AIで作ったホームページって、自分で細かいところを修正することはできますか？」
「生成AIで作ったホームページって、どうやって自分のサーバーに公開するんですか？」
「WordPressに入れられますか？」

このような質問、最近ものすごく増えました。AIでホームページを作れると聞いて試してみたけれど、出てきたものが微妙。出てきたものを直せない。公開できない。

あるいは、そもそもCursorやClaudeという名前を聞いたことはあるけれど、ChatGPT（チャッピー）の仲間かな？ぐらいのイメージだったり、自分には関係のないツール、難しいツールだと思っている。

どちらの方にも、伝えたいことがあります。

あなたでも使えます。興味があるなら使ってみたら良いです。細かいところを直すのも、日本語で「ここをこうして」と指示を出すだけです。設定が完了すれば、公開したり、WordPressに反映させることも、指示を出せばやってくれます。

「エンジニア向けでしょう？」という誤解

Cursorという名前を聞くと、プログラマーやエンジニアが使うものだと思う方が多いんですよね。

確かに、もともとはコードを書く人のためのツールです。昔はAIエディター、今はコーディングエージェントなどと言っていますから。

画面を開くと英語が並んでいて、黒画面に白文字でいかにも専門的に見える。

でも、実際にやっていることは、チャット画面で「日本語で指示を出す」です。

たとえばこんな感じです。

「ヘッダーの背景色を紺にして、文字は白にしてください」

これを入力すると、AIがコードを書いてくれます。出てきたものを画面で確認して、気に入らなければ「もう少し濃い紺にして」と追加で指示を出す。

やっていることは会話です。日本語で会話をするだけでホームページも作れますし、出てきたものを修正することもできます。

ChatGPTは使えるけど、その先が分からない

ChatGPTを使ったことがある方は、もうかなり多いと思います。調べものをしたり、文章を書いてもらったり。あのチャットの延長に、ホームページ作成があると思ってください。

私の生徒さんに、まさにこの入口から来た方がいます。

ChatGPTのチャットで会話をするぐらいしかAIを使ったことがなかった。それが今は、Cursorを使いこなしています。デザインの制作もできるし、HTMLとCSSも書けるし、記事の作成もできる。WordPressと接続して、チャットだけでサイトを更新したり、記事を投稿したりまでできるようになりました。

この方が特別に技術に強かったわけではありません。最初はChatGPTで会話するだけの人でした。

変わったのは、Cursorの導入と使い方、AIへの指示の仕方と上手な付き合い方を知ったことです。

AIでホームページを作る流れを、そのまま見せます

実際にどんなふうに進むのか。大まかな流れを書きます。

より良いホームページを作るには、もっと具体的に指示をしたり、AIにうまく動いてもらうためのコツがありますが、ここでは流れを簡単にお伝えします。

ステップ1：指示を出す

日本語で、作りたいものを説明します。

「個人のピアノ教室のホームページを作ってください。教室の紹介、レッスン内容、先生のプロフィール、お問い合わせフォームが必要です。色はやわらかい雰囲気で。」

こんなざっくりとした指示でもホームページを作ってくれます。

各ページの原稿を渡せば、原稿の通りに作ってくれます。写真素材を渡せば使ってくれますし、なければ画像生成もしてくれます。参考デザインを伝えると、デザインも寄せてくれます。

ステップ2：生成されたものを確認する

AIがコードを書いて、画面にホームページが表示されます。指示次第ですが、それなりのホームページが出来上がります。

ステップ3：修正の指示を出す

追加の指示をして、自分好みのホームページに直していくことができます。

「見出しの文字をもう少し大きくして」
「お問い合わせボタンの色を目立つようにして」
「スマホで見たときに写真が小さすぎるので大きくして」

この「確認→指示→修正」のサイクルを何度か繰り返すと、形になっていきます。

完成したら、データ一式をダウンロードして自分で公開することもできますし、サーバーやWordPressと連携させる設定をすれば、自動で公開してもらうこともできます。この設定のところで止まる人は、実はとても多いです。

必要なのは「頼み方」と「判断力」だけ

AIを使ってホームページを作るために必要なのは、HTMLやCSS、プログラミングの知識じゃありません。

1つ目は、「AIに何をどう頼むか」「どう頼めば伝わるか」を知ること。

指示の出し方にはコツがあります。AIに伝わる言葉と伝わらない言葉があります。人間相手なら伝わる言葉でも、AIには伝わらない言葉があるのです。

詳しく指示すること、必要な情報を渡すことも大事です。漠然と「いい感じにして」と言うと、漠然としたものが返ってきます。何が欲しくて、どこが気に入らなくて、どう変えたいのか。これを言葉にできると、AIが出してくるものの精度が格段に上がります。

2つ目は、「出てきたものを判断する力」。

正しいのか間違っているのか。意図どおりなのかズレているのか。これが分からないと、AIに振り回されます。

あなたが作りたいものを明確にイメージできていれば、何が違うのか判断できて、最適な修正指示を出すことができます。

逆に言えば、この2つがあれば、HTMLやCSSのコードを暗記する必要はありません。

Cursorだけで十分

AIツールは今、無数にあります。何を使えばいいのか分からない、という声もよく聞きます。

私の考えですが、Cursorだけで十分です。Cursorだけでデザインもコーディングも記事作成も全部できます。ホームページを作れます。

Claudeを使いたい人はClaudeだけでも十分です。Claudeだけでホームページを作れます。

あれもこれも試す必要はありません。

1つに絞って使い方を覚えて、しっかり使いこなせるようになった方が、ホームページに限らず、チラシでも、企画書でも、原稿でも、画像でも、より良いものを作れるようになります。

費用は月3,500円程度

AIツールの費用は明確です。

• Cursor：月額20ドルから（約3,200円〜）
• Claude：月額22ドルから（約3,500円〜）

月3,500円程度で、デザイナーとエンジニアとコピーライターを雇っているようなもの——と言ったら大げさに聞こえるかもしれませんが、やれることの幅を考えたり、使いこなせるようになれば、的外れでもないことです。

AIでホームページを作れるようになっても、見てもらえない

AIを使えば、ホームページは作れます。上手に作れるようになっていきます。

でも、作ったホームページを見てもらえるかどうかは、また別の話なんですよね。

レッスンでは、AIを使った制作の進め方と一緒に、なぜそう作るのかを伝えています。キャッチコピーを作る意味、スマホで最初に見える画面に何を置くべきか、お問い合わせボタンをどこに置くか、どうすれば検索にヒットしやすいホームページを作れるか、どうすればAIの回答に採用されやすくなるか、どうすれば見てもらえて、お問い合わせにつながるホームページを作れるかなど。

作り方と、見てもらえる作り方は、同時に身につけた方が効率がいいです。

ホームページ制作歴30年、今はAIが主軸です

私はホームページ制作歴30年になりますが、今は完全にAIが主軸です。

リサーチ、デザイン、コーディング、コピーライティング、マーケティング、WordPress操作、更新作業——それぞれの工程にAIが入っていて、私はAIチームのディレクターとして全体を見ています。

AIを導入してから、制作時間は3分の1から4分の1くらいになりました。そしてクオリティも上がった。自分がディレクションに集中できるようになったからです。

レッスンの始めにウォーミングアップも兼ねて、私がAIをどう活用しているかを生徒さんに共有しているんですが、みなさん面白がってくれます。「こんな使い方もできるんだ」「こういうふうに使えばいいんだ」と。

Cursorと聞くとエンジニア向けだと思われがちですが、非エンジニアでも使えるようになると、なんでもできるようになるんです。とても万能なツールなんです。

AIの活用はジャンプアップコースで学べます

コナン先生のホームページ作成教室には、昔ながらの”基本の作り方”を学ぶ「クラシックコース」と、今どきの”AIを使った作り方”を学ぶ「ジャンプアップコース」があります。

そして、ジャンプアップコースには５つの講座があります。

• AI＋WordPress/Astroでホームページを作成できるようになる講座
  AIを右腕にして、もっと早く、もっと上手に作れます。
• 大学生・高校生・中学生が実用的なホームページを作成できるようになる講座
  学生のうちに、将来仕事で役立つスキルが身につきます。
• 社会人が副業のためのホームページを作成できるようになる講座
  ホームページを作って、本業とは別の副収入を目指せます。
• 社長さんが会社のホームページを自分で作成できるようになる講座
  会社のホームページを自分で作って、会社もビジネスも育てられます。
• ホームページ作成を仕事にして食べていけるようになる講座
  ホームページ作成を本業にして、きちんと収入を得られる人を目指します。

「自分の目的に合う学び方が分からない」という方は、何から学べばいい？——目的別の学習ルートも参考にしてください。

どの講座が合うか分からない場合は、体験レッスンで一緒に決めましょう。