MENU

Cursorで爆速LPを作ってみる

img_01

少し前から気になっていた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 のダミー or https://images.unsplash.com/... など)。実在人物/症例に見える断定は避ける
  • デザイン:清潔感・上品・安心感。余白広め。スマホ最適化優先
  • アクセシビリティ:ボタン・見出し構造・フォームラベルなど基本対応
  • SEO:metadata、OGP、構造化データ(Clinic/LocalBusinessのJSON-LD)を最低限入れる
  • 計測:data-analytics 属性を主要CTAにつける(例:data-analytics="cta_hero_reserve"

LP構成(必須セクション)

  1. ヘッダー(ロゴ/電話/診療時間/予約CTA)
  2. Hero(キャッチ、サブ、3つの安心要素、主CTA×2「無料カウンセリング」「LINE相談」)
  3. 悩み訴求(例:毛穴/たるみ/ニキビ跡/くすみ/輪郭)
  4. 施術メニュー(カード形式:施術名、概要、ダウンタイム、価格、推奨回数、所要時間)
  5. 選ばれる理由(5つ:医師監修/症例数/個室/痛み配慮/明朗会計など)
  6. 症例紹介(ダミー)(Before/After風の枠だけ。注意書きも入れる)
  7. 医師・スタッフ(院長プロフィール、資格、コメント、カウンセラー紹介)
  8. 料金プラン(人気3プラン+比較表)
  9. ご来院の流れ(4ステップ)
  10. FAQ(アコーディオン)
  11. アクセス(地図埋め込み枠、住所、最寄り、営業時間)
  12. 予約フォーム(氏名/電話/メール/希望施術/希望日時/相談内容/同意チェック)
  13. フッター(利用規約/特商法風リンクはダミーで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.tsx
  • app/layout.tsx
  • app/globals.css
  • data/site.ts
  • components/...

送信してからすぐにWebアプリを作り始めました

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

開発環境を作ってくれたようで、少し時間がかかってしまいましたがFVからなかなかのデザインができていました!

このエディタ上でブラウザを開けるのめちゃくちゃいいですね。。

ほんとにFigmaのようなUIで編集できる。。!なかなかの高クオリティ笑

小規模チームで開発するのに結構良さそうだと思いました

今回Reactで作成してもらいましたが、HTML 、CSSベースでもいいのでUIモックを作ってもらってUIの参考にするorクライアントへの先出イメージにすることでデザインの手戻りが減りそうですね

それと今回まだ試してないのですが、Fimgaのデザインファイルを.jsonで書き出してそのデザインシステムを使って作れるようです!

まとめ

Figma Makeと比較するとMakeもかなりデザイナーで非エンジニア勢には便利だな〜と思っていたのですが、Gitにpushしたコードを書き換えてそれをpullするのはできないようで。。

対してCursorはそれも可能なところを見ると、本格的に運用するのであれば非エンジニアの小規模チームの叩き台に使うのはめちゃ便利なのかも🧐

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Reinaのアバター Reina UConnect 取締役 | デザイン戦略・DX担当

UConnect株式会社 取締役
UI/UXデザインを軸に、Web制作・LP制作・フロント実装まで対応しています。
情報設計や導線設計などの上流から入り、見た目だけでなく「ちゃんと伝わる・使いやすい」体験をつくることを大切にしています。

最近は、AIを活用した制作フローの設計や、デザインと開発をつなぐ実装寄りの領域にも取り組んでいます。

制作・開発のご相談について

以下のようなご相談を受けています。
・LP / Webサイト制作
・UI/UX設計
・Figmaでの画面設計・プロトタイピング
・デザイン改善提案
・フロントエンド実装
・AIを活用した制作フローのご相談

ご依頼・ご相談はこちらから↓
reina.koike@uconnect-tech.com

コメント

コメントする

CAPTCHA


目次