「余白がない」を卒業する——Claude Designでスペーシングを正確に指定するコツ

「なんか詰まってる」の正体

Claude Designで生成すると、最初のうちは「情報が全部入った、でも…なんか見づらい」という仕上がりになりがちだった。原因は大体、余白不足だ。テキストとテキストがくっつきすぎ、要素と要素の間に呼吸がない。

プロンプトに「スッキリした感じで」と書いても、毎回同じようなギチギチレイアウトが出てくる。「スッキリ」という言葉がClaude Designには刺さっていない、ということにしばらく気づかなかった。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

数値で指定する、それだけ

結論から言うと、余白は数値で渡すと圧倒的に精度が上がる。

よくない例:

余白を広めにとってください

効く例:

セクション間の余白は64px、
カード内のパディングは上下24px・左右20px、
テキストの行間は1.7で設定してください

「広め」「ゆったり」という形容詞は解釈が揺れる。数値を出すと、生成ブレが明らかに減った。

8の倍数ルールを渡すと統一感が出る

これは試してよかった発見だ。デザインシステムでよく使われる「スペーシングは8の倍数」ルールをそのままプロンプトに書いてしまう。

スペーシングは8pxの倍数系（8, 16, 24, 32, 48, 64）で統一してください

これだけで、要素ごとにバラバラな余白が発生しにくくなった。Figmaのスペーシングシステムに近い感覚で生成されるようになる。

※デザインシステム: 一貫したUIを作るためのルール・コンポーネント・ガイドラインの集合。※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。

グリッドを明示すると崩れにくい

複数カラムのレイアウトを作るとき、グリッド指定を省略するとカラム幅がふらつく。

12カラムグリッド、ガター16px。
左カラム4カラム分（サイドナビ）、
右カラム8カラム分（メインコンテンツ）で配置してください

面倒に思えるが、一度テンプレートに書いておいて使い回す方法が結局ラクになる（→再利用プロンプトの管理術も参照）。

「余白が多すぎる」という逆の罠もある

数値指定の副作用で、過剰にスカスカになるケースもあった。特にモバイルサイズ（375px幅）でPC向けの余白値をそのまま渡すと、コンテンツが窮屈に見えた。

解決策はシンプル：ブレークポイントごとに別の余白値を渡す。

PC（1280px以上）: セクション間余白 96px
タブレット（768px）: セクション間余白 64px
モバイル（375px）: セクション間余白 40px

最初から全部書くのは正直めんどうだが、1回崩れると修正が長引くので、今はテンプレに含めている。

まとめ：「感覚語」を「数値」に変換する習慣

• 「スッキリ」 → セクション間余白 64px 以上を指定
• 「窮屈」 → パディング 16px 以下になっていないか確認
• 「バランスが悪い」 → 8の倍数ルールが守られているか確認

Claude Designは感覚語より数値に正直に反応する。最初は面倒に感じるが、一度数値テンプレを作れば後は貼り付けるだけになるので、慣れると戻れなくなった。