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

Posted on by

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

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

  • 模写
  • UI再現
  • リデザイン
  • コンポーネント設計
  • プロトタイプ
  • デザインシステム

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

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

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

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

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

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

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

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

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

学べること：

  • 文字サイズのバランス
  • 余白の取り方
  • アイキャッチの作り方
  • 色の使い分け

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

テーマ例：

  • セール告知バナー
  • ブログ更新のお知らせ
  • 無料相談LPの告知
  • 求人募集バナー

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

★ 難易度：★☆☆

学べること：

  • レイアウト構造
  • フォント階層（H1/H2/Body）
  • グリッドの使い方

模写先のおすすめ：

  • Apple
  • SmartHR
  • BASE
  • Canva
  • Airbnb

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

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

★ 難易度：★★☆

学べること：

  • Auto Layout
  • カードデザインのセオリー
  • 見出しと本文の読みやすい距離感

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

例：

  • 商品カード
  • ブログ記事カード
  • メンバーカード
  • 特徴紹介カード
  • 料金プランカード

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

★ 難易度：★★☆

学べること：

  • 入力欄（Input）の設計
  • フォーカス・エラーの状態
  • ボタンとの距離感

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

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

★ 難易度：★★☆

学べること：

  • SP UIの構成
  • ナビゲーション
  • アイコンの使用
  • コンポーネント化の重要性

おすすめの3画面：

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

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

★ 難易度：★★★

学べること：

  • 完全レスポンシブ化
  • グループではなくAuto Layoutで組む意識
  • 要素が増減しても崩れないUI

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

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

★ 難易度：★★★

学べること：

  • 再利用性
  • Variant（状態管理）
  • 整ったUI体系の作り方

作るべき例：

  • ボタン（4種類）
  • 入力欄（3種類）
  • タブ
  • アコーディオン
  • ラジオボタン
  • トグル
  • カード
  • ナビゲーション

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

★ 難易度：★★★

学べること：

  • Smart Animate
  • 遷移
  • モーダルの開閉
  • フローモードの整理

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

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

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

学べること：

  • 問題発見
  • UX向上提案
  • UI改善の根拠づくり

例：

  • 古いサイトのLPデザインを現代風に改善
  • シンプルなアプリ画面を情報整理して見やすくする
  • UIの配色・余白を整えて統一感を出す

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

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

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

学べること：

  • 色・文字・余白の統一
  • コンポーネントの体系化
  • 開発視点の命名ルール
  • ライブラリ運用

作るもの：

  • Color Style（Primary/Secondary）
  • Font Style（H1/H2/Body）
  • Spacing（8pt Grid）
  • Shadows
  • Buttons
  • Inputs
  • Cards

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

■ 練習を最大化するコツ

✔ 完璧を求めない

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

✔ 振り返りを必ずする

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

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

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

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

✔ 写真を撮って記録する

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

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

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

  • バナー制作
  • UI模写
  • カードデザイン
  • コンポーネント設計
  • プロトタイプ
  • デザインシステム

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