目次

この記事でわかること

FigmaリンクをCursorに貼るだけで動くHTMLを自動生成できる具体的な4ステップの手順、Cursorスキルを持つデザイナーの平均案件単価74万円という市場データ、そしてコーディング経験ゼロのデザイナーが今日から実務投入できる5つのハックがわかります。

FigmaのデザインデータをURLで貼り付けるだけで、AIが動くWebアプリのコードを自動生成するのがAIエディターCursorです。2026年7月現在、Cursor関連のフリーランス案件は1,322件公開され、平均単価は74万円に達します。この記事では、コードを書けないデザイナーがCursorをゼロから実務投入するまでの全手順を解説します。

この記事の結論

CursorはFigmaのデザインデータをURLで貼り付けるだけで、AIが動くWebアプリのコードを自動生成するツールです。コードを書けないデザイナーでも「自然言語での指示→AI実装→動作確認」という3ステップで、納期を大幅に短縮しながら高品質な成果物を納品できます。フリーランスの場合、Cursorスキルを案件プロフィールに明記するだけで、競合より平均単価74万円の案件市場に参入する足がかりが生まれます。

今日やるべき1つ

Cursorの公式サイトで無料プランを登録し、既存のFigmaファイルのリンクをCursorのチャット欄に貼り付けて「このデザイン通りにHTMLを生成してください」と送信してください(所要時間: 約20分)。

状況別ショートカット

状況読むべきセクション所要時間
Cursorが何かをまず知りたいCursorはデザイナーに必要な3つの理由3分
FigmaとCursorの連携手順を知りたいFigma×Cursorは4ステップで自動生成5分
自分の案件に向くか診断したいCursorデザイナー案件の適性を3分で診断3分
単価アップに直結するハックを知りたいCursorデザイナーは5つの仕組みで単価を上げる7分
料金プランを比較したいCursorの料金は3プランで用途が決まる4分

Cursorはデザイナーに必要な3つの理由

Cursorはコーディングスキルをもたない制作者でも活用できるツールです。2026年7月時点で案件数1,322件・平均単価74万円という市場規模は、エンジニアだけでなくデザイナーの参入を求めている数字です。

Cursorはコード不要で動くアプリを生成するツール

Cursorは「AIがコードを書いてくれる開発エディター」です。ユーザーは「○○してください」と日本語で指示するだけで、AIがアプリ開発の実装作業を肩代わりします。従来のエディターはコードを書く場所でしたが、Cursorは指示を受け取る場所へと役割が変わっています。デザイナーが普段使っているFigmaやXDで設計書を作る感覚で、動くWebアプリを生成できます。コードを読む必要も書く必要もなく、成果物のクオリティだけをコントロールすることに集中できます。

フリーランス案件市場でCursorスキルは平均単価74万円

freelance-job.comの調査(2026年7月)によると、Cursorスキルを要件とするフリーランス案件は1,322件公開されており、平均月額単価は74万円、最高単価は140万円に達します。同期間の一般的なWEB制作フリーランス案件の平均単価が40〜50万円帯であることを踏まえると、Cursorスキルの付加価値は月額で20〜30万円以上の差を生む可能性があります。この差は、スキル自体の希少性というより「AIを使って短納期・高品質を両立できる証明」として評価されているためと考えられます。フリーランスの案件プロフィールにCursorの活用実績を1行追記するだけで、応募単価の基準を引き上げる交渉材料になります。

Cursorはコードメンテと仕様理解の時間を削減する

デザイナーが既存のコードに機能を追加しようとすると、仕様の確認・コードの読解・変更箇所の特定という3段階の作業が発生します。この作業は1機能あたり数時間を消費することがあります。Cursorを使うと、既存コードをエディターに読み込ませた状態で「ここにカート機能を追加して」と指示するだけで、AIが仕様を解析して変更箇所を自動で特定・実装します。flxy.jpの事例(2026年)では「AIが手作業での実装やコード精査を肩代わりし、1案件あたりの稼働時間を圧縮」という効果が報告されています。複数案件を並行しているフリーランスにとって、この時間圧縮は追加案件を受注できる余裕に直結します。

CHECK

▶ 今すぐやること: freelance-job.comでキーワード「Cursor」を検索し、現在公開中の案件要件と自分のスキルセットを照合する(5分)

