Figmaで作成する「伝わるハンズオンセミナー資料スライド」完全ガイド
このガイドの到達目標（ゴール）
パソコンの基本操作（クリックや文字入力）ができる方が、「社内勉強会」や「クライアント向けセミナー」でそのまま使える本格的なスライド資料一式（表紙・アジェンダ・比較図・手順・まとめの計5枚）を、Figma上で一切迷わず作成できるようになります。
研修カリキュラム目次（全7ステップ）
事前準備：セミナー資料の黄金比とデザイン原則
初心者がPowerPoint等で陥りがちな失敗は「スライドごとに枠のサイズが違う」「文字が小さすぎて会場やZoomで見えない」ことです。Figmaでは国際標準の1枚の規格を決めるだけで、すべての問題が解決します。
1 標準スライドサイズ：16:9（1920 × 1080 px）
現代のプロジェクター、液晶モニター、Zoom画面共有の99%が横縦比「16:9」です。Figmaではこのサイズを1枚作れば、どんな環境でも黒帯が出ずにピッタリ映し出されます。
2 不可侵マージン（外側の余白）を必ず確保する
画面の端ギリギリまで文字や図形を置くと、窮屈で読みにくくなります。スライドの上下左右に必ず「80px〜100pxの余白」を空け、その内側にコンテンツを配置します。
統一感を出す「3色ルール」と文字サイズ階層
プロと素人のスライドを分ける決定的な違いは「色を使いすぎていないか」と「文字の大きさに明確なルールがあるか」です。デジタル庁の推奨基準に合わせて、以下の固定値を使用します。
セミナー資料の「3色固定パレット」
真っ黒ではなく少し柔らかい濃墨色。長時間の読書でも目が疲れません。
信頼感と視認性を兼ね備えたデジタル庁準拠のブルー。見出しや枠線に使用。
受講者に「ここだけは覚えて！」という最重要キーワードやバッジに限定して使用。
| 要素 | フォントサイズ | 太さ（Weight） | 役割・使用場所 |
|---|---|---|---|
| 大見出し（表紙） | 56〜64 px | Bold（太字） | 表紙スライドのセミナー名・タイトル |
| 中見出し（各頁） | 36〜40 px | Bold（太字） | 2枚目以降のスライド上部タイトル |
| 小見出し（カード等） | 24〜28 px | Bold（太字） | 枠内の見出し、ステップ番号のタイトル |
| 本文・解説 | 18〜20 px | Regular（標準） | 箇条書き、説明テキスト（16px未満は禁止） |
【ハンズオン】セミナー用スライド全5枚をゼロから作る
ここからはFigmaを横に開きながら、1枚ずつ同じ通りに操作してください。5枚作り終えたとき、本格的なセミナー資料一式が手に入ります。
表紙スライド（タイトルと講師情報）
作成ステップ：
- キーボードの F を押し、右パネルから「Presentation」→「Slide 16:9」をクリック（1920×1080の台紙が出現）。
- 左上のフレーム名をダブルクリックして「01_表紙」に変更する。
- 上部のアクセント帯を作る：R を押し、一番上に横長四角（W: 1920, H: 12）を引き、Fillを #004098 にする。
- カテゴリバッジを作る：R で小さな四角（W: 160, H: 40, 角丸: 6）を作り、Fillを薄い青 #edf4fc にする。その中に T で「初心者向け講習」と16pxの濃い青文字で乗せる。
- 大タイトルを打つ：T を押し、「初めてでも怖くない！
Figma操作ハンズオンセミナー」と入力。フォントサイズ: 60px, Bold に設定。 - 講師情報を下に配置する：T で「講師：企画開発部 山田 太郎 ｜ 2026年9月開催」と入力し、22px, #454545 に設定。
初めてでも怖くない！
Figma操作ハンズオンセミナー
アジェンダ・目次スライド（3つの進行項目）
作成ステップ：
- 1枚目のフレームを選び、Ctrl + D（Macは Cmd + D）を押して右隣に複製。名前を「02_目次」にする。
- 表紙の大きな文字は消し、左上に中見出しとして「本日のアジェンダ」（36px, Bold）を配置。
- 目次カードを1枚作る：R で四角（W: 1760, H: 180, 角丸: 10）を引き、Fillを白、Stroke（枠線）を薄いグレーにする。
- カードの左端に数字バッジを置く：正方形（W: 70, H: 70, 角丸: 8）を作り、中に「01」（28px, 白文字）を乗せる。
- 数字の右側に「Figmaの基本概念と画面操作の習得」（24px, Bold）と打ち込む。
- このカードを Ctrl + D で下に2回複製し、項目02、03に書き換える。
本日のアジェンダ
課題提起スライド（Before / Afterの2列比較）
作成ステップ：
- 2枚目を複製し、名前を「03_比較図」、見出しを「従来ツールとFigmaの違い」に変更。
- 左側の枠（Before）：R で四角（W: 840, H: 680, 角丸: 12）を描き、Fillを薄い赤（#fdf2f0）、枠線を赤にする。
- 上部に「✕ 従来の課題（パワーポイント等）」と赤字で書き、下に「・保存し忘れて消える
・複数人で同時編集できない
・配置が勝手にずれる」と箇条書きを入れる。 - 右側の枠（After）：同じ大きさの四角を隣に置き、Fillを薄い緑（#e8f5ec）、枠線を緑にする。
- 上部に「◯ Figma導入のメリット」と書き、「・1秒ごとに完全自動保存
・同時に同じ画面で作業可能
・絶対的なグリッド配置」と入れる。
従来ツールとFigmaの違い
✕ 従来の課題
・保存忘れで消失
・同時編集不可
◯ Figmaの強み
・完全自動保存
・リアルタイム共有
手順解説スライド（3ステップ横並びフロー）
作成ステップ：
- フレームを複製し、名前を「04_手順解説」、タイトルを「スライド作成の基本3ステップ」にする。
- ステップカード1枚を作る：R で四角（W: 540, H: 640, 角丸: 10）を作り、枠線を薄いグレーにする。
- カードの上半分に四角形（W: 540, H: 300）を敷き、実際の操作画面のスクリーンショットを貼り付ける（ドラッグ＆ドロップで枠内にポンと入ります）。
- 下半分に「Step 1：フレームを出す」「F キーを押して16:9のサイズを選択します」と解説を入れる。
- このカードを右に2個複製して等間隔に並べ（Step 2、Step 3）、カードの間に右矢印「→」を置く。
スライド作成の基本3ステップ
まとめ＆質疑応答スライド
作成ステップ：
- フレームを複製し、名前を「05_まとめ」にする。
- 大きな文字で「本日のまとめ」（36px）と配置。
- 重要な持ち帰りポイントを3行で大きく書く（例：「1. スライドは16:9で作る」「2. 配色は3色に限定する」「3. Ctrl+D で複製する」）。
- 右下に「Q&A / 質疑応答」の大きなアクセントブロック（背景：#d97706、白文字）を配置し、講師の連絡先やアンケートURLを添える。
本日のまとめ
✔ 16:9の規格で作成する
✔ 3色ルールを厳守する
✔ 複製機能でスピード倍増
初級脱出！オートレイアウトで崩れないカードを作る
オートレイアウトの掛け方（3秒で完了）
合体させたい文字と四角形をドラッグして同時に選択します。
Shift + A を1回押します。
枠線の形が自動レイアウト化！右パネルに出現する余白ボックスに「24」と打つだけで、上下左右に綺麗な余白がつきます。
一括変更の魔法！ヘッダー・フッターのコンポーネント化
セミナー資料が20枚、30枚と増えたとき、「会社名が変わった」「日付を修正したい」となったら、全ページ直すのは大変です。Figmaの「コンポーネント（Component）」を使えば、親部品を1箇所直すだけで全スライドが一瞬で変わります。
フッターをコンポーネントにする手順
- スライドの一番下に「© 2026 セミナー企画室 ｜ 禁無断転載」という文字とページ番号を配置する。
- それを選んだ状態で、画面の一番上中央にある「ひし形が4つ合体したアイコン」（ショートカット Ctrl + Alt + K / Macは Cmd + Option + K）をクリック。
- パーツの枠線が紫色に変わり、「親コンポーネント」になります。
- これをコピーして他のスライドに貼り付けます。後から親コンポーネントの日付やロゴを書き換えるだけで、何十枚あっても一瞬で全部修正されます！
本番プレゼン・画面共有＆講師用ノートの使い方
通常プレゼンモード（右上の再生ボタン）
画面右上にある「▷（再生）」ボタンを押すと、黒い全画面モードになり、キーボードの矢印キーでめくれます。
受講者に見せない「スピーカービュー（発表者ツール）」
Zoom等で画面共有するとき、受講者にはスライドだけを見せ、講師の手元には「次のスライド」「経過タイマー」「話す内容のメモ（カンペ）」を表示できます。
受講者へのPDF配布と閲覧専用リンクの発行
方法A：印刷・配布用「1本のPDF」として保存する
上司や受講生にメールで送ったり、コンビニで印刷したいときの標準保存形式です。
方法B：リンクを送るだけ！ブラウザ即座閲覧（おすすめ）
ファイル容量が重いPDFを送る必要はありません。受講生はパソコンやスマホのブラウザでリンクを開くだけでいつでも復習できます。
初心者が必ずつまずく疑問・トラブル解決集
Q. スライドの外に文字や四角がはみ出して見えなくなりました！ ▼
スライドの台紙（フレーム）を選び、右パネルにある「Clip content（コンテンツを切り抜く）」のチェックを外してみてください。枠の外にはみ出たものが再び見えるようになります。
Q. プレゼンモードにしたとき、スライドの順番がおかしいです。 ▼
Figmaはキャンバス上の「左上 → 右上 → 左下 → 右下」の座標順にスライドを再生します。スライドの並びが上下にずれていないか、あるいは左パネル（レイヤー一覧）の並び順がぐちゃぐちゃになっていないか確認し、横一列に綺麗に並べ直してください。
Q. 図形を描いたのに、スライドと一緒に移動してくれません。 ▼
その図形が「スライドの白い紙（フレーム）」の外側の机に置かれてしまっています。左側のレイヤー一覧を見て、その図形をスライド枠の名前（例：01_表紙）の中にマウスでグッとドラッグして放り込んでください。
コメント