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を作る
❌ オシャレなデザインを完コピする
❌ 見た目だけ整えて満足する
❌ コンポーネントを使わない
✔ 正解は
小さい → 画面 → ページ
の順で作ること。
■ 初心者におすすめの制作ステップ
- UIパーツ集を作る
- スマホ1画面を作る
- PCトップページを作る
この3作品を作るだけで、
Figmaの基礎〜応用入口まで一気に到達 できます。
まとめ｜最初の3作品がFigma学習の9割を決める
Figma学習で大切なのは、
「何を作るか」ではなく
「どの順番で作るか」 です。
今回紹介した3作品は、
- 無理なく作れる
- 基礎スキルが網羅されている
- 次のステップにつながる
という理由から、
初心者にとって 最短ルート です。
今日からやること
まずは ボタン＆カードUI を作ってみましょう。
そこから、すべてが始まります。
#Figma #フィグマ #Figma初心者 #Webデザイン勉強中#デザイン初心者 #UIデザイン #デザイン独学#今日の積み上げ #スキルアップ #駆け出しデザイナー#学び直し #10分デザイン