Figmaの練習は「基本操作 → トレース → オリジナル制作」の3段階で進めると、脱落を防ぎながら実務につながりやすい流れになります。この記事では段階別のお題15選と、ポートフォリオ化・案件応募への接続方法を解説します。
▶ 3日で初案件PR
この記事でわかること
Figmaの練習で最初にやるべきことは、バナー1枚のトレースから始めることです。Figmaは無料プランで全機能を試せるため、ツール費用なしに実務に近い課題へ取り組めます。この記事を読めば、今日から動ける練習お題と、フリーランス案件に通用するレベルへの到達ルートが具体的にわかります。
Figmaの無料プランで利用を開始し、ブラウザ版またはデスクトップアプリをインストールしてください（所要時間: 約5分）。アカウント作成後、Figma Communityにアクセスすると、練習用の公開ファイルを無料で入手できます。
| 状況 | 読むべきセクション | 所要時間 |
| 基本操作が不安で何から始めるか迷っている | Figma練習お題は3段階で整理すると動ける | 5分 |
| トレース・模写の具体的なやり方を知りたい | トレース練習は1画面・1パーツから着手する | 7分 |
| ポートフォリオ化と案件応募の方法を知りたい | 練習成果をポートフォリオ化する4ステップ | 5分 |
| 今の自分のレベルを確認したい | 自分のFigmaレベルは3問で確認できる | 3分 |
| フリーランス案件に通用するスキルを知りたい | 案件獲得に使える5つの実務ノウハウ | 8分 |
今の仕事について、一番近いものは？
Figma練習お題は3段階で整理すると動ける
Figmaを開いて「何を作ればいいか」で手が止まる感覚は、多くの人が経験しています。段階を明確に分けると、次に取り組む課題が自動的に決まります。
お題の3段階とその判断基準
お題は「基礎固め段階」「模写・トレース段階」「実務接続段階」の3つに分かれます。
基礎固め段階（1〜2週目目安）では、図形・テキスト・フレーム・コンポーネントという4機能の組み合わせに慣れることを目的とします。この段階のお題は5つあります。①シンプルなボタン、②テキスト入りカード、③3色以内のバナー、④モバイル画面の枠（フレームのみ）、⑤アイコンの模写（既存アイコン1点）。完成品のクオリティよりも「操作の流れを体で覚えること」を優先します。
模写・トレース段階（3〜5週目目安）では、既存のデザインを再現しながら、余白・文字サイズ・整列の3観点を意識します。この段階のお題も5つです。⑥スマホLP1セクション、⑦Webサイトのヘッダーのみ、⑧既存のSNSバナー1枚、⑨シンプルなサービス紹介カード、⑩お気に入りのアプリのホーム画面（モバイル1枚）。
実務接続段階（6週目以降）では、架空クライアント向けの課題を設定し、デザインの判断理由を言語化する練習を加えます。この段階のお題は⑪架空飲食店のLPトップ（3セクション）、⑫フリーランス向けのサービス紹介ページ、⑬コンポーネントを使ったUIキット制作、⑭プロトタイプ付きのアプリ画面遷移（3画面）、⑮デザインシステムの構築（カラー・タイポグラフィのみ）の5つです。
どの段階も「完璧に仕上げる」より「次の段階に進む判断基準」を意識すると、停滞を避けられます。
段階ごとの制約条件の設定方法
各お題に制約をつけると、思考の負荷を下げながら練習の質を上げられます。基礎段階では「30分以内に完成させる」「使う色は2色まで」「フォントは1種類だけ」といった制約が有効です。制約がないと、フォント選びや配色で時間を使い果たし、実質的な練習時間が減ります。
模写段階では「元デザインを見ながら作る時間を30分、見ずに再現する時間を15分」という2段階を設けると記憶定着を高められます。実務接続段階では「クライアントへの説明文を100文字で書く」制約を加えると、デザインの言語化能力が上がります。これはポートフォリオ制作時の説明文にそのまま転用できます。
お題を選ぶときの分類軸の考え方
お題を探すとき、「難易度の高そうなもの」や「かっこいいデザイン」を選びがちですが、実務接続の観点からは「クラウドソーシングで実際に依頼されている種類のデザイン」を選ぶ方が効率的です。クラウドワークスやランサーズの案件カテゴリを確認すると、バナー・LP・SNS用画像・簡易UIの順で依頼数が多いことがわかります。これらを優先してお題に取り込むと、ポートフォリオが実務ニーズと合致しやすくなります。
CHECK
▶ 今すぐやること: 上記お題一覧から「基礎固め段階」のうち1つを選び、Figmaで新規ファイルを作成する（5分）
Q: 基礎段階のお題は全部終わらせてから次に進む必要がありますか？
A： 全部完了しなくて構いません。①〜⑤のうち3つを30分以内に完成できた段階で、模写・トレース段階へ進む判断の目安にできます。
Q： お題の難易度はどう判断すればいいですか？
A： 「30分以内に完成できるかどうか」を基準にします。完成に1時間以上かかる場合は、一段階戻って基礎を固める方が結果的に早く進めます。
トレース練習は1画面・1パーツから着手する
最初からサイト全体を模写しようとすると途中で挫折しやすく、1パーツの完成精度が上がらないまま次へ進む繰り返しになります。1パーツを完成させることに集中するのが、トレース練習の核心です。
トレース対象の選び方と進め方
トレース対象は「自分がよく使うアプリやサイトの中で、1画面または1パーツが完結しているもの」から選びます。アプリのサインイン画面、ニュースアプリのカード一覧、決済完了画面、設定メニュー画面などは要素数が少なく完成させやすいです。
進め方は3段階です。まず元画面をスクリーンショットで撮影してFigmaにインポートし、その上にフレームを重ねてなぞります（所要時間: 15〜20分）。次に、スクリーンショットを非表示にして再現精度を目視で確認します。最後に、余白・文字サイズ・整列の3観点で元デザインとの差分を書き出します（差分メモ: 3〜5点）。この差分メモが実力向上の核心です。「ここがずれていた」という記録がないと、同じミスを次の練習でも繰り返します。
余白・文字サイズ・整列の自己採点方法
FigmaのInspectパネルを使うと、元デザインと自分の制作物のサイズ・余白を数値で比較できます。ピクセル単位での完全一致を目指すより「大きく外れていないか」の感覚をつかむことを優先します。文字サイズについては、見出し・本文・注釈の3階層それぞれが、元デザインと比べて上下20%以内に収まっていれば合格の目安にできます。
整列については、Figmaの「スマート選択」機能を使い、要素間の間隔が均等になっているかを確認します。余白の一貫性は、プロのデザインと初心者の制作物で最も差が出る点の1つです。なお、Webデザインの配色も同様に体系的に学ぶことで、トレース後のオリジナル制作の完成度が上がります。
ショートカットキーを毎回1つ追加する方法
ショートカットキーを一覧で覚えようとすると、一度には身につかず結局使わないまま終わることが多くあります。練習ごとに「今日は1つだけ新しいショートカットを使いきる」ルールにすると、自然に定着します。優先度が高いショートカットはフレーム作成（F）、コンポーネント化（Ctrl/Cmd+Alt+K）、グループ化（Ctrl/Cmd+G）、拡大縮小（Ctrl/Cmd+マウスホイール）、整列パネル呼び出し（Shift+A）の5つで、この順番で習得してください。
CHECK
▶ 今すぐやること: よく使うアプリのサインイン画面をスクリーンショットで撮影し、Figmaにインポートしてトレースを開始する（20分）
Q: スクリーンショットをFigmaにインポートするにはどうすればいいですか？
A： 画像ファイルをFigmaのキャンバスにドラッグ&ドロップすると読み込めます。Ctrl+Shift+K（Windows）またはCmd+Shift+K（Mac）のショートカットでも呼び出せます。
Q： トレースの精度はどれくらい目指せばいいですか？
A： 完全一致ではなく「印刷して並べたとき、同じデザインに見える程度」を目安にします。細部の数値より全体の印象の一致を優先してください。
自分のFigmaレベルは3問で確認できる
どの段階にいるかを把握してから次のお題を選ぶと、練習の効率が変わります。
Q1: Figmaでフレームを作成し、コンポーネントを1つ作成できますか？
Yesの場合はQ2へ進みます。Noの場合は基礎固め段階（お題①〜⑤）に戻ります。フレームとコンポーネントの操作が、Figma実務の土台になります。
Q2: 既存デザインを30分以内に1パーツ模写できますか？
Yesの場合はQ3へ進みます。Noの場合はトレース段階（お題⑥〜⑩）を繰り返します。30分での完成が、実務での作業速度の最低ラインの目安になります。
Q3: 自分が作ったデザインについて、なぜその色・余白・フォントを選んだか説明できますか？
Yesの場合は実務接続段階（お題⑪〜⑮）へ進み、架空クライアント課題に取り組みます。Noの場合は模写後の差分メモに「なぜ元デザインがそうなっているか」の推測を3点加えてください。
Q: Q3でNoだった場合、どうやって「説明できる状態」になりますか？
A： 模写終了後に「なぜこの余白が設定されているか」「なぜこのフォントサイズか」を3点だけ推測して書き出す習慣をつけると、4〜5回の練習で言語化できるようになります。
Q： Q1がNoでも、先のお題に挑戦していいですか？
A： 先に進むこと自体は可能ですが、フレームとコンポーネントを理解せずに模写を進めると、完成に時間がかかりすぎて続かなくなることが多くあります。Q1クリアを先に済ませる方が結果的に早く進めます。
PR提供: 日本デザインスクール（デザスク）
練習成果をポートフォリオ化する4ステップ
練習課題をそのまま載せるのではなく、再編集と説明文の追加でポートフォリオとして機能させられます。
ポートフォリオ化の4ステップ
ステップ1: 選別（30分）。お題⑥〜⑮のうち、元デザインとの差分が少なかった作品と、自分なりに工夫を加えた作品を各1〜2点選びます。「うまくできた作品」より「自分が意思決定した場面が多かった作品」を選ぶ方が、説明文を書きやすくなります。
ステップ2: 整理（60分）。選んだ作品をFigma上で「ポートフォリオ用ページ」として再配置します。背景色を白またはライトグレーに統一し、各作品に「課題の概要（1文）」「工夫した点（3点）」「使ったFigma機能」の3要素を追加します。
ステップ3: Before/After記録（30分）。トレース作品については、元デザインのスクリーンショットと自分の制作物を並べて配置します。「完成度の高さ」より「どこを意識して制作したか」が伝わる構成にします。
ステップ4: URL共有設定（5分）。FigmaのShareボタンから「リンクを知っている人が閲覧可能」に設定し、URLを取得します。このURLをクラウドソーシングのプロフィールや提案文に貼ります。
ポートフォリオ化で避けるべき点
練習課題をポートフォリオ化する際、「トレースした元デザインと自分の制作物の区別」を明示しないまま載せることには注意が必要です。「既存デザインを参考に制作」と明記した上で、自分が加えた変更や工夫をあわせて記載します。フリーランスのポートフォリオ作成の全体像を把握しておくと、どの要素を強調すべきかの判断が整理されます。
CHECK
▶ 今すぐやること: お題⑥〜⑩の完成作品から1点を選び、Figmaに「ポートフォリオ用ページ」を新規作成して配置する（30分）
Q: 練習課題のポートフォリオで案件に応募できますか？
A： 「課題の概要」「意図した工夫」「使ったFigma機能」が明記されていれば、初案件の応募材料として機能します。実務経験がない段階では、練習課題のポートフォリオと提案文の丁寧さで判断されることが多くあります。
Q： Figmaのポートフォリオ共有はどの形式が適していますか？
A： Figma上でのURLシェアが最も手間が少なく、クライアントも確認しやすいです。PDFエクスポートとの併用も可能ですが、Figmaのプロトタイプ機能を使った画面遷移が見せられるURL形式の方が実務的なスキルをより伝えやすくなります。
案件獲得に使える5つの実務ノウハウ
【対象】: 練習段階から実務接続を意識したいフリーランス志望者
【手順】: クラウドワークスまたはランサーズで「Figma」と検索し、公開中の案件を10件確認します（所要時間: 20分）。案件の要件欄に記載されているスキル・成果物・納期を書き出し、自分が対応できるものと対応できないものを仕分けします（所要時間: 20分）。対応できないスキルをお題⑪〜⑮の中に取り込み、次の2週間の練習テーマに設定します（所要時間: 10分）。
【コツと理由】: 「現在公開されている案件の要件から逆算して練習テーマを決める」方が、ポートフォリオが実務ニーズと合致しやすくなります。案件を先に見ることで、「どのレベルまで作れればいいか」の基準が具体化されます。
【注意点】: 案件分析に時間をかけすぎて練習が後回しになるケースが起きやすいです。分析は週1回・30分以内に限定し、その時間以外は制作に集中するルールにすると継続しやすくなります。
ノウハウ2: 架空クライアント課題でデザインの判断を言語化する
【対象】: デザインは作れるが「なぜそのデザインか」を説明できない段階の人
【手順】: 架空のクライアント設定（業種・ターゲット・掲載場所）を30文字以内で決めます（例: 「20代向けの個人カフェのInstagram用告知バナー」）（所要時間: 5分）。お題⑪〜⑬を使って制作し、色・余白・フォントの選択理由を各1文で書き出します（所要時間: 60〜90分）。書き出した理由をポートフォリオの説明文にそのまま転用します（所要時間: 15分）。
【コツと理由】: 初案件の応募では「なぜそのデザインにしたかを説明できるか」が制作物の完成度と同じかそれ以上に見られることが多くあります。説明文があることで、クライアントは「この人はコミュニケーションが取れる」と判断しやすくなります。
【注意点】: 設定を凝りすぎると制作開始までに時間がかかります。クライアント設定は「業種だけ」で十分で、ターゲットや細かい設定は後から追加できます。
ノウハウ3: コンポーネント設計を含む課題で案件単価を上げる
【対象】: バナーやLPのデザインはできるが、案件単価が上がらないと感じているデザイナー
【手順】: お題⑬（UIキット制作）でボタン・カード・フォームの3種類のコンポーネントを作成し、バリアント機能を使って状態変化（通常・ホバー・エラー等）を追加します（所要時間: 90分）。作成したコンポーネントをライブラリ化し、別ファイルから呼び出せる状態にします（所要時間: 30分）。このファイルをポートフォリオに追加し、「コンポーネント設計・ライブラリ構築経験あり」として提案文に記載します（所要時間: 15分）。
【コツと理由】: コンポーネント設計の経験があるかどうかで応募できる案件の幅と単価が変わります（Figmaフリーランス案件の要件分析｜remogu）。「デザインシステムの一部を担える人材」への需要は高く、ライブラリ構築のスキルが案件獲得の差別化につながります。
【注意点】: バリアント機能は覚えるまでに時間がかかります。最初は「通常」と「エラー」の2状態だけに絞り、完成させることを優先してください。
ノウハウ4: 練習課題に「WEBデザイン・コーディング練習課題用Figma」を活用する
【対象】: 独学で何を練習すればいいか探している初心者〜中級者
【手順】: Figma Community上で公開されているWEBデザイン・コーディング練習課題用Figmaを自分のアカウントに複製します（所要時間: 5分）。課題ファイルの中から1つの課題を選び、制約条件（時間・色数・フォント数）を自分で設定して取り組みます（所要時間: 設定10分、制作60〜90分）。完成後に差分メモを書き、次回の練習の改善点を1点だけ決めます（所要時間: 15分）。
【コツと理由】: 教材や動画を探し続けるより、実際の練習課題ファイルを1つ手元に置いて繰り返す方が、手を動かす時間が増えます。同じ課題を「スピード重視」「クオリティ重視」「制約あり」の3回に分けて繰り返すと、1つの課題から3種類の気づきが得られます。作業効率を上げる仕組みを意識することで、練習の密度が変わります。
【注意点】: 課題ファイルをダウンロードして満足する「収集だけ」で終わるパターンが起きやすいです。ファイルを複製したらその場で最初の課題を30分だけ試してから保存してください。
ノウハウ5: 練習ログを「Before/After記録」で積み上げる
【対象】: 練習しているが成長を実感できない、または面接・提案時に経験を説明できない人
【手順】: 練習後に、元デザイン（スクリーンショット）と自分の制作物を1枚のFigmaフレームに並べて配置します（所要時間: 10分）。並べた画像に「今回の改善点3点」を注釈として追加します（所要時間: 10分）。週1回、直近4週分のBefore/Afterフレームを並べて変化を確認します（所要時間: 15分）。
【コツと理由】: Before/Afterの積み上げは、提案文の「経験の説明」と「ポートフォリオの補足資料」として直接使えます。「練習の証拠を作る」感覚で記録すると、後から振り返ったときに自信の根拠になります。フリーランスの初案件応募では、練習ログがあるとなぜそのデザインにしたかの説明がしやすくなります。
【注意点】: 完璧なBefore/Afterを作ろうとしてフレームの整理に時間をかけすぎるケースがあります。「スクリーンショット+自分の制作物+3点メモ」の最小構成で十分です。
Figma練習お題は段階と目的で決まる
Figmaの練習は、お題の段階を「基礎固め・模写トレース・実務接続」の3つに分けてから取り組むと、手が止まりにくくなります。練習の出発点はバナー1枚のトレースで、完成させた後に元デザインとの差分を3点書き出すことが次の上達につながります。案件獲得を目指す段階では、コンポーネント設計と説明文の言語化がポートフォリオの説得力を左右します。
週3日・1回30分でも、3段階のお題を順番に取り組めば3ヶ月以内に実務接続段階へ到達できます。続けられる量を先に決めておく方が結果的に早く進めます。フリーランスとして案件を獲得するための全体戦略も合わせて確認しておくと、練習の方向性がより明確になります。
| 状況 | 次の一歩 | 所要時間 |
| まだFigmaを開いていない | 無料アカウントを作成してフレームを1つ作る | 10分 |
| 基礎操作はできるがお題がない | 既存アプリのサインイン画面をトレースする | 30分 |
| トレースはできるが案件に応募していない | Figma URLのポートフォリオを作りクラウドワークスに登録する | 60分 |
| 案件応募しているが採用されない | コンポーネント設計を含む課題を1つ追加してポートフォリオを更新する | 90分 |
Figma練習お題に関するよくある質問
Q: Figmaの練習は毎日やらないと身につきませんか？
A： 毎日必須ではありません。週3回以上、1回あたり30〜60分の練習を継続できれば、技術は定着します。毎日の練習より「やめない継続」の方が結果に影響します。
Q： トレースだけ繰り返せば案件に応募できるようになりますか？
A： トレース練習は技術の土台として有効ですが、案件応募には「架空クライアント向けのオリジナル制作」と「デザインの言語化」が追加で必要です。お題⑪〜⑮の実務接続段階まで進んでからポートフォリオを整えると、応募できる案件の範囲が広がります。
Q： 無料のFigmaで練習は十分できますか？
A： Figmaの無料プランでは、ファイル数・機能ともに練習段階の学習には十分対応できます。有料プランが必要になるのは、複数人でのチーム共同編集や大量のファイル管理が必要になった段階です。個人練習の段階では無料プランで問題ありません。
Q： 練習期間の目安はどれくらいですか？
A： 週3日・1回30〜60分の練習ペースを前提にすると、基礎固め段階は2週間、模写トレース段階は3〜4週間、実務接続段階は4〜6週間が目安です。合計で2〜3ヶ月の練習期間で、初案件応募できるポートフォリオを整えられます。
【出典・参照元】
WEBデザイン・コーディング練習課題用Figma｜Figma Community
Figma初心者におすすめの練習方法｜lafdesign school
Figma練習のおすすめサイト4選！効率的な練習方法も解説｜侍エンジニアブログ