宇都宮の個人事業主もできた！ホームページをAIで自作する時代がやってきた

「お店のホームページを作りたいけれど、制作会社に見積もりを頼んだら数十万円と言われて諦めた……」そんな経験はありませんか？

宇都宮市内でも、カフェ、美容室、整体院、建設業など、多くの中小事業者さまから「手軽に発信できる自社サイトが欲しい」という声をよく聞きます。これまではホームページ作成サービス（ノーコードツール）を使うのが定番でしたが、デザインを少し変えようとすると有料プランが必要になったり、思い通りのレイアウトにならなかったりする問題がありました。

しかし今、AIの進化によって「HTMLやCSSといった専門知識が全くない人」でも、プロが作ったような美しいホームページをわずか1時間で、しかもほぼ無料で自作できるようになっています。

今回は、現在話題になっている3つのプログラミングAIツールの特徴をわかりやすく比較し、それらを組み合わせて最短でホームページを完成させる具体的な手順をご紹介します。

話題の3大AIツール（Cursor・Claude・Gemini）の特徴をわかりやすく解説

ホームページをAIで作る際、世の中でよく使われているツールにはそれぞれ「得意分野」があります。難しそうな名前が並びますが、役割を理解すれば簡単です。

1. Cursor（カーソル）

ホームページの「見た目」を確認しながら、直感的に修正できるツールです。 画面の左側にホームページのコード、右側にAIとのチャット画面が表示されます。AIに「ここの文字を大きくして」「背景を宇都宮の大谷石のような温かみのあるグレーにして」と指示すると、その場でコードを書き換えてくれます。初心者にとって最も使いやすく、デザイン調整に最適なツールです。

2. Claude（クロード / Claude Code）

ホームページの「不具合（バグ）」を自動で見つけて直してくれる、優秀なアシスタントです。 「ボタンを押しても反応しない」「スマホで見るとレイアウトが崩れてしまう」といった問題が起きたときに真価を発揮します。裏側で複数のファイルを自動でチェックし、問題の原因を突き止めてサクッと修正してくれます。

3. Gemini（ジェミニ / Gemini CLI）

ホームページ全体の「設計図や構成」を瞬時に考えてくれる頭脳派ツールです。 一度に読み込める情報量が非常に多いため、「宇都宮で人気の餃子店のホームページを作りたい。必要なメニューやお問い合わせフォームの項目を考えて、全体のフォルダ構成を作って」と頼むと、一瞬で完璧な骨組みを出力してくれます。

専門知識ゼロから始める！ホームページ爆速作成3ステップ

それでは、これら3つのAIツールを連携させて、実際にホームページを作成する手順を解説します。

ステップ1：Geminiでホームページの「設計図」を作る

まずはホームページの全体像を決めます。Geminiのチャット画面を開き、以下のように語りかけるようなプロンプト（指示文）を入力してみましょう。

【指示文（プロンプト）の例】

「宇都宮市内で新規オープンする、地元の食材を使ったカフェのホームページを作りたいです。未経験でも崩れにくい、シンプルで美しい1ページのホームページの構成案（HTMLの骨組み）と、必要な文章のテキストを作成してください。大谷石をイメージした落ち着いたデザインにしたいです。」

この指示だけで、ホームページの骨組みとなるコード（HTML）と、お店の紹介文などのテキストが数秒で生成されます。

ステップ2：Cursorを使ってデザインを美しく整える

ステップ1で生成されたコードをCursorに貼り付けます。Cursorには「プレビュー機能」があるため、実際のホームページの画面を見ながら作業ができます。

【指示文（プロンプト）の例】

「このホームページ全体のデザインを整えてください。バニラCSSを使って、スマートフォンでも綺麗に表示されるように（レスポンシブ対応）してください。文字のフォントは読みやすく、余白を広めにとって、高級感のあるモダンな雰囲気にしてください。」

デザインが崩れる心配はありません。AIがレイアウトをきれいに整え、スマートフォンの画面サイズにも自動で対応するコードに書き換えてくれます。

ステップ3：Claudeでスマホ表示や動作のチェック・修正

最後に、ホームページが正しく動くかチェックします。「メニューボタンを押しても、該当の場所にスムーズにスクロールしない」「スマホ表示のときにロゴがはみ出ている」といった細かい不具合があれば、Claudeに丸投げします。

【指示文（プロンプト）の例】

「スマートフォンで表示したときに、お問い合わせボタンが画面からはみ出してしまいます。崩れないように修正してください。」

Claudeがコードの悪い部分を自動で見つけ出し、一瞬で修正コードを適用してくれます。

実際に宇都宮のお店をイメージして作ってみた

今回は、宇都宮市内に実在しそうな「大谷石を使った落ち着いた雰囲気のカフェ」をイメージして、実際にホームページを作成してみました。

AIへの指示出しのコツは、**「具体的にお店の特徴やこだわりを伝えること」**です。 例えば、「コーヒーのこだわり」や「宇都宮の地産地消の食材を使っていること」などをAIに伝えると、それに合わせた画像付きのレイアウトや、魅力的な紹介テキストをAIが自動で作成してくれます。

画像についても、「大谷石の壁が特徴的なモダンなカフェの内装画像」とAIに指示して作成したものを配置するだけで、まるでプロのウェブデザイナーに依頼したかのようなホームページが完成しました。

一度作り方を覚えてしまえば、季節限定メニューのお知らせページや、新しい採用情報のページなども、自分自身の手で数分で追加できるようになります。

まとめ

難しく思えるホームページ作成も、最新のAIツールである「Cursor」「Claude」「Gemini」を正しく使い分けることで、専門知識が全くない方でも驚くほど簡単に、そして美しく仕上げることができます。

まずは簡単な自己紹介ページや、お店の基本情報を載せた1ページの簡易サイトから挑戦してみてはいかがでしょうか。自分でホームページを更新できるようになると、情報発信のスピードが圧倒的に早くなります。

MEO・SNS・AI活用について相談したい方は、お気軽にご連絡ください。