Contents
Figma と FigJam の比較と実務活用ガイド
（UI デザイン vs ブレインストーミング、フェーズ別ベストプラクティス）
1. 基本的な役割と主要機能
| 項目 | Figma（UI デザイン） | FigJam（アイデア創出） |
|---|---|---|
| 主目的 | 高精度ベクターデザイン、コンポーネント化、インタラクティブプロトタイプ | 無制限キャンバスで付箋・ステッカーを駆使した発散／収束作業 |
| レイヤー構造 | 階層的レイヤーパネルとシンボル（コンポーネント）管理が可能 | 基本はフラットオブジェクト。グループ化やロックはできるが、階層情報は保持されない |
| リアルタイム共同編集 | 0.1 秒単位の同期とコメント・バージョン履歴 | 同時描画に特化したペンツール／自動整列ウィジェット |
| コミュニケーション | コメント、プロトタイプ共有リンク、開発者向けインスペクタ | 投票ウィジェット、ステッカー、タイムラインモード |
| テンプレート例 | UI キット、Design System、Responsive Grid | Design Sprint ボード、User Journey Map、マインドマップ |
ポイント
- UI を「形」にする段階は Figma で設計・検証し、概念を練る段階は FigJam で視覚的に整理すると効率が最大化します。
2. プロジェクトフェーズ別の活用シナリオ
2‑1. リサーチ／発散フェーズ – FigJam で情報を可視化
| 手順 | 内容 | 補足 |
|---|---|---|
| ① データ貼り付け | CSV やスプレッドシートから抽出したインサイトをボードにドラッグ＆ドロップ | FigJam の Sticky Note テンプレートで「課題」「欲求」別に色分け |
| ② ペルソナ作成 | プリセットの Persona Card に画像・テキストを配置 | 複数ペルソナはページタブで管理 |
| ③ ストーリーボード | フレーム（画面）を横並びに置き、手書き矢印でユーザーシークエンスを示す | 「Auto‑layout」機能は無いが「Connector」ツールで整列可能 |
FigJam のリアルタイム描画はブラウザだけで完結し、参加者全員が同時に編集できる点がリサーチ結果の共有に最適です[^2]。
2‑2. コンセプト設計／収束フェーズ – 投票とマインドマップで合意形成 → Figma へスムーズに引き継ぐ
- アイデア投票
-
各案をカード化し、FigJam の Voting widget（匿名・リアルタイム）で 3 票まで付与。上位 2 案が次工程の対象になる。
-
マインドマップ整理
-
中心テーマから放射状にノードを配置し、必要に応じてリンクやラベルで関係性を明示。
-
FigJam → Figma の転送
- 対象オブジェクトを選択 → 右上メニューの 「Copy as Figma component」 をクリック[^3]。
- コピーされたコンポーネントは自動的にクリップボードへ格納され、Figma の任意ファイルで ⌘+V（Mac）/Ctrl+V（Windows） すると貼り付けられます。SVG 書き出しと同等のベクターデータが保持されるため、再構築作業は不要です。
「Copy as Figma component」は FigJam の UI に明示的に表示されているボタン名であり、旧称「Export to Figma」と混同しやすいため注意してください[^3]。
2‑3. ワイヤーフレーム・ハイファイデザインフェーズ – 完全に Figma で実装
| 作業 | 主な機能 | コツ |
|---|---|---|
| ワイヤーフレーム作成 | Wireframe Kit テンプレート、Auto‑layout（列・行） | グリッドを固定し、コンポーネントは「Instance」だけで配置 |
| コンポーネント化 & スタイル統合 | 「Create component」＋「Team Library」共有 | カラースタイルは Color Styles に登録、テキストは Text Styles へ集約 |
| プロトタイプ構築 | Prototype タブでリンク設定、オーバーレイ・遷移アニメーション | デバイスフレーム（iPhone, Android）を使い、実デバイスサイズで確認 |
3. FigJam のアイディエーション手法と具体例
3‑1. 付箋＋投票でシンプルに発散→収束
| ステップ | 操作 | 補足 |
|---|---|---|
| ① 付箋ブレインストーミング | P キーで Sticky Note ツール起動、5 分間で思いつく限り書き出す |
色はカテゴリ別に変更（例：赤＝課題） |
| ② クラスタリング | 同様の付箋をドラッグしてグルーピング | グループ名はテキストボックスで補足 |
| ③ 投票 | Voting widget → 各参加者 3 票まで設定 | 集計結果は自動でバーグラフ表示 |
3‑2. マインドマップで概念を階層化
- 中心ノードに「新規サブスクリプションサービス」
- 第1レベル：顧客価値・課金モデル・UX フロー
- 第2レベル以降は各テーマごとに具体的な要素（例：顧客価値 → 「手軽さ」「コストパフォーマンス」）
マインドマップは Connector ツールで自由に線を引け、後からノードの追加・削除が容易です。
3‑3. 遷移図（ユーザーフロー）の作成と Figma 連携
- 画面ブロック配置：矩形ツールで「ログイン」「ダッシュボード」等を並べる。
- 遷移矢印：コネクタにラベル（例：「認証成功」）を付与し、条件分岐は色分けして視覚化。
- リンク共有：完成したページの URL をコピーし、Figma の該当画面コメント欄に貼り付けるか、
Ctrl+Kでハイパーリンク化。
4. Figma への受け渡しテクニック（FigJam → Figma）
4‑1. 正しい転送手順
| 手順 | 操作 |
|---|---|
| ① 対象選択 | FigJam ボード上でベクトルオブジェクト、図形、ステッカーなどをドラッグで選択 |
| ② コピー | メニュー > 「Copy as Figma component」（または右クリックメニュー） |
| ③ ペースト | Figma の任意のファイルで ⌘+V / Ctrl+V。自動的にコンポーネントとして貼り付けられ、レイヤー構造が保持される |
| ④ 必要に応じてリネーム・再配置 | コンポーネント名は FigJam の名前が引き継がれるので、プロジェクト規則に合わせて整理 |
この機能は FigJam v2.3（2024‑06 リリース）以降で利用可能です[^3]。
4‑2. スタイル・デザインシステムの同期
| 項目 | FigJam → Figma の流れ |
|---|---|
| カラー | FigJam のカラーパレット（例：#FF6B6B）をコピー → Figma の Color Styles に貼り付け、名前を付与 |
| タイポグラフィ | フォント情報（Roboto, 16 pt）をテキストでメモ → Figma の Text Styles に登録 |
| コンポーネント参照 | FigJam ボードの URL を Figma のコンポーネントコメントに貼り、設計根拠を可視化 |
5. コラボレーション設定・外部連携
5‑1. 権限ロールのベストプラクティス
| ロール | 主な権限 | 推奨対象 |
|---|---|---|
| 閲覧者 | ファイル閲覧のみ、コメント不可 | ステークホルダー、経営層 |
| コメント可 | コメント追加・返信、編集不可 | プロダクトオーナー、マーケティング |
| 編集者 | 全機能（レイヤー操作、コンポーネント作成） | デザイナー、ファシリテーター |
設定は各ファイル右上の Share ボタン → メンバー追加画面でロールを選択します。FigJam と Figma では同一ロール体系が適用されます[^1]。
5‑2. Slack / Notion との連携例
| ツール | 設定手順 | 効果 |
|---|---|---|
| Slack | Figma アプリをワークスペースにインストール → 「Channel」ごとに New comment と File update を通知設定。FigJam でも同様に Board updated 通知を有効化。 | 変更が即時にチャットで共有され、情報の抜け漏れが防止できる |
| Notion | Notion ページに Figma / FigJam の URL を貼り付け → 自動埋め込みブロックが生成。ページ内で直接プレビュー可能。 | ドキュメントとデザイン資産が一体化し、レビューサイクルが短縮 |
5‑3. 作業効率を上げるショートカット & テンプレート
| 操作 | Figma キー | FigJam キー |
|---|---|---|
| 全選択 | Ctrl + A / ⌘ + A |
同上 |
| コメントモード切替 | C |
C |
| ペンツール（FigJam） | - | P |
| コンポーネント作成 | Ctrl + Alt + K / ⌥ + ⌘ + K |
- |
| ズームイン/アウト | Ctrl + mouse wheel |
同上 |
公式テンプレート活用例
- Design Sprint ボード（FigJam） → 5 日間のフレームが予め配置され、各ステップで「Copy as Figma component」→Figma に貼り付けて UI プロトタイプへ展開。
- Journey Component Kit（Figma） → User Journey Map の要素を再利用可能なコンポーネントとして保存し、別プロジェクトでも即座に呼び出せる。
6. まとめ
| 観点 | 推奨アクション |
|---|---|
| 役割分担 | 発散は FigJam、具象化は Figma に集中させる |
| フェーズ別フロー | リサーチ・付箋 → コンセプト投票・マインドマップ → Copy as Figma component で UI スケッチへ移行 → 完全なワイヤーフレーム・ハイファイを Figma で仕上げる |
| 連携のコツ | 正しいコピー機能（「Copy as Figma component」）を使用し、カラー/タイポグラフィは Team Library に統合 |
| 権限管理 | 「閲覧者 / コメント可 / 編集者」の 3 段階で最小権限を付与 |
| 外部ツール | Slack 通知と Notion 埋め込みで情報フローを一元化、ショートカットと公式テンプレートで作業時間を削減 |
これらの手順とベストプラクティスを実践すれば、Figma と FigJam のシナジー効果により デザインプロセス全体の速度・品質・チーム合意 が大幅に向上します。
参考リンク
[^1]: Figma ヘルプセンター – コラボレーションと権限管理
https://help.figma.com/hc/en-us/articles/360040514733-Collaboration-and-permissions
[^2]: FigJam ガイド – 基本操作・ウィジェット一覧
https://help.figma.com/hc/en-us/categories/1500000018961-FigJam
[^3]: 「Copy as Figma component」機能の使い方（2024‑06 更新）
https://help.figma.com/hc/en-us/articles/360053123634-Copy-to-Figma-from-FigJam