▶ 3日で初案件PR
この記事でわかること
Figmaワイヤーフレームは無料プランで1〜2時間で完成する。モバイル393×852px・デスクトップ1440×1024pxの2サイズを使い分けると手戻りが減る。フリーランスの提案資料として使える意図メモ付き共有の具体的な手順がわかる。
Figmaでワイヤーフレームを作るには、フレーム作成からコンテンツ配置、プロトタイプ接続まで5ステップで進めます。無料プランで使えるテンプレートやキットを活用すれば、初めてでも1〜2時間で完成します。フリーランスの提案資料にそのまま使える構成の整え方まで解説します。
今の仕事について、一番近いものは？
この記事の結論
Figmaのワイヤーフレームは「情報整理 → フレーム作成 → コンテンツ配置 → 遷移設計 → 共有」の順に進めると、手戻りが少なくなります。初心者が迷いやすい画面サイズはモバイル393×852px・デスクトップ1440×1024pxを起点にすると、Figma公式の基準に沿えます。フリーランスの実務では、ワイヤーフレームを作業範囲の明確化に使うと、クライアントとの認識のズレを早い段階で防げます。
最初に確認すること
Figmaのワイヤーフレームを始める前に、「誰が何をするための画面か」を1文で書き出してください。この1文がなければ、後から構成が迷走して作り直しになります。所要時間は5分程度で、この確認が以降の全工程を安定させます。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| ワイヤーフレームが何かを確認したい | Figmaワイヤーフレームとは何か | 3分 |
| 今すぐ作り始めたい | 作り方は5ステップで進む | 15分 |
| テンプレやプラグインを知りたい | 無料テンプレとプラグインで短縮する | 5分 |
| クライアント提案への使い方を知りたい | フリーランスが実務で使う3つの活用方法 | 10分 |
| プロトタイプのつなぎ方が分からない | Figmaワイヤーフレームに関するよくある質問 | 5分 |
Figmaワイヤーフレームとは何か
ワイヤーフレームの役割を正確に把握しておくと、後工程での迷いが減ります。「作り始めたはいいが、これで合っているか分からない」と感じる段階のほとんどは、役割の定義が曖昧なまま作業を進めていることが原因です。ここでは3つの観点から整理します。
ワイヤーフレームはレイアウトの設計図
ワイヤーフレームとは、色やデザインを省いた状態で画面のレイアウトや構造を示す設計図です（ワイヤーフレーム作成とは？Figma完全ガイド）。ボタンやテキスト、画像の配置位置を確認するためのものであり、見た目の仕上がりを決める工程ではありません。
細かなビジュアルを後回しにすることで、構成の見直しが格段にしやすくなります。ヘッダーの高さを変えたい場合、色やグラフィックがないシンプルな状態であれば1分で調整できますが、仕上げのデザインが入っていると影響範囲が広くなります。ワイヤーフレームを挟む理由は「構成の修正コストを下げる」点にあります。
Figmaがワイヤーフレームに向いている理由
Figmaがワイヤーフレームに選ばれる理由は、無料プランで使えること、ブラウザから開けること、複数人で同時編集できることの3点です（チーム向けの無料オンラインワイヤーフレームツール）。インストール不要で、共有リンクを送るだけでクライアントがコメントを入れられるため、提案後のフィードバック収集がスムーズになります。
フリーランスのUXデザイナーの仕事内容や独立に必要なステップでも解説しているように、フリーランスの立場では、ワイヤーフレームを作ったFigmaファイルがそのまま実装デザインのベースになるため、ツールを乗り換える手間が発生しません。導入コストを抑えながら成果物をデザインデータに発展させられる点が、フリーランスがFigmaを選ぶ最大の実務メリットです。
完成デザインとの違い
ワイヤーフレームはグレースケールで作られ、ダミーテキストや仮画像を使います。色やタイポグラフィの判断は次の工程に残しておき、この段階では「何がどこにあるか」だけを確定させます。クライアントへの提出時に「このファイルは構造確認のためのものです」と一言添えると、見た目のクオリティへの誤解を防げます。
Q： ワイヤーフレームとモックアップはどう違いますか？
A： ワイヤーフレームは構造を確認するためのグレースケールの設計図です。モックアップは色やフォントを加えた見た目に近い状態のものです。ワイヤーフレームで構造を固めてからモックアップに進むのが一般的な流れです。
Q： Figmaの無料プランでワイヤーフレームは作れますか？
A： 作れます。フレームの作成、コンポーネントの利用、リンク共有が使えます。Figma公式のワイヤーフレームキットも無料で利用できます（チーム向けの無料オンラインワイヤーフレームツール）。
作り方は5ステップで進む
手順を確認せずに始めると、途中から作り直しになるパターンが多くなります。5ステップを順番に踏むと、手戻りの多いパターンを避けられます。各ステップの所要時間の目安はステップ1が5分、ステップ2〜4が各10〜15分、ステップ5が10分です。
ステップ1：情報を整理して目的を1文で書く
最初に、「誰が・何をするための・どの画面か」を1文で書きます。「フリーランスが案件を検索して応募する一覧画面」のように定義します。Figma公式もデザイン目標を最初に設定することを推奨しています（ワイヤーフレーム作成とは？Figma完全ガイド）。
この1文がないまま作り始めると、情報量や要素の取捨選択に毎回迷いが生じます。情報量が多いページでは、目的を書いた後に掲載要素を列挙して優先順位をつけると、後でコンテンツの配置順が迷いにくくなります（【Figma初心者向け】アプリ・webサイトのワイヤーフレームの作り方）。
ステップ2：フレームを作り、画面サイズを選ぶ
Figmaでキャンバスに「F」キーを押すか、左上のフレームアイコンを選択して右サイドバーからサイズを指定します。Figma公式が例示している標準的なサイズは、モバイルが393×852px、11インチタブレットが834×1194px、デスクトップが1440×1024pxです（ワイヤーフレーム作成とは？Figma完全ガイド）。
どのサイズを選べばよいか迷う場合は、最初はスマホとPCの2種類を用意して並べて確認する方法が実務上うまくいきます。2つ並べると、要素の優先順位の違いが視覚的に分かりやすくなります。デスクトップでは横並びにしていた要素が、スマホでは縦積みに変わるケースでは、どちらの構成が優先かをこの段階で確認しておくと後のズレが減ります。
ステップ3：ヘッダー・メイン・フッターの骨組みを作る
いきなり細部から作ると、全体のバランスを見失いやすくなります。最初にヘッダー・メインコンテンツ・フッターの3つのブロックを大まかに置いて、骨組みを作ります（【初心者必見】Figmaの使い方とワイヤーフレームの作り方を解説）。
文字はダミーで埋めず、「見出し（Heading）」「本文（Body）」「CTA（ボタン）」のような役割ラベルをテキストで入れておくと、後から見たときに構成の意図が伝わりやすくなります。グレースケールで統一して色を入れないことで、レイアウトの判断に集中できます。この段階でボタンの色に迷い始めたら、それは次工程の話なので一旦無視する判断が実務的には正しい選択です。
ステップ4：コンポーネントやキットを使って要素を整える
Figmaのコンポーネント機能を使うと、ナビゲーション、カード、フォームなどの繰り返し使う要素を一度作れば全画面に一括適用できます（チーム向けの無料オンラインワイヤーフレームツール）。ゼロから作る場合は、Figmaコミュニティで公開されているワイヤーフレームキットを読み込んで、必要な部品をそのまま使う方法が時短になります。
余白と整列を揃えてグリッド感を出すことで、同じグレースケールでも「整った設計図」として伝わります。具体的には、Figmaの「レイアウトグリッド」をフレームに設定して、要素をグリッドに沿って配置します。グリッド設定なしで目視だけで揃えると、後から「実際にはズレていた」と気づくケースが実務でよく発生します。設定しておくだけで後の修正コストが下がります。
ステップ5：遷移を設定してプロトタイプにする
Figmaのプロトタイプ機能（右上のタブ「プロトタイプ」に切り替え）を使い、要素から別画面へ接続線を引いてインタラクションを設定します（Figmaで学ぶワイヤーフレームの作り方）。全画面をつなぐ必要はなく、主要な導線だけをつなぐと確認コストが下がります。
遷移がある画面を複数作る場合は、先にユーザーフローを紙や別ツールで描いてから画面を作ると、「この遷移どこにつなぐんだっけ」という混乱を防げます。完成したら共有リンクを発行し、リンクの表示確認・権限設定・コメント指示を添えて相手に送ります。
CHECK
▶ 今すぐやること：Figmaを開いて「F」キーでフレームを作成し、393×852pxのサイズを入力する（3分）
Q: プロトタイプと通常のワイヤーフレームの違いは何ですか？
A： ワイヤーフレームは静止した画面の構成図です。プロトタイプはその画面間をつないで、ユーザーがどう操作するかをシミュレートできる状態にしたものです。Figma上では同じファイルから設定できます。
Q： 1ページ分のワイヤーフレームを作るのにどのくらい時間がかかりますか？
A： 目的定義から骨組み作成まで慣れれば30〜60分が目安です。情報整理が不十分な段階で始めると、構成を作り直す時間が別にかかります。
作り方の前に画面構成を診断する
自分の案件にどのアプローチが合うか迷っている場合は、以下の2つの質問に答えると始め方の方向性が絞れます。所要時間は3分程度です。
Q1：すでに要件定義やヒアリングは済んでいますか？
Yesの場合はQ2へ進んでください。Noの場合はまず「誰が・何をするための画面か」を箇条書きで整理してから、Q2へ進んでください。
Q2：対象デバイスはスマホとPCのどちらを優先しますか？
スマホ優先の場合はResult A、PC優先の場合はResult B、両方必要（レスポンシブ）の場合はResult Cに進んでください。
Result A：スマホ優先の場合
フレームサイズは393×852pxで作成し、スマホ画面を基準に骨組みを組みます。ナビゲーションをどこに置くかを最初に決めると、以降の配置がスムーズになります。
Result B：PC優先の場合
フレームサイズは1440×1024pxで作成します。横幅を活かした複数カラムのレイアウトを検討し、ヘッダーの高さと余白を先に決めると全体のバランスが取りやすくなります。
Result C：レスポンシブ対応が必要な場合
スマホとPC両方のフレームを用意します。同じ要素が両方に必要かどうか、優先順位を変える要素はどれかを画面ごとに確認します。最初からスマホ版とPC版を並べて作成すると、比較が簡単になります。
Q： スマホとPC、どちらを先に作るべきですか？
A： スマホ優先（モバイルファースト）が一般的な進め方です。制約の多いスマホ画面で構成を決めると、PC版に情報を広げやすくなります。ただしクライアントの用途に合わせて判断してください。
Q： 情報整理はFigmaの中でやる必要がありますか？
A： Figmaの外でやっても問題ありません。FigJamを使う方法もありますが、紙や別ツールで整理してからFigmaに持ち込む流れでも同じ結果を得られます。
Figmaワイヤーフレームの実例
Figmaのワイヤーフレーム実例として、note上で実際に学習・制作した体験談が公開されています。
「FigmaはWebブラウザで利用できるUI/UXデザインツールで、プロジェクトの試作品（プロトタイプ）とワイヤーフレームの作成ができる」と、Figmaを初めて使ったWebデザイナーは語っています（Figmaで学ぶワイヤーフレームの作り方）。
ワイヤーフレームの仕上がりに迷っている場合、「まずFigmaの基本操作とワイヤーフレームの役割を並行して理解する」アプローチが、初期の混乱を整理する助けになります。
また、プラグインを活用してワイヤーフレームを自動生成したユーザーは、「Figma Wireframe Designerを活用することで、ワイヤーフレーム作成の効率が大幅に向上した」と報告しています（Figma Wireframe Designerの使用体験談）。
プラグインの自動生成は初稿を素早く作るには有効ですが、生成された骨組みをそのまま使うと構成の意図が抜け落ちることがあります。自動生成後に「目的の1文と照合して要素を取捨選択する」作業を挟むと、完成度が上がります。
フリーランスのWebデザイナーの仕事内容や独立に必要なステップでも触れているように、ワイヤーフレームスキルはUIデザイナーやUXデザイナーとして案件を獲得する際の重要な実績になります。
Q: 他のユーザーのワイヤーフレームを参考にできる場所はありますか？
A： Figmaコミュニティ（community.figma.com）でワイヤーフレームのテンプレートや実例ファイルを検索できます。「wireframe kit」で検索すると、公開ファイルを複製して構造を確認できます。
Q： ワイヤーフレームは1ページずつ作るべきですか？
A： 基本的には画面（フロー）ごとにフレームを作ります。1つのFigmaページに複数のフレームを並べて管理するのが一般的な運用です。
PR提供: 日本デザインスクール（デザスク）
無料テンプレとプラグインで短縮する
ゼロから作る必要はない場面も多くあります。使える資産を先に確認してから着手すると、作業時間が変わります。テンプレートとプラグインの使い分けを把握しておくと、案件の種類に応じた最短ルートを選べます。
Figmaコミュニティのワイヤーフレームキット
FigmaコミュニティはFigmaアカウントがあれば無料で利用できます。「wireframe」で検索すると、ナビゲーション・カード・フォーム・モーダルなどの部品がそろったキットが複数公開されています（チーム向けの無料オンラインワイヤーフレームツール）。複製したファイルから必要な部品をコピーして自分のファイルに貼り付けるだけで使えます。
既存キットを読み込んで不要な部品を削除する方が、部品の整合性が取れた状態を早く作れます。キットには命名規則も含まれているため、ファイルを引き継ぐ相手がいる案件では管理がしやすくなります。
Figma Wireframe Designerプラグインの使い方
Figma Wireframe Designerは、テキストで画面の概要を入力すると骨組みを生成するプラグインです（Figma Wireframe Designerの使用体験談）。プラグインパネルから検索してインストールし、フレームを選択した状態でプロンプト（例：「商品一覧画面。フィルター・カード・ページネーションを含む」）を入力すると、数十秒で初稿が生成されます。
生成された初稿はあくまで出発点です。実務で使うには、目的の1文と照合してから要素の取捨選択と配置の調整を手動で行います。生成後の確認を工程として組み込んでおく方が、「自動生成のまま提出したら配置の意図を説明できなかった」という状況を避けられます。
テンプレートを使うか自作するかの判断基準
新規のプロダクト設計で独自の画面構成が必要な場合は自作が向いており、LP・ブログ・ECサイトのようなよくある構成ではキットの活用が時短につながります。
いずれの場合も、コンポーネントを使って要素を管理しておくと、後の修正時に変更が全画面に反映されます。10画面以上ある案件でコンポーネントを使わずに作ると、ボタンの文言や大きさを直すたびに全画面を手修正する状況になります。これを避けるだけで、後半の修正コストが大きく変わります。
CHECK
▶ 今すぐやること：Figmaコミュニティで「wireframe kit」と検索し、評価の高いファイルを1つ複製してどんな部品が含まれているか確認する（5分）
Q: キットを使ったワイヤーフレームはクライアントに提出できる品質ですか？
A： 提出できます。案件の目的や画面構成に合わせて整理してから共有することが前提です。コメント欄に配置意図を添えると、クライアントが確認しやすくなります。
Q： プラグインの使用に費用はかかりますか？
A： Figma Wireframe Designerは有料プランが必要な場合があります。Figma本体は無料プランでも利用できますが、プラグインごとに利用条件が異なるため、インストール前に確認してください。
フリーランスが実務で使う3つの活用方法
Figmaワイヤーフレームは単なる設計図としてだけでなく、フリーランスの業務進行を整えるツールとしても使えます。3つの活用方法を把握しておくと、ワイヤーフレームの価値を案件全体で最大化できます。
活用方法1：提案前の作業範囲の明確化に使う
フリーランスの案件では、ワイヤーフレームを「作業範囲を可視化する資料」として使うことで、見積もりと納品の食い違いを減らせます（ワイヤーフレーム制作の依頼・発注事例）。画面数・機能数が視覚的に確認できる状態になると、後から追加要件が出た際にスコープの境界を示しやすくなります。
ヒアリング後に簡易なワイヤーフレームを作り、「この画面構成で進めてよいか」を確認してから見積もりを出す流れが、実務では手戻りを減らす有効な方法です。最初に合意していた画面数が最終的な要件で2倍近くに膨らむケースを経験した人は、この確認ステップを早めに設ける価値があります。
活用方法2：意図メモを添えてクライアント提出する
クライアントにワイヤーフレームを共有する際、画面の隣にFigmaのコメント機能や別フレームを使って「なぜこの配置にしたか」の意図を1〜2行で書き添えると、確認の精度が上がります。「ここはユーザーが迷いやすいとヒアリングで出たため、CTAを上部に配置しています」のような一文が加わるだけで、フィードバックが的確になります。
意図の説明なしで渡すと、「なんとなく直してほしい」という曖昧なフィードバックが返ってくることが多くあります。その場合、何をどう直せばよいかの判断を再度ヒアリングし直す手間が発生します。意図メモはこの往復を減らすための実務的な工夫です。
活用方法3：提案資料として構成案を先に見せる
要件定義の段階でワイヤーフレームを使い、「こういう構成で進めます」という提案資料として活用する方法があります（ワイヤーフレーム制作の依頼・発注事例）。ワイヤーフレームの状態で見せることで、クライアントが「デザインの見た目」ではなく「画面の構成」にフォーカスしてフィードバックしやすくなります。
完成デザインを先に見せると、色やフォントへの意見が多くなり、構成の確認がしにくくなる場面が実務でよく見られます。ワイヤーフレームの段階でフィードバックを受け取ることで、構成変更のコストが最も低い時点で合意形成ができます。フリーランスの提案力は5つの型で受注率3倍でも解説しているように、早期段階での合意形成がプロジェクト成功の鍵です。
Q: フリーランス向けのFigmaを使ったワイヤーフレーム案件はどこで探せますか？
A： ランサーズやFreelance Hubのようなフリーランスマッチングサービスで「Figma」「ワイヤーフレーム」「UI設計」などで検索すると案件を確認できます（Figma関連のフリーランス案件情報）。
Q： ワイヤーフレームだけの案件依頼は成立しますか？
A： 成立します。デザインの前工程としてワイヤーフレームのみを依頼するケースや、社内デザイナーに引き継ぐ前の設計だけを外注するケースがあります。作業範囲をワイヤーフレーム完成までと明記した提案書を用意しておくと話が進みやすくなります。
Figmaワイヤーフレームの5つの実務ハック
ここでは「なぜそのやり方が実務でうまくいくか」の理由まで整理します。手順を知るだけでなく、背景を理解してから実践すると、応用できる範囲が広がります。
ハック1：目的の1文がフレームに入るまで作業を止める
【対象】: ワイヤーフレームを作り始めたが、途中から何を作っているか分からなくなる人。
【手順】: Figmaのキャンバスに新しいテキストレイヤーを作り、「誰が・何をするための・どの画面か」を1文だけ書きます（3分）。そのテキストをフレームの外側、目に入りやすい場所に置きます。要素を追加するたびに「この要素はその目的に必要か？」を1回だけ自問してから配置します。
【コツと理由】: 「まずフレームを作る」と書かれた記事が多いですが、「目的の1文を書いてからフレームを作る」方が後半の作り直しが減ります。目的がないと、情報量や要素の取捨選択に毎回迷いが生じます。画面が10枚以上ある案件では、この迷いが積み重なって構成がブレていきます。目的の1文はブレを止めるアンカーになります。
【注意点】: 1文が長くなりすぎると機能しません。「誰が・何をする・どの画面か」の3要素に絞ります。また、ヒアリング不足のまま書いた場合は途中で書き換える必要が出ますが、変更する際は関係者に共有してから行います。
ハック2：グレースケール縛りで色の判断を後回しにする
【対象】: ワイヤーフレームを作っているうちに色やデザインを考え始めて時間が取られる人。
【手順】: Figmaのカラースタイルを設定し、白・黒・グレーの3色だけのスタイルを作ります（5分）。ワイヤーフレーム中は、このスタイル以外の色を使わないルールを自分に設けます。完成後に「カラー確認フェーズ」として別工程を設けます。
【コツと理由】: 色を入れた段階でクライアントが配色の議論を始めて構成の確認が止まることが実務でよくあります。グレースケールで統一することは、「今はレイアウトの確認が目的」というルールを視覚的に示す手段でもあります。
【注意点】: グレースケール縛りが機能するのはワイヤーフレームフェーズのみです。プロトタイプ確認後は配色の検討に移ります。クライアントへの共有前に「このファイルはワイヤーフレームです」とひと言添えないと、色がなくて完成していないと誤解される場合があります。
ハック3：ヘッダーをコンポーネント化してから他画面に展開する
【対象】: 複数画面を作るときに、ヘッダーや共通ナビを全画面で手修正することになった人。
【手順】: 最初の1画面でヘッダーの形を決め、それをコンポーネント（Ctrl/Cmd+Alt+K）に変換します（5分）。他の画面には、このコンポーネントをコピーして配置します。ヘッダーを変更する場合は、元のコンポーネントを1か所修正するだけで全画面に反映される状態を確認します。
【コツと理由】: ワイヤーフレームの段階からコンポーネントを使い始める方が全体の修正コストが下がります。コンポーネントなしで作ると、ヘッダーの項目を1つ変えるだけで20枚分を直す状況になります。
【注意点】: コンポーネントを使うと変更が全画面に影響するため、意図的に一部の画面だけヘッダーの形が違う場合はバリアント機能を使うか、その画面だけコンポーネントを切り離す判断を明示的に行います。1画面だけ作る場合や使い捨ての確認用に作る場合は、コンポーネント化は不要です。
ハック4：プロトタイプは主要導線の3〜5ステップだけつなぐ
【対象】: プロトタイプで全ての画面遷移を設定しようとして、設定作業に時間がかかりすぎている人。
【手順】: 先に「ユーザーが一番よく通る動き」をリストアップし、3〜5ステップに絞ります（10分）。Figmaの「プロトタイプ」タブに切り替え、各ステップの要素から次の画面へ接続線を引きます（1ステップあたり2〜3分）。共有前に自分でプロトタイプを動かして、想定の動きになっているか確認します。
【コツと理由】: 主要導線だけをつないで早めに確認を取ることで、構成の大きな修正を早い段階で受け取れます。全ての遷移を設定してから見せるより、確認コストを下げることがこの方法の目的です（Figmaで学ぶワイヤーフレームの作り方）。
【注意点】: 主要導線だけつないで共有する場合、「他の遷移はまだ設定していません」という説明を必ずつけます。説明なしで渡すと「このボタンを押しても何も起きない」というフィードバックへの対応に時間がかかります。プロトタイプに設定するインタラクション（スクロール、オーバーレイ等）は最小限にして、確認に必要な操作だけ設定するのが実務的な進め方です。
ハック5：共有前の3点確認リストを作る
【対象】: ワイヤーフレームを共有した後に「リンクが見られない」「コメントが入れられない」という連絡が来た経験のある人。
【手順】: 共有前に「リンクの表示確認（ログインなしで開けるか）」「権限の確認（コメント可になっているか）」「コメント指示の記載（どこを確認してほしいか）」の3項目をFigmaのコメント欄またはメールに書きます（5分）。リンクを自分で開いて、想定通りに表示されているか1回確認します。その後、相手に共有します。
【コツと理由】: 権限設定の確認漏れで「見られなかった」という連絡が来ることは実務では珍しくありません。3点確認を工程として組み込むことで、共有後の往復をなくせます。Figmaのデフォルト権限は「ファイル閲覧者のみ」に設定されている場合があり、コメント権限が自動でつかないことを知らないまま共有すると問題になります。
【注意点】: 権限を「編集者」で渡すと、相手がファイルを変更できてしまいます。確認用の共有では「コメント可・編集不可」の設定が実務上の標準です。クライアントに渡す場合は確認用の複製ファイルから共有すると、オリジナルが変更されるリスクを避けられます。
Figmaワイヤーフレームを使い始める：今日からできる3つのアクション
Figmaのワイヤーフレーム作成は「情報整理 → フレーム作成 → コンテンツ配置 → 遷移設計 → 共有」の5ステップが軸になります。最初に「誰が・何をするための画面か」を1文で決めておくと、途中で構成が迷走するリスクを下げられます。
フリーランスとして使う場合、ワイヤーフレームは設計図であると同時に、クライアントとの合意形成ツールでもあります。意図メモを添えた状態で共有し、構成の合意が取れてからデザインに進む流れが、最終的な手戻りを最小にする実務的な進め方です。なお、フリーランスのポートフォリオは5項目で受注率2倍でも解説しているように、ワイヤーフレームの実績をポートフォリオに掲載することで案件獲得につなげることもできます。
| 状況 | 次の一歩 | 所要時間 |
| 今すぐ試したい | Figmaを開いてフレームを393×852pxで作成し、ヘッダー・メイン・フッターに仮の文字を置く | 15分 |
| テンプレを活用したい | Figmaコミュニティで「wireframe kit」を検索し、1つ複製する | 5分 |
| クライアントに提出したい | 意図メモをコメント欄に記載し、権限を「コメント可・編集不可」にして共有リンクを送る | 10分 |
Figmaワイヤーフレームの作り方に関するよくある質問
Q: Figmaをインストールしないとワイヤーフレームは作れませんか？
A： インストールなしで使えます。Figmaはブラウザから開けるため、figma.comにアクセスしてアカウントを作成すればすぐに使い始められます。
Q： 無料プランでワイヤーフレームを作るときの制限はありますか？
A： 無料プランでは同時に作成・編集できるドラフトファイル数に上限があります。ただしワイヤーフレームの作成、キットの読み込み、プロトタイプの設定、共有リンクの発行は無料プランで使えます（チーム向けの無料オンラインワイヤーフレームツール）。
Q： FigJamとFigma本体はどう使い分けますか？
A： FigJamはアイデアの整理や付箋・フローの描き起こしに向いています。構造が固まったらFigma本体でフレームを作成してワイヤーフレームに落とし込む流れが使いやすい分け方です（チーム向けの無料オンラインワイヤーフレームツール）。
【出典・参照元】
【Figma初心者向け】アプリ・webサイトのワイヤーフレームの作り方
【初心者必見】Figmaの使い方とワイヤーフレームの作り方を解説