Figmaでプロトタイプを作る方法【個人開発者向けUI/UX実践ガイド】

個人開発者にプロトタイプが必要な理由【データで証明】

プロトタイプなしの開発が失敗しやすい3つの理由

「プロトタイプなんて面倒だから、さっさとコードを書きたい」—— 気持ちはわかりますが、これが個人開発で最も多い失敗パターンです。プロトタイプを飛ばしていきなり実装に入ると、以下の3つの問題が発生します。

• 手戻りの爆発：画面遷移やレイアウトの問題に実装後に気づき、コードの大幅な書き直しが発生する。 ユーザーテストを行ったプロトタイプはエラーが33%少ないというデータがあり、事前の検証がいかに重要かがわかります
• 完成像が見えずモチベーション低下：コードだけで進めると「今どこまでできているのか」が把握しにくく、 個人開発者が最も挫折しやすい「中盤の停滞期」に陥りやすい
• ユーザー視点の欠如：技術的に動くものを作ることに集中するあまり、 ユーザーの導線や使い勝手の検証が後回しになり、リリース後に「使いにくい」と指摘される

プロトタイプがもたらす具体的なメリット（数値で比較）

プロトタイピングの効果を、ShiftB受講生のデータと業界調査の両面から見てみましょう。

特に個人開発者にとって致命的なのはリリース到達率の差です。 ShiftBの受講生データでは、プロトタイプを作った受講生の78%がリリースまで到達している一方、 作らなかった受講生は34%にとどまっています。 プロトタイプは「設計図」であると同時に、モチベーション維持の道標でもあるのです。

なぜFigmaが個人開発者に最適なのか

プロトタイピングツールは多数ありますが、個人開発者にはFigmaが圧倒的に最適です。その理由を他ツールと比較してみましょう。

2026年現在、Adobe XDは新規ユーザーの受付を終了しており、 SketchはMac限定。無料で使えて、ブラウザだけで動き、 AI機能まで搭載しているFigmaは、個人開発者にとって事実上の一択です。 僕自身もShiftBのプロダクト開発では100%Figmaを使っています。

Figmaの基本 — アカウント作成からUI構築まで

ステップ1：Figmaアカウントの作成

Figmaはブラウザだけで始められるのが最大の強みです。以下の手順でアカウントを作成しましょう。

1. figma.comにアクセスし、「Get started for free」をクリック
2. Googleアカウントまたはメールアドレスで無料アカウントを作成
3. アカウント作成後、チーム名を入力（個人開発なら自分の名前やプロジェクト名でOK）
4. 「Design File」を新規作成して、最初のキャンバスを開く

デスクトップアプリも無料でダウンロード可能ですが、 最初はブラウザ版で十分です。デスクトップアプリはオフライン作業やフォント読み込みが 必要になったタイミングで導入すればOKです。

ステップ2：Figmaの画面構成を理解する

Figmaのインターフェースは大きく5つのエリアに分かれています。

• ツールバー（上部）：フレーム、シェイプ、テキスト、ペンなどの描画ツールが並ぶ。 最もよく使うのはフレームツール（ショートカット：F）
• レイヤーパネル（左側）：作成したすべてのオブジェクトがツリー構造で表示される。 レイヤーの順序がそのまま重なり順（z-index）になる
• キャンバス（中央）：実際にデザインを配置する無限の作業空間。 スクロールやズームで自由に移動できる
• プロパティパネル（右側）：選択中のオブジェクトのサイズ、色、フォント、角丸などを調整する。 CSSのプロパティに対応する項目が多く、エンジニアには直感的
• プロトタイプタブ（右側・切替）：Designタブから切り替えると表示される。 画面遷移やインタラクションの設定を行う

ステップ3：フレームとAuto Layoutの基本

Figmaで最初に理解すべき最重要概念がフレーム（Frame）とAuto Layoutです。

フレームはHTMLの<div>に相当するコンテナです。 すべてのデザイン要素はフレームの中に配置します。 ショートカットFを押すと、右側パネルにiPhone、iPad、 デスクトップなど各デバイスのプリセットサイズが表示されます。 個人開発のWebアプリなら「Desktop」（1440 x 1024）を選ぶのがおすすめです。