Q: CursorはMacとWindowsどちらでも使えますか?

A: どちらのOSでも動作します。公式サイトからインストーラーをダウンロードし、通常のアプリと同じ手順でインストールできます。

Q: Cursorを使うのにプログラミング経験は必要ですか?

A: 不要です。ただし、生成されたコードの動作を確認するためにブラウザの開発者ツールを使えると、問題の特定が早くなります。

Figma×Cursorは4ステップで自動生成

FigmaのデザインをCursorに渡す手順はシンプルで、慣れれば1画面のLP程度なら初日から生成できます。

ステップ1: FigmaでUIデザインを完成させる

CursorはFigmaのデザインデータを画像として読み取り、レイアウト・色・テキストを解析してHTMLとCSSに変換します。そのため、Figmaのデザインは「スペーシングが均一・カラースタイルが定義済み・テキストが確定している」状態に仕上げておくと、生成コードのズレが最小化されます。ラフ段階のデザインを渡すと、AIが余白やフォントサイズを補完するため、意図と異なる出力になることがあります。完成度が高いほど修正ラウンドの回数が減り、納品までの時間が短縮されます。ここでの作業は既存のFigmaワークフローと変わらないため、デザイナーにとって追加学習コストがほぼゼロという点が重要です。

ステップ2: FigmaのフレームリンクをコピーしてCursorに貼る

Figmaで該当フレームを右クリックし、「リンクをコピー」で取得したURLをCursorのチャット欄に貼り付けます。YouTubeのCursor×Claude解説(2025年)でも、FigmaリンクをCursorのチャットに貼るだけで自動生成が始まることが実演されています。チャットの指示文は「このデザイン通りにレスポンシブなHTMLとCSSを生成してください」の1文で十分です。より細かい指定(フォント名・ブレークポイント・フレームワーク)は追加で伝えると精度が上がります。なお、CursorがどのAIモデルと連携するかはプランや設定によって異なります。最新の対応モデルはCursor公式ドキュメントでご確認ください。

ステップ3: 自然言語で機能を追加・修正する

HTMLが生成されたあと、「ボタンをクリックしたらモーダルが出るようにしてください」「ナビゲーションを固定してください」のように、追加したい機能を日本語で指示します。note.comのデザイナー体験記では「コードを見ることなく、自然な言葉で機能を追加」できることが確認されています。コードを確認する必要はなく、ブラウザプレビューで動作を目視確認するだけで修正サイクルが回ります。

ステップ4: 完成コードをそのまま納品またはホスティングする

Cursorが生成したコードはそのままファイルとして保存でき、クライアントへのZIP納品、GitHub経由の引き渡し、Vercel/Netlifyへのデプロイのいずれにも対応します。デザイナーが「動くプロトタイプ」を提案資料として使うことも、そのままクライアントに使ってもらうプロダクトとして納品することも、同じファイルで対応できます。納品形式の選択肢が増えることで、提案時に「サンプルを実際に動かして確認できます」という一言が追加でき、受注率の向上につながります。Cursorを使ったポートフォリオの整備はフリーランスのポートフォリオ作成の考え方とも組み合わせられます。

CHECK

▶ 今すぐやること: 既存のFigmaプロジェクトから1フレームを選び、リンクをコピーしてCursorの無料版に貼り付けて生成テストを実行する(20分)

Q: Figmaのリンクはどのプランでコピーできますか?

A: Figmaの無料プランでも共有リンクは取得できます。「ファイルを表示できる人なら誰でも」の設定にしてリンクを生成してください。

Q: 生成されたコードをCursorで修正する際、コードを読む必要がありますか?

A: 基本的に不要です。変更したい箇所を日本語で指示するだけで、Cursorが該当コードを特定して書き換えます。ただし、意図通りに変更されたかどうかはブラウザでの目視確認が必要です。

Cursorデザイナー案件の適性を3分で診断

ツールの習得コストと期待できるリターンは、現在の案件スタイルによって大きく変わります。以下の質問で自分の状況を確認してください。

Q1: 現在、月に1件以上のWEB制作・デザイン案件を受注していますか?

Yesの場合 → Q2へ進む。Noの場合 → まずは既存のWEB制作スキルで実績を1件作ることを優先してください。Cursorは既存の制作フローを加速するツールであり、制作経験ゼロの状態では効果が最大化されません(Result D)。

