「アイコンの横に文字を置くと、なんだか素人っぽくなってしまう…」と感じたことはありませんか？実は、デザインの美しさは「余白（マージン）」によって決まると言っても過言ではありません。このコラムでは、アイコンとテキストのバランスを整えるコツを解説します。
1. 余白がデザインに与える影響
アイコンと文字が近すぎると窮屈で読みにくく、離れすぎていると関連性がないように見えてしまいます。適切な余白（ホワイトスペース）を取ることで、以下のような効果があります。
- 視認性の向上： 情報が整理され、ユーザーが直感的に内容を理解できるようになる
- 高級感の演出： 十分な余白があることで、洗練されたプロ仕様のデザインに見える
- 誤操作の防止： 特にスマホUIにおいて、タップ領域を明確にできる
2. アイコンとテキストの「黄金バランス」
具体的な余白の設定について、Webデザインやスライド作成で使える基本ルールをご紹介します。
ルールA：要素間の距離は「関連性」で決める
「ゲシュタルトの法則（近接の法則）」を利用し、関連する情報（アイコンとラベル）は近づけ、別のグループとの間には大きな余白を取ります。
| 関係性 | 余白の目安（例） |
|---|---|
| アイコンと見出し文字（グループ内） | 8px 〜 12px |
| 見出しと本文（グループ内） | 16px 〜 24px |
| 別のグループ（次のセクション）との間隔 | 40px 〜 60px以上 |
ルールB：中央揃え（センター配置）の罠
アイコンの下に文字を配置する「中央揃え」は、文字数が多いと非常に読みにくくなります。文字数が2〜3行以上に及ぶ場合は、アイコンを左側に、テキストを右側に配置する「左揃え（横並び）」が基本です。
3. irotoriの素材を使ったレイアウト実例
irotoriのシンプルな線画アイコンは、余白をしっかり取ることで非常に洗練された印象を与えます。
たとえば「サービスの特徴」を3つ並べるWebセクションを作る場合、アイコンの周囲に最低でも24px以上の余白（パディング）を設けましょう。線が細いアイコンほど、周囲にたっぷりとした余白を持たせることで美しさが引き立ちます。
まとめ
「迷ったら余白を広く取る」のが、非デザイナーが垢抜けるための最短ルートです。文字のサイズや色をいじる前に、まずはアイコンと文字の距離を見直してみてください。irotoriのアイコンを使って、すっきりとした美しいレイアウトに挑戦してみましょう！