UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

最近Appleのサイトを見ていて、サイト内の余白がめちゃくちゃだと気がつきました。
Appleが適当に設定しているとは考えにくいので、意図したものなんだろうなという前提で、なぜめちゃくちゃな余白を設定しているのか考えてみます。

実際のAppleのサイト

最近はCSS変数という変数で管理されていますが、例えば下記の「–hlts-glry-caption-top」「–hlts-glry-caption-left」が上と左の余白の値です。

左の「46px」は分かりますが、上が「39px」になっています。

コード的には「40px」にしてしまう方がキリが良いです。少なくともコーダーとしては「38px」か「40px」の偶数にしたいなと感じます。
もっと言えば、少し極端ですが左も右も「42px」くらいで統一してしまってもあまり気にならないかもしれません。

しかしこの感覚は、あくまで数字的な話です。
過去に『数値的に中心でも、中心に見えないパターン』という記事を書きました。

仮に数値が揃っていたとしても、目で見てキレイでなければ意味はありません。
Appleは、あくまで目で見たときの感覚を大切にしているのかもしれません。

コンテンツありきの指定

実際にそんなコンテンツがあるかどうかはさておき、例えばすべてが小文字の文章だとすると、コンテンツ上側の隙間は少し広く見えてしまうでしょう。

コーダーはよく「文章を流し込む」なんて表現をしてしまいがちです。
あくまで数値的にキレイな箱を用意して、そこに文章を流し込むようなイメージから来ているのでしょうが、ウェブサイトはコンテンツがあってこそ成立します。

先にコンテンツがあって、そのコンテンツがもっともキレイに見えるように仕上げるのも必要なことなのかもな……と考えるいいきっかけになりました。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！