Contact us
   Blog

Blog

【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)  の部分をデザインする際に使います。

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

Follow me

WEBの企画と制作の流れ

WEB制作は リサーチとデザインと実装。リサーチや企画といった 情報を取り扱う工程。 そして、それを元にデザインする工程。デザインしたものを実装する工程。 中でも企画検討といった部分は上流工程と呼ばれ、独立して扱われることもあります。WEBサイトを作る際の思考法やブランディングのために必要なこと。知っておいて欲しい制作の知識や受発注の心得などをまとめました。

future

いきなり完成したものを作って納品するのではなく、徐々に積み上げてゆくように、側でクライアントを支えながら完成させてゆく新しいスタイルの制作です。

lalan with you