ノーコードで余白調整できる場所が拡大！PaddingとMarginの使い分けを解説
この度、ferret Oneで余白改善のアップデートが行われ、これまでUIからは編集できなかったMargin（マージン：外側の余白）も、上下方向についてノーコードで調整できるようになりました。
これにより、Padding（パディング：内側の余白）と組み合わせて、ページの読みやすさや要素間のメリハリが、非デザイナーの方でも編集画面から素早く整えられます。
本記事では、非デザイナーの方向けに、ferret Oneのブロック構造（セクション → 行 → カラム → パーツ）を前提に、どの場面で何を触ればよいのかを実務基準で整理します。
サイトの印象改善やCVRへの影響も踏まえて、迷わない余白調整ができる状態を目指しましょう。
【こんな方におすすめ】
Padding・Margin とは？
Webサイトのデザインの基本知識として、余白には大きく2種類の概念が存在します。これはferret Oneに限らず、Webデザインの世界における共通言語です。 デザインの専門家ではないマーケターの皆様も、この機会にぜひ覚えておきましょう。
Padding ＝ 要素の内側の余白
- 箱と中身の距離を空けます。
- 背景色や枠線と“ひとかたまり”に見せたり、テキストの詰まりを防いで読みやすくします。
- これまでの余白設定で調整できていたのは、このPaddingの方です。
今までも設定できた余白は「Padding」を設定していた。
Margin ＝ 要素の外側の余白
- 隣の要素との距離を空けます。
- ページ内の「塊と塊の間」を作るのに使います。
- これまでMarginは裏側であらかじめ決められており、CSSを直接触らないと調整ができませんでした。
- それが今回のリリースで、Marginも調整できるようになりました。
- 余白が広すぎるという要素に対してMargin値を独自で指定した値に変えることで、余白を調整することができます。
例えば以下の「サービス一覧を見る」のボタンパーツが青い点線で囲われた箱だとしたときに、
Padding ＝ 箱の内側からスペースを拡張する → ボタン内の文字やアイコンが窮屈でない
Margin ＝ 箱の外側に新しいスペースを作る → ボタンと周囲との間隔が整う
という違い・関係性になります。
なおferret Oneの仕様上、 Marginは上下のみ設定が可能で、左右はノーコードでの設定ができません。そのため左右の余白はPaddingで作るのが基本となります。
前提（ferret One のパーツ構造）
本記事を理解する上で前提知識となる、ferret Oneのページ構成要素についておさらいします。
ferret Oneのページ構造は、「セクション＞行＞カラム＞パーツ」が、この順で親子関係になる構造です。
「セクション」という一番大きな箱があり、この中に「行」というセクション内の横割り（上 → 下）の要素群があります。
その中に「カラム」という行の中の縦割り（左 → 右）の要素群があり、そのカラムを構成する最小単位が「パーツ」です。
Padding・Margin の使い分け
PaddingとMarginの 使い分けについて解説します。
これらはferret Oneのパーツ構造ごとに適切な使い分けが変わるので、「セクション」「行」「カラム」「パーツ」ごとでの使い分けを紹介していきます。
なお余白調整を行う際には、「セクション → 行 → カラム → パーツ」といったように「構成要素の大きい単位 → 小さい単位」の順に調整すると、手戻りが少なくきれいに仕上がります。
セクション（ページの一番外枠）
目的：ページ左右の余白ラインと、セクション同士の区切りを作る
基本
- 左右：セクションの左右のPaddingでページ端から中身を離す。
- Paddingの値はページ全体で揃える。ここが揃っていないと全体が不揃いに見えるため、全セクションで統一が安全。
- 上下：セクションの上下 Padding で前後セクションとの間を取る。
- Marginは外に新しい余白を作ることになります。そのため、セクションの上下でMarginを使うと、セクションの背景色がついてこず、背景色のない空白スペースができてしまうので注意（右図）
- 注意背景に色や画像を指定している場合は、Paddingを使うことで、背景ごと拡張させることができる
行：セクション内の横割り（上 → 下）要素
目的：セクション内の塊を分け、前後の距離を揃える。
基本
- 左右：必要に応じて 行の左右のPaddingを足し、ページ両サイドの余白を整える。
- 上下：行の上下のPadding / Marginで塊の間隔を整える
- 色付きの“帯”感を出したり、厚みを出したいときは、Paddingを推奨
- その要素を独立して際立たせたいときは、Marginを推奨
カラム：行の中の縦割り（左 → 右）要素
目的：カラム同士にほどよい“隙間”を作り、情報の見分けを良くする
基本
- 左右：カラムの左右のPaddingでカラム間の“すき間”を再現
- 背景色付きのカードに見せたいときは カラムのPaddingを広めに。
- 上下：カラムの上下のPaddingで、中身にゆとりをもたらす。
- 初期値の目安：
- 左右 Padding：12–16px / 上下 Padding：16–24px
パーツ（見出し・テキスト・ボタン等）
目的： 読みやすさと 視認性を直接上げる。
基本
- 左右： Paddingを増やすことで、 ボタンなどCTAの 視認性 を高めてクリックされやすくする
- 上下：
- パーツの上下のPadding / Marginを整えることで、窮屈さを解消
- パーツの上下のMargin を整え、段落間・見出し下の間隔を統一
まとめ
本記事では、PaddingとMarginの基本的な違いから、実際の設定手順や使い分けのポイントまでを紹介しました。
Paddingは要素内の余白を整え、Marginは要素間の距離を調整する役割があります。
意図に合わせて適切に設定することで、デザイン全体の見やすさや統一感が向上します。
ferret One ではノーコードで簡単に操作できるため、実際に試しながら感覚をつかむことが重要です。
日々のページ更新に活かし、より効果的なレイアウトを実現しましょう。
