アイコン付きボタンは、左右の余白を同じ値にせず、見た目のバランスで調整する
アイコンと文字が並ぶボタンで左右のパディングを機械的に同じ値にすると、アイコンの分だけ片側に寄って見える。
どんな問題を解決するか / いつ使うか
アイコン付きのボタンやタグ、チップを作るとき。
やり方
- まず左右同じ値で作り、ボタン全体を見て中身が寄って見えないか確認する。
- 寄って見える場合は、アイコン側の余白を少し減らす（例：右に文字・左にアイコンなら、左パディングを2〜4px小さくする）。
- コンポーネント化するときは、アイコンありのバリアント用に余白の値を別に持つ。
- AIに作らせるときは「アイコン付きボタンは、見た目の中心がそろうようにアイコン側の余白を小さくする」とルールに書く。
注意点・対応状況
- 調整幅は投稿にはない一般的な目安。アイコンの形によって変わる。
出典
- 投稿者: @yuichirohonda_ (ホンダ)
- 投稿: @yuichirohonda_ · 2026-04-08
- 投稿日: 2026-04-08（JST）
- 収集日: 2026-10-09（JST）