UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供するN’s Creates (エヌズクリエイツ) 株式会社の坂本です。

今回は、私があるとき先輩デザイナーから受けた、フィードバックから学んだことについてお話しします。

違和感と、我流の限界

前職での私は、デジタルデザインの専門的な指導者がいない環境で、いわば我流で突き進んでいました。
当時の私は、要素間の余白やサイズを決める際、なんとなく「キリがいいから」という理由で5px単位で決めていました。
5の倍数で作成してみて違和感があれば1px単位で微調整する。そんな制作でした。

しかし、今の会社に入社して早々、先輩デザイナーからある指摘を受けました。
「4の倍数で設計してみて」そこから4の倍数でサイズを決めるようになりました。

なぜ「4px」なのか。

調べてわかったのは「画面密度の多様性への対応」と「計算上の美しさ」のためです。
現代のデバイスは、高密度なピクセルを持っています。
私たちがデザインツール（Figmaなど）で作成する1pxは、実際のデバイス上では2倍や3倍に書き出されることが一般的です。

ここで5px単位を採用すると3倍したときには15pxになりますが、もし1.5倍などの特殊な場合、7.5pxという小数点が発生してしまいます。これが表示の「ボケ」や実装時の混乱を招く原因になります。
一方で4pxは、2でも4でも割り切れる数字です。多くの画面解像度において整数を維持しやすく、4の倍数を選ぶことは、実装の正確さとレンダリングの美しさを担保するためだったのです。

4px単位の設計による画面全体の一貫性

いざ実践してみると、今まで1px単位で細かく調整していた分、1段階変えるだけで4px動いてしまうという幅の大きさに、当初は制御の難しさを感じました。
しかし、この4pxという制約を守ることで、結果として画面全体の「一貫性」は格段に向上しました。
個別のパーツごとにサイズや余白を探るのではなく、ページ全体で共通のルールを適用することで、全体に安定感を与えることにつながっていました。

まとめ

「なんとなく」で決めていた5pxや、根拠のない1pxの微調整を卒業することは、自分のデザインに対して明確な説明責任を持つことでもありました。
4pxという共通の物差しを持つことは全体の効率を上げることにも繋がります。
今後も基本を疎かにせず、一つひとつの数値に根拠を持った制作を積み重ねていきたいです。

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

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