本ページはプロモーション（広告）が含まれています

当記事は過去に投稿した記事のアップデート版です。

この記事のゴール
事前準備（最短）
画像の用意と渡し方のコツ
最小のプロンプト（まずは骨格）
実例1：LPのヒーローセクション（HTML/Tailwind）
実例2：Reactコンポーネント化（Card）
実例3：フォーム（アクセシブルな最小構成）
画像→コードの精度を上げるプロンプト集
差分編集：既存コードに“画像どおり”を当て込む
マルチ画像でレスポンシブを確定させる
仕上げチェック（最低限）
よくあるつまずきと対処
片付けまでを自動化する小ワザ
付録：最小スターター（Next.js + Tailwind）
まとめ
参考リンク（ブックマーク用）

この記事のゴール

スクリーンショットや手描きのUI画像を、Cursorに理解させてHTML/CSS/Reactを生成させます。
生成後は、差分編集（既存コードへの当て込み）とアクセシビリティの仕上げまで行きます。
すべてCursor内で完結させ、外部ツール導入は任意にします。迷いを減らすのが目的です。

参考リンク

Cursor（公式）：https://cursor.com/
Cursor Docs（基本操作）：https://docs.cursor.com/

事前準備（最短）

Cursorをインストールしてサインインします。
右下（またはサイド）のChat/Composerパネルを開けるようにしておきます。
画像（PNG/JPEG/WebP）をドラッグ＆ドロップできる状態にします。
プロジェクトを作成し、src/やapp/などの生成先フォルダを用意します。

※ モデルや料金の設定はここでは触れません。まずは“動く体験”を作ることを優先します。

参考リンク

Next.js（任意）：https://nextjs.org/docs/app
Tailwind CSS（任意）：https://tailwindcss.com/docs

画像の用意と渡し方のコツ

解像度はテキストが読める程度にします（横1200px以上が安心です）。
不要情報（広告・個人情報）はモザイクやトリミングで隠します。
重要箇所（色・余白・フォント感）は矢印や枠で強調すると理解が上がります。
PC版とモバイル版の2枚を渡すと、レスポンシブ指定が通りやすいです。

渡し方：CursorのChatに画像をドラッグ＆ドロップ→送信→続けてプロンプトで要求を書きます。

参考リンク

HTML要素の意味（MDN）：https://developer.mozilla.org/ja/docs/Web/HTML/Element

最小のプロンプト（まずは骨格）

1枚の画像を落として、次のように指示します。

「この画像をもとに、セマンティックなHTMLとTailwind CSSで静的なレイアウトを作ってください。クラス名は簡潔にし、<main>は1つだけ。画像はプレースホルダでOKです。生成したファイルをapp/page.tsx（またはindex.html）として保存してください。」

ポイントは、曖昧さを減らすことです。「静的でOK」「どのファイルに保存か」「<main>は1つ」など、小さな条件を添えると迷走が減ります。

参考リンク

HTMLのセマンティクス（web.dev）：https://web.dev/learn/html/semantic-html/

実例1：LPのヒーローセクション（HTML/Tailwind）

プロンプト例

「このヒーロー画像を参考に、app/page.tsxにHeroセクションを作成してください。**<header>→<main>→<footer>**の順序を守り、<h1>は1ページ1つにします。Tailwindで余白・タイポを再現してください。ボタンは2つ（Primary/Secondary）。注釈とクラスの意図をコメントで書いてください。」

生成後に頼むこと

「クラスが長い箇所を@applyで整理してください（globals.cssを利用）。」
「モバイル幅（sm未満）では縦積み、mdで2カラムにしてください。」

よくある失敗と直し方

余白が“なんとなく”になる → 「gap-やspace-を数値で指定」と伝えます。
画像比率が崩れる → <img>にclass="aspect-[16/9] object-cover"を指定します。

参考リンク

Tailwind Layout：https://tailwindcss.com/docs/utility-first

実例2：Reactコンポーネント化（Card）

プロンプト例

「このダッシュボードのカード部分だけを、components/StatCard.tsxとして独立したReactコンポーネントにしてください。Propsはtitle: string, value: string | number, trend?: 'up' | 'down'。アイコンはプレースホルダでOKです。**aria-label**を適切に付けてください。」

差分指示（生成後）

「色指定をCSS変数に置き換え、globals.cssに--brandなどの変数を追加してください。」

サンプル（抜粋）

export function StatCard({ title, value, trend }: Props) {
  return (
    <section aria-label={`${title}の統計`} className="rounded-2xl border p-4 shadow-sm">
      <h3 className="text-sm text-neutral-500">{title}</h3>
      <div className="mt-1 text-2xl font-semibold">{value}</div>
      {trend && (
        <p className="mt-1 text-xs" aria-live="polite">
          {trend === 'up' ? '前週比 +12%' : '前週比 -8%'}
        </p>
      )}
    </section>
  );
}

参考リンク

React（公式）：https://react.dev/
ARIA実践：https://www.w3.org/WAI/ARIA/apg/

実例3：フォーム（アクセシブルな最小構成）

プロンプト例

「添付画像のフォームを**components/SignupForm.tsxで実装してください。<label for>とid**を対応させ、エラーメッセージはaria-describedbyで関連付けます。requiredとキーボード操作に配慮してください。」

生成後の追加指示

「バリデーションの擬似状態（invalid時の枠色など）をdata-*属性で切り替えられるようにしてください。」
「スクリーンリーダー向けテキストをsr-onlyで追加してください。」

参考リンク

フォームのアクセシビリティ（web.dev）：https://web.dev/learn/forms/

画像→コードの精度を上げるプロンプト集

色と余白を固定：「色は画像に忠実、余白は8px刻みで再現してください。」
フォントの代替：「このフォントは近いWebフォント（例：Inter）で置き換えてください。」
レスポンシブ：「sm/md/lgの各幅で見出しサイズとカラム数を指定してください。」
命名ルール：「クラス名・コンポーネント名はBEM/パスカルケースで統一してください。」
保存先の明記：「生成ファイルをこのパスに保存してください：app/(marketing)/page.tsx。」

参考リンク

Tailwind Responsive：https://tailwindcss.com/docs/responsive-design

差分編集：既存コードに“画像どおり”を当て込む

画像→コードの本領は差分編集です。既存ファイルを開いた状態で、画像を添付して次のように頼みます。

「この画像にこのファイルを寄せてください。**差分パッチ（diff）**だけを出力し、不要なクラスの削除も含めてください。」

さらに、部分選択→右クリック→Ask（環境によって表記差あり）で、選択範囲だけを対象に調整できます。長いファイルでも事故が起きにくいです。

参考リンク

Gitの差分（学習用）：https://git-scm.com/docs/diff

マルチ画像でレスポンシブを確定させる

PC版・モバイル版・ダークモードなど、複数の画像を同一スレッドで渡します。プロンプトはこうです。

「Desktop.png / Mobile.pngのどちらにも合うレイアウトにしてください。mdで2カラム、smで1カラム。ダークモードでは背景を--bg-elevatedへ切り替えます。」

参考リンク

prefers-color-scheme（MDN）：https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

仕上げチェック（最低限）

セマンティクス：<main>は1つ、見出し階層はh1→h2→h3です。
フォーカス：キーボードで全操作が可能です。
画像：装飾画像には空のalt、意味のある画像には説明文を入れます。
パフォーマンス最小手当：画像サイズの最適化、不要スクリプトの排除を確認します。

参考リンク

画像の代替テキスト（MDN）：https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#alt

よくあるつまずきと対処

色が違う：画像の上に色コードの注釈（例：#0EA5E9）を追記して再実行します。
余白が不安定：paddingとgapを数値で列挙して指定します。
勝手なライブラリ追加：プロンプトに「新規ライブラリは追加しない」と明記します。
長すぎるクラス：@applyで集約、または小さなコンポーネントに分割させます。
保存先がズレる：必ず相対パスを明記します（例：./app/page.tsx）。

片付けまでを自動化する小ワザ

「生成→保存→プレビュー→微修正」の流れを1トピック＝1スレッドで回します。
失敗したら、前のメッセージを引用して「ここからやり直して」と短く指示します。
同じUIパターンは、成功したプロンプトをテンプレ化して再利用します。

付録：最小スターター（Next.js + Tailwind）

app/layout.tsx（抜粋）

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body className="min-h-dvh bg-white text-neutral-900 antialiased">{children}</body>
    </html>
  );
}

app/page.tsx（Heroセクションの雛形）

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl px-4 py-16">
      <section aria-labelledby="hero-title" className="grid gap-8 md:grid-cols-2">
        <div>
          <h1 id="hero-title" className="text-3xl font-bold md:text-5xl">見出しが入ります</h1>
          <p className="mt-4 text-base md:text-lg">画像を参考に、ここに短い説明文を入れてください。</p>
          <div className="mt-6 flex gap-3">
            <a className="rounded-xl bg-black px-5 py-3 text-white" href="#">はじめる</a>
            <a className="rounded-xl border px-5 py-3" href="#">詳しく見る</a>
          </div>
        </div>
        <div className="aspect-[16/9] rounded-2xl bg-neutral-100" aria-hidden />
      </section>
    </main>
  );
}

この雛形を画像→コードで肉付けしていくだけで、迷いが減ります。

まとめ

Cursorに画像を落として、短く具体的に頼む——これだけで、静止画は十分に“動くUIの材料”になります。まずは骨格 → 反復。そして差分編集で寄せる。難しい設定より、一手ずつの具体化が完成への近道です。今日のスクショを投げて、最初の1ファイルを作ってみてください。思ったよりずっと、速いです。