【8pixelグリッドデザイン×Bootstrap】12等分と方眼が合わないのはイヤ!を解決するPhotoshopドキュメントサイズ

私がPhotoshopでデザイン作業をするとき、グリッド設定には2種類の単位《10×10》と《8×8》があって、
WEBの場合は《8×8》ばかり多用しています。(マス目が8pixel単位の方眼です)

印刷なら《10×10》が良いのですが、WEBの場合は、独特の法則が働くため、8の倍数でデザインする方がラクできて、キレイに仕上がるからです。

ところが、8グリッドデザインに、Bootstrapを掛け合わせようとすると、面倒な問題が発生します。
ドキュメントのサイズによっては、Bootstrap用のガイドを引くと、ガイドとグリッドがチグハグになってしまい、スナップする時に気を遣います・・・

(もちろんこれは、《10×10》でも起こりえますが、BootstrapはWEBサイト用のフレームワークなので8グリッドを使うことが多いのです)

そもそもBootstrapを採用するということは、レスポンシブなWEBをデザインしているということなので、グリッドは要らないんじゃないか!?と思われるかもしれませんが、いくら可変の世界をデザインしていると云っても、いろいろな要素を、余白を計算しながら配置していく時は、やはり、ガイドがしっかりないとだめなんですよね・・・

グリッドにピターっとくっついてる感があるのと、ないのでは、気持ちのノリが違うので、効率も変わってきてしまうんです・・・

そ・こ・で!!

8pixelグリッドデザインを基本に、可変にBootstrapを採用するWEBデザインを行う時は、独自のルールを採用したPhotoshopのドキュメントサイズを使っています。
絶対に、ピタっと感が違うと思うので、よかったら参考にしてください。

12等分と方眼が合わないとは、どういうこと?

試しに、Photoshopを開いて、新規ドキュメントを作ってみましょう。Photoshopが準備してくれているプリセット(予め用意されているテンプレート)が沢山ありますので、その中から一般的なWEBデザインに用いられるサイズで、作ってみましょう。

1366pixel×768pixelを使ってみます。グリッドは8pixel方眼です。

これに、Bootstrap用のガイドを引いてみます。Bootstrapの標準は左右の余白が15pixelですが、今回は768pixel以下のデバイスサイズでは、左右が8pixelの余白、それ以上のサイズで左右16pixelを取ることにします。(8グリッドデザインなので、8の倍数になるように設定)

残念ながら、8pixel方眼グリッドと、1366pixelから32を引いた1334pixelを12等分しても、111.1666666・・・・という数になるので、8pixelの方眼と12等分のガイドが噛み合いません。

方眼とガイドが噛み合わないと、デザインしてて疲れます

グリッドとガイドの線がピッタリじゃないと、デザインしてても疲れます。気を遣う回数が多くなるからです。それは、作業の効率を上げるためにもよくありません。

そこで、8pixelデザインとBootstrapの両方を採用するときには、整合性が取れるPhotoshopのドキュメントサイズを使用します。

こんな時におすすめ!Photoshopのサイズはコレ!

今回は8pixelデザインを進めるので、標準のBootstrapとは異なる独自のルールがあります。

  • ★8pixelデザインなので、方眼の目は8pixelです。
  • ★768pixel以下のデバイスサイズでは、左右が8pixelの余白をとります
  • ★それ以上のサイズで左右16pixelの余白を取ります

横幅496pixel(sm)

40×12+16=496 ・・・ガイドとガイドの間が40pixel

横幅592pixel(md)

48×12+16=592 ・・・ガイドとガイドの間が48pixel 

Bootstrap4のブレイクポイントでいうと @media (min-width: 576px) の部分をデザインする際に使います。

横幅688pixel(md)

56×12+16=688 ・・・ガイドとガイドの間が56pixel 

Bootstrap4のブレイクポイントでいうと @media (min-width: 576px) の部分をデザインする際に使います。

横幅992pixel(lg)

80×12+32=992 ・・・ガイドとガイドの間が80pixel 

Bootstrap4のブレイクポイントでいうと @media (min-width: 992px)  の部分をデザインする際に使います。

横幅1280pixel(xl)

104×12+32=1280 ・・・ガイドとガイドの間が104pixel 

Bootstrap4のブレイクポイントでいうと @media (min-width: 1200px)  の部分をデザインする際に使います。

いかがでしょうか、これなら、グリッドとガイドが美しいハーモニーを奏でてくれて、作業も捗りそうです♪よければ参考にしてください。