マージン

基本的な意味

Web デザインにおいて「要素の外側の余白」を指す CSS用語です。要素と要素の間の距離を制御し、画面上に視覚的な区切りや「呼吸感」を作ります。マージンが適切に設定されていないと、情報が窮屈に見えてしまい、非常に読みにくいサイトになってしまいます。

※注意：よく似た用語に「パディング(Padding)」がありますが、こちらは「要素の内側(枠線とテキストの間など)の余白」を指します。制作会社に修正指示を出す際は、「外側の距離(マージン)を広げたい」のか、「内側のゆとり(パディング)を広げたい」のかを明確にすると、意図が正確に伝わります。

現場での使われ方と重要性

最大のポイントは「マージンはデザイン品質とプロジェクト進行の生命線」であるということです。

余白の取り方はサイトの読みやすさや世界観を大きく左右するため、ワイヤーフレーム(WF / ワイヤーフレーム)の段階でデザイナーと早期にルールを握っておく必要があります。もしデザイン確定後に「やっぱりこの要素間の余白を半分に詰めて」と安易に指示を出すと、コーダー(エンジニア)が構築した CSS のレイアウト設計全体がドミノ倒しのように崩れ、想定外の修正工数(追加費用)が発生するリスクがあります。

また、実務上のコミュニケーションでは、ビジネス用語の「粗利(販売価格ー原価)」を指すマージンと混同しないよう、文脈による使い分けが必要です。

Web 担当者が陥りやすい失敗とリアルな対策

事業会社の Web 担当者が最もやりがちな大失敗が、「せっかくのスペースがもったいないから、もっと情報を詰め込みたい」と要望し、デザイナーが緻密に計算したマージンを削ってしまうことです。

余白を削って情報を詰め込みすぎたサイトは、ユーザーの認知負荷を爆発的に引き上げ、結果として直帰率や離脱率の悪化(＝売上の低下)を招きます。また、モバイル端末では、マージンが狭すぎると「隣のボタンを誤タップしてしまう」という致命的なユーザビリティ低下を引き起こします。「余白も立派なデザイン要素(情報)である」という認識を持ち、情報量とマージンのバランス感覚を保つことが、成果を出す Web 担当者の必須スキルです。

言葉をよく利用する人

デザイナー
Web 担当者(発注側)
コーダー / フロントエンドエンジニア

会話上での使用例

デザインレビューで余白の扱いを相談される場面

マーケター
このページ、余白が多すぎる気がします。もっと情報を詰め込めませんか。
Web担当者
マージン は読みやすさの肝になる部分なんです。詰めすぎると一気に窮屈になって、かえって離脱が増えてしまいます。詰めるより、載せる情報を整理する方向で調整しましょう。
マーケター
なるほど、優先度の低い要素を削る方がよさそうですね。

モバイル表示の余白をデザイナーと詰める場面

デザイナー
PC ではこの余白でいいとして、モバイルだとどう調整しましょうか。
Web担当者
モバイルは画面が狭いので、マージン は少し詰めつつ、ボタンやリンクはタップしやすい間隔を確保したいです。ワイヤーフレームの指示に沿って最適化していきましょう。
デザイナー
了解です。要素ごとに間隔を見直しておきます。