職業訓練ユニット11｜Figma ・サイトデザイン演習(20時間）

Figma編 Figma
Figma編
2025.12.23

ユニット11では、Figmaを使って「サイトデザイン演習」に取り組みました。
Figmaは“見た目を整えるツール”というより、後から崩れにくいように「ルール（構造）」を作るツールだと感じました。

特に、フレーム・レイアウトガイド（※以前の呼び名はレイアウトグリッド）・オートレイアウト・コンポーネントの4つを押さえると、修正が増えても整った状態を保ちやすくなります。 Figmaヘルプセンター+2Figmaヘルプセンター+2
この記事では、私が迷わなくなった順番（手順メモ）と、つまずきやすい所の原因→対処を、初心者目線でまとめます。

この記事でわかること（3つ）

  • Figmaで「サイトデザイン」を作る基本の流れ（迷わない順番）

  • 初心者が詰まりやすいポイント（原因→対処）

  • 提出前に崩れを防ぐチェックリスト

学習内容の全体像（ユニット11でやったこと）

ユニット11では、Figmaを使ってサイトデザインを作る演習をしました。
「なんとなく配置する」ではなく、後から崩れにくい作り方（ルール化）を意識する回でした。

  • フレーム（画面サイズ）を作る

  • レイアウトグリッドで基準線を決める

  • オートレイアウトで余白と整列を安定させる

  • コンポーネント化して“量産できるパーツ”にする

  • スタイルで色・文字を統一する

  • PC→スマホなどレスポンシブを想定して調整する

基本設定（最初にここだけ押さえる）

  • 最初にフレームを作る（“どの画面のデザインか”を固定）

  • グリッドを先に敷く（後から整列で迷わない）

  • 余白は数値で管理する（感覚で合わせない）

  • 繰り返す要素はコンポーネント化（途中から修正が楽になる）

ユニット11の作業手順（私の手順メモ）

  1. 課題条件を確認（ページ数／画面幅／提出形式）

  2. フレーム作成（PC→SPなど必要な分）

  3. レイアウトグリッド設定（基準線）

  4. ワイヤー（情報の順番）→配置

  5. 見出し・本文など文字スタイルを先に作る

  6. ボタン・カード等をコンポーネント化

  7. オートレイアウトで余白・整列を固定

  8. 色・写真を入れて仕上げ

  9. スマホ版に展開（崩れチェック）

  10. 書き出し／共有リンクを準備

つまずいた点と解決（原因→対処）

  • 例1：余白がバラバラになる
    → 対処：オートレイアウト＋数値で余白を固定（8px/16pxなど）

  • 例2：修正が増えると全体が崩れる
    → 対処：繰り返す要素は早めにコンポーネント化

  • 例3：PCとスマホで見え方が違いすぎる
    → 対処：情報の優先順位を先に決め、SPでは要素を減らす（並び替え）

  • 例4：オートレイアウトを付けたのに思い通りに動かない
    → 原因：フレームではなく、グループや複数レイヤーに対して扱っている
    → 対処：オートレイアウトは「フレーム」に対して効く前提で、まずフレーム化してから設定する

  • 例5：コンポーネントを直したら、他も全部変わって焦った
    → 原因：メインコンポーネントを編集していた（＝全インスタンスに反映される）
    → 対処：用途が違うものはバリアントで分岐、個別調整はインスタンス側で上書き（必要な範囲だけ）

提出前チェックリスト（1分で確認）

  • 余白（上下左右）が“数値で”揃っている

  • 見出し／本文のフォントサイズが統一されている

  • ボタンやカードのパーツがコンポーネント化されている

  • 画像の比率が崩れていない

  • PC／SPでレイアウトが破綻していない

  • 書き出し形式・共有方法が課題条件どおり

  • PDFは基本1xでのエクスポート仕様を理解し、必要に応じてPNG/SVGも使い分ける

学習のコツ（初心者向け）

  • 「整った見た目」より先に “崩れない構造” を作る

  • 迷ったら、余白・整列・文字サイズを先に揃える（色や装飾は最後）

  • 分かったふりをしないでOK。崩れた場所＝理解の穴が見える場所なので、そこだけメモすると伸びが早い

まとめ｜次に読むおすすめ

参考（外部リンクと授業動画タイトル）

公式ヘルプ（分からない時はここ）

・オートレイアウトのガイド：Figma公式

・バリアントの作成と使用：Figma公式

・レイアウトグリッド（旧）／レイアウトガイド（記事）：Figma公式

・エクスポート形式および設定：Figma公式

・Figmaからのエクスポート（操作手順）：Figma公式

＜授業動画タイトル一覧＞
授業動画が視聴できないため、下の「授業動画タイトル一覧」は“チェックリスト”として活用しています。
タイトルから作業内容が想像できない場合は、同じキーワードで公式ヘルプを検索して補います。

サイトデザイン演習
1.はじめに
Figma1-1「Figmaについて」
2.基本操作
Figma2-1「Figmaの始め方」
Figma2-2「料金プラン」
Figma2-3「基本の操作(MacとWindows)」
Figma2-4「画面の基本①」
Figma2-5「画面の基本②」
Figma2-6「レイヤー構造」
Figma2-7「ショートカットキー」
Figma2-8「ツールバー①」
Figma2-9「ツールバー②」
Figma2-10「ツールバー③」
Figma2-11「プロパティパネル①」
Figma2-12「プロパティパネル②」
Figma2-13「プロパティパネル③」
Figma2-14「テキストの塗りについて」
Figma2-15「プレビュー、共有」
Figma2-16「レイヤーパネル」
Figma「復習タイム①」
Figma「練習問題①」
3.便利な機能
Figma3-1「レイアウトグリッド」
Figma3-2「オートレイアウト」
Figma3-3「コンポーネント・バリアント」
Figma3-4「スタイル(色・テキスト)」
Figma3-5「マスク機能」
Figma「復習タイム②」
Figma「練習問題②」
4.実践①
Figma4-1「作成するサイトについて」
Figma実践 素材フォルダ
Figma4-2「素材のインポート」
Figma4-3「スタイルの作成」
Figma4-4「レイアウトグリッド・ガイド」
Figma4-5「ヘッダーエリア①」
Figma4-6「ヘッダーエリア②」
Figma4-7「メインビジュアル」
Figma4-8「グローバルナビゲーション」
Figma4-9「コース一覧①」
Figma4-10「コース一覧②」
Figma4-11「コース一覧③」
Figma「復習タイム③」
Figma「練習問題③」
Figma4-12「スクールについて」
Figma4-13「選ばれる理由①」
Figma4-14「選ばれる理由②」
Figma4-15「バナー(CTA)」
Figma4-16「フッターエリア」
Figma4-17「全体の最終チェック」
Figma4-18「美しいデザインのポイント」
Figma「復習タイム④」
Figma「練習問題④」
5.実践②
Figma5-1「タブレット版デザイン①」
Figma5-2「タブレット版デザイン②」
Figma5-3「タブレット版デザイン③」
Figma「復習タイム⑤」
Figma「練習問題⑤」
Figma5-4「スマホ版デザイン①」
Figma5-5「スマホ版デザイン②」
Figma5-6「スマホ版デザイン③」
Figma5-7「スマホ版デザイン④」
Figma5-8「スマホ版デザイン⑤」
Figma5-9「スマホ版デザイン⑥」
Figma「復習タイム⑥」
Figma「練習問題⑥」
Figma5-10「スマホ版デザイン(メニュー）」
Figma5-11「スマホ版デザイン(下層ページ)」
Figma5-12「スマホ版デザイン(プロトタイプ)」
Figma5-13「スマホ版デザイン(実機確認)」
Figma「復習タイム⑦」
Figma「練習問題⑦」
Figma「習得度確認テスト」
Figma「習得度確認テスト」

øøøø

コメント