こんにちは。デザインとプロダクト開発の最前線で、数多のチームを成功へと導いてきたエンジニアです。
「Figma＝デザイナーのツール」という先入観を持っていませんか？ もしそうなら、今すぐ捨ててください。Figmaは、企画職やマーケターが「プロダクトの未来を可視化し、関係者全員の脳内を同期させるための思考ツール」です。
今日は、非デザイナーのあなたがFigmaを使って迷わず、かつ爆速で合意形成まで持っていくための「職人流の極意」を伝授します。
—
1. なぜ「ワイヤーフレーム」で迷子になるのか？
多くの人が陥る罠は、「最初から完成度を求めすぎる」ことです。色、フォント、細かい余白……そんなものは最後でいい。
ワイヤーフレームの本質は「何がどこにあり、ユーザーがどう動くか」という情報の構造化です。この本質を見失わないための、プロのセットアップ術を解説します。
—
2. Figmaの「基礎セットアップ」：迷わないための3つの掟
まず、真っ白なキャンバスを前にして立ち尽くさないための「型」を作ります。
① 「Auto Layout」という最強の武器を覚える
非デザイナーが最も挫折するのは、要素を移動させるたびに配置が崩れること。これを解決するのがAuto Layout（Shift + A）です。
- コツ: 要素を並べたら迷わず `Shift + A` を押す。これだけで「整列」の概念から解放され、余白を数値で制御できるようになります。
② 「コンポーネント」で再利用性を担保する
ボタンやヘッダーを毎回描いてはいけません。一度作った要素を `Ctrl(Cmd) + Alt + K` でコンポーネント化しましょう。
- 恩恵: 「修正が必要になったとき、1箇所直すだけで全ページに反映される」という体験をすると、もう元の世界には戻れません。
③ スタイル（Text & Color）を定義する
「なんとなくのグレー」や「なんとなくの16px」を使わないこと。
- 右サイドバーの「Local Styles」で、最初に「見出し」「本文」「メインカラー」の3つだけ定義してください。これだけで、あなたのワイヤーフレームは一気にプロの佇まいになります。
—
3. HelloWorld的・最初の一歩：ワイヤーフレーム作成フロー
まずは複雑な画面を作ろうとせず、以下の3ステップで「HelloWorld」を目指しましょう。
1. Frameの作成（Fキー）:
- `iPhone 14` や `Desktop` など、基準となるサイズを選びます。これがないとFigmaはただの落書き帳です。
2. ブロック配置（Rキー）:
- 画像は四角形、テキストは `Tキー`。この「ブロック遊び」で画面を構成します。
3. FigJamへの招待:
- 完成したワイヤーフレームをそのまま見せるのではなく、FigJamという「ホワイトボードツール」に貼り付けてください。
—
4. 合意形成を加速させる「フィードバックの極意」
ここからが、現場で震えるほど役立つ「エンジニアとデザイナーを味方につける」テクニックです。
Figmaの「コメント機能」を使い倒せ
適当に「ここ直して」と書くのはNGです。
- 悪い例: 「このボタン、もう少し大きくして」
- 良い例: 「ユーザーの遷移率を上げたいという要件に対し、このボタンの視認性が低い懸念があります。サイズを現在の1.5倍にするか、色を強調するのはどうでしょうか？」
- 理由: 目的と根拠を添えることで、エンジニアは「どう実装すべきか」を即座に判断でき、デザイナーは「なぜそうするのか」という意図を汲み取れます。
FigJamで「意思決定」を可視化する
ワイヤーフレームの横にFigJamを並べ、以下の項目を付箋で貼っておきましょう。
- 目的: このページでユーザーに何をさせたいか？
- 優先順位: 絶対に必要な機能はどれか？（Must have）
- 疑問点: 開発側への質問や、技術的な懸念点。
—
最後に：あなたに伝えたいこと
Figmaを使いこなすということは、単に絵を描くことではありません。「自分たちの作ろうとしているものが、本当にユーザーを幸せにするのか」をチームで問い続けることです。
最初はレイヤーの重なりや配置に戸惑うかもしれません。でも、大丈夫。今回紹介した「Auto Layout」と「コンポーネント」の基礎さえ押さえれば、あなたのワイヤーフレームは驚くほど整理され、チームの誰もがあなたの意図を完璧に理解できるようになります。
さあ、恐れずに最初の `Frame` を作り出してください。その一歩が、最高の結果を出すプロダクトの第一歩になるのですから。
何か具体的に「この機能はどう使えばいい？」という疑問があれば、いつでも聞いてくださいね。応援しています。