【実録】AIエディタCursorを使って、飲食店のホームページを30分で作ってみた結果【制作費0円】

「自分のお店のホームページを作りたいけど、制作会社に見積もりをとったら50万円と言われた…」
「自分で作ろうとしたけど、WordPressの設定で挫折した…」

そんな経験はありませんか？

実は今、AIを使えば、プログラミング知識ゼロでも、たった30分でプロ並みのホームページが作れる時代になりました。

今回は、話題のAIエディタ「Cursor（カーソル）」を使って、実際に架空のカフェ「Cafe Harmony」のホームページをゼロから30分で作っていく様子を実況形式で公開します。

「本当にそんなに簡単にできるの？」と半信半疑の方も、この記事を読み終わる頃には「これなら自分にもできる！」と確信しているはずです。

---

今回作るサイトの完成イメージ

まずはゴールをお見せします。今回作るのは、こんな感じの「おしゃれなカフェのランディングページ（LP）」です。

• コンセプト: オーガニック素材にこだわった、落ち着きのあるカフェ
• 必要なセクション:
  • ヒーローエリア（トップ画像＋キャッチコピー）
  • コンセプト紹介
  • メニュー（写真付き）
  • アクセス（地図・営業時間）
  • Instagramリンク
• デザイン: 白とベージュを基調としたナチュラルな雰囲気

これを、コードを1行も手書きせずに作ります。

---

使用する最強ツール「Cursor」とは？

今回使うのは、「Cursor（カーソル）」というAI搭載のコードエディタです。

ChatGPTでもコードは書けますが、Cursorの凄いところは「エディタの中でAIが直接ファイルを編集してくれる」こと。

• ChatGPT：コードをコピーして、エディタに貼り付ける必要がある（面倒）
• Cursor：「ここにこんなボタンを作って」と指示するだけで、勝手にコードが書かれる（魔法）

この「指示するだけ」の体験が、Web制作の常識を覆しました。

---

【実況】30分でサイトを作る全手順

それでは、タイマースタートです！⏱️

Step 1：準備（所要時間：5分）

まずは下準備です。

1. パソコン上の任意の場所にフォルダを作成します（名前は cafe-harmony としました）。
2. そのフォルダをCursorで開きます。
3. 画像素材サイト（Unsplashなど）から、カフェっぽい画像を3〜4枚ダウンロードし、images フォルダに入れておきます。

準備はこれだけ。専門的な環境構築は一切不要です。

Step 2：AIに指示出し（所要時間：10分）

ここからがCursorの真骨頂。
Cmd + K（Windowsは Ctrl + K）を押して、AIへの指示ウィンドウを開きます。

入力したプロンプト（指示）：

カフェのLPを作りたいです。
index.htmlとstyle.cssを作成してください。

【要件】
- 店名：Cafe Harmony
- ターゲット：20〜30代の女性
- デザイン：白とベージュ（#F5F5DC）を基調とした、清潔感のあるナチュラルなデザイン
- フォント：明朝体を使って上品に

【セクション構成】
1. ヒーロー：画面いっぱいの画像と、中央にキャッチコピー「日常に、小さな幸せを。」
2. コンセプト：お店のこだわりを説明。画像とテキストを横並びに。
3. メニュー：おすすめメニュー3つを写真付きカードで表示。
4. アクセス：Googleマップのダミー埋め込みと、住所・営業時間。
5. フッター：コピーライトとInstagramアイコン。

レスポンシブ対応（スマホで見ても崩れない）も必須でお願いします。

入力してEnterを押すと…

AIが猛烈な勢いでコードを書き始めました！ 😲
HTMLの構造からCSSの装飾まで、ものの1分ほどで完了。

ブラウザで確認してみると、もうこの時点で「ほぼ完成形」のサイトが出来上がっています。驚愕です。

Step 3：修正・微調整（所要時間：10分）

ベースはできましたが、細かい部分を調整していきます。ここもAIに頼みます。

修正1：余白の調整
「ちょっと窮屈だな」と感じたので、対象の箇所を選択して Cmd + K。

「各セクションの上下の余白をもっと広げて（padding: 80pxくらい）。ゆったりとした雰囲気を出したい」

→ 即修正完了。 これだけで一気に高級感が出ました。

修正2：画像の差し替え
プレフルーダー（仮画像）になっている部分を、用意した画像に差し替えます。

「imgタグのsrcを、imagesフォルダ内の画像（cafe1.jpg, cafe2.jpg…）に変更して」

→ 一瞬で反映。 美味しそうなコーヒーの写真が入りました。

修正3：スマホ表示の確認
ブラウザの幅を狭めてスマホ表示を確認。「メニューが縦長すぎて見にくいかも？」

「スマホ表示の時、メニューのカードの画像とテキストを横並びのレイアウトにして」

→ CSSのメディアクエリを自動追記。 スマホでも見やすいレイアウトになりました。

Step 4：完成！（所要時間：5分）

最後に、全体の文字色やフォントサイズを微調整して…

完成です！🎉

ここまでにかかった時間は、ジャスト30分。
コードを自分で書いた量は、なんと0行です。すべてAIへの日本語の指示だけで完結しました。

---

外注 vs AI自作 コスパ比較

今回作成したレベルのサイトを、制作会社に依頼した場合と比較してみましょう。

項目	制作会社に依頼	AI (Cursor) で自作
費用	30万円〜50万円	0円（PC代・通信費除く）
期間	1ヶ月〜2ヶ月	30分〜1時間
修正	追加費用がかかる場合も	何度でも無料・即時
スキル	専門知識不要（丸投げ）	指示する力が必要

もちろん、複雑なシステム開発や大規模なサイトはプロに任せるべきですが、「お店の紹介サイト」「簡単なLP」なら、AI自作で十分すぎるクオリティが出せます。

浮いた30万円を、広告費や内装費に回せるとしたら…？
これはビジネスにおいて大きなインパクトですよね。

---

まとめ：あなたも今日からオーナー兼Webデザイナー

「プログラミングは難しい」
「ホームページはお金がかかる」

そんな常識は、Cursorの登場で過去のものになりました。
必要なのは「どんなサイトを作りたいか」というイメージと言語化する力だけです。

もしあなたが、
「自分のビジネスのサイトを作りたい」
「副業でWeb制作を始めてみたい」
と考えているなら、今すぐCursorをダウンロードして、AIに話しかけてみてください。

その「魔法のような体験」に、きっと驚くはずです。

🚀 さらに詳しく学びたい方へ

「もっと具体的なプロンプトが知りたい」
「予約フォームやお問い合わせ機能も付けたい」
「作ったサイトを公開する方法が知りたい」

そんな方のために、全工程を網羅した完全ガイドを作成しました。
10業種分のテンプレートも付いているので、コピペするだけで即サイトが完成します。

📞 「やっぱりプロに任せたい」という方へ

「AIが便利なのは分かったけど、時間が取れない」
「もっと本格的なマーケティング戦略も含めて相談したい」

そんな方は、私たちジャンド株式会社にお任せください。
AIを活用した効率的な制作フローにより、高品質なサイトを適正価格でご提供します。