【レスポンシブデザイン】左右の余白(ガター)って何pxが正解なの?

Web制作

レスポンシブデザインって奥が深いです。

左右の余白をどれくらい取るかによっても、サイトの見やすさが全然変わってしまうことがあります。

スマートフォンでは20px前後の余白を入れてあるデザインをよく見かけます。

タブレットは広かったり、狭かったり、そもそも空いてなかったり色々ですね。

まあ、基本はPcでは広め、タブレット、スマホでは徐々に狭めていく感じになるのですが、左右の余白をどれくらい取るかはデザインによって異なってくるので、結局のところ、実機で確認しつつ、一番見やすい感じにしてあげるのが、いいかなとは思いますが、

それでは話が膨らまないので、

今回は、レスポンシブの左右の余白(ガター)はどれくらいで取るのがベストなのか、参考になりそうな、サイト、テーマを紹介していきたいと思います。

結局どれくらい取るのがいいの?

結論ですが、
スマホでは15〜20px前後、
タブレットでは、30px〜60px前後
であとはデザインに合わせて調整するといった感じになりそうです。

調べてみて、やはり、サイトによってばらつきがあるので、一概にこれだけ余白をとればOKといったことではないです。

特に、タブレット(1024px〜768px)に関しては、max-widthで幅指定してあるサイトもあったので、スマホ以上に判断に迷いそうだと感じました。

次セクションでは、今回参考にしたwpテーマをピックアップしていくので、ちょっとでも参考になれば幸いです。また、気になったテーマ・サイトがあれば随時追加していきます。

WordPressテーマ編

TCDテーマ「Muum」

このサイトに使用しているブログ用wpテーマ

画面サイズ左右の余白
1024px50px
768px50px
375px20px

SWELL

スキルシェアさんとの顧問契約や、トップブロガーが利用していることでも有名なwpテーマ

画面サイズ左右の余白
1024px48px
768px4vw
375px4vw

SANGO

Webメディア「サルカワ」の中の人が作成したwpテーマ

Topページは下記の感じで指定されてました。

画面サイズ左右の余白
1024pxwidth:96%で幅指定。
残り4%を左右の余白に。
768pxwidth:92%で幅指定
残り8%を左右の余白に。
375px768pxと同じ

逆に下層ページは下記の通りでした。

画面サイズ左右の余白
1024pxwidth:96%で幅指定。
残り4%を左右の余白に。
768pxwidth:100%で幅指定。
paddingで25pxの余白を。
375px15px

TCDテーマ「SOLARIS」

TCDが提供している企業サイト用wpテーマ

Topページは下記の感じで指定されてました。

画面サイズ左右の余白
1024px60px
768px40px
375px20px

ブログページは下記の通りでした。

画面サイズ左右の余白
1024pxmax-width:770pxで幅指定。
余りを左右の余白に。
768pxmax-width:770pxは維持。
paddingで20px余白を。
375px20px

バズ部 企業向けwpテーマ「Xeory Extension」

バズ部が提供している企業向けwpテーマ

ブログページは下記の感じで指定されてました。
boxが入れ子になっていたので、margin + paddingで記載しています。

画面サイズ左右の余白
1024pxmargin36px + padding36px
768pxmargin24px + padding40px
375pxmargin12px + padding20px

まとめ

作業効率化のために、ルールを作ってしまいがちですが、絶対これだっていうルールを作るより、実機を確認しながら、最適な余白を取るのが、一番良いと私は判断しました。

ここで紹介した内容がちょっとでもお役に立てば幸いです。

以上、「左右の余白(ガター)って何pxが正解なの?」でした。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP