▶ 3日で初案件PR
この記事でわかること
FigmaでWebデザインを作る5ステップ（アカウント登録〜ポートフォリオ完成）が15分で把握できます。フリーランス案件で評価される「設計の説明力」と「エンジニアに渡せるファイル構成」の具体的な作り方がわかります。無料プランだけで学習を完結できる範囲と、有料プランが必要になるタイミングがわかります。
Figmaは無料プランだけでWebデザインの基本をすべて学べるブラウザベースのツールです。アカウント登録からフレーム・グリッド・コンポーネントの活用、ポートフォリオ完成までを5ステップで解説します。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
FigmaでWebデザインを作るには、フレーム設定とグリッド構造の理解が土台になります。ヘッダー・メイン・フッターを3ブロックで組み、オートレイアウトとコンポーネントで再利用性を持たせると、実務で通用するファイルに近づきます。フリーランス案件では操作の速さより「なぜこの配置か」を説明できる設計力が評価されます。
最初に確認すること
Figmaは無料プランでも主要機能（フレーム・オートレイアウト・コンポーネント・プロトタイプ）をすべて使えます。制限はドラフトファイル数（無料では3件）と保存バージョン数の上限です。学習段階で有料プランは不要です（約5分で確認可能）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| まずFigmaを開いて触ってみたい | FigmaでWebデザインを作る5ステップ | 10分 |
| レイアウトが崩れて困っている | オートレイアウトとグリッドで整える | 5分 |
| フリーランス案件に備えたい | 案件で評価される3つの設計力 | 7分 |
| ポートフォリオを作りたい | ポートフォリオを1本作って案件につなぐ | 5分 |
| 無料プランの限界を知りたい | Figmaの無料プランで学べる範囲と限界 | 3分 |
FigmaでWebデザインを作る5ステップ
Figmaを初めて開いたとき、何から手を付けるか分からないという状況はよくあります。「とにかく1ページ作り切る」を目標に、最短ルートではなく確実に動く順序を整理します。
ステップ1：アカウント登録と日本語化（所要時間15分）
Figmaのアカウントはfigma.comからGoogleアカウントまたはメールアドレスで作成します。登録後、画面右上のプロフィールアイコンから「Preferences」→「Language」→「日本語」を選択すると、UIが日本語に切り替わります。
メニューが日本語になるだけで、ツールの場所を探す手間が減ります。学習初期はここで時間を取られるケースが多く、英語UIのまま進めると「フレームってどこ？」で30分止まることもあります。
ステップ2：Webサイト用フレームの設定（所要時間10分）
新規ファイルを開き、ツールバー左端の「フレームツール（F）」を選択します。右サイドバーの「フレームプリセット」から「Desktop」を選ぶと、幅1440px・高さ1024pxのフレームが配置されます。
フレームはWebページの「1画面分のキャンバス」です。高さは後から伸ばせますが、幅の基準を最初に決めることでグリッド設定が安定します。幅768pxのタブレット用フレームを並べてスマートフォン版との差分を確認するのは、慣れてからで十分です。
ステップ3：12カラムグリッドの設定（所要時間5分）
フレームを選択した状態で、右サイドバーの「グリッド」セクションから「＋」をクリックします。「カラム」に切り替えてカウントを12、ガターを20px、マージンを80pxに設定すると、実務でよく使われる12カラムグリッドが引かれます。
グリッドはレイアウト判断の基準線です。「このボタンは何px右に置けばいいか」で迷う時間がなくなり、カラムの境界に揃えるだけで整った印象になります。最初から感覚で整列させようとすると、ズレを修正するだけで1時間経過することも珍しくありません。
ステップ4：ヘッダー・メイン・フッターの3ブロックで組む（所要時間30〜60分）
ページをヘッダー（上部ナビゲーション）・メインコンテンツ（ヒーローセクション・本文・カード群）・フッター（著作権・リンク）の3ブロックに分けて順番に作ります。各ブロックはフレームで囲んでグループ化しておくと、後で移動や複製がしやすくなります。
ヘッダーから作り始めると全体のトーンが決まりやすく、ロゴプレースホルダー（グレーの長方形）とナビゲーションリンクを配置し、右端に「お問い合わせ」ボタンを置くだけでページの骨格が見えます。
ステップ5：テキスト・カラー・余白のルールを決める（所要時間20分）
タイトル・本文・キャプションの3種類でテキストスタイルを登録し、メインカラー・サブカラー・グレーの3色でカラースタイルを登録します。余白は8pxの倍数（8・16・24・32・48）で統一すると、後で要素を追加したときに違和感が出にくくなります。
このルール化を後回しにすると、ページを2枚目に増やした段階でフォントサイズがバラバラになっていることに気づきます。1枚目を作り終えてから整えようとすると、全要素を触り直す作業が待っています。
フリーランスのWebデザイナーとしてポートフォリオを作る際の詳しい手順は、案件獲得を意識した構成で解説しています。
CHECK
▶ 今すぐやること: figma.comを開き、アカウント登録してデスクトップサイズのフレームを1つ作成する（15〜20分）
Q: Figmaはどのブラウザで動きますか？
A： Google Chrome、Microsoft Edge、Firefoxで動作します。デスクトップアプリ版もありますが、ブラウザ版で学習は十分できます（Figma公式：対応環境）。
Q： 幅1440pxのフレームで作ると、1280pxのモニターでは見切れますか？
A： Figma上の制作は画面幅と関係なくズームで調整できます。公開後の表示はCSSの設定で決まるため、デザインファイル上の幅は設計基準として使います。
オートレイアウトとグリッドで整える
「パーツを並べたのにズレる」「余白がバラバラになる」という問題は、オートレイアウトを使っていない状態で起きます。この2つの機能を組み合わせると、要素を追加・削除したときも崩れない構造になります。
オートレイアウトの基本的な考え方
オートレイアウトは、要素の並びと余白をルールで管理する機能です。複数の要素を選択して右サイドバーの「オートレイアウト」を追加（Shift+A）すると、縦方向か横方向かを選べます。要素間のギャップとパディング（内側の余白）を数値で指定すると、要素を追加しても指定した間隔が自動で保たれます。
ボタンのテキストを長くしたとき、オートレイアウトなしでは手動でボタン幅を広げる必要があります。オートレイアウトありならテキストを変えるだけでボタンが伸縮し、この手直しの積み重ねが実務での作業時間に差を生みます。
グリッドと組み合わせる方法
12カラムグリッドを引いた状態でオートレイアウトを使う場合、カードリストのような繰り返し要素はグリッドのカラム数に合わせて列数を設定します。3列カードなら4カラム幅、4列カードなら3カラム幅が目安です。
グリッドは「配置の根拠」を作るためのツールです。クライアントに「なぜここに置いたか」を説明するとき、「グリッドに沿っています」は理由として機能します。受け取り側のエンジニアへの伝達精度にも差が出ます（Figma初心者ガイド｜atsoho）。
フレームとグループの違い
似ている操作として「グループ化（Cmd+G）」がありますが、フレームとグループは別の機能です。グループは選択したオブジェクトをまとめるだけでサイズの制約を持ちません。フレームは独立した境界を持ち、クリッピング（範囲外の非表示）やオートレイアウトの適用が可能です。
実務では、セクション単位でフレームを使い、装飾目的の複数オブジェクトはグループで管理するのが一般的です。両方を区別せずに使っていると、コンポーネント化の段階でレイヤー構造が複雑になります。
Q： オートレイアウトを使いすぎると逆に操作しにくくなりますか？
A： 深くネストしすぎると編集時に目的の要素を選びにくくなることがあります。3〜4階層を超えたら構造を見直す目安にすると作業がしやすくなります。
Q： 12カラムより8カラムを使うケースはありますか？
A： LPやシンプルな1カラムデザインでは8カラムや4カラムで十分なことがあります。12カラムは複数列の複雑なレイアウトに向いています。
コンポーネントで再利用できる部品を作る
同じボタンをページの複数箇所に置いた後、色だけ変えたくなったとき、全箇所を個別に修正する状況は避けたいところです。コンポーネントを使うと、1か所の変更がすべてのコピーに反映されます。
コンポーネントの作成手順
コンポーネント化したいオブジェクトを選択し、右クリックから「コンポーネントを作成」またはCmd+Alt+Kで登録します。作成されたコンポーネント（マスターコンポーネント）は紫色のアイコンになります。これをコピーして別の場所に貼り付けると「インスタンス」として機能し、マスターを変更するとすべてのインスタンスに反映されます。
ボタン・カード・ナビゲーションバー・フッターの4種類をコンポーネント化すると、ページ全体の修正が一箇所の変更で完結します。「クライアントからボタンの角丸を少し取るように言われた」という場面で、全ページを開いて修正する必要がなくなります。
バリアントでボタンの状態を管理する
1つのボタンにホバー状態・無効状態・アクティブ状態を「バリアント」として持たせると、プロトタイプ制作と仕様書作成がまとめてできます。コンポーネントパネルでプロパティを設定し、バリアント名を「State / Default」「State / Hover」のように命名します。
バリアントを使わずに「ボタン_通常」「ボタン_ホバー」と別々のコンポーネントを作ると、名前が増えてアセットパネルが見づらくなります。コンポーネントの命名と構造の整理は、ファイルを共有するエンジニアへの配慮でもあります（FigmaフリーランスのWebデザイン活用術｜Creative Village）。
マスターコンポーネントの置き場所
コンポーネントの使い始めによくある失敗は、マスターコンポーネントをページの目立つ場所に置いてしまうことです。マスターは通常、専用の「Components」ページを作成してそこにまとめます。デザインページに直接置くとレイアウトが崩れる原因になります。
この失敗に気づくのは、ファイルを他者に共有してから「なぜここに部品が浮いているんですか？」と指摘された後のケースが多くあります。
Q： コンポーネントはいくつ作ればよいですか？
A： 作りすぎも管理コストがかかります。「3回以上使う要素」をコンポーネント化するのが実務上よく行われています。1回しか使わない要素は通常のフレームで十分です。
Q： インスタンスをコンポーネントから切り離すことはできますか？
A： 右クリックから「インスタンスの切り離し」で切り離せます。切り離すと以降はマスターの変更が反映されません。
Figmaでの作業が判断フローで整理できるセルフチェック
自分がどの段階にいるかを確認すると、次に何を学ぶかが明確になります。
Q1: Figmaでフレームを作ってパーツを配置した経験はありますか？
Noの場合は、まず「5ステップ」のセクションで1ページを作り切ることから始めます。Yesの場合はQ2に進みます。
Q2: オートレイアウトとコンポーネントを実際に使ったことがありますか？
Noの場合は、オートレイアウトのセクションからコンポーネントのセクションを通して学び、LP1本を作るとスキルが定着します。Yesの場合はQ3に進みます。
Q3: 作ったファイルをエンジニアに共有したり、クライアントに説明したりした経験がありますか？
Noの場合は、次のセクション「案件で評価される3つの設計力」に進みます。Yesの場合はResult A（案件対応レベル）です。
Result A（案件対応レベル）: 操作は一通り身についています。次の差別化は「デザインシステム構築経験」と「プロトタイプを使ったクライアント説明」を追加することです。
Result B（学習中レベル）: ファイルは作れるが共有・説明の経験がない段階です。ポートフォリオを1本完成させ、意図を言語化する練習を並行して行います。
A： フィードバックをもらえる環境では修正の方向性が早く定まる傾向があります。独学でも出力物を他者に見せる機会を作ることで、同様の効果が得られます。
Q： Figmaの学習に必要なPCスペックはありますか？
A： ブラウザ版はWebGL対応のブラウザがあれば動作します。複数のフレームや高解像度画像を使うファイルでは、RAM 8GB以上のPCが快適です。
PR提供: 日本デザインスクール（デザスク）
案件で評価される3つの設計力
Figmaの操作を覚えた後に「では案件はとれるか」という問いに答えるために、評価される観点を整理します。操作の速さより、この3点を持っているかどうかが案件の継続につながります。
設計力1：なぜその配置にしたかを説明できる
クライアントへのデザイン提案では、「見た目がきれいだから」という説明では承認が取れません。「ナビゲーションを画面上部に固定したのは、スクロール中もユーザーが別ページに移動できるようにするためです」という説明が求められます。
UIデザインは視覚的な判断に根拠をつける作業です。根拠をつけるには、ユーザーがどの順序でページを読むか、ボタンを押す動機は何かを事前に考える必要があります。この説明ができるようになると、修正指示の回数が減る傾向があります（Figmaフリーランスになるには｜indieverse）。
設計力2：エンジニアが実装しやすいファイル構成にする
Dev Modeが有効なファイルでは、エンジニアがレイヤーを選択するとスタイル情報（フォントサイズ・カラーコード・余白）をコピーできます。フレームに意味のある名前をつけ、非表示要素を整理し、マスターコンポーネントを専用ページに置くだけで、実装者の確認時間が変わります。
「デザインは正確なのに実装でズレが生じる」という状況の多くは、フィルを「#000000 / 50%透過」で設定するべき箇所を「#7F7F7F」の塗りで代替するような、実装側が再現しにくいスタイルの設定に起因します。
設計力3：プロトタイプで操作感を確認する
プロトタイプモードでフレーム間をつなぐと、クリック操作でページ遷移するデモファイルが完成します。これをクライアントに共有すると、テキストでは伝わりにくい操作の流れを事前に確認してもらえます。
画面遷移のプロトタイプを事前に共有せずに納品した場合、「ここをタップしたらどのページに行くんですか？」という確認が納品後に始まることがあります。この往復を減らすためにプロトタイプは使われます。
「Figmaのプロトタイプを共有したら、クライアントが『これで確認できます』と言って修正指示が具体的になりました」という声があります（Figma初心者ガイド｜atsoho）。
フリーランスのWebデザイナーとして案件を安定的に獲得するための営業方法も、ツールスキルと合わせて習得することで収入の安定につながります。
CHECK
▶ 今すぐやること: 作業中のファイルのレイヤーパネルを開き、名前が「Rectangle 23」のままのレイヤーを「カード / 商品名」のように意味のある名前に変更する（10〜15分）
Q: Dev Modeは無料プランで使えますか？
A： Dev Modeの閲覧は無料ですが、開発者向けの詳細機能（コードのスニペット出力など）は有料プランが必要な場合があります（Figma公式：プランと機能）。
Q： プロトタイプを共有するとき、クライアントはFigmaのアカウントが必要ですか？
A： 閲覧専用のURLを共有すればアカウントなしで確認できます。コメント機能を使ってもらう場合はアカウントが必要です。
ポートフォリオを1本作って案件につなぐ
「Figmaの使い方は分かるけど、何を作ればいいか」で止まる状況は多くあります。フリーランス案件のポートフォリオとして評価されやすいのは、架空でも実在でも「制作意図が言語化されている1本」です。
ポートフォリオに適した制作物の選び方
LP（ランディングページ）1本をゼロから作るのが、学習効果と提示しやすさのバランスが取れた選択肢の1つです。サービス概要・特長・FAQ・CTAボタンを含むLPを1本完成させると、フレーム・コンポーネント・オートレイアウト・テキストスタイルのすべてを使う経験になります。
トレース（既存サイトの模写）も配置とバランスの感覚をつかむ練習として有効ですが、ポートフォリオとして提示するには「なぜこの配置にしたか」の説明がないと、技術を見せたことにならない点は抑えておく必要があります。
ポートフォリオの提示方法
FigmaファイルのURLを共有するだけで閲覧可能ですが、案件プラットフォームへの掲載用にはPDF出力またはFigma Community公開を使います。PDF出力はフレームを選択してFile→「PDFとして書き出し」から操作できます。
Figma Communityにファイルを公開すると、他のデザイナーに参照してもらえる形で実績を積める点が魅力です。ただし、クライアントからの受託物を無断で公開しないよう、契約上の著作権の帰属は確認が必要です（Figma案件のフリーランス活用術｜Creative Village）。
ポートフォリオの審査で見られる観点
案件プラットフォームやクライアントが制作物を見るとき、「見た目の完成度」と「レイヤーの整理状況」の両方を確認するケースがあります。完成度が高くてもレイヤーが未整理だと、「引き継いだときに大変そう」という印象を与えます。
「ファイルの整理状況まで見られると聞いてから、レイヤー名の命名規則を揃えるようにしました」とFigmaフリーランスとして活動するWebデザイナーは語っています（FigmaフリーランスのWebデザイン報酬・スキル｜remogu）。
フリーランスのポートフォリオ作りの基本から案件獲得までの手順を押さえておくと、デザインの実績を効果的に見せる構成が整います。
CHECK
▶ 今すぐやること: LP制作のためにFigmaで新規ファイルを作成し、ヒーローセクション（タイトル・リード文・CTAボタン）だけを今日中に作る（30〜45分）
Q: ポートフォリオは何作品用意すればよいですか？
A： 案件プラットフォームでは2〜3作品が掲載されていれば確認できます。数より各作品の説明の充実度が評価に影響します。
Q： トレース作品をポートフォリオに含めてもいいですか？
A： 「学習目的のトレース」と明記すれば提示できます。実在サービスのデザインを無断でポートフォリオとして販売実績のように見せることは避けます。
Figmaの無料プランで学べる範囲と限界
「無料プランでどこまでできるか」は、学習の計画を立てるうえで先に知っておくと迷いが減ります。
無料プランでできること
フレームの作成・オートレイアウト・コンポーネント・スタイル登録・プロトタイプ・共有リンクの発行・PDF出力・基本的なプラグインの利用は無料プランで行えます。学習段階で必要な操作はほぼカバーされています（フリーランスWebデザイナーがFigmaを使うメリット｜magazine.sokudan.work）。
無料プランの制限事項
無料プラン（Starterプラン）では、ドラフトファイルは3件、チームプロジェクトへの参加は制限があります。バージョン履歴の保存期間も有料プランより短く設定されています。最新のプラン詳細はFigma公式：プランと機能で確認してください。
制限が問題になるのは複数のクライアント案件を並行して管理する段階です。学習用のLPやポートフォリオ作成の段階では、無料プランの範囲内で進められます。
有料プランが必要になるタイミング
チームで同じファイルを同時編集する場合、またはDev Modeのフル機能を使う場合は有料プランが必要になります。フリーランスとして受託案件を受け始め、エンジニアとのファイル共有が始まった段階で検討するのが現実的な判断です。
無料から有料への切り替えは、案件の継続依頼があった時点を目安にする人が多くいます。フリーランスとしてFigmaを活用した案件獲得の具体的な方法を知っておくと、有料プラン移行のタイミングの判断にも役立ちます。
Q： 無料プランでFigma Communityのリソースは使えますか？
A： Figma Communityの公開ファイルのコピーと利用は無料プランでも行えます。他者が公開したUIキットやアイコンセットを活用するとデザインの品質を上げやすくなります。
Q： 教育用のFigmaプランはありますか？
A： 学生・教育機関向けにFigma Educationプランが提供されています。
FigmaのWebデザインで設計力を土台にする：操作習得と説明力を両立する
FigmaでWebデザインを作る力は、フレーム・グリッド・コンポーネントの3つを組み合わせて使う段階から実務に近づきます。操作の習得と並行して「なぜこの配置か」の説明力を育てると、案件での評価が変わります。
一通り作れるようになった後で、実際のファイルを他者に見せてフィードバックをもらうことが次の伸びしろになります。「整合性が取れている」「レイヤーが追いやすい」という評価は、実際に使った人からでないと聞けない観点です。
| 状況 | 次の一歩 | 所要時間 |
| まだFigmaを触ったことがない | アカウント登録してデスクトップフレームを1つ作る | 15分 |
| 1ページは作れるが崩れる | オートレイアウトを使って既存ページを再現する | 30分 |
| 案件に応募したい | LP1本を完成させてファイルURLを共有できる状態にする | 3〜5時間 |
| 単価を上げたい | Dev Modeに対応したファイル構成でコンポーネントを整理する | 1〜2時間 |
FigmaのWebデザインに関するよくある質問
Q: FigmaとAdobe XDはどちらを学ぶべきですか？
A： Figmaは国内外の制作現場での採用率が高く、求人・案件での要件としてFigmaが指定されるケースが多くあります。Adobe XDは既存の制作会社でまだ使われているケースがある一方、新規での採用は減少傾向にあります（Figmaフリーランスになるには｜indieverse）。
Q： Figmaだけでフリーランスの仕事は成立しますか？
A： Figmaは制作ツールであり、仕事の成立にはクライアントとのやり取り・見積り・納品フローなどの業務スキルが別途必要です。ツール単体でなく、設計力と説明力があることが案件継続の条件になります（Figmaフリーランスの案件・求人一覧｜freelance-hub）。
Q： ノーコードツール（WebflowやSTUDIO）との連携はどう学べばよいですか？
A： FigmaからSTUDIOへのインポート機能が提供されています。基本的なFigmaのデザインが完成している状態でSTUDIOのインポート機能を試すのが、連携の感覚をつかみやすい順序です（Figma案件活用術｜Creative Village）。
フリーランスのWebデザイナーに必要なスキルと独立の手順も、Figmaスキルと合わせて確認しておくと開業後のイメージが具体化します。
【出典・参照元】
Figma初心者ガイド｜Webデザインの基本操作【2026年版】｜atsoho
FigmaでWebデザインの基本的な使い方｜depart-inc
Figmaフリーランスになるには？必要なスキルや単価相場｜indieverse
Figma案件活用術とフリーランスの営業力｜Creative Village
FigmaフリーランスのWebデザイン報酬・スキル傾向｜remogu
フリーランスのWebデザイナーがFigmaを使うメリット｜magazine.sokudan.work