8の倍数でのブレークポイントとGrid Systemsの数学的アプローチ

8の倍数でのブレークポイントとGrid Systemsの数学的アプローチ
スポンサーリンク

美しき“8”を数学的見地から。

8の倍数でのブレークポイントを愛用している私。ただ、グリッドシステムを考えてはなかったので、数学的見地から考えてみたいと思います。

本記事の趣旨と目的

本記事の趣旨と目的
  • 8の倍数でのブレークポイントの確認。
  • 数学的アプローチでグリッドシステムを考察する。

8の倍数でのブレークポイント論についてはこちらをご覧ください。

(読んでいただいたことを前提として)そんな8の倍数で構成されたブレークポイントについて、数学的にアプローチしてグリッドシステムを構築していくのが、今回のトピックです。

8の倍数でのブレークポイント設定

8の倍数のメリット

8の倍数が生み出す綺麗なレイアウト思想。

8の倍数が生み出す綺麗なレイアウト思想。

まずは、8の倍数でブレークポイントを構築していくメリットを紹介しておきます。

8の倍数のメリット
  • デバイスに依存しない設計。
  • 設計指標を設定しやすい。
  • 美しい“8”という数字。

3つメリットを挙げましたが、特に“デバイスに依存しない設計”というのが、大きなメリットになってきます。
ここ数年で、スマホデバイスの“ノッチ”における変態解像度が増えましたからね。もはや、デバイス依存は不可能に近いです。iPad Proも解像度が変わりましたからね。

8の倍数はグリッドシステムが少ない

有名な『960 Grid System』。

有名な『960 Grid System』。

グリッドシステムで代表的なものといえば『960 Grid System』があると思います。

しかし、私が考える8の倍数の最大幅である1,280pxでのグリッドシステムって、意外とないものです。
付け加えると、8の倍数に関連するブレークポイントのグリッドシステムは思ったよりもないイメージを受けました。

ですので、今回の記事で自分で数学的視点からグリッドシステムを考えていくことにします。

数学的アプローチ

8の倍数のグリッドシステムを数学的に考える。

8の倍数のグリッドシステムを数学的に考える。

早速、8の倍数でのブレークポイント設定を、数学的アプローチで紐解いてみたいと思います。

各ブレークポイントを素因数分解してみる

数学的アプローチ…といえば、個人的には『素因数分解』だと思っているので、各ブレークポイントのピクセル数を素因数分解してみました。結果は以下の通りです。

ブレークポイントを素因数分解した。

ブレークポイントを素因数分解した。

各ブレークポイントの素因数分解
  • 320px = 26 * 5
  • 480px = 25 * 3 * 5
  • 600px = 23 * 3 * 52
  • 960px = 26 * 3 * 5
  • 1,280px = 28 * 5

当然、8の倍数で構成されているので、どのブレークポイントのピクセル数にも“2の3乗”が含まれています。

見えてくる共通項

各ブレークポイントを素因数分解して分かることがでてきました。

素因数分解により、一定式の共通項が現れた。

素因数分解により、一定式の共通項が現れた。

その共通項とは、
X = 2a * 3b * 5c
という数式の基で構成されているということです。

ちなみに、a・b・cの未知数はそれぞれ、

  • a:3〜8
  • b:0〜1
  • c:1〜2

という範囲の中で動きます。
当然、これらは自然数(0より大きな整数)です。

つまり、グリッドシステムをこれらの未知数に代入する自然数から、アプローチしていけばよいわけですね。

基本幅・分割数・余白を考える

素因数分解から、基本幅・分割数・余白を考える。

素因数分解から、基本幅・分割数・余白を考える。

先程の素因数分解から導き出される“共通項”から、全5パターンのグリッドシステムを考えていきます。

余白8px

  320px 480px 600px 960px 1,280px
8列
10列 × × × × ×
12列 × × × × ×

各ブレークポイントの余白8pxでの分割数。

余白10px

  320px 480px 600px 960px 1,280px
8列 × × × × ×
10列
12列 × × × × ×

各ブレークポイントの余白10pxでの分割数。

余白16px

  320px 480px 600px 960px 1,280px
8列
10列 × × × × ×
12列 × × ×

各ブレークポイントの余白16pxでの分割数。

余白20px

  320px 480px 600px 960px 1,280px
8列 × × × × ×
10列
12列 × × × × ×

各ブレークポイントの余白20pxでの分割数。

結論

12列グリッドシステムを構築できないのが難点。

12列グリッドシステムを構築できないのが難点。

8の倍数でのグリッドシステムを構築している人が少なかったので、今回作ってみたわけですが、一般的な12列グリッドシステムが構築できないことが判明しました。これについては、素因数分解の時点で予想がついたことではあるが…。

そして、組み合わせ的に考えるならば、

  • 10pxと20pxの10列グリッドシステム
  • 8pxと16pxの8列グリッドシステム

の2パターンになってきます。

10pxで区切ったほうが分かりやすさはあると思うのですが、“8の倍数を愛する者”として、ここは8pxと16pxの8列グリッドシステムで私は考えていきます。

補足

実際にグリッドシステムを8の倍数で構築してみたわけですが、あまり使い勝手が良さそうな気がしませんね。列の幅が綺麗な感じがしないので、納得いきません…。

このブレークポイント構成は割と好きで、よくWebサイト構築で使うのですが、いつも8pxの“方眼レイアウト”で組んでしまっています…。(あまりグリッドレイアウトを組むことも少ないので)

まとめの一言「8の倍数で美しきグリッドシステムを!」

今回は、8の倍でのブレークポイントで、グリッドシステムを素因数分解を用いて構築することをしてみました。

四条せつな

つまりは…

  • 8の倍数でもグリッドシステムが構築できる
  • 使い勝手は未知数

って、感じかなー?

8の倍数でグリッドレイアウトを考えている方は、参考にしてみてください。

でわでわ!

四条せつな
久しぶりの数学でした!
スポンサーリンク

コメントを残す