Figmaで作るB2B資料、余白より先に優先順位を設計する

Figmaで資料のフレームを仕上げ、大きなモニターで確認すると、すべてが整って見えます。タイトル、説明、グラフ、事例、注釈、問い合わせボタンが一つの画面に収まり、余白やブランドカラー、書体にも一貫性があります。

しかし、受け手が同じ環境でその資料を見るとは限りません。

メールやチャットで届いたリンクをスマートフォンで開き、縮小されたページを数秒ずつ眺めることもあります。1440ピクセルのフレームでは丁寧に分けた情報も、小さな画面では同じ強さの塊に見えます。タイトルは読めても表の文字は小さく、製品画像、数値、説明が先に見られようと競い始めます。

問題は余白の不足ではありません。一つのページで、あまりにも多くの判断を同時に求めていることです。

B2B資料のミニマルデザインは、要素を減らすスタイルというより、今確認してほしい情報と後から探せる情報を分ける編集方法です。FigmaのフレームをFeatPaperで配布しても、この優先順位が自動的に生まれるわけではありません。一方で、実際のモバイル表示を確認し、配布後の閲覧記録から次に見直すページを絞ることはできます。

モバイルでは何が複雑に見えるのか

Figmaではフレームを広く並べ、左右の空間を使って設計できます。小さな本文や補足も拡大して読めますし、複数ページを見渡しながら全体の流れを調整できます。

ところが、ページをスマートフォンの幅まで縮小すると、制作画面では目立たなかった問題が現れます。

• 2行だったタイトルが何行にも折り返され、本文を下へ押し出す。
• 軸と凡例を含むグラフは、数値より形だけが見える。
• 3列の機能比較は、各セルが細かな文字の塊になる。
• 本文、注釈、出典、CTAがほぼ同じ強さに見える。
• 複数のメッセージのうち、何から読めばよいか分からない。

すでに一つのフレームが多くの判断を求めているなら、PDFの書き出し設定だけでは解決できません。

モバイル確認は「レイアウトが崩れていないか」を見るだけの作業ではありません。縮小しても最も重要な文が先に届き、その後に根拠と条件が区別されているかを確かめる工程です。

ミニマルデザインは要素ではなく、競合するメッセージを減らす

資料をミニマルにしようとすると、まず要素を削り、余白を広げたくなります。背景を白くし、アイコンを減らし、本文を短くします。見た目はすっきりしますが、それだけで理解しやすくなるわけではありません。

製品画像が一つ、短いタイトルが一つ、周囲には広い余白があるページを想像してみましょう。タイトルが「ビジネスの新しい可能性」のように曖昧なら、読者は何を理解すべきか判断できません。

反対に、タイトル、主要な数値、短い解釈、出典が同じページにあっても、すべてが「現在の方法と何が変わるのか」という一つの問いに答えていれば、読む方向は明確です。

基準にしたいのは要素の数ではなく、競合するメッセージの数です。タイトル、グラフ、事例、CTAが一つの結論を支えるなら共存できます。短い文が三つでも、それぞれ別の主張をしていれば、余白が多くても複雑です。

フレームを作る前に、ページの役割を一文で書く

レイアウトを始める前に、そのページがどの判断を助けるのかを一文で書きます。「製品機能の紹介」のような分類名ではなく、読者が確認する内容を具体的にします。

• このページを見た読者が、現在の方法と提案する方法の違いを理解できる。
• このページを見た読者が、導入前に必要な準備を確認できる。
• このページを見た読者が、この事例を自分の状況に当てはめられるか判断できる。

一文が決まれば、そのページに残す情報と後へ送る情報を分けやすくなります。

役割を一文で説明できないなら、異なる目的が混ざっている可能性があります。すべてを一画面に詰めるより、ページを分けた方がよいかもしれません。

資料の長さはページ数だけでは決まりません。拡大し、前後を行き来し、長い説明を読み直さなければ理解できないなら、ページ数が少なくても長く感じます。

視覚的な階層は四段階で十分

すべての要素を別の大きさや色で強調すると、かえって重要なものが見えなくなります。多くのB2B資料では、次の四段階を分けるだけで読む順序を作れます。

1. 最初に理解してほしい結論

ページタイトルは分類名より結論に近づけます。「導入プロセス」より「導入前に確認する三つの項目」の方が、何に注目して読めばよいかを伝えられます。

根拠が確定していない数値や期間をタイトルに入れ、結果を断定するのは避けます。タイトルは、ページを読み終えた後に分かる文ではなく、残りの情報を見る視点を示す文です。

2. 結論を支える一つの視覚的な根拠

主要な数値、製品画面、フロー図、比較表のうち、一つを中心に置きます。複数のビジュアルが必要なら、同じ結論を説明しているかを確認します。

製品画面は仕組みを説明し、隣のグラフは成果を主張し、下のロゴは信頼性を強調しているなら、読者は三つの方向を追うことになります。仕組みと成果の根拠は別ページに分ける方が自然です。

3. 解釈を助ける短い説明

ビジュアルの意味を読者に推測させません。画面に見えている内容を読み上げるのではなく、何を比較しているのか、どこを見るべきか、現在の提案とどう関係するのか、適用されない条件は何かを補います。

モバイルでは、文字を小さくして文を収めることを最初の解決策にしません。タイトルと本文のウェイト差を明確にし、意図しない改行が意味の中心を分断するならタイトルを書き直します。すべての文が同じ灰色の塊に見えないことが大切です。

4. 出典と条件を伝える補助情報

出典、調査期間、適用範囲、注意事項は中心メッセージより小さくできますが、読めない大きさにはしません。本文の主張が強いほど、どの条件から導かれた内容かを確認できる必要があります。

よい視覚的階層は、重要な内容だけを大きくすることではありません。重要度が異なっても必要な情報同士が競わないように配置することです。

デスクトップのページを縮小せず、モバイル向けに再編集する

デスクトップ用のフレームをスマートフォンに合わせた結果、文字だけが小さくなったなら、デザインは対応したのではなく縮小されただけです。

まず多列レイアウトを確認します。三つの機能やプランを横に並べた表は、大きな画面では比較しやすくても、モバイルではどの列から読むか迷います。最も重要な違いを先に要約し、詳細な比較は次のページや付録に送れます。

グラフも同じです。軸、凡例、複数の系列をすべて残すのではなく、確認してほしい変化を一つ前面に出します。細かな数値は補足の表に分けられます。

長い製品画面は全体を押し込まず、必要な領域を拡大して見せます。小さなUIの文字まで読まなければ要点が分からないなら、その画像は説明の役割を果たしていません。全体像が必要な場合は、次のページで文脈を示します。

拡大しなくても、このページが何を伝えているか分かるか。

詳細を読むための拡大は自然です。しかし、テーマや結論を知るために拡大が必要なら、情報の階層を見直すべきです。

よいFigmaテンプレートは、スタイルより制約を保存する

チームのテンプレートは、色、書体、余白、ロゴ位置をそろえることが一般的です。ブランドの一貫性には役立ちますが、情報過多までは防げません。

実務で役立つテンプレートは、フレームに何を入れられるかだけでなく、何を一緒に入れないかも示します。問題を一文で定義するページ、一つの仕組みを説明するページ、数値と条件を示すページ、二つの選択肢を比較するページ、次の行動を一つ案内するページなどを用意できます。

各タイプにタイトル、本文、画像、出典のコンポーネントを置くことはできます。ただし、すべての欄を埋めることが目的になってはいけません。

• タイトルが領域を超えたら、文字を小さくする前に文を書き直す。
• 本文があふれたら、間隔を詰める前にページを分ける理由がないか考える。
• 事例ロゴが増えたら、小さな枠を足す前に現在の主張に必要なものだけを残す。
• CTAが複数あるなら、今必要な行動と後でよい行動を分ける。

よいテンプレートは、どんな内容でも受け入れる空の器ではありません。新しいページを作るたびに、チームへ優先順位の再検討を促す編集ルールです。

CTAはページの結論より先に大声を出さない

B2B資料には、相談予約、問い合わせ、詳細資料、顧客事例、Webサイトへのリンクを置けます。すべてのボタンを目立たせても、次の行動が明確になるとは限りません。

読者がまだ課題を理解している途中なのに「今すぐ相談」が最も強く見えると、ページの結論とCTAが別の方向を向きます。依頼する行動の大きさは、その時点で読者ができる判断の大きさに合わせます。

製品の基本構造を紹介した直後なら、関連事例や詳しいデモが自然かもしれません。価格と導入条件を十分に確認した後なら、問い合わせやミーティング予約を提示できます。技術確認のページでは、営業相談よりセキュリティ資料や技術担当者への連絡が役立つ場合もあります。

CTAをミニマルにするとは、常にボタンを一つだけ置くことではありません。主要な行動と補助的な行動を区別し、今の段階には大きすぎる依頼を後へ送ることです。

閲覧データから次に見直すページを絞る

Figmaで作った資料は、社内レビューの環境だけで完成するわけではありません。実際に使われた端末、長く見られたページ、再度開かれたページを確認すると、制作画面では見えなかった問いが見つかります。

FeatPaperのFigmaプラグインでは、選択したFigmaフレームを資料として書き出し、共有リンクを作成できます。Visitor Trackingでは、端末とOS、閲覧時間、再閲覧されたページ、長く見られたページなどの観察記録を確認できます。

ただし、閲覧時間や再閲覧だけでデザインの良し悪しや相手の意図を決めることはできません。長く見た理由は内容が重要だからかもしれませんし、表が複雑だからかもしれません。再閲覧も、関心、比較、混乱、社内説明の準備など複数の理由が考えられます。

閲覧記録は、ほかの根拠と組み合わせます。

• モバイル閲覧が多く、小さな比較表のあるページ以降で閲覧の流れが繰り返し変わる。
• そのページに関する質問が顧客との会話でも続いている。
• 社内のメンバーも、スマートフォンでは中心となる内容を探しにくいと話している。

これらが重なれば、表を小さくまとめる、または要約ページを前に置く修正案を試せます。FeatPaperがよいデザインを自動で決めるわけではありません。ここでは、次に見直すページを絞る材料として捉えるのが適切です。

共有前のモバイル確認事項

完成した資料では、余白の広さより読む優先順位が保たれているかを確認します。

1. サムネイルまで縮小する。 複数のフレームを見渡し、各ページのタイトルと中心画像を区別できるかを見ます。すべてのページが同じ密度と形なら、内容が変わっても読むリズムは単調です。

2. タイトルだけを読む。 本文と画像を隠し、タイトルを続けて読んでも資料の主張がつながるかを確認します。「製品紹介」「主な機能」「期待される効果」のような分類名ばかりでは、結論がなかなか現れません。

3. 実際のスマートフォンで開く。 Figmaの縮小表示だけに頼らず、最終PDFや共有リンクを自分に送り、タイトル、グラフ、表、出典がどの順に見えるかを確認します。

4. 各ページで最初に目に入る要素を言葉にする。 それが中心となる結論と違うなら、色、大きさ、位置を調整します。装飾画像やボタンが先に見える場合も同じです。

5. 削除する前に移動を考える。 資料を薄くするために必要な根拠まで消す必要はありません。判断に必要な要約を本文に残し、詳しい仕様や例外条件を次のページや付録へ送ります。

ミニマルデザインは情報を隠す方法ではありません。最初に見る情報と、必要なときに探す情報を分ける方法です。

よいB2B資料は、言葉が最も少ない資料でも、余白が最も広い資料でもありません。拡大したり、作成者の説明を聞いたりする前に「このページで何を確認すべきか」が分かる資料です。

Figmaテンプレートで最初に統一したいのも、色や影の設定だけではありません。ページごとに一つの中心判断を決め、タイトル、根拠、説明、次の行動が同じ方向からその判断を支えるルールです。

ミニマルデザインは、少なく作る技術ではありません。今見せるものと、次へ送るものを決める技術です。