目次
１．余白は「呼吸スペース」＝患者様の安心を生む設計
パソコン苦手な院長情報を詰め込みすぎて、どこを読めばいいか分からない…と感じる方が多いです。
ぱそあん余白は「空き」ではなく、読む人に安心して呼吸できる間を与える空間です。
文字や画像の周囲に一定のマージンを確保することで、内容の信頼度が高まり、伝わるスピードも上がります。
余白設計の基本４ルール
- 要素間は「視線が飛ばない」距離を基準に
- 上下の余白＞左右の余白で安定感を出す
- セクション間は1.5倍の余白で明確に区切る
- 見出しの上は広く、下は狭くで読みやすく
２．整列の基本は「見えない線を通す」
整列の乱れは、無意識に「雑」や「不安定」といった印象を与えます。 特に医療サイトでは縦軸・横軸の一貫性が信頼感の基盤。見えない線を通す意識を持ちましょう。
整列の黄金ルール
- ・左揃えで「文章のリズム」を統一
- ・画像や見出しの端をグリッド（8px単位）で合わせる
- ・テキスト＋ボタン＋アイコンをベースラインで統一
- ・右端がズレると不安定に見えるため注意
３．“余白と整列”は心理効果で信頼に変わる
パソコン苦手な院長見た目が少し違うだけで「ここは丁寧そう」と感じるのはなぜですか？
ぱそあん余白が整うと、脳が「整理された＝信頼できる」と判断します。
特に医療サイトでは、余白＝清潔感、整列＝専門性として認知されるため、デザイン心理学的にも欠かせません。
４．行間・段落間で“読むリズム”をつくる
行間が詰まりすぎると「圧迫感」、空きすぎると「間延び感」。 本文はフォントサイズの1.8倍前後、段落間は行間の1.5倍を目安に設定しましょう。
おすすめ行間設定（目安）
| フォントサイズ | 行間（line-height） | 段落間（margin-bottom） |
|---|---|---|
| 14px | 25px | 30〜35px |
| 16px | 29px | 35〜40px |
| 18px | 32px | 40〜45px |
５．セクション間の余白は「意味の区切り」
コンテンツが長くなるほど、セクション間の余白が“意味のつながり”を示します。 見出し間は1.5倍〜2倍の余白を取り、グループを視覚的に分けることで、読者は迷わず内容を追えます。
６．左右非対称の余白で“動き”を出す
すべてを均等に配置すると単調に感じる
