はじめに：Figmaの“便利さ”が、議論の妨げになることもある
私は現在、BIPROGYのデザイン組織に所属し、10年以上にわたりUI/UXやサービスデザインに携わっています。BIPROGYにおけるUI/UXの取り組みについては、以下の記事で詳しく紹介しています。
本記事は、「Figmaの基本操作は理解していて、実務での使い方を工夫したい方」 を対象としています。特に、業務システムのUI検討に関わるUXデザイナーやエンジニアを想定しています。初心者向けの操作解説ではなく、「議論の場でどうFigmaを活用するか」をお伝えします。
UI初期検討とは？
UXデザインは、国際規格「人間中心設計（Human-Centred Design, HCD: ISO 9241-210）」に沿って進められることが多く、「利用者を理解し、設計し、評価して改善する」という流れを繰り返します。（HCDの考え方については、冒頭で紹介した記事に詳しく解説があります。)
このプロセスの中で本記事が扱うのは 設計工程におけるUI初期検討 です。
ここでいう「UI初期検討」とは、詳細なUIパーツやビジュアルデザインに入る前に、機能配置や画面間の関係性を議論できる状態まで落とし込む工程を指します。
- ラフスケッチ（紙・ホワイトボードなど）
- Figmaなどを用いた画面フローや全体構成の整理
なお、初期段階ではMiroのようなホワイトボードツールを活用するケースもあります。チーム全体でのアイデア出しや関係性の整理に有効ですが、本記事では画面構成を具体化する場面で役立つFigmaに絞って紹介します。
UI設計の流れの中での位置づけ
UI設計は大きく次のステップで進みます。
- 初期検討（本記事の対象）
- ラフスケッチやFigmaを使って画面フローや全体構成を整理します。
- この段階では、機能配置や画面間の関係性を議論できる状態に落とすことを目的とします。
- 詳細ワイヤーフレーム
- 画面構成を基に、1画面に配置する要素を並べます。
- この段階では、Figmaのオートレイアウトを積極的に活用し、ボタンや表などのUIパーツをコンポーネント化することで効率化を図ります。
- デザイン
- 色や余白を整え、完成形に仕上げます。
（図：UI設計の流れ。実案件を参考にしたサンプルです。）
UI初期検討で「すぐに直せる構成」で議論しておくことで、検討を深めながら合意を積み重ね、着実に進めていけます。
なぜ「編集しやすさ」が重要か？
業務システムは業務ルールが複雑でステークホルダーも多いため、議論を重ねて少しずつ合意を形成しながら進めることが重要です。そのためにも、即座に修正できる編集のしやすさが求められます。
FigmaはUI設計で広く使われており、とくにオートレイアウトは要素の整列や構造の保守性を保つのに便利です。
一方で、議論しながら検討する場面では、その便利さがかえって「編集しにくさ」につながることもあります。たとえばお客様やチームメンバーと会話している最中に「このボタンを少し動かしてみたい」と思っても、作り込みすぎていると修正に手間取り、議論の流れが止まってしまうことがあります。
この記事では、そうした課題を踏まえ、サンプル案件を題材に議論を活性化する“すぐ直せるFigma”の工夫をご紹介します。
UI初期検討の進め方
ステップ１：ラフスケッチからはじめる
最初からFigmaを開くのではなく、まずは紙やホワイトボードに手書きでラフを描くことをおすすめします。
自由に描いてすぐに消せるので、その場で意見を反映し、何度でも書き直して議論を進められます。
（図：手書きで画面構成を検討した例。実案件を参考にしたサンプルです。）
※このラフはあくまで社内用の叩き台として作成しました。
ステップ2：Figmaで画面フロー全体を整理する
ステップ1で描いたラフをベースに、Figmaで画面フローや全体構成を整理します。
ここでのポイントは「作り込みすぎず、柔軟に動かせる状態を保つこと」です。
画面構成を考える際は、1画面単体ではなく、 画面間のつながりや全体の遷移フローを検討することが重要です 。
細部を作り込むよりも、ページ同士の関係性や導線、操作の流れを俯瞰して検討できるように並べておくことで、後の議論がスムーズになります。
以下は、遷移フローを検討した際のFigmaの例です。各画面の役割やつながりを俯瞰できるように配置しています。
（図：構成検討段階のFigmaの例。実案件を参考にしたサンプルです。）
たとえば、サンプルの案件では、「一覧画面から直接修正モードに入るか、詳細画面を経由するか」という遷移レベルの議論がありました。
効率だけを考えれば一覧からの直接修正が早いのですが、実務では「修正は慎重に行うべき」という意見が多く、最終的に詳細画面をはさむ設計に落ち着きました。
俯瞰した画面構成を見ながら議論することで、納得感のある合意につながります。具体的には次のような効果があります。
- 各画面の役割や構造を俯瞰しながら検討できる
- 遷移のつながりを確認しながら、全体を改善しやすい
- 要素の修正や追加、配置変更にも柔軟に対応でき、議論しやすい
議論時に編集しやすいFigmaの工夫
Figmaに慣れていると、つい最初からきれいに整えた画面を作りたくなってしまいます。
初期検討の段階では、完成度より「その場で直せる柔軟さ」を優先した方が議論が進めやすくなります。
ここでは、そのための工夫をご紹介します。
1. レイヤーの深さを浅く保つ
レイヤーの階層が深すぎると、要素の移動や修正時に意図しない崩れが発生しやすくなります。
階層は1〜3段程度に抑え、構造はシンプルに保つことをお勧めします。
例
（図：編集のしやすさを意識したFigmaレイヤー構造の例。実案件を参考にしたサンプルです。）
2. 余白の一貫性は気にしすぎなくてもOK
初期段階では、余白の幅が揃っていなくても構いません。
重要なのは「要素の関係性」や「情報のまとまり」が伝わることです。
細かい調整は、後のデザインフェーズまでに対応すれば十分です。
3. 状態別UIは後回しでOK
hoverやactiveなどの状態パターンは、UIの詳細設計段階で検討すれば十分です。構成や全体の流れを検討する初期フェーズでは、状態別のデザインまで作り込む必要はありません。
状態の再現が必要になったタイミングでコンポーネント化すればOKです。
4. “オートレイアウトしない枠”も許容する
オートレイアウトはとても便利で、つい全部に適用したくなってしまうことがあります。
しかし、初期検討の段階で「全部に適用する」とかえって動かしにくくなることがあります。
繰り返し並ぶリストやカードには有効ですが、議論の途中で入れ替えや差し替えを繰り返す要素には、あえて自由配置にしたほうがスムーズです。
「オートレイアウトは全部に入れるもの」と考えず、必要なところだけ使えば十分です。
オートレイアウト適用の目安
💡 基本方針：初期検討では柔軟に動かせることを優先し、検討が進んだら繰り返し構造やUIパーツにオートレイアウトを適用して効率化します。
-
外したほうが良いケース
- 議論の場で要素を出し入れしながら比較したいとき
- 配置や大きさをあえて曖昧にしておきたいとき
- 細かい整列よりも、構造や遷移の流れを議論したいとき
- ボタンや検索条件のように、配置や数を試行錯誤する要素
-
使った方が良いケース
- 行やカードなど、一定ルールで並ぶ要素を扱うとき
- 最終的な整列や統一感を重視する段階に入ったとき
「初期は自由配置、検討が進んだら効率化」という進め方なら、議論のしやすさと後工程の効率化を両立できます。
まとめ：“すぐ直せるFigma”が議論を前に進める
業務システムのUI設計では、初期段階から完成形を目指すのではなく、その場で直せる柔軟さを持たせることが、議論の質とスピードを大きく左右します。
- ラフスケッチで柔軟に描き直し、議論を前に進める
- Figmaで全体フローを整理する。この際は編集しやすさを重視！
- 議論中にサッと動かして合意形成
こうした工夫は、チームやお客様とのやり取りに直結します。
- 会話中にすぐ修正して見せられる
- 誰が見てもどこを編集すればよいかが一目でわかる
- 完成度より“議論のしやすさ”を優先することで、試行錯誤の量と質が向上する
作り込みすぎず、あえてラフな状態で画面を共有することで、認識のズレを早期に解消し、最終的なアウトプットの質も高まります。
この記事では「初期検討」にフォーカスしましたが、ここをしっかり押さえることで、詳細設計やデザインにもスムーズにつなげられます。
We Are Hiring!