お久しぶりです。こもりです。ここ数年しばらくWebの表舞台？から離れ、技術の変化を追うのは若い皆さんに任せ、いろいろな企業の中に入ったりしてフロントエンド系の制作実務やFigmaを使ったデザインシステムの導入やコンサルティング、その他Web周りの技術的なサポートに注力する日々でした。
さて、私は長く技術系書籍の執筆などを手がけてきましたが、アップデートが頻繁なWeb系のサービスを書籍で解説しても誰にとっても良いことがないなぁ、と数年来考えておりまして…。アップデートを機に印刷媒体を始めとした書籍ではすぐに誌面との間に乖離が出てしまうことも多く、特にWeb系のサービスの解説書は極めて商品寿命が短いものとなっていると感じています。そして誌面ではサイズやページ数などの制約もあり、細かな解説には正直なところ限界があります。
また、印刷媒体では一度リリースしてしまうと大きな画面変更が発生した場合でもすぐに入れ替えることができません。フォーマットとして似たような電子書籍でも画面の写真を入れ替え解説を書き直していくのは大変な労力をともなうものです。動画の場合も内容の差し替えは当然発生しますが、他の媒体に比べれば一部だけでも収録し直して公開することも可能で誌面よりはサポートしやすい側面があります。また、不足している解説があれば別途追加もしやすいです。
「Figmaを使えているのか自信がない」「もっと使いこなしたいけれど、周りに教えてくれる人がいない」――そんな声をよく耳にします。私自身も企業研修の場で、半日〜1日という限られた時間で受講者の方々に数多くの機能を詰め込んで説明してきましたが、その密度の高さゆえに「本当に役に立てているのだろうか」と感じることがありました。
そこで考えたのが、受講者が自分のペースでじっくり学べる「動画による講座」です。数年前から構成を練り、準備を重ねてきた結果として形になったのが、この「Figma講座」です。
Figmaは操作そのものは特段難しいものではありません。他のツールに慣れた人であればすぐに使い始められる類のもの。表向き簡単に見えても、実のところ内面では制作を効率化するための機能が年々強化されています。もちろんそれを知らなくても仕事はできますが、知らないことで時間を無駄にしている可能性もあります。画面のUIは機能追加で変わることも多く、しばらく触っていないと「あれ？」となることもあるでしょう。現在Figmaは新しいUIである「UI3」へのアップデートが終わり、年次のカンファレンス「Config 2025」でまた新しい機能の発表がおこなわれたばかりです。
これは本来昨年末にリリースしようと考えていた講座ですが、新しいUIへの変更や機能追加の発表がおこなわれるのを待ってリリースする方向に変更しました。講座は「基本編」と「マスター編」に分けています。これからFigmaを使ってみたい初学者の皆さん、他のツールからの乗り換えを検討中の方、数年ぶりにFigmaに戻ってきた方は基本編から。基本編は、Figmaの無償プランでも学んでいただけるよう押さえておきたい必要最低限の機能の解説に注力しています。もう少しFigmaを効率よく使ってみたい方、この数年で追加された機能をまとめて採り入れたい方にはマスター編をお薦めします。マスター編は、基本的な操作は知ってて当然として実務に役立つものだけに振った解説にしています。
配信する講座は、よくある解説書のようにサンプルを作って使えている気になるものではなく、機能自体をきちんと理解することで即実務で使えるようになることを目指しています。実際に長いこと現場で使っている人間だからこそできる解説であると自負します。マスター編まで学習すれば、胸を張って「私、Figma使えます」と言えるような講座の内容にしたつもりです（マスター編は7/25リリース済）。
2025年7月末日まで各商品セール価格でご購入いただけます。
商品一覧はこちらからご確認ください
※動画はマイページ内からLMSの形式で閲覧可能。現在ファイルのダウンロードは無効にしていますが、手元にダウンロードしたいという声が多ければ今後有効にする予定です。
Figma Design 基本編
新UI「UI3」、Config 2025アップデート対応版
これからFigmaを使ってみたい初学者の皆さんや他のツールからの乗り換えを検討中の方、数年ぶりにFigmaに戻ってきた方へ。基本編は、Figmaの無償プランでも学んでいただけるよう、これだけは覚えておきたいという必要最低限の機能の解説に特化している。マスター編に取り組む前にも
動画本数: 71本
（2025年7月10日現在。実践コンテンツを今後追加予定）
01. Figma Design
- 本講座とFigma Designの全体像（2:32）
- チーム、プロジェクトとファイル（3:21）
- ダッシュボードの構成（4:08）
- 新規デザインファイルとワークスペース（3:28）
- ツールバー（1:57）
- 左サイドバー（3:15）
- 右サイドバー（2:02）
- ショートカット（1:43）
- インポート／エクスポート（5:13）
- Config 2025での機能追加（2:50）
02. ページとレイヤー
- ページとレイヤー（3:40）
- レイヤーの重なり順と階層構造（3:02）
- コンテナレイヤーとは（1:47）
- グループ（1:16）
- フレーム（2:50）
- グループ化とフレーム化の違い（2:38）
- レイヤーのプロパティ（1:58）
- マスクの作成（2:00）
- 定形サイズのフレームの作成（1:25）
- まとめ（1:55）
03. オブジェクトの編集と操作
- オブジェクトの描画（3:13）
- オブジェクトの編集（4:42）
- オブジェクトの複製（2:36）
- オブジェクトの整列（2:08）
- スマートセレクション（2:33）
- オブジェクトの距離の表示（1:52）
- 制約（3:38）
- オートレイアウト（5:49）
- 新機能 Figma Draw（3:34）
- まとめ（1:28）
04. テキストとカラー、スタイル指定
- テキストの編集（4:04）
- ローカルフォントの追加（2:07）
- テキストの装飾、アウトライン化（4:47）
- テキストスタイルの指定（5:19）
- スタイルの階層化（2:59）
- カラーの編集（4:22）
- カラースタイルの指定（4:22）
- スタイルの移動と共有（2:41）
- スタイルとバリアブルの違い（2:31）
- まとめ（2:00）
05. コンポーネント基礎
- コンポーネントとは（5:18）
- マスターコンポーネントとインスタンスの関係（4:31）
- サイズが可変するボタンの作成（4:27）
- ボタンの新規コンポーネント化（4:03）
- コンポーネントプロパティの追加（3:35）
- アセットパネルからの挿入（1:33）
- 複数のオブジェクトをコンポーネント化する（3:10）
- アイコン付きのボタンの作成（3:33）
- インスタンスの入れ替え（2:44）
- まとめ（1:37）
06. プロトタイプ基礎
- プロトタイピングでできること（2:17）
- プロトタイプの設定（1:27）
- 開始点とフロー（1:44）
- コネクションを追加する（2:05）
- インタラクションの設定と編集（1:49）
- トリガー（1:29）
- アクション（1:48）
- アニメーション（3:13）
- プレビューとプロトタイプの共有（2:30）
- まとめ（1:49）
07. コミュニティの活用
- コミュニティとは（1:18）
- Figmaのプラグインを見つけてみよう（1:58）
- アバター画像を生成する（2:35）
- 著作権フリーの写真を利用する（2:03）
- 地図の画像を生成する（1:54）
- アイコン画像を追加する（2:28）
- オブジェクト間を矢印で繋ぐ（2:20）
- 色のコントラストをチェックする（2:25）
- その他のデザインリソースを活用する（2:02）
- まとめ（1:25）
08. 作ってみよう
- 制約を使ったサイズが可変するヘッダー（5:28）
Figma Design マスター編
新UI「UI3」、Config 2025アップデート対応版
もう少しFigmaを効率よく使ってみたい方、この数年で追加された機能をまとめて採り入れたい方に。マスター編は、既にFigmaを利用中の方も多いと考え基本的な操作の解説を省き、覚えておきたい機能を細分化して短めの動画に分け、実務に使えるであろう機能の解説に絞っております。このマスター編まで理解すれば、「わたし、Figma使えます！」と胸を張って言えるような構成にしました。
※Config 2025で公開された新機能「Grid」もβ版の段階ですが、現在解説できる範囲で解説しております
動画本数: 81本
（2025年7月30日現在。実践コンテンツを今後追加予定）
01. オートレイアウト基礎
- フレーム、制約、オートレイアウト（6:54）
- オートレイアウトの基本（5:42）
- 配置位置のコントロール（3:41）
- オブジェクトの間隔と上下左右の余白（3:57）
- 内包するオブジェクトを親のコンテナサイズで調整（3:03）
- 内包するオブジェクトで親のコンテナを自動調整（4:26）
- 最小値と最大値の設定（2:38）
- オートレイアウトの設定（2:56）
- 通常のフレームとオートレイアウトの違い（3:52）
- まとめ（2:38）
02. オートレイアウト詳解
- フレームをネストする（4:52）
- オートレイアウトをフレーム別に制御する（3:50）
- 複数のオートレイアウトを組み合わせた例（6:29）
- オートレイアウトからの除外（2:51）
- オートレイアウトの提案（3:25）
- グリッドフロー 〜β版（3:37）
- グリッドセルの設定とコントロール（3:32）
- セル内のアイテムの表示コントロール（3:42）
- グリッドをネストする（2:42）
- まとめ（2:49）
03. コンポーネント詳解
- コンポーネントを使いやすくする（7:39）
- コンポーネントプロパティとは（4:10）
- ブーリアン型（5:58）
- テキスト型（3:36）
- インスタンススワップ型（3:45）
- コンポーネントのバリアントとは（4:42）
- 複数コンポーネントをバリアント化する（4:15）
- 既存コンポーネントにバリアントを追加（3:07）
- 既存オブジェクトからセットを作る（4:15）
- まとめ（3:14）
04. バリアブル基礎
- バリアブルとは（2:13）
- バリアブルとスタイルの違い（5:25）
- バリアブルの種類（1:22）
- 新規バリアブルの作成（2:22）
- バリアブル値のオプション（3:01）
- バリアブルの値を適用する（4:16）
- コレクション（1:55）
- グループ（3:37）
- モード（2:24）
- まとめ（1:17）
05. バリアブル詳解
- 色のバリアブルを設定し適用する（5:51）
- 文字列のバリアブルを設定し適用する（6:00）
- 数値のバリアブルを設定し適用する（5:37）
- スタイル指定にバリアブルを適用する（4:55）
- ライトモードとダークモードを作る（4:10）
- 多言語のテキストコンテンツを作る（4:59）
- 複数のコレクションで値を共有する（3:03）
- プリミティブな値とエイリアス（4:07）
- デザイントークンの作成（7:12）
- まとめ（2:07）
06. プロトタイプ詳解
- プロトタイプを作り込むには（1:27）
- 画面上に重なるメニューを表示する（3:55）
- バリアントを入れ替えるアクション（5:15）
- プロトタイプにスクロールを設定する（5:55）
- スマートアニメート（2:57）
- プロトタイプにバリアブルを設定する（4:41）
- ボタンで数値を操作するプロトタイプ（3:13）
- 条件式を使ったインタラクションの作成（5:25）
- スイッチでモードを切り替える（5:05）
- まとめ（2:04）
07. ライブラリとファイル管理
- ファイルのバージョン管理（3:41）
- ファイルのライブラリ（3:16）
- ライブラリを公開する（1:44）
- 公開済のライブラリを利用する（4:25）
- ライブラリのアップデート（4:17）
- ファイルや任意のフレームを共有する（3:00）
- コメント機能（3:16）
- ファイルのエクスポート（3:06）
- ファイルのインポート（2:13）
- まとめ（2:03）
08. 開発者モード
- 開発者モードについて（2:31）
- 開発者モードのインターフェイス（4:11）
- Ready for devマーク（2:41）
- 変更内容の確認（2:34）
- アノテーションの追加（1:48）
- バリアブルの詳細を確認（1:21）
- バリアブルの候補を取得（1:55）
- ローカルのバリアブルコレクション（1:22）
- VS Code連携（1:23）
- まとめ（2:04）
09. 実践
- バリアントで作るドロップダウンメニュー（8:32）