Auto LayoutはCSSのFlexboxに相当する機能で、要素を縦横に自動整列してくれます。 ショートカットはShift + A。 フレーム内の要素を選択してShift + Aを押すだけで、 要素が自動的に整列されます。paddingやgapもCSSと同じ感覚で指定できるため、 エンジニアにとっては非常に馴染みやすい機能です。

ステップ4：コンポーネントの作成と再利用

繰り返し使うUI要素（ボタン、カード、ナビゲーションなど）はコンポーネントとして登録しましょう。 Reactのコンポーネントと同じ概念で、一箇所を修正すると すべてのインスタンス（使い回し先）に変更が反映されます。

コンポーネントの作り方は簡単です。要素を選択してCmd + Option + K（Macの場合）を押すだけ。 レイヤーパネルのアイコンが菱形に変わり、コンポーネント化されたことが確認できます。

コンポーネントにはVariants（バリアント）機能もあり、 ボタンのDefault/Hover/Disabled状態や、 サイズのSmall/Medium/Largeなどのバリエーションを1つのコンポーネントにまとめられます。 これにより、デザインの一貫性を保ちながら効率的に作業できます。

Figmaの料金プラン比較【2026年最新】

4つのプランの全体比較

Figmaは2025年3月に料金体系を刷新しました。 2026年4月現在の最新プランを比較します。 個人開発者に関係するのは主にStarterプランとProfessionalプランの2つです。

個人開発者はどのプランを選ぶべきか

結論から言うと、ほとんどの個人開発者はStarterプラン（無料）で十分です。3ファイルの制限はありますが、1つのプロジェクトに1ファイルを使えば 同時に3プロジェクトまで対応できます。 古いプロジェクトのファイルを削除またはアーカイブすれば、新しいファイルも作成可能です。

ただし、以下のケースではProfessionalプラン（年払い$12/月、約1,800円/月）への アップグレードを検討してください。

• 4つ以上のプロジェクトを同時進行する場合
• デザインシステム（チームライブラリ）を活用して複数プロジェクト間でコンポーネントを共有したい場合
• Figma AI / Makeをフル活用して、 AIによるデザイン生成やプロトタイプ自動作成を使いたい場合
• Dev ModeでCSSやSwiftUIのコードを直接確認したい場合

僕の場合はProfessionalプランを使っていますが、 個人開発を始めたばかりの受講生には「まずStarterで十分。 ファイル数の制限がストレスになったら課金する」とアドバイスしています。

年払いと月払いの違い

Professionalプランは年払いにすると月額$12（月払いだと$15）で、約20%の割引になります。 個人開発者で半年以上使う予定があるなら年払いが圧倒的にお得です。 ただし、まずは1〜2ヶ月間Starterプランで使い込んでから判断しても遅くありません。

プロトタイプ制作の実践ステップ【ワイヤーフレーム→デザイン→インタラクション】

Phase 1：ローファイワイヤーフレームで全体像を固める

プロトタイプ制作の最初のステップは、ローファイ（低精度）ワイヤーフレームです。 色やフォントは一切気にせず、グレースケールの四角と線だけで画面構成を設計します。

具体的な手順は以下のとおりです。

1. フレームツール（Fキー）で画面サイズのフレームを作成 （Webアプリなら1440 x 1024が標準）
2. 矩形ツール（Rキー）でヘッダー、サイドバー、 メインコンテンツ、フッターなどの大まかなエリアを配置
3. テキストツール（Tキー）で各エリアにラベルを記入 （「ナビゲーション」「メインコンテンツ」「CTAボタン」など）
4. 主要画面（ログイン、ダッシュボード、設定など）を5〜8画面程度作成する

ポイントは1画面あたり15〜20分以内で仕上げること。 ローファイワイヤーフレームの目的は「画面の構成と遷移を整理する」ことであり、 見た目を美しくすることではありません。 Figmaの無料ワイヤーフレームキット（Communityで「wireframe kit」と検索）を 活用すると、さらに時短できます。

Phase 2：ハイファイデザインで見た目を整える

ワイヤーフレームで構成が固まったら、ハイファイ（高精度）デザインに進みます。 ここで色、フォント、画像、アイコンを追加していきます。

デザインが苦手なエンジニアでも実践できるコツがあります。

