少し前から気になっていたCursor AIを使っていたCursor AIをついに使って爆速でLPを作ってみようと思います。
普段は要件をまとめてからClaudeを使ってデザインを作成するときのモックアップを作成してもらっているのですが、CursorのビジュアルエディターなるものがどうやらFigmaのUIとかなり似ていて、実際のコードをFigmaをいじるように編集できるらしいです。凄すぎる。。
1.Cursorを起動&プロンプト送信
早速macOS版のCursorをインストールしてきました。

右上のチャットから、以下のプロンプトで生成をお願いしてみます。今回日本語での精度を試してみたいので日本語で生成をお願いしてみます。
今回ChatGPT5.2で要件をまとめてもらいました
あなたはシニアフロントエンドエンジニア兼UIデザイナーです。
「美容医療クリニック」のランディングページ(LP)を、ダミーデータ込みで差し替えやすい構成で実装してください。
要件
- 技術:Next.js(App Router) + TypeScript + Tailwind CSS
- 1ページ完結のLP(
app/page.tsx想定) - コンポーネント分割(
components/)し、データはdata/site.tsに集約して差し替えやすくする - 文章・数値・価格・症例・FAQ・医師情報などはすべて ダミーデータでOK(ただし美容クリニックっぽくリアルに)
- 画像は一旦プレースホルダーでOK(
/publicのダミー orhttps://images.unsplash.com/...など)。実在人物/症例に見える断定は避ける - デザイン:清潔感・上品・安心感。余白広め。スマホ最適化優先
- アクセシビリティ:ボタン・見出し構造・フォームラベルなど基本対応
- SEO:
metadata、OGP、構造化データ(Clinic/LocalBusinessのJSON-LD)を最低限入れる - 計測:
data-analytics属性を主要CTAにつける(例:data-analytics="cta_hero_reserve")
LP構成(必須セクション)
- ヘッダー(ロゴ/電話/診療時間/予約CTA)
- Hero(キャッチ、サブ、3つの安心要素、主CTA×2「無料カウンセリング」「LINE相談」)
- 悩み訴求(例:毛穴/たるみ/ニキビ跡/くすみ/輪郭)
- 施術メニュー(カード形式:施術名、概要、ダウンタイム、価格、推奨回数、所要時間)
- 選ばれる理由(5つ:医師監修/症例数/個室/痛み配慮/明朗会計など)
- 症例紹介(ダミー)(Before/After風の枠だけ。注意書きも入れる)
- 医師・スタッフ(院長プロフィール、資格、コメント、カウンセラー紹介)
- 料金プラン(人気3プラン+比較表)
- ご来院の流れ(4ステップ)
- FAQ(アコーディオン)
- アクセス(地図埋め込み枠、住所、最寄り、営業時間)
- 予約フォーム(氏名/電話/メール/希望施術/希望日時/相談内容/同意チェック)
- フッター(利用規約/特商法風リンクはダミーでOK)
ダミーデータ仕様(data/site.ts)
以下の形で用意して、ページはこのデータだけ差し替えれば内容が変わるようにしてください。
clinic: { name, tagline, phone, openingHours, address, station, area, features[] }cta: { primaryText, primaryHref, secondaryText, secondaryHref }concerns: { title, items[] }treatments: Treatment[](name, description, priceFrom, downtime, duration, recommended, tags[])reasons: { title, items[{title, body, icon}] }cases: { title, notes, items[{treatment, summary, beforeLabel, afterLabel}] } ※画像は枠だけstaff: { director, counselors[] }pricing: { highlightPlans[], tableRows[] }flow: steps[]faq: items[{q,a}]access: { mapEmbedUrl, parking, paymentMethods[] }form: { consentText, placeholders… }
実装指定
- Tailwindで、セクションごとに
max-w-6xl mx-auto px-4系のレイアウト - 主要CTAは固定フッター(SPのみ)も付ける(「電話」「予約」「LINE」)
- FAQは
details/summaryでもOKだけど見た目は整える - 予約フォームはフロントだけ(送信はダミー)。送信後にトースト表示(簡易でOK)
- バリデーションは最低限(必須チェック、メール形式)
出力
- 必要なファイル構成を提示し、各ファイルのコードを全部出してください
例: app/page.tsxapp/layout.tsxapp/globals.cssdata/site.tscomponents/...
送信してからすぐにWebアプリを作り始めました

出来上がったサイトを見てみる

開発環境を作ってくれたようで、少し時間がかかってしまいましたがFVからなかなかのデザインができていました!
このエディタ上でブラウザを開けるのめちゃくちゃいいですね。。
ほんとにFigmaのようなUIで編集できる。。!なかなかの高クオリティ笑
小規模チームで開発するのに結構良さそうだと思いました
今回Reactで作成してもらいましたが、HTML 、CSSベースでもいいのでUIモックを作ってもらってUIの参考にするorクライアントへの先出イメージにすることでデザインの手戻りが減りそうですね
それと今回まだ試してないのですが、Fimgaのデザインファイルを.jsonで書き出してそのデザインシステムを使って作れるようです!
まとめ
Figma Makeと比較するとMakeもかなりデザイナーで非エンジニア勢には便利だな〜と思っていたのですが、Gitにpushしたコードを書き換えてそれをpullするのはできないようで。。
対してCursorはそれも可能なところを見ると、本格的に運用するのであれば非エンジニアの小規模チームの叩き台に使うのはめちゃ便利なのかも🧐

コメント