Q2: FigmaまたはAdobe XDでワイヤーフレームやUIを設計した経験がありますか?

Yesの場合 → Q3へ進む。Noの場合 → FigmaはCursor連携の前提となるツールです。Figmaの無料プランで2〜3時間の基本操作を学んでからCursorに進むと、最短ルートで成果が出せます(Result C)。

Q3: 現在の案件で「納期がタイト」または「複数案件を並行している」という状況がありますか?

Yesの場合 → Result A(今すぐCursor導入の優先度が高い)。Noの場合 → Result B(次の案件更新時に導入を検討)。

Result A: 即時導入を推奨

納期の圧迫と並行案件の負荷はCursorが最も直接的に解決できる課題です。今月中に無料プランで1案件分の実装を試し、時間削減効果を確認してから有料プランへの移行を判断してください。

Result B: 次回更新時に導入

現在の案件負荷に余裕がある場合、Cursorの学習に集中できる機会があります。次の案件提案の前にポートフォリオとしてCursor生成のサンプルサイトを1つ作っておくと、提案時の差別化材料になります。

Result C: Figma習得を先行

Cursor×Figma連携の恩恵を最大化するには、Figmaで実際の案件レベルのデザインを作れることが前提です。Figmaの公式チュートリアル(無料・所要3〜5時間)を先に完了させてください。

Result D: 実績作りを優先

Cursorはスキルの証明ではなく生産性の証明です。まず1件の受注と納品実績を作ってから、Cursorを生産性向上のツールとして導入するサイクルが最も効果的です。フリーランス初心者の案件獲得に関する記事も参考になります。

CHECK

▶ 今すぐやること: Result Aに該当した場合、Cursorの公式サイトで無料プランを登録し、今月納品予定の案件のFigmaリンクを1つCursorに貼り付けてテストする(15分)

Q: Cursorはデザインツールではなくコードエディターですがデザイナーが使う理由はどこにありますか?

A: CursorはFigmaで作ったデザインを「コードへの翻訳作業」なしに動くアプリへ変換するためのインターフェースとして機能します。デザイナーにとっては「自分のデザインが即座に動く」体験を提供するツールです。

Q: 診断結果がResult Aでも、コードの知識が全くない場合は大丈夫ですか?

A: 問題ありません。Cursorはコードの知識なしでも動作します。クライアントへの納品物にコードのカスタマイズが必要な場合も、Cursorに「この部分を修正してほしい」と具体的に指示できれば対応できます。

Cursorデザイナーは5つの仕組みで単価を上げる

以下の5つのハックは、Cursorを案件投入したデザイナーの行動パターンをもとに選定しています。

ハック1: Figmaリンク貼り付けで初回コード生成を自動化する

【対象】: FigmaでUIを設計し、コーディング作業を外注または自分で実装しているデザイナー

【手順】:

FigmaでUIデザインを完成させ、スペーシングとカラースタイルを確定させます(所要時間: 既存の設計作業に追加コストなし)。完成したフレームのリンクをFigmaの共有機能からコピーし、Cursorのチャット欄に「このデザイン通りにレスポンシブなHTMLとCSSを生成してください」という指示文とともに貼り付けます(所要時間: 2分)。生成されたHTMLをブラウザで開き、デザインとのズレを確認します。ズレがある箇所は「ヘッダーの余白を20pxにしてください」のように日本語で修正指示を出します(所要時間: 1画面あたり15〜30分)。修正が完了したファイルをクライアントの希望する形式(ZIP・GitHub・Vercelデプロイ)で納品します(所要時間: 5〜10分)。

【コツと理由】: Cursorを使うと、エンジニアへの発注・コミュニケーション・修正依頼という3往復が不要になり、自分で完結できます。外注費として月3〜10万円が発生していたコーディング作業を内製化できるため、投資対効果を早期に回収できます。

【注意点】: FigmaリンクをCursorに渡す際、特定のフレームのリンクだけで十分です。ファイル全体を共有すると無関係な画面情報がAIに渡り、生成精度が下がる場合があります。

ハック2: .cursorrulesで指示書を作り、毎回のプロンプト入力を削減する

【対象】: 同じクライアントの案件を複数回または継続して受けているデザイナー

【手順】:

プロジェクトのルートフォルダに.cursorrulesというファイル名でテキストファイルを作成します(所要時間: 2分)。そのファイルに「このプロジェクトはBootstrap 5を使用します。フォントはNoto Sans JPを使います。カラーコードは#3A6BD7です」のようにプロジェクト固有のルールをテキストで記述します(所要時間: 10〜15分、初回のみ)。以降のCursorへの指示は「フッターを追加してください」のような短文だけで済むようになります(所要時間: ゼロ、自動化)。案件ごとの.cursorrulesをテンプレートとして保存し、類似案件の新規開始時に流用します(所要時間: 1〜2分)。

【コツと理由】: .cursorrulesに共通ルールを一括定義すると、プロンプトのブレによるコードの不一致を防げます。.cursorrulesはCursorがセッション開始時に読み込む設定ファイルとして機能するため、追加の指示なしに一貫したコードスタイルを維持しやすくなります。同一クライアントの案件を2件目以降に受注する際、セットアップにかかる時間を短縮できます。

【注意点】: .cursorrulesに記述するルールが多すぎると、AIが優先順位を誤判断してルールを無視するケースがあります。1ファイルあたり10〜15項目以内に絞るのが適切です。

ハック3: 機能設計書をマークダウンで渡して、実装単位を明確化する

【対象】: 複数画面や複数機能を持つWEBアプリを1人で制作・納品しているデザイナー

【手順】:

実装したい機能を「ユーザーがボタンをクリックすると、モーダルが表示される。モーダルには閉じるボタンとフォームが含まれる」のように文章でマークダウンファイル(.md)に記述します(所要時間: 機能1つあたり5〜10分)。そのマークダウンファイルをCursorのチャットに「この仕様書通りに実装してください」とともに添付します(所要時間: 1分)。生成されたコードを動作確認し、仕様書と相違がある箇所だけを「モーダルの幅が仕様と違います。320pxにしてください」と修正指示します(所要時間: 5〜15分)。完成した機能をドキュメントとしてCursorに「この機能の仕様をmarkdownで整理してください」と依頼し、将来のメンテ用ドキュメントを自動生成します(所要時間: 3分)。

【コツと理由】: 機能設計書として仕様を文書化してからCursorに渡すと、修正ラウンドの回数が減る傾向があります。CursorのAIは曖昧な指示を「最も一般的な実装パターン」で補完する傾向があり、それがクライアントの意図と一致しないことがあります。仕様を文書化することで、AIの補完が発生する余地が埋まり、意図通りの出力が得られやすくなります。

【注意点】: マークダウンファイルの行数が長すぎると、Cursorが内容を部分的にしか参照しないケースがあります。1機能1ファイルを目安にしてください。

ハック4: 完成後にCursorでドキュメント化を依頼し、保守費用を月額で請求する

【対象】: 納品後のサイト保守・メンテナンス契約をクライアントに提案したいデザイナー

【手順】:

Cursorで完成したコードをエディターで開いた状態で「このコードベースの機能一覧と変更手順をmarkdownで整理してください」と指示します(所要時間: 3〜5分)。生成されたドキュメントを確認し、クライアントに「こちらの保守マニュアルに基づいて月次メンテナンスを提供します」と提案資料として使います(所要時間: 10〜15分)。クライアントが将来の修正を依頼してきた際に、同じドキュメントをCursorに読み込ませて「ナビゲーションにリンクを1つ追加してください」と指示し、対応します(所要時間: 5〜10分/修正1件)。月額保守契約として提案し、Cursorの作業効率で1クライアントあたりの工数を圧縮して対応可能にします(所要時間: 提案書作成30分のみ)。

【コツと理由】: Cursorで生成したコードは自分でもドキュメント化を短時間で依頼できるため、月額保守契約への転換コストが小さくなります。Cursorは既存コードの全体構造を把握した状態でドキュメントを生成するため、通常は時間がかかるコードリーディングとドキュメント作成を効率化できます。月額保守契約が複数件積み上がると、安定収入の確保につながります。フリーランスの月収安定化の観点からも継続案件の確保は重要です。

【注意点】: Cursorが自動生成するドキュメントはコードの構造は正確ですが、「クライアントが求める変更要件」の判断は含まれません。保守契約の提案時に「コードの変更はできますが、デザイン方針の変更はご要望を改めてお聞きします」という範囲の明確化を事前に行ってください。

ハック5: Cursor案件プロフィールに「生成実績サンプル」を追加して応募単価を上げる

【対象】: フリーランスエージェントやクラウドソーシングで案件に応募しているデザイナー

【手順】:

過去のFigmaデザインファイルから1つを選び、Cursorで動くHTMLに変換してGitHub PagesまたはVercelに無料デプロイします(所要時間: 1〜2時間)。デプロイしたURLをポートフォリオページに「Cursor×Figmaで制作したレスポンシブLP(Cursor使用)」として追記します(所要時間: 10分)。FLEXY・レバテック・Workshipなどの案件プロフィールの「保有スキル」欄にCursorを追記し、制作サンプルのURLをリンクします(所要時間: 15〜20分)。案件への応募文に「Cursor×Figmaで初回デモを48時間以内に提出できます」という一文を追加します(所要時間: 2〜3分/案件)。

【コツと理由】: クライアントが不安に感じる点は「このデザイナーに頼んで本当に動くものが出てくるか」という実装リスクです。「48時間以内に動くデモを提出できる」という具体的なプロセスを提示することが、クライアントの発注判断を加速させます。Cursorによる初回生成は数時間で完了することが多いため、「48時間以内のデモ提出」を追加コストなしに実現しやすくなります。フリーランスの単価交渉メールでも実績の具体性は交渉の柱になります。

【注意点】: 実際に動くURLを1つも提示せずにスキルを主張しても、クライアントの信頼を得る効果はほぼゼロです。スキル名を書く前に、必ずデプロイ済みのサンプルURLを1つ用意してください。

CHECK

▶ 今すぐやること: 過去のFigmaデザインから1フレームを選んでCursorに貼り付け、生成されたHTMLをVercel(無料)にデプロイして、ポートフォリオに追記する(90分)

Q: Vercelへのデプロイにはプログラミング知識が必要ですか?

A: GitHubアカウントとVercelアカウントを連携し、Cursorが生成したファイルをドラッグ&ドロップするだけでデプロイできます。コマンドライン操作は不要です。

Q: FLEXY以外にCursor案件を掲載しているエージェントはどこですか?

A: レバテックフリーランス、Workship、ランサーズプロ、クラウドテックなどに掲載されています。「Cursor」「AIエディタ」などのキーワードで案件検索すると該当案件を絞り込めます。

Cursorの料金は3プランで用途が決まる

フリーランスの場合、まず無料プランで実際の案件に試してみることが最も確実な判断方法です。

無料プランは月50回のAI生成が上限

無料プランでは月50回のAIとのやり取りが利用できます。1案件あたりの平均やり取り回数を10〜20回とすると、月2〜5件のプロジェクトに対応できる計算になります。試用目的や単発案件での確認には十分な範囲ですが、継続案件や複数案件の並行には回数制限が実務上のボトルネックになります。freelance-meikan.comの料金解説(2026年)では、無料プランから有料プランへの移行タイミングとして「月の前半でリセット待ちが発生し始めたら移行のサイン」と説明されています。無料プランの具体的な制限内容は変更される場合があるため、最新情報はCursor公式サイトでご確認ください。

個人有料プランは月額20ドルで制限が大幅に緩和

個人有料プランでは月のAI生成回数が大幅に増加し、高性能モデルも選択できます。月額20ドル(2026年7月時点で約3,000円)という費用を案件単価74万円と比較すると、投資回収は1案件のごく一部のコストです。フリーランスとして月1件以上のCursor関連案件を受注できる状況であれば、個人有料プランは費用対効果で有力な選択肢です。有料プランに移行すると.cursorrulesの読み込み精度も向上するため、ハック2の効果も同時に高まります。最新の仕様はCursor公式サイトでご確認ください。ツールへの投資判断はフリーランスの開業資金の考え方と同様に、回収見通しで判断するとブレにくくなります。

法人プランは3名以上のチームで段階導入が推奨

法人プランは1ユーザーあたり月額40ドルで、管理コンソールと使用状況のモニタリングが利用できます。フリーランスで外注パートナーと協働している場合、2〜3名のチームで法人プランを共有することで1ユーザーあたりのコストを抑えながら高度な機能を利用できます。導入時は少人数で試して効果を確認し、段階的に広げる進め方が投資リスクを最小化します。1〜2名での利用であれば、個人有料プランを各自で契約する方がコストを抑えられます。

CHECK

▶ 今すぐやること: Cursor公式サイトで無料プランを登録し、今月中に1案件分の生成テストを完了させて、月の後半に制限到達するかどうかを確認する(登録5分)

Q: 個人有料プランの月額は日本円で支払えますか?

A: クレジットカード決済のみ対応しており、請求はUSDで行われます。為替レートによって円換算額は変動しますが、2026年7月時点で月額約3,000円前後が目安です。

Q: 法人プランと個人プランでAIの性能に差がありますか?

A: AIモデル自体の性能は同じです。法人プランの主な差分は管理機能とサポート優先度であり、個人の制作作業での品質差はほぼありません。

Cursorデザイナーは3ステップで単価を上げる

FigmaのリンクをCursorに貼り付けるだけで動くコードを生成できる現在、コードを書けないことはデザイナーにとって大きな制約ではありません。Cursorを使うことで「デザイン設計→自動コード生成→納品」という3ステップが確立でき、外注費の削減・納期短縮・案件単価の引き上げを同時に実現できます。2026年7月時点で案件1,322件・平均単価74万円という市場は、Cursorスキルを持つデザイナーを積極的に求めています。

今日から始める最初の一歩は、既存のFigmaデザインを1フレームだけCursorの無料版に貼り付けることです。20分の試用で「自分にも使える」という確信が得られれば、残りのハックはすべてその延長線上にあります。Cursorを活用するデザイナーとそうでないデザイナーの単価差は、2026年7月時点の案件データにおいて月額20〜30万円以上の差として数字に出ています。

状況次の一歩所要時間
まだCursorを使っていない無料プランに登録してFigmaリンクをテスト20分
無料版を試したことがある現在の案件に実際に使い、生成サンプルをVercelにデプロイ1〜2時間
Cursor案件を受注したいポートフォリオにサンプルURLを追記してFLEXYに応募2〜3時間
継続案件で活用したい個人有料プランに移行して.cursorrulesを設定30分

Cursorデザイナーに関するよくある質問

Q: デザイナーがCursorを使うのに必要な最低限のスキルは何ですか?

A: Figmaで画面デザインを作れること、ブラウザで動作確認できること、の2点が最低限です。コードの読み書きは不要です。

Q: CursorはFigma以外のデザインツールとも連携できますか?

A: Adobe XDやSketchのデザインをPNG/JPEGとしてエクスポートし、Cursorのチャットに画像として添付することでも同様の生成が可能です。ただし、Figmaのリンク連携と比較すると精度が若干落ちる場合があります。

Q: Cursorで生成したコードの著作権はどちらに帰属しますか?

A: Cursorの利用規約では、ユーザーが生成した出力コードはユーザーに帰属するとされています。著作権の取り扱いはクライアントとの契約内容によって変わるため、納品前に契約書を確認してください。著作権とフリーランスの実務ルールも参照すると判断の基準が整理できます。

Q: Cursor案件で実際に求められるスキルレベルはどの程度ですか?

A: flxy.jpの案件情報(2026年)によると、週4〜5日常駐型の案件ではCursorを使った開発経験が1〜3件あれば応募できる案件が多数あります。高単価案件では.cursorrulesの設計経験や複数フレームワークへの対応実績が求められます。

Q: 映像制作やアニメーション分野のデザイナーにもCursorは使えますか?

A: モーションデザインや映像そのものの生成にはCursorは対応していません。ただし、映像制作の受発注管理ページ・ポートフォリオサイト・クライアント向け進捗確認ツールなど、WEB側のコンポーネントをCursorで制作し、映像制作サービス全体の付加価値を高める使い方は有効です。

【出典・参照元】

freelance-job.com|Cursorのフリーランス案件・求人(2026年07月現在)

flxy.jp|Cursorとは?他のツールとの違いやフリーランス案件で求められるスキル

note.com|デザイナーでも簡単!CursorとFigmaで始めるコードを書かずにWebアプリ

freelance-meikan.com|Cursor料金完全ガイド|法人プランと他ツール比較を解説

YouTube|【最強連携】デザイナーこそ使うべき。Cursor × Claude

Cursor公式サイト

Cursor公式ドキュメント