Figmaでサクッと作れる！初心者向け練習課題12選

Posted on by

毎日20分でUIデザイン力がみるみる伸びる！

Figmaを始めたばかりの初心者にとって、
「何を練習すればいいかわからない…」
という悩みはよくあるもの。

ツールの操作を覚えるだけでは上達せず、
“手を動かしながら学ぶ” 練習法が最短ルート です。

そこでこの記事では、
初心者でもサクッと作れて、デザイン基礎とFigma操作が一緒に身につく
“最強の練習課題12選” を厳選して紹介します。

すべて 短時間でできる＆一人で完結する ものばかりなので、
「毎日1つだけ練習する」でも効果抜群です！

１｜SNSバナー（正方形）

習得できるスキル

  • 文字サイズ・余白のバランス
  • 画像・背景とのコントラスト調整
  • 中央揃え・左揃えの基礎

バナーはデザイン練習の定番。
構図を考える力が鍛えられます。

２｜カードUI（縦型）

習得スキル

  • Auto Layout
  • 画像・タイトル・本文の配置
  • 余白の一貫性

カードはUI設計の“基礎中の基礎”。
これを作りこむだけでレイアウトの理解が深まる。

３｜ヘッダー（PCサイト幅）

習得スキル

  • 水平整列
  • ナビゲーションの配置
  • 余白の統一
  • 配色バランス

Webデザインの顔になるパーツ。
シンプルでも整ったデザインが作れればレベルアップ。

４｜ログイン画面のUI

習得スキル

  • フォームUI
  • ボタンデザイン
  • 文字間・行間の調整

実務でもよく使われる構成で、練習効果が高い。

５｜スマホLPのヒーローヘッダー

習得スキル

  • 余白の広いレイアウト
  • キャッチコピーのデザイン
  • 配色の世界観作り

LPの最上部は“デザイン表現”を学ぶのに最適。

６｜チェックリストUI

習得スキル

  • アイコンの扱い
  • 行間・要素間のバランス
  • Text Styleの使い方

整った情報リストが作れると実務で役立つ。

７｜ボタン（3種類）

習得スキル

  • コンポーネント化
  • ホバー状態のデザイン
  • 影・角丸の調整

たったボタンでも学べることは多い。
UIの最重要パーツ。

８｜アプリ風のタブバー

習得スキル

  • アイコン＋テキストの整列
  • 間隔（Gap）の調整
  • コンポーネントのバリエーション管理

アプリUIに必ず登場する基本パーツ。

９｜ブログカード（横型）

習得スキル

  • 画像の扱い
  • 情報の優先度整理
  • 横並びレイアウト
  • トランケーション（3点リーダー）

Web制作で頻出するパーツなので絶対に練習しておきたい。

10｜CTA（行動導線ボックス）

習得スキル

  • コンバージョン導線の理解
  • 目立つ配色
  • レスポンシブ想定の配置

「資料請求はこちら」などLPでよく見る要素。
デザイナーとしての実務感が鍛えられる。

11｜アプリのプロフィール画面

習得スキル

  • アイコン画像のマスク
  • 情報の整理
  • モジュール化したレイアウト

プロフィール画面は余白の感覚が鍛えられる最高の練習テーマ。

12｜ミニポスター（A4風）

習得スキル

  • 階層構造（タイトル→本文→補足）
  • 強弱（メリハリ）の作り方
  • 余白と行間のコントロール

情報の整理力が一気に伸びる。

【重要】上達スピードを倍にする練習のやり方

① 同じ課題を「3回」繰り返す

1回目：慣れる
2回目：整える
3回目：クオリティにこだわる

3回やると“手が覚える”ので成長が早い。

② 必ず数値を使う（なんとなく配置しない）

  • 余白 → 16 / 24 / 32
  • フォント → H1 / H2 / Body を固定
  • 角丸 → 4 / 8 に統一

これだけでプロっぽく見える。

③ Auto Layout を必ず使う

Auto LayoutはUIデザインの革命機能。

  • 余白
  • 整列
  • 並び順
  • レスポンシブ対応

これらが “自動で整う”。

初心者ほど Auto Layout縛り をしたほうが成長が早い。

④ 作った作品はSNSに投稿する

X（旧Twitter）に投稿すると、

  • モチベが上がる
  • 他のデザインを見て学べる
  • 実績としてポートフォリオに使える
  • フォロワーが増える

メリットしかない。

まとめ：練習テーマが明確なほど、成長スピードは速い

今回紹介した12の課題は、
Figma初心者が最短で実務レベルに近づくための黄金パターン。

練習課題12選まとめ

  1. SNSバナー
  2. カードUI
  3. Webヘッダー
  4. ログイン画面
  5. スマホLPヒーロー
  6. リストUI
  7. ボタン3種
  8. アプリのタブバー
  9. ブログカード
  10. CTA
  11. プロフィール画面
  12. ミニポスター

毎日1つでOK。
1ヶ月後には「別人レベル」で上達しているはずです。

#Figma #Figma初心者 #Webデザイン #UIデザイン #デザイン初心者 #Figma学習 #デザイン練習 #UIUX #AutoLayout #デザイン原則 #UIデザイナー #デザイン独学