15 余白(パディング)の整え方|見やすいページに仕上げるコツ

執筆者 | 高コンバージョンファネル

こんにちは、下坂栄里子です。

この記事では、ページの完成後に行う最後の仕上げとして、セクションの余白(パディング)と画像サイズを調整し、全体のバランスを整える方法を解説します。

「パディング」で余白の広さを調整する

セクションによっては、上下・左右の余白が広すぎて間延びして見えることがあります。この余白のことを「パディング」と呼びます。

セクションのパディング設定パネル。上・下・左右のスライダーとpx数値入力欄が並んでいる

セクションを選択し、設定パネルの「パディング」から、上・下・左右それぞれの数値を少なめに調整します。数値を小さくするだけで、詰まりすぎず、かつ間延びしない、ちょうどよい余白感に仕上がります。行(ロウ)単位にも同じようにパディングが設定されていることがあるので、全体的に大きく見える場合はそちらもあわせて確認しましょう。

画像が大きすぎる場合はサイズを調整する

画像要素の設定パネル。「画像幅」のスライダーが29%に設定されている

画像もセクションと同じように、大きすぎるとバランスを崩す原因になります。画像要素を選択し、「画像幅」の数値を調整することで、テキストとのバランスが取れたちょうどいいサイズに変更できます。

ページ全体のレイアウトバランスの考え方についてはこちらの記事でも解説しています。

保存してプレビューで確認する

完成したヒーローセクション。見出し・説明文・ボタン・EBOOK画像がバランスよく配置されている

余白と画像サイズを調整したら、必ず一度保存してプレビューで確認しましょう。細かい色の調整などはまだ残るかもしれませんが、余白を整えるだけでも、ページ全体がぐっとすっきりとした印象に変わります。

まとめ

間延びして見える場合は、セクションの「パディング」の数値を小さくする

セクションだけでなく「行(ロウ)」にもパディングが設定されていることがあるので確認する

画像が大きすぎるときは「画像幅」の数値を調整してバランスを取る

調整したら必ず保存してプレビューで見た目を確認する

余白を整えるひと手間で、ページの完成度は大きく変わります。ぜひ最後の仕上げとして取り入れてみてください。

ファネルデザイナー® 下坂栄里子でした。

SNSをやめても、あなたの知識は売れ続けます。

眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。

▶︎ 無料動画を視聴する