Figma初心者が“最初に作るべき作品”3選｜この順番で作れば絶対に迷わない

Posted on by

Figmaを始めたばかりの人から、よくこんな声を聞きます。

  • 何を作ればいいかわからない
  • とりあえずLPを作ってみたけど挫折した
  • チュートリアルを見ても身につかない
  • 「Figma使えます」と言えるレベルが分からない

その原因はシンプルで、
最初に作る作品の選び方を間違えている からです。

Figma初心者が最初に作るべきなのは、
✔ オシャレな作品
✔ 難しいLP
✔ 完成度の高いデザイン

ではありません。

「Figmaの基礎スキルが全部詰まった作品」 を
正しい順番で作ること が最重要です。

この記事では、
なぜその作品なのか
何が身につくのか
どう作ればいいのか

をセットで解説します。

なぜ「作品選び」が重要なのか？

Figma学習でありがちな失敗はこの3つです。

  • いきなりLPを作ろうとして挫折
  • 見た目だけ真似して構造が理解できない
  • 毎回ゼロから作ってしまう

Figmaは
「構造 → 再利用 → 見た目」
という順番でスキルが積み上がるツール。

だからこそ、
最初に作る作品＝学習の土台 になります。

作品①：ボタン＆カードのUIパーツ集（最重要）

おすすめ度：★★★★★

⏱制作目安：30〜60分

■ なぜ最初にこれを作るのか？

ボタンやカードは、
すべてのWeb・アプリUIの基礎パーツ です。

  • LP
  • コーポレートサイト
  • アプリ画面
  • 管理画面

どんなデザインでも必ず使います。

ここを飛ばすと、
後の作品がすべて不安定になります。

■ 作るもの（例）

  • ボタン（Primary / Secondary / Text）
  • タグ（NEW・カテゴリ）
  • カード（画像＋タイトル＋説明）

■ 身につくFigmaスキル

  • FrameとGroupの違い
  • Auto Layout（縦・横・Padding・Gap）
  • Hug / Fillの使い分け
  • コンポーネント化の基本

■ 作るときのポイント

  • すべて Auto Layout で作る
  • テキストは Hug contents
  • 作ったら必ず コンポーネント化

この作品が作れれば、Figmaの基礎は8割完成 です。

作品②：スマホ用1画面（サービス紹介 or 記事一覧）

おすすめ度：★★★★★

⏱制作目安：60〜90分

■ なぜ2番目に作るのか？

スマホ画面は、

  • 情報量が少ない
  • 構造がシンプル
  • レスポンシブを意識しやすい

という理由から、
初心者にとって最適な練習素材 です。

いきなりPC画面を作るより、
圧倒的に成功体験を積みやすいです。

■ 作るもの（例）

  • ヘッダー
  • 見出し
  • カード一覧
  • ボタン

※1画面完結でOK

■ 身につくFigmaスキル

  • Frame（375px）の使い方
  • セクション単位のAuto Layout
  • Text Style / Color Style
  • UIパーツの組み合わせ

■ 作るときのポイント

  • 上から「重要 → 補足」の順で配置
  • 余白は 8の倍数 を意識
  • 色は 3〜5色以内 に制限

「画面を作れる感覚」が身につく最初の作品 です。

作品③：PCサイトのトップページ（簡易版）

おすすめ度：★★★★☆

⏱制作目安：90〜120分

■ なぜ3番目に作るのか？

ここまで来ると、
Figmaの基礎操作・構造理解ができている状態。

PCトップページは、

  • セクションが多い
  • 情報整理が必要
  • レスポンシブを意識する

ため、総合力が試される作品 になります。

■ 作るもの（例）

  • ヘッダー
  • FV（ファーストビュー）
  • サービス紹介
  • カード型コンテンツ
  • CTA

※完成度より「構造重視」でOK

■ 身につくFigmaスキル

  • Constraints（Left / Center / Right）
  • PCとスマホの違い
  • セクション設計
  • コンポーネント再利用

■ 作るときのポイント

  • 先に ワイヤーフレーム を作る
  • Auto Layoutを後付けしない
  • 見た目より「崩れない構造」を優先

ここまで作れたら「Figma使えます」と言ってOK。

よくあるNGパターン（避けてください）

❌ いきなりLPを作る
❌ オシャレなデザインを完コピする
❌ 見た目だけ整えて満足する
❌ コンポーネントを使わない

✔ 正解は
小さい → 画面 → ページ
の順で作ること。

■ 初心者におすすめの制作ステップ

  1. UIパーツ集を作る
  2. スマホ1画面を作る
  3. PCトップページを作る

この3作品を作るだけで、
Figmaの基礎〜応用入口まで一気に到達 できます。

まとめ｜最初の3作品がFigma学習の9割を決める

Figma学習で大切なのは、
「何を作るか」ではなく
「どの順番で作るか」 です。

今回紹介した3作品は、

  • 無理なく作れる
  • 基礎スキルが網羅されている
  • 次のステップにつながる

という理由から、
初心者にとって 最短ルート です。

今日からやること

まずは ボタン＆カードUI を作ってみましょう。
そこから、すべてが始まります。

#Figma #フィグマ #Figma初心者 #Webデザイン勉強中#デザイン初心者 #UIデザイン #デザイン独学#今日の積み上げ #スキルアップ #駆け出しデザイナー#学び直し #10分デザイン