こんにちは！Webデザインとマーケティングを勉強中のキノボルタです。
今回は、Webサイトのレイアウトを考える際に欠かせない「グリッドシステム」と「8ポイント方眼デザイン」について学んだことを書いています。
「いつも余白の取り方に迷う〜」
「なんとなく決めてしまっているなー」
こんな方には、参考になると思います。
グリッドシステムとは
※figmaで「グリッド」を選択した状態
グリッドは、縦横に配置される格子状のガイドのことです。
「グリッドシステム」は、この格子状のガイドを使用したレイアウトのことです。
メリット
注意点
全てのページを全く同じレイアウトで構成すると、読み手に単調で退屈な印象を与えてしまうことがあるので、注意が必要です。
同一グリッドを用いてもレイアウトパターンは無数に考えられます。
同一グリッドを使いながらもレイアウトパターンを変えることができれば、全体の統一感とページごとの独自性の両方を一度に実現することが可能です。
レイアウトのバリエーション
グリッドを細かい間隔で作成するか、大きい間隔で作成するかで、実現できるレイアウトのバリエーションの数は変わります。
ただ、どのようなグリッドでも意外とたくさんのバリエーションを検討することが可能です。
グリッドを使うと、「ピシッとしていて整いすぎてしまう」と思われがちですが、そもそもWebなので、整えておく必要があります。
グリッドの設定方法
※figmaでレイアウトガイドの「列」を選択した状態
Webデザインでは、よく縦方向のみのグリッドがよく使われます。
ただ、これだと横を揃えたり、整列させたい時に、行の横線も欲しくなります。
そこで格子状のグリッドを使うと、余白の管理もしやすくなります。
ここで出てくるのが格子のサイズをどうするのか？という問題です。
紙面であれば、文字の大きさの倍数を基準にする方法もあります。
例：文字サイズを8pt（約3mm、1pt=約0.35mm）なので、3の倍数の54mmを横幅に設定する
Webの場合は、画面サイズが変わるため、レスポンシブに対応しやすいサイズとして、グリッドのサイズを8の倍数でセットします。
なぜ8の倍数なのか？
一貫性のあるデザインを作成するために、8ポイント方眼デザインや4ポイントグリッドシステムといった考え方があります。
https://ferret-plus.com/6902
8ポイント方眼デザインについて詳しく載っている記事
https://note.com/nokowashiyama/n/nd1b8b2c26d46
4ポイントグリッドシステムの解説記事
8ポイントで作成していくと、縦だけでなく、横方向も綺麗に配置できるため、デザインにとって大事な「整列」ができ、美しくなります。
またWebの場合は、さまざまな画面サイズがありますが、8の倍数となっているため、画面幅や高さを8で割り切れるサイズにすることによって、一貫性のあるデザインとなります。
ちなみに雑誌の誌面を見ると、方眼のグリッドシステムで綺麗に整えられているので、非常に参考になります。
もう一つの良いところは、8の倍数とルールを決めておくと、余白に根拠が生まれ、設定しやすくなることです。
余白は、正直全体の構成や与えたい雰囲気から大体これくらいの余白を取るとバランスがいいかなと、ざっくり決めてしまっていましたが、8の倍数と決めると、迷いも少なくなり、余白のバランスも良くなります。
デザインしやすくなります。
よく言われるデメリットは、以下の通りですが、メリットの方が上回っているので、採用しない手はないと思います。
デメリット
まとめ
グリッドシステムと、8ポイント方眼デザインについて書いてきました。もちろん状況によってベストなものは変わってくると思いますので、考え方の一つです。
ただ、作る方も見る方も見やすくなる方法なので、使ってみる価値はあります。
では、ここまでお付き合いいただきありがとうございました。
また次の記事でお会いしましょう。