サイトアイコン WEBデザインMATOME

Figma練習用課題10選：模写・再現・リデザインでスキルアップ

小清水 和真

「Figmaを勉強したいけど、何から練習すればいいかわからない…」
「模写ばかりでマンネリ化してきた…」

そんな方に向けて、この記事では “Figma練習に最適な課題10選” をまとめました。
すべて 即実践できて、スキルが確実に伸びる構成 になっています。

など、段階別に取り組めるので、初心者〜中級者まで確実にレベルアップできます。

■ なぜ「課題形式」が上達の近道なのか？

Figmaは “触る時間” だけでは上達しません。
伸びる人は必ず、課題 → 振り返り → 改善 のサイクルを回しています。

【課題形式が効果的な理由】

  1. 目的が明確になる（迷わない）
  2. 完成・達成感が得られる
  3. 小さな成功体験で継続しやすい
  4. 実務に近い思考が身につく
  5. アウトプットの量が貯まる＝ポートフォリオになる

この記事の課題を順番に取り組めば、
「デザインできる人の思考」 が自然と身につきます。

■ Figma練習用課題10選（初心者〜中級者）

課題①：バナー（400×400px）を1枚作る

★ 難易度：★☆☆（初心者向け）

学べること：

最も取り組みやすいのが SNSバナー制作。
正方形は構成がシンプルなため、初心者でも完成しやすいです。

テーマ例：

課題②：Webサイトのトップページを模写

★ 難易度：★☆☆

学べること：

模写先のおすすめ：

ポイントは、細部まで再現すること。
線の太さ、色、余白1px単位まで忠実に模写することで、プロのルールを盗めます。

課題③：カードUIを5種類作る

★ 難易度：★★☆

学べること：

カードUIは実務で多用されるため、絶対に作れるようにしておきたい部分。

例：

課題④：フォームUIを1ページ作る

★ 難易度：★★☆

学べること：

フォームはWebのUIで最も重要な要素の一つ。
「入力しやすく・迷わない」デザインを意識できます。

課題⑤：アプリ風UIを3画面作る

★ 難易度：★★☆

学べること：

おすすめの3画面：

  1. ホーム
  2. 詳細
  3. 設定orプロフィール

課題⑥：1つの画面をAuto Layoutだけで再現

★ 難易度：★★★

学べること：

これは中級者に必須の練習。
最初は大変ですが、ここが理解できると Figmaが一気に楽になります。

課題⑦：UIコンポーネント20個のセットを作る

★ 難易度：★★★

学べること：

作るべき例：

課題⑧：Figmaで動くプロトタイプを作る

★ 難易度：★★★

学べること：

「動くUI」を作ることで、UXの理解も深まります。

課題⑨：既存のUIを“リデザイン”する

★ 難易度：★★★〜★★★★

学べること：

例：

「ただ作る」から「改善する」へ進化するステップ。

課題⑩：自分専用のミニデザインシステムを作る

★ 難易度：★★★★（中級者の総仕上げ）

学べること：

作るもの：

実務に近いスキルが一気に身につきます。

■ 練習を最大化するコツ

✔ 完璧を求めない

まずは完成させるのが大事。

✔ 振り返りを必ずする

「どこが難しかったのか」「改善できる点は？」をメモ。

✔ 模写 → 再現 → リデザインの流れが最強

  1. 見たまま模写する
  2. Auto Layoutで再現
  3. 改善・リデザイン

この順番でやると伸び方が全然違います。

✔ 写真を撮って記録する

成長が見えてモチベが続く。

■ まとめ：課題ベースで学べばFigmaは確実に上達する

今回紹介した10課題を順番に取り組むだけで、
あなたのFigmaスキルは 初心者 → 実務級 まで到達します。

これらを繰り返せば、
「UIデザインができる人」ではなく
「UIを“設計”できる人」へ成長できます。

モバイルバージョンを終了