6月中旬〜着手のご案件受付中です

印象が大きく変わる!PC画面左右の余白について

おだぎり
おだぎり

こんにちは!セールスデザイナーの小田切です。
今回はLPのレイアウト(主にPCからの閲覧)についてのお話です。

PCからLPを表示させた時に、画面幅いっぱいに文章や画像が拡がっていると、読みづらくなる為、ほとんどのLPはコンテンツの幅が一定になっています。
その時に生じた画面左右の余白をどのようにするか、という内容を本日はご紹介します。

① 背景画像・色を、画面の幅いっぱいに拡げる

各セクション毎に設定されている背景画像(または色)を、画面幅いっぱいに拡げるレイアウトです。
広々とした印象を与えます。

こちらのリンクからブラウザで確認できます

② 1つの背景画像or色で全体が固定され、その中にコンテンツがある

文章メインのLPで多く用いられています。
ボリュームのある文章を集中して読んでもらいたい時におススメです。

こちらのリンクからブラウザで確認できます

背景は単色の他、パターンもおススメです。

このパターンを設定しています。
こちらのリンクからブラウザ確認できます。

おだぎり
おだぎり

いかがでしょうか。
背景によって印象が大きく変わるので、制作の際、最初に確認させていただいております。

スマホは画面が縦長の為、左右の余白は気にしなくて大丈夫です。

最後までお読みいただき、ありがとうございました。