• カラーパレットは3色以内：メインカラー1色 + サブカラー1色 + アクセントカラー1色で十分。 Figmaの「Styles」機能で色を登録しておくと、 あとからワンクリックで全画面の色を変更できる
• フォントは1〜2種類：日本語はNoto Sans JP、英語はInterの組み合わせが安全。 Google Fontsから無料で使える
• 8の倍数ルール：余白やサイズはすべて8の倍数（8px, 16px, 24px, 32px, 48px）で統一すると 自然なリズムが生まれる。Figmaのグリッド設定を8pxに設定しておくと便利
• 既存のUIキットを活用：Figma Communityには無料のUIキットが大量にある。 Material Design 3やshadcn/uiのFigmaキットを使えば、 プロレベルのデザインをゼロから作る必要がなくなる

Phase 3：インタラクションとアニメーションの設定

デザインが完成したら、いよいよプロトタイプ機能でインタラクションを追加します。 右側パネルの「Prototype」タブに切り替えてください。

インタラクションの設定は、以下の3要素で構成されます。

• トリガー（Trigger）：ユーザーの操作。On Click（クリック時）、While Hovering（ホバー時）、 After Delay（一定時間後）、While Pressing（押下中）など
• アクション（Action）：操作後の動作。Navigate to（画面遷移）、Change to（コンポーネントの状態変更）、 Open Overlay（オーバーレイ表示）、Scroll to（特定位置へスクロール）など
• アニメーション（Animation）：遷移時の動き。Instant（即時）、Dissolve（フェード）、 Smart Animate（自動アニメーション）、Move In/Out（スライド）など

個人開発のプロトタイプで最低限設定すべきインタラクションは以下の4つです。

1. ページ間の遷移：ナビゲーションメニューやボタンをクリックして別の画面に移動
2. ボタンのホバー状態：While Hovering + Change to で、ボタンにマウスを乗せたときの色変化を再現
3. モーダルの表示：On Click + Open Overlay で、確認ダイアログやフォームのモーダル表示
4. フロー全体の接続：ログイン→ダッシュボード→詳細画面→設定のような主要導線をつなぐ

Phase 4：Smart Animateで動きに命を吹き込む

FigmaのSmart Animateは、2つのフレーム間で同じ名前のレイヤーを検出し、 位置・サイズ・回転・透明度・色の変化を自動的にアニメーションしてくれる機能です。

たとえば、カードの「折りたたみ状態」と「展開状態」の2つのVariantを作り、 Change to + Smart Animateを設定すると、 アコーディオンの開閉アニメーションが自動生成されます。 コードでいうところのCSS Transitionに近い挙動を、コードなしで実現できるのです。

Smart Animateを効果的に使うコツは、遷移元と遷移先のレイヤー名を完全に一致させることです。 レイヤー名が異なると、Figmaは同じ要素として認識できず、 単なるディゾルブ（フェード）になってしまいます。

Phase 5：Variablesで本格的なインタラクティブプロトタイプを作る

2026年のFigmaプロトタイピングで最も注目すべき機能がVariables（変数）です。 変数を使うと、プロトタイプに実際のロジックを組み込めます。

たとえば、以下のようなことが可能です。

• ダークモード切り替え：Boolean変数でモードの状態を管理し、ボタンクリックで切り替え
• カウンターの増減：Number変数でカートの商品数を管理し、+/-ボタンで操作
• 条件分岐：「ログイン済みならダッシュボード、未ログインならログイン画面」 のような条件付き遷移
• テキストの動的変更：String変数でユーザー名や入力値を画面間で引き継ぎ

これにより、プロトタイプが「画面の紙芝居」から「実際に動くデモアプリ」に進化します。 個人開発では、ユーザーテストの際にリアルな操作感を体験してもらえるため、 フィードバックの質が格段に上がります。

個人開発者が使うべきFigmaのショートカットとプラグイン10選

作業効率を3倍にするショートカットキー10選

Figmaのショートカットを覚えるだけで、 作業効率が体感で2〜3倍になります。 個人開発者が特に覚えるべきショートカットを厳選しました。

特にShift + A（Auto Layout）とF（フレーム）は最も頻繁に使います。 この2つだけでも覚えておけば、マウス操作の回数が大幅に減ります。 ショートカットの全リストはCtrl + Shift + ?でいつでも確認できるので、作業中に忘れたらすぐ開きましょう。

個人開発者に必須のFigmaプラグイン10選

Figmaのプラグインは、Community（コミュニティ）から ワンクリックでインストールできます。 個人開発者が特に恩恵を受けるプラグインを厳選しました。

特にFigma to CodeとAnimaは、 個人開発者にとって「デザイン→コード」の橋渡しを劇的に効率化してくれます。 Figma to CodeはTailwind CSSのクラス名を自動生成してくれるため、 Next.js + Tailwindで開発している個人開発者には特に相性が抜群です。

プラグインのインストール方法

プラグインのインストールは非常に簡単です。

1. Figma上部メニューの「Resources」アイコン（グリッドマーク）をクリック
2. 「Plugins」タブを選択し、プラグイン名を検索
3. 「Run」で即時実行、または「Save」でお気に入り登録

よく使うプラグインはお気に入りに登録しておくと、 右クリック→「Plugins」→「Saved plugins」からすぐにアクセスできます。

Figma → コード実装の効率的なワークフロー【AI駆動開発との組み合わせ】

2026年のFigma → コード変換の全体像

2026年現在、Figmaからコードへの変換は劇的に進化しています。 かつては「Figmaのデザインを見ながら手動でコードを書く」のが当たり前でしたが、 今はAIがデザインファイルを直接読み込んでコードを自動生成する時代になりました。

その中心にあるのがFigma MCP Serverです。 MCP（Model Context Protocol）は、AIコーディングツールが Figmaのデザインデータに直接アクセスするためのプロトコルで、 GitHub Copilot、Cursor、Claude Code、Warp、Factory、Augment Code などの主要AIツールが対応しています。

Figma MCP Serverを使ったワークフロー

Figma MCP Serverを活用したAI駆動開発のワークフローは以下のとおりです。

1. Figmaでプロトタイプを完成させる：ワイヤーフレーム→ハイファイデザイン→インタラクション設定まで完了
2. Figma MCP Serverを設定する：Figmaの個人アクセストークンを発行し、 Cursor/Claude Code等のAIツールにMCPサーバーの接続情報を登録
3. AIにデザインの実装を依頼する：「このFigmaファイルのデザインをNext.js + Tailwind CSSで実装して」 とプロンプトを書くだけで、AIがデザインデータを読み取ってコードを生成
4. 生成コードをレビュー・調整する：AIの出力は約75%の完成度。 残りの25%を人間が調整してプロダクション品質に仕上げる

このワークフローにより、従来の「デザインを目で見てコードを書く」 プロセスと比べて実装時間を約60%短縮できます。

Figma Dev Modeの活用

AIに頼らず手動で実装する場合でも、 FigmaのDev Modeは非常に強力です。 Dev Modeを有効にすると、デザイン上の要素をクリックするだけで 以下の情報が自動表示されます。

• CSSコード：width、height、padding、margin、border-radius、色、 フォントサイズなどがCSSプロパティとして表示される
• レイアウト情報：Auto LayoutはFlexboxのプロパティとして変換される （display: flex、gap、align-items等）
• アセットの書き出し：画像やアイコンをPNG/SVG/PDF形式で直接書き出し可能
• スペーシング情報：要素間の距離がピクセル単位でオーバーレイ表示される

エンジニアとして個人開発をしている方なら、Dev Modeの情報を見るだけで 「このデザインをどうコードにするか」が瞬時にわかるはずです。 特にAuto LayoutがそのままFlexboxに対応するのは、FigmaがWeb開発者に最も親和性の高い理由のひとつです。

Figma Make（AI機能）でプロトタイプを自動生成

2026年にベータを卒業したFigma Makeは、 テキストプロンプトからプロトタイプを自動生成するAI機能です。 「ToDoアプリのダッシュボード画面を作って」のような指示を出すだけで、 実用的なUIデザインとインタラクションが自動生成されます。

Figma Makeの活用ポイントは以下のとおりです。

• ラフなアイデア段階で使う：0からデザインを考える代わりに、 AIに叩き台を作らせて、それを編集・調整する
• Make Kits：チームのデザインシステムをMakeに読み込ませることで、 既存のコンポーネントやスタイルに沿ったデザインを生成できる
• Figma Design / FigJam / Slidesへの埋め込み：Makeで作ったプロトタイプを他のFigmaプロダクトに 直接埋め込んで共有できる

ただし注意点として、Figma Makeは「最終的なデザイン」ではなく 「出発点」として使うべきです。 AIが生成するデザインはそのままでは汎用的すぎるため、自分のプロダクトに合わせたカスタマイズが必要です。

デザインが苦手なエンジニアでもできるUI設計のコツ

「デザインセンス」は不要——ルールベースで80点を取る方法

「自分にはデザインセンスがないから...」と諦めるエンジニアは多いですが、デザインの80%はセンスではなくルールです。 以下のルールを守るだけで、素人っぽさが一気に消えます。

• 余白を恐れない：要素の間に十分な余白（ホワイトスペース）を確保する。 「狭すぎる」と感じたら、余白を1.5倍にしてみる
• フォントサイズは4段階以内：見出し（24-32px）、小見出し（18-20px）、本文（14-16px）、 キャプション（12px）の4段階で十分
• 角丸は統一する：ボタン、カード、入力フォームの角丸をすべて同じ値 （推奨：8px）に統一する
• 整列は必ずAuto Layoutを使う：手動で位置を揃えるとズレが生じる。 Auto Layoutを使えば完璧な整列が保証される

良いデザインと悪いデザインの具体例

エンジニアがやりがちな「悪いデザイン」と、 ルールを適用した「良いデザイン」を比較してみましょう。

既存のUIキットを活用する戦略

デザインが苦手なエンジニアの最強の味方は、既存のUIキットです。 ゼロからデザインを作る必要はありません。 Figma Communityには無料で使える高品質なUIキットが大量にあります。

個人開発者におすすめのUIキットは以下のとおりです。

• shadcn/ui Figma Kit：Next.js + Tailwindで使われるshadcn/uiのFigmaコンポーネント集。 実装時のコンポーネント名と一致するため、デザイン→コードの変換がスムーズ
• Material Design 3 Kit：Googleの公式デザインシステム。 Android/Flutterでの開発との親和性が高い
• Figma Wireframe Kit：ローファイワイヤーフレーム用のコンポーネント集。 プロトタイプの初期段階で重宝する
• Free Dashboard UI Kit：SaaSダッシュボード向けのUIコンポーネント集。 管理画面を作る個人開発者には特におすすめ

UIキットの使い方は、Figma Communityで「Duplicate」ボタンを押すだけ。 自分のプロジェクトにコピーされるので、 必要なコンポーネントだけをコピー&ペーストして使いましょう。

カラーパレットを迷わず決める実践テクニック

色選びで悩む時間を減らすために、以下の「鉄板ルール」を使ってください。

1. メインカラーの決定：プロダクトのジャンルに合わせて1色を選ぶ。 ビジネス系なら青（#2563EB）、ヘルスケア系なら緑（#16A34A）、 クリエイティブ系なら紫（#7C3AED）が定番
2. グレースケールの設定：背景に白（#FFFFFF）、テキストにダークグレー（#1F2937）、 ボーダーにライトグレー（#E5E7EB）を設定。これだけで全体の骨格ができる
3. アクセントカラー：CTAボタンや重要な通知に使う色を1つ追加。 メインカラーの補色（色相環で反対の色）を選ぶとバランスが良い

Figmaでは「Local Styles」に色を登録しておくと、 あとからメインカラーを変更するだけで全画面に反映されます。 最初にColor Stylesを5〜6色設定しておけば、 デザイン全体の一貫性が自動的に保たれます。

レスポンシブデザインをFigmaで考える

個人開発のWebアプリでは、モバイル対応は必須です。 Figmaでレスポンシブデザインを効率的に検討するには、 以下のアプローチがおすすめです。

• デスクトップファーストで全画面のデザインを完成させる
• 主要画面（トップページ、ダッシュボード、フォーム）のみモバイル版（375px幅）のフレームも作成する
• Auto Layoutの方向を縦（Vertical）に変更するだけで、 多くの場合モバイル対応のレイアウトになる
• Constraints（制約）を設定して、 フレームのリサイズ時に要素が適切に追従するようにする

すべての画面のモバイル版を作る必要はありません。 個人開発のプロトタイプ段階では、重要な3〜5画面のモバイル版があれば十分です。 実装時にTailwindのレスポンシブクラスで細かく調整できるからです。

よくある質問（FAQ）

Q1. Figmaは完全に無料で使えますか？

はい、Starterプラン（無料）で3つのデザインファイルと 3つのFigJamボードを作成でき、ビューアーは無制限です。 個人開発者が1〜2プロジェクトを進めるには十分な容量です。 プロトタイプ機能、Auto Layout、コンポーネント、 基本的なプラグインもすべて無料で使えます。 制限が気になるのはファイル数のみなので、 不要なファイルを削除すれば無期限に無料で使い続けられます。

Q2. デザイン経験がまったくないエンジニアでもFigmaを使えますか？

使えます。ShiftBの受講生の約70%がデザイン未経験ですが、平均3〜5時間の学習で基本操作を習得し、 1〜2日でローファイワイヤーフレームを作れるようになっています。 特にAuto LayoutはCSSのFlexboxと同じ概念なので、 エンジニアにとっては非常に馴染みやすい機能です。 「デザインセンス」がなくても、この記事で紹介したルール （3色以内、8の倍数、4段階フォント）を守れば、プロに見えるデザインが作れます。

Q3. FigmaとFigma Makeの違いは何ですか？

Figmaは手動でデザインやプロトタイプを作成する メインのデザインツールです。Figma MakeはFigmaに統合されたAI機能で、 テキストプロンプトからUIデザインやプロトタイプを自動生成します。 Makeはあくまで「出発点」を素早く作るためのツールで、 細かい調整やプロダクション品質の仕上げはFigma本体で行います。 2026年にベータを卒業し、Makeで生成したプロトタイプは Figma Design、FigJam、Figma Slidesに直接埋め込めるようになりました。

Q4. プロトタイプは何画面くらい作ればいいですか？

個人開発のMVP（最小限の実用可能製品）なら、5〜8画面が目安です。具体的には、 ランディングページ（またはログイン画面）、メインダッシュボード、 主要機能の画面2〜3つ、設定画面、エラー/空状態の画面—— これだけあれば「このプロダクトでユーザーが何ができるか」を 十分に伝えられます。完璧なプロトタイプを作ることが目的ではなく、開発前に主要な導線と画面構成を検証することが目的です。

Q5. Figmaのプロトタイプをユーザーテストに使う方法は？

Figma右上の「Share」ボタンからプロトタイプのリンクを発行できます。「Anyone with the link」に設定すれば、 Figmaアカウントを持っていない人でもブラウザでプロトタイプを操作できます。 実際にShiftBの受講生には、プロトタイプリンクをSNSやXで共有して10〜20人にフィードバックをもらうことを推奨しています。 リリース前にユーザーの反応がわかるため、 「作ったけど誰も使わない」リスクを大幅に軽減できます。

Q6. FigmaのMCPサーバーはClaude Codeでも使えますか？

はい、使えます。Figma MCP Serverは2025年から一般公開されており、Claude Code、Cursor、GitHub Copilotなど主要なAIコーディングツールに対応しています。 Figmaの個人アクセストークンを発行し、 Claude Codeの設定ファイルにMCPサーバーの接続情報を記載すれば、 「このFigmaファイルを実装して」というプロンプトだけで デザインデータを読み取ったコード生成が可能です。 2026年2月にはOpenAI Codexとの連携も発表され、 エコシステムはさらに拡大中です。

Q7. SketchやAdobe XDからFigmaに移行する方法は？

Figmaには.sketchファイルのインポート機能が 標準搭載されています。Figmaのファイルブラウザから 「Import」ボタンをクリックし、.sketchファイルを選択するだけです。 レイヤー構造やスタイルの大部分が保持されます。 Adobe XDからの移行は直接インポートに対応していないため、 XDのファイルをSVG等で書き出してからFigmaに取り込む方法が一般的です。 ただし2026年現在、Adobe XDは新規ユーザーの受付を停止しているため、今からFigmaに一本化するのが最善の選択です。