なぜ「デザイン共有」が重要なのか
デザインは、一人で作るものではなく、チームで育てるものです。
UIデザイナー、エンジニア、マーケター、クライアントなど、多様な関係者が関わる中で、
「どこまでできた？」「どんな意図？」が伝わらなければ、方向性がブレてしまいます。
そんな時に役立つのが Figma と FigJam。
どちらも同じFigma社のツールですが、
目的が大きく異なります。
FigmaとFigJamの基本的な違い
| 比較項目 | Figma | FigJam |
|---|---|---|
| 主な用途 | UIデザイン・モックアップ制作 | アイデア出し・ワークショップ・共有 |
| 形式 | 高精度（ピクセルベース） | 自由形式（ボードベース） |
| 主な利用者 | デザイナー・エンジニア | チーム全体・非デザイナーも含む |
| コラボ機能 | リアルタイム編集・コメント | スタンプ・メモ・ふせん共有 |
| 出力 | UIパーツ・プロトタイプ・デザインデータ | アイデアマップ・プロセス共有図 |
簡単に言えば、「Figma＝形にするツール」「FigJam＝考えるツール」 です。
Figmaとは：デザインを“形”にするツール
Figmaの特徴
Figmaはブラウザ上で動作するUIデザインツール。
PhotoshopやXDと違い、クラウド上でリアルタイム編集ができるのが最大の強みです。
主な機能
- オートレイアウト（Auto Layout）
- コンポーネント管理
- プロトタイプ機能（クリック・アニメーション）
- デザインシステム共有
- デベロッパーモード（CSS・寸法確認）
これにより、デザイナーとエンジニアが同じ画面を見ながら作業できます。
チームでのメリット
- 修正が即時反映される
- コメントでフィードバックが簡単
- デザインの意図を共有できる
- バージョン管理不要（常に最新版）
Figmaは「完成形を作りながら伝える」ツールです。
FigJamとは：アイデアを“共有・発散”するツール
FigJamの特徴
FigJamは「オンラインホワイトボード」。
ブレインストーミングやチーム会議に最適です。
主な機能
- 付箋（Sticky Notes）
- コネクター（矢印でつなぐ）
- 図形・マインドマップ
- スタンプ・リアクション
- タイマー機能（ワークショップ用）
思考を可視化して共有することに特化しています。
チームでのメリット
- デザイナー以外も参加しやすい
- 会議の内容をそのまま保存可能
- プロジェクト初期の方向性を明確化
- 意見がリアルタイムで反映される
FigJamは「考えるプロセスを見せる」ツールです。
FigmaとFigJamの使い分けイメージ
FigmaとFigJamは、プロジェクトの進行段階によって使い分けます。
| フェーズ | ツール | 活用内容 |
|---|---|---|
| 企画・構想 | FigJam | アイデア出し・カスタマージャーニー・サイトマップ |
| 設計・デザイン | Figma | ワイヤーフレーム・UIデザイン・モックアップ |
| 検証・共有 | Figma + FigJam | プロトタイプ共有・フィードバックまとめ |
このように、FigJamで「考え」→ Figmaで「形にする」 流れが理想です。
実践：チームでの使い分け例
例1：新規サイトの構成を決める
- FigJamでサイトマップ・ペルソナ・競合分析を可視化
- 意見を付箋で出し合い、重要ページを決定
- その内容をFigmaに移してワイヤーフレーム化
→ 発散と収束をスムーズに行える！
例2：UI改善ミーティング
- FigJamに現状のUIスクリーンショットを貼り付け
- 「改善点」「課題」を付箋で共有
- 最も支持が多い案をもとにFigmaで修正版デザインを作成
→ チーム全体で「なぜその変更をしたのか」が明確に！
例3：クライアントとの共有
- FigJamで企画意図・ワイヤー構成を提示
- クライアントの要望をその場で追記
- 了承後にFigmaで本デザインに反映
→ コミュニケーションの誤差を最小化！
FigmaとFigJamを連携させる方法
両ツールは同一プラットフォーム上にあるため、
シームレスに連携可能です。
方法1：Figma内にFigJamファイルを埋め込む
- Figmaの「Insert」→「FigJamファイルリンク」
- プロジェクト内で直接FigJamボードを参照可能
方法2：FigJamにFigmaデザインを貼る
- Figmaの画面をコピー → FigJam上に貼り付け
- デザイン上にコメントやスタンプを配置して議論できる
方法3：コメント・プロトタイプ共有
どちらもリアルタイムで共有可能なので、
SlackやNotionとの連携もスムーズです。
チームで使う際のおすすめルール
Figma・FigJamをチームで使うときは、ルールを決めておくと効率的です。
| 項目 | 内容 |
|---|---|
| 命名ルール | PJ名_ページ名_バージョン で統一 |
| コメントルール | 「質問」「修正」「提案」を色分け（例：青＝確認） |
| アクセス権限 | 編集者／閲覧者を明確に設定 |
| フォルダ構成 | /01_FigJam/02_Figma/03_Output のように階層化 |
また、デザインシステム共有用のFigmaファイルと、
ワークショップ用のFigJamボードを分けると、整理がしやすくなります。
FigJamでチームの心理的安全性を高める
実は、FigJamの最大の魅力は「雰囲気づくり」。
スタンプや絵文字、簡単なコメント機能があることで、
誰でも意見を出しやすい環境が自然と生まれます。
たとえば
- 「👍」「✨」「🔥」などのスタンプで即リアクション
- 自分のアイコンを動かして参加感を演出
- “タイマー”を使ってゲーム感覚でアイデア出し
堅い会議になりがちなプロジェクトも、FigJamを使うだけで空気が柔らかくなることがあります。
まとめ：Figma × FigJamで“チームデザイン”を実現しよう
- FigJam は「考える場」
- Figma は「形にする場」
この2つを使い分けることで、
チーム全員が同じビジョンを共有しながら前進できます。
Figmaで作り、FigJamで話す。
これが、現代の“コラボデザイン”の最適解です。
Figma #FigJam #チームデザイン #UIデザイン #Webデザイン #UXデザイン #デザイン共有 #Figma初心者 #Figma学習 #デザイン思考