Help us understand the problem. What is going on with this article?

なぜ960pxがグリッドにするときに良いのか計算してみた

More than 5 years have passed since last update.

三周か四周遅れな話でレスポンシブだどうのこうの考える時代になんでこんなことをやっているんだと思いつつ実際深く考えたことなかったのでちゃんと調べた。

結論としてはsusyでも960px(or 940px)のグリッドは妥当になりうるかなというところ。

前提

そもそもこの前提を成り立たせるには条件があると思う。

  • 現状横幅としては1200がmaxだろう
  • 広告などでサイドバーを300pxにする制約がかかりやすい
  • レイアウトはsusyのようなgrid systemで計算する
    • 「960であれば割りやすい」というのはあるのだけど機械的に行うので、この理由を一旦除外する。

横幅を広げるほどファーストビューの情報量も増えるだろうし、特に広告などの制約が無いならサイトのユーザーに合わせて1024ぐらいでやっちゃっていいんじゃないかと思う。

計算

上記前提で、サイドバーが300pxにならないといけないとするとspan(x)で300pxが算出されるgutterとcolumnの組み合わせでないといけない。

そういう組み合わせがどの程度存在するのかを知りたいのでテキトースクリプトでざざっと計算する

calc.js
var span = function(x, gutter, column){
  return column * x + gutter * (x - 1)
}
var grid = function(g, gutter, column){
  var arr = []
  for(var i=1; i <= g; i++){
    arr.push(span(i, gutter, column))
  }
  return arr
}

var num = 1 // 説明陽の通し番号
var gridNum = 12
var target = 300
for(var g = 10; g < 30; g++){
  for(var c = 50 ; c < 90; c++){
    var result = grid(gridNum, g, c)
    result.forEach(function(r){
      if(r == (target)){
        console.log("Hit number: "+ num)
        console.log(c, g, (result[11]+g)+" grid")
        console.log(result)
        console.log("")
        num++;
      }
    })
  }
}

この結果がこちら

Hit number: 1
52 10 '744 grid'
[ 52, 114, 176, 238, 300, 362, 424, 486, 548, 610, 672, 734 ]

Hit number: 2
66 12 '936 grid'
[ 66, 144, 222, 300, 378, 456, 534, 612, 690, 768, 846, 924 ]

Hit number: 3
63 16 '948 grid'
[ 63, 142, 221, 300, 379, 458, 537, 616, 695, 774, 853, 932 ]

Hit number: 4
88 18 '1272 grid'
[ 88, 194, 300, 406, 512, 618, 724, 830, 936, 1042, 1148, 1254 ]

Hit number: 5
60 20 '960 grid'
[ 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860, 940 ]

Hit number: 6
86 21 '1284 grid'
[ 86, 193, 300, 407, 514, 621, 728, 835, 942, 1049, 1156, 1263 ]

Hit number: 7
57 24 '972 grid'
[ 57, 138, 219, 300, 381, 462, 543, 624, 705, 786, 867, 948 ]

Hit number: 8
84 24 '1296 grid'
[ 84, 192, 300, 408, 516, 624, 732, 840, 948, 1056, 1164, 1272 ]

Hit number: 9
82 27 '1308 grid'
[ 82, 191, 300, 409, 518, 627, 736, 845, 954, 1063, 1172, 1281 ]

Hit number: 10
54 28 '984 grid'
[ 54, 136, 218, 300, 382, 464, 546, 628, 710, 792, 874, 956 ]

ふむ。組み合わせは色々あるようだ。
細かく見てみると
1番はまず小さすぎて論外だろう。
2,3も960よりは小さい。
3,6,7,9は奇数が含まれるしあえて好んで使う理由もないだろう
4,6,8,9は1200オーバーになってカバーできるユーザーが少なそう

となると残るは10の984gridか5番の960gridということになる。

あとは好き好みな感じだが14px広がる程度だとだいたい1行あたり1文字文ファーストビューが上がりやすくなるとは言える。
が、300以外の数値の数値の綺麗さで言っても960が選ばれるだろう。

ということで960pxのグリッドはやっぱ無難なんですね。という結論に至った。
1000〜1100px台でよさそうな組み合わせが出てくれればと思ったけどそういう感じにもならなかった。

Susyでの指定

ちなみにsusyのドキュメントの960gridのショートハンドが間違っていたので注意(pullreq済み

@include layout(12 (60px 20px) split static);

もし10番の 984 gridを使いたければ

@include layout(12 (54px 28px) split static);

となるだろう。

terrierscript
https://zenn.dev/terrierscript
https://terrier.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away