Google Stitch を使い始めてから、UIを見る目が変わった部分がいくつかある。
アイコンの意味、フォントの使い方、カラーパレット——そういったことへの意識が高まったのはわかりやすい変化だった。でも、最も静かに、でも確実に変わったのは「余白」への向き合い方だった。
以前の私は、余白を「何もない空間」だと思っていた。デザインの中の「空き」であり、コンテンツが埋まる前の「未完成な箇所」。だから余白が多いデザインを見ると、「もっと情報を入れられるのに」と思っていた。
Stitch でUIを生成し、そのデザインを批評・修正し続ける中で、余白が「何もない」のではなく「意味を持っている」と感じるようになった。それは気づきと呼ぶには地味すぎるが、UIの読み方が変わる出来事だった。
結論から言うと——余白はUIの「沈黙」だ。情報と情報の間に設けられた意図的な間隔が、読み手の視線を誘導し、重要な情報を際立たせ、画面全体の「呼吸」を作る。Google Stitch でUIを設計していると、この余白の意図が生成結果を通じて可視化され、余白への解像度が上がっていった。
余白とは何か——UIにおける「間」の役割
余白（ホワイトスペース）とは、UIデザインにおいてコンテンツや要素が配置されていない空間のことです。文字通り「白い空間」ではなく、背景色が何であれ「何も置かれていない領域」全般を指します。適切な余白は可読性・視認性・操作性を高め、プロダクトの品質感に大きく影響します。
余白には大きく2つの種類がある：
- マクロ余白（大きな余白）：セクション間・カード間・ページの端のマージンなど。レイアウト全体の「呼吸」を作る
- マイクロ余白（小さな余白）：テキストの行間・アイコンとラベルの間・ボタン内のパディングなど。細部の読みやすさと操作性を作る
どちらも「入れすぎず・狭くしすぎず」のバランスが求められるが、初心者が陥りやすいのは「余白が足りない（詰め込みすぎる）」方向だ。
「詰め込みすぎる」が起きる心理
なぜ余白を入れることをためらうのか。
「余白があると、未完成に見えるのではないか」「情報が少なく見えるのではないか」——そういう不安が働くからだと思う。
でも実際には逆で、余白が多いデザインの方が「高品質」「上位ブランド」という印象を与える傾向がある。Apple のWebサイト、高級ブランドのEC、医療系サービスのUI——これらに共通するのは、余白の豊かさだ。
「余白は贅沢品である」という感覚が、洗練されたUIの基盤になっている。
Stitch を使って気づいた、余白の「力」
Stitch で生成されるUIを見ていて、余白への意識が変わったのは、あるとき「同じ情報量でも、余白の多いバージョンの方が圧倒的に読みやすい」という体験をしたからだ。
余白を意図的に操作するプロンプト実験
あるダッシュボード画面を「コンパクト（詰め込んだ）版」と「余白多め版」の2パターン生成して比較した。
プロンプトA：「ダッシュボード画面。情報密度を高く、できる限り多くのデータを1画面に収める設計で。」
プロンプトB：「ダッシュボード画面。余白を十分に取り、各要素の間に32px以上のスペースを確保。カード間は24px、セクション間は48px。情報は厳選して掲載する。」
2つを並べると、情報量はほぼ同じでも、Bの方が圧倒的に「落ち着いて読める」ものになっていた。AはゲームのHUD（ヘッドアップディスプレイ）のような圧迫感があり、Bはウェルネスアプリのような清潔感があった。
実際に使ってみてわかったのは、余白の量が「このサービスが何者か」という印象に直結しているということだ。同じ情報でも、余白の差でまったく別のブランドに見える。
「余白の一貫性」が品質を作る
Stitch でさまざまな画面を生成していて気づいたのは、余白の「一貫性」が品質感に強く影響するということだ。
余白の値が画面ごとにバラバラだと、同じアプリの中でも「ページによって雰囲気が変わる」という違和感が生まれる。16px・24px・32px・48px——スペーシングの値をあらかじめ決めて、DESIGN.mdに記載しておくことで、Stitch がどの画面を生成しても一貫したスペーシングが反映されるようになった。
スペーシングの基準値（例）：
- 要素内パディング：12px（小）/ 16px（標準）/ 24px（大）
- コンポーネント間余白：8px（関連する要素）/ 16px（グループ内）/ 24px（カード間）/ 48px（セクション間）
- ページ端マージン：16px（モバイル）/ 24px（タブレット）/ 40px（デスクトップ）
このスペーシングシステムをDESIGN.mdに書いておくと、画面を変えても余白の一貫性が保たれるようになった。
余白が伝えるもの：情報の「関係性」を作る
余白を意識するようになってから、「余白は情報の関係性を表す」という視点が生まれた。
近接の法則：近いものは「関連している」
デザインのゲシュタルト原則のひとつ「近接の法則」によると、人間は近くに配置されたものを「同じグループ」として認識する傾向がある。
つまり余白は「この2つは関連している」「この2つは別のグループだ」という情報を視覚的に伝えている。
例えば、ラベルとその入力フォームの間は4〜8pxしか離れていないが、フォームのグループとグループの間は24〜32px離れている。この差が「どれとどれが一緒なのか」をユーザーに伝える。
Stitch でフォームを設計するとき、「ラベルとフォームの間隔4px、フォーム内の各項目間隔16px、セクション間隔32px」と明示することで、このグループ構造が視覚的に明確なUIが生成される。
強調としての余白：「孤立」が目立つ
余白を多く与えられた要素は、周囲から「孤立」することで目立つ。CTAボタンを広い余白で囲むことで、そのボタンが最も重要なアクションであることを視覚的に伝えられる。
Stitch で「最も重要なCTAボタンの上下に40px以上の余白を設け、ページ内で最も目立つようにする」というプロンプトを書くと、CTAが自然に強調されたUIが生成される。
モバイルと余白：タップ領域と余白の関係
モバイルUIでは、余白は「見た目の美しさ」だけでなく「タップの精度」にも影響する。
タップターゲット（指で押せる領域）が狭いと誤操作が増える。要素同士が詰まっていると、隣の要素を押してしまう。適切な余白を確保することは、モバイルUXの品質に直結する。
Stitch でモバイルUIを設計するとき、「タップターゲット最小44px、リストアイテム高さ56px以上、ボタン高さ48px以上」という指定をプロンプトに含めることを習慣にしている。
よくある失敗と対処法
- 失敗1：マイクロ余白（テキスト周りの余白）を無視する——ラベルとフォームの間・アイコンとテキストの間・行間などの細かい余白を詰めすぎると、UIが「窮屈」に感じます。特にLine Height（行間）は本文テキストで1.5〜1.6を基準にしましょう。
- 失敗2：スペーシング値がバラバラ——8px・9px・10px・11pxのように余白値がバラバラだと、規則性がなく「雑に作られた」印象を与えます。8の倍数（8・16・24・32・48・64px）などのスペーシングシステムに統一しましょう。
- 失敗3：モバイルの端マージンが狭すぎる——画面端ギリギリまでコンテンツを配置すると、指で操作しにくく、画面が「窮屈」に感じます。モバイルでは左右16px以上のセーフエリアマージンを確保しましょう。
- 失敗4：カード内の余白が外の余白より狭い——カード内のコンテンツが詰まっているのに、カード間は広い——というアンバランスがUIを奇妙に見せることがあります。内側の余白（padding）と外側の余白（margin）のバランスを意識しましょう。
- 失敗5：デスクトップ向けの余白をモバイルにそのまま適用する——デスクトップで適切な48px余白も、モバイルでは画面の半分を占める「すき間」になります。デバイス別にスペーシングを調整することがレスポンシブ設計の重要な要素です。
よくある質問（FAQ）
Q. Google Stitch でスペーシングを細かく指定するにはどうすればいいですか？
A. プロンプトに具体的なpx値を含めるか、DESIGN.mdにスペーシングシステムを記述する方法があります。プロンプトでは「カード間隔24px、セクション間隔48px、内部パディング16px」のように明示します。DESIGN.mdには「spacing-sm: 8px, spacing-md: 16px, spacing-lg: 24px, spacing-xl: 48px」のようにトークンとして定義すると、複数画面にわたって一貫した余白が生成されます。
Q. 余白を「十分に取る」とはどのくらいですか？一般的な基準はありますか？
A. コンテキストによりますが、一般的な目安として：ページ端マージン（モバイル16〜20px・デスクトップ40〜80px）、セクション間（32〜64px）、カード間（16〜24px）、テキスト行間（1.5〜1.6倍）などがあります。迷ったときは「もう少し広げてみた版」をStitchで生成して比べてみましょう。余白は広げすぎることより狭めすぎることの方が問題になりやすいです。
Q. 情報量が多いダッシュボードでは、余白が広いと情報が画面に収まらない。どう解決すればいいですか？
A. 「1画面に収める」ことを目標にするより、「スクロールしながら読む」設計に切り替えることを検討しましょう。どうしても多くの情報を1画面に収めたい場合は、タブやアコーディオンで情報を折りたためる設計、または情報の優先度を再検討して本当に必要な情報だけに絞る判断が有効です。
Q. DESIGN.mdにスペーシングシステムを書くと、Stitch の生成精度は上がりますか？
A. 上がります。DESIGN.mdにスペーシングトークンを定義しておくと、Stitch が複数の画面を生成したときでも余白の一貫性が保たれやすくなります。特に「どの余白値を使うか」の規則性が揃うことで、画面間のトーンの統一感が高まります。
Q. 余白を意識するようになるために、普段から何をすればいいですか？
A. 好きなアプリやWebサービスのUIを見るとき、「どこに余白があるか」「余白がどの程度の大きさか」を意識して観察することが有効です。特に「高品質だと感じるUI」と「使いにくいと感じるUI」を比べると、余白の違いが明確に見えてきます。Stitch でUIを生成した後、「余白をもっと広く」「余白を半分に」というプロンプトで両方を生成して比較する練習も余白の感覚を磨く有効な方法です。
まとめ：余白は「削れるもの」ではなく「設計するもの」だ
Google Stitch を使い続けて、「余白は削れるもの」から「設計するもの」へと、私の中で余白の位置付けが変わった。
余白は「何もない」のではない。近接の法則で情報の関係性を伝え、孤立させることで重要な要素を際立たせ、一貫したスペーシングでブランドの品質感を作る——余白はそれだけの仕事をしている。
Stitch でUIを生成するたびに、「このUIの余白は正しいか」という問いが自然に浮かぶようになった。生成結果を見てプロンプトを修正するプロセスが、余白への感度を鍛えてくれた。
余白を「もったいない空間」ではなく「意図的な間」として使えるようになると、UIがひとつ段階を上がる感覚がある。その感覚は、Stitch を使い始めたころには想像していなかった、静かな気づきだった。
次のステップ：自分のプロダクトの主要画面を開き、セクション間・カード間・テキスト周りの余白を計測してみましょう。余白値がバラバラな箇所はスペーシングシステムに統一することが、UIの品質感を上げる最初の一歩です。
