前回は画面の「アスペクト比（縦横比率）」を見ていきました。今回は画面の「分割」です。デザイン、レイアウトにおいてメイン要素、サブ要素を配置する際に画面をどこで分割するか？シンメトリー、黄金分割、白銀分割、3分割など「分割比」による分割と、あらかじめ引かれたグリッドのカラム数による分割「グリッドシステム」があります。ビジュアルで比較できるよう一覧にしてみました。
【目次】
「分割比」による分割（黄金分割、白銀分割など）
最初に「分割比」による分割を見ていきましょう。まず一覧から。こちらです。
なお、今回の画面のアスペクト比（縦横比率）は一般的な印刷物によく使われる「白銀比(1.414:1)」で統一しました。
※参考：【黄金比、白銀比】代表的なアスペクト比（縦横比率）を一覧にしてみた - クモのようにコツコツと
その中にメイン要素、サブ要素がある時に画面をどう分割するか、が今回のテーマです。面積比が大きい方がメイン要素です。
- シンメトリー（1:1）
- 白銀分割（1.414:1）
- 黄金分割（1.618:1）
- 3分割（2:1）
- 4分割（3:1）
- 5分割（4:1）
それでは順番に見ていきましょう。
シンメトリー（1:1）
最初にシンメトリー。左右または上下にちょうど半分で分割しています。
比率はメイン要素が1（50%）に対しサブ要素も1（50%）のため、シンメトリーではメインとサブのメリハリは生まれません。（逆に要素を同等に扱いたい時はシンメトリーで分割するのが良いでしょう）
白銀分割（1.414:1）
次は白銀分割。前回のアスペクト比では長辺側と短辺側の比率でしたが、分割の場合は長辺内の分割点からの長さの比率になります。
白銀分割の比率はメイン要素1.414（58.6%）に対してサブ要素は1（41.4%）。メインの方が8.6%ほど大きいことになります。シンメトリーより少し差が出てきた印象ですね。
黄金分割（1.618:1）
次は黄金分割です。
黄金分割の比率はメイン要素1.618（61.8%）に対してサブ要素は1（38.2%）。メインの方が11.8%ほど大きいことになります。白銀分割よりさらに差が広がりましたが3.2%の違いです。
白銀分割、黄金分割の数値は計算しづらいため、おすすめのツールをご紹介します！
※参考：レイアウトの小技 Ver2.0 電脳狂想曲 WEBデザインの小技
長辺側の長さを入力して分割点をポチポチとクリックすると分割された長さがわかります。
3分割（2:1）
白銀分割、黄金分割は比率の数値が直感的ではないため、写真撮影などでは3分割構図がよく使われます。*1
3分割はメイン要素2（66.6%）に対してサブ要素は1（33.3%）。メインとサブの大きさが倍のため、かなりはっきり差がわかりますね。比率も直感的でいい感じ。
そしてパーセンテージで見ると白銀分割はシンメリトー、黄金分割は3分割により近いことがわかります。
4分割（3:1）
3分割と同じような考え方で画面を4分割してみます。
4分割はメイン要素3（75%）に対してサブ要素は1（25%）。メインとサブの差は3倍になりました。サブはレイアウトがかなり窮屈になってきていますw
5分割（4:1）
このまま5分割もしてみましょう。こうなりました。
5分割はメイン要素4（80%）に対してサブ要素は1（20%）。メインとサブの差は4倍！ここまでくるとサブ要素はサイドバーとかフッター的な、かなりオマケな要素に使うしかなさそうです。
カラム数による分割（グリッドシステム）
次にグリッドのカラム数による分割（グリッドシステム）を見ていきましょう。まずは一覧から。
グリッドは12分割、10分割、8分割などいろんな引き方がありますが、今回は12分割にしました。
- グリッドシステム（12分割）
- 6:6カラム（=シンメトリー）
- 7:5カラム（≒白銀分割）
- 8:4カラム（=3分割）
- 9:3カラム（=4分割）
- 10:2カラム（=5分割）
グリッドシステム（12分割）
まず最初にベースとなるグリッドを引きます。
12分割だと1カラムあたり8.3%になります。12分割は他の分割と比べて「○等分」の種類が多いです。
- 8分割：2等分、4等分、8等分
- 10分割：2等分、5等分、10等分
- 12分割：2等分、3等分、4等分、6等分、12等分
CSSのフレームワークBootstrapでも採用されている分割数です。
6:6カラム（=シンメトリー）
最初に6:6カラムの分割から。
メイン要素6（50%）サブ要素（50%）。ご覧の通り、先ほどの「シンメトリー」と同じ比率ですね。
7:5カラム（≒白銀分割）
次はメインを1カラム増やして7:5を見てみましょう。
メイン要素7（58.3%）サブ要素5（41.6%）。お、これは先ほどの「白銀分割」と近い比率になりましたね。
白銀分割は約1.4:1で、合計すると約2.4。これを半分に割ると約1.2。約0.7:0.5（=7:5）になるわけです！これは奇遇！！
8:4カラム（=3分割）
さらに1カラム増やして8:4にする。
メイン要素8（66.6%）サブ要素4（33.3%）。メインとサブの差が倍です。先ほどの「3分割」と同じ比率ですね。
9:3カラム（=4分割）
さらに1カラム増やして9:3にすると…
メイン要素9（75%）サブ要素3（25%）。メインとサブの差が一気に3倍に！先ほどの「4分割」と同じ比率になりました。
10:2カラム（=5分割）
最後です。1カラム増やして10:2にすると…
メイン要素10（80%）サブ要素2（20%）。メインとサブの差がさらに開いて4倍に！先ほどの「5分割」と同じ比率です。
この先は11:1カラムになりまが、この時点ですでにサブ要素は窮屈な状態のため、やめておきます。
最後に（CSS Grid Layoutに向けて）
比率による分割（シンメトリー、白銀分割、黄金分割、3分割〜5分割）とグリッドシステムのカラム数による分割を比較しました。
グリッドシステムを12分割にすると、「黄金分割（1.618:1）」以外の比率は再現できることがわかりました。考え方や数値も直感的だし、もうグリッドシステムでいいんじゃないかな、という気もしてきます。
また、グリッドシステムは「CSS Grid Layout」にも適用しやすそうなので、Webデザインに向いた方式なんじゃないかなと思います。
CSS Grid Layout …悔しいことにIE11の対応は不完全なようなんですよね。
※参考：Can I use... Support tables for HTML5, CSS3, etc
ただ、つい先日、マイクロソフト自身が「IE11を使うのはやめよう」という声明を発表するという大朗報がありました！
※参考：マイクロソフト、企業にInternet Explorerの使用をやめるよう要請。「IEは技術的負債もたらす」 - Engadget 日本版
もうすぐだ！もうすぐ「時が来た！」と言える！！いいぞいいぞ〜♪
これからはIEを気にせず「CSS Grid Layout」などIE非対応の技術の記事も書いていきたく思います。それではまた！
※関連記事：CSS Grid Layoutバージョン作ってみました！
※参考：「デザインの基本」記事まとめ
qiita.com
*1:地平線や要素の配置などをここで分ける
