きれいなFigmaのカンプが、実データを入れた途端に崩れる。タイトルが折り返して2行になり、ボタンから文字がはみ出し、数字が枠を突き抜ける。デザイン会社のディレクターやデザイナーの方から、この相談をよくいただきます。

原因の多くは、デザインが「ちょうど良い文字数」で作られていることです。カンプの文言は表示に収まる長さで置かれていますが、CMSに入る実データはそうとは限りません。長い記事タイトル、2桁のつもりが3桁になる数字、英語の長い単語、そして「0件」。ここでの結論を先に言うと、崩れを防ぐ鍵はデザイン段階で「可変であること」を前提に渡すことです。実装で後から吸収するより、はるかに手戻りが減ります。

本記事は、CMS駆動のサイト（このブログ自身もそうです）を実装している立場から、可変テキストの渡し方のコツをまとめたものです。

なぜ「ちょうど良い文字数」で崩れるのか

カンプは静的な一枚絵ですが、実装後の画面は中身が動きます。CMSや多言語対応が入ると、同じ枠に入る文字数は毎回変わります。

  • 記事タイトルは10字のことも40字のこともある
  • 「120」のつもりの数字が「1,200」になる
  • 英語混じりだと internationalization のような分割しにくい長い語が来る
  • 検索結果やお知らせが「0件」になる瞬間がある

こうした最長・最短・空のケースは、実装してデータを流すまで表面化しません。カンプの1パターンだけを見て作ると、実装側は「この幅は何字まで想定か」を推測で埋めることになり、認識のズレが崩れとして出ます。

崩れる渡し方と崩れにくい渡し方の比較。ダミー文言・溢れた時の処理・余白・数字の4観点で違いを並べた表

最長ケースと最短ケースのダミーを添える

一番効くのは、カンプに極端なケースのダミーを一緒に置くことです。「これが最長」「これが最短・0件」という見本があれば、実装側は判断で悩みません。

  • 最長：想定しうる中で最も長いタイトルや、英語の長い単語を入れた版
  • 最短：1文字だけ、あるいは「0件」「該当なし」の空状態
  • 数字：桁が増えたとき（3桁・4桁、カンマ区切り）の版

Figmaなら、同じコンポーネントを複製して長短のバリアントを並べておくだけで十分伝わります。Auto Layout（要素の中身に合わせて枠が伸縮する仕組み）を使い、テキストの水平方向を「Fill container」にしておくと、長い文言が入ったときの挙動をカンプ上でも確認できます。この一手間が、実装後の「思ってたのと違う」を大きく減らします。

溢れたときの意図を決めておく

枠に入りきらないときの振る舞いは、見た目に直結する設計判断です。ここを実装側に丸投げすると、意図しない省略や折り返しが起きます。要素ごとに、どちらにするかを決めて渡してください。

  • 折り返す：見出しや本文など、全文を読ませたい要素
  • 省略（…）する：カードのタイトルやリストなど、レイアウトを崩したくない要素。何行で切るかも指定する

Figmaにはテキストの「Truncate text（省略表示）」と最大行数の指定があるので、省略させたい箇所はそれを使って意図を見せられます。CSS側でも、1行なら省略、複数行なら行数指定での省略が定番です。

/* カードのタイトルを2行で省略 */
.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

どの要素を折り返し、どの要素を省略するか。この線引きがカンプにあるだけで、実装の解釈ブレがなくなります。

可変を想定した渡し方を4枚のカードで整理。最長ダミー・最短と0件・溢れ処理・余白に余裕

余白は「伸びる前提」で持たせる

カンプで文字と枠がぴったり接していると、実装側は「1文字でも増えたら崩れる」設計を強いられます。上下左右の余白（パディング）に少し余裕を持たせ、行が増えても破綻しないようにしておくと安全です。

  • ボタンやタグは、文言が伸びても背景がはみ出さないよう内側余白を確保する
  • カードの高さは固定せず、中身に応じて伸びる前提にする
  • 縦に並ぶ要素は、隣接要素との間隔を詰めすぎない

このブログもCMS駆動で、記事タイトルの長さは毎回バラバラです。余白を伸縮前提で組んでおくと、長いタイトルの記事が増えても一覧が破綻しないと実感しています。

実装者への渡し方チェックリスト

最後に、カンプを渡すときに添えておくと実装がスムーズになる点をまとめます。

  • 最長・最短・0件のダミーを別バリアントで用意した
  • 溢れたときに折り返すか省略するかを要素ごとに決めた
  • 省略する場合の行数を指定した
  • 数字は桁が増えた版も確認した
  • 余白は文言が伸びても崩れない量にした

こうした「可変前提の設計」は、ヘッドレスCMSや多言語のサイトほど効いてきます。CMSからデザインへの落とし込みは、Figma・XDからのコーディング依頼やAstro＋ヘッドレスCMSの実装外注でも触れているテーマです。このブログを動かしている仕組みについてはEmDashとはで紹介しています。

崩れる前に、可変を前提に相談を

デザインは美しいのに実データで崩れる、というのは実装の粗ではなく、多くは「可変を想定した設計」の抜けが原因です。逆に言えば、渡し方を少し整えるだけで防げます。

Figmaのカンプをそのまま忠実にコーディングしつつ、CMSや多言語の可変テキストにも耐える実装が必要でしたら、お問い合わせからお気軽にご相談ください。最長・最短のケースまで含めて、崩れない形に落とし込みます。

本記事は2026年7月時点の情報です。Figmaの機能名や仕様は変更される場合がありますので、詳細は公式のヘルプをご確認ください。