余白について学ぶ No.1
こんにちは。
独学からWEBデザインをしているなべたです。
1週間ぶりの投稿となってしまいました。。
今回は、余白について学んでいこうと思います。
No.1はセクション間ごと（上下）の余白についてみていきます。
なぜ余白について学んでいこうと思ったのかというと、デザインを作っている時に8の倍数を基本にして制作を進めているのですが、いまいちピンときていない時があるので、各サイトを見てしっかりと学びたいと思ったからです。
それでは、早速始めていきます！
※トップページのみ。検証ツールとルーラーで確認してます。
※サイト種類は定めていません。
symphonict
PC (1920px)
topics 上100px 下49px / concept 上下120px / cta 上下 35px /
service, case, event, お知らせ, blog 上下100px
SP (375px)
topics 上72px 下33px / concept 上73px 下43px / cta 上40px 下138px /
service, case, event, お知らせ, blog 上下64px
リベロホーム
PC (1920px)
main 上70px 下80px / concept 上270px 下200px / events 下200px /
description 下165px / case 上260px 下80px / booking 下120px /
customer 80px / blog 上下120px
SP (375px)
concept 上30px 下60px / events 下112px / description 下60px /
case 下50px / booking 下60px / customer 下50px / blog 上下60px
みんなの銀行
https://www.minna-no-ginko.com/
PC (1920px)
kv 下275px / lead 上120px 下260px / update 上150px 下115px /
premium 上80px 下130px / news 下180px
SP (375px)
lead 上75px 下104px / update 上150px 下90px / premium 上95px 下60px / news 下90px
武野産商株式会社
PC (1920px)
concept 上300px / product 上140px 下 160px / pickup 上75px 下52px /
recruitment 下352px / column 上252px 下327px
SP (375px)
concept 下18.5px / product 上100px 下110px / pickup 上50px 下40px /
recruitment 下120px / column 上50px 下100px
MIMIGURI
PC (1920px)
message 上290px / service 上282px / media 上188px /
career 上220px 下570px
SP (375px)
message 上170px / service 上180px / media 上91px /
career 上327px 下348px
akimiru
PC (1920px)
about 上96px / comic 上 175px 下140px / video 下100px /
scene 下220px / faq 上154px 下180px / info 上157px 下156px
SP (375px)
news 上46px 下48px / about 上74px 下100px / comic 上100px 下80px /
video 下80px / scene 上77px 下100px / faq 上74px 下94px
info 上92px 下110px
株式会社アイコットリョーワ
PC (1920px)
message 上228px 下264px / job list, feature, job type 上下168px
SP (375px)
message 上64px 下80px / work style 上56px /
job list, feature, job type 上下84px / q&a 上下40px
まとめ
業種・サイト種類問わず７サイトを調べてみました。
余白は 2の倍数 or 8の倍数 が多い印象でした。またvwで指定して1920pxでみているので余白は結構大きく感じますが、1200〜1400pxでみてみると違和感はないです（当たり前か）。
サイト種類によって余白の使い方がなんとなく違いますね。リクルートサイト・コーポレートサイトは広め、メディア系は狭い印象がありました。
実際に制作するとき、余白を全て揃えて作ってることが多いですが、そうすると単調になってしまう部分もあるので、少し変化させることも大事ですね。どうしてもコーディングを意識してしまって単調なデザインになってしまうことがあるので、コーディングもしやすい・単調じゃないデザインを徐々に作れるようになりたいと思いました。もちろんデザインの四大原則を守りつつです。
また、デバイスサイズごとに理想の表示ができるように考えながら、デザインをしたいですね。タブレットや大きくなった時の見え方も意識したいと思います。その上で余白は重要な要素だと思います。
この記事が気に入ったらサポートをしてみませんか？