サイトを作成したりすると、まあ、モニターのサイズなんかを勘案して横幅のフレームを決めることになるのだけど、基本最近はフレームワークを元に作成する事がもっぱら標準になっています。
昔はBox型と言われる、フレーム内にコンテンツを配置してその中でレスポンシブで可変させることが標準とされていましたが、TwitterなどやFacebookなどのを元に（なんせアクセスが多いので）起点してサイトを作成する方がいいユーザー体験を提供出来ると言う認識です。
詰まるところ、多くの人がサイトをみたときに違和感を感じるか感じないかを元に作成する方がいい。
また、サイト自体はモニターサイズに依存しないフレームにした方がいいという事なのですが、それでも日本には古いフレーム構成のBox型のサイトが残っています。
代表例が、YahooのHOMEやアメブロ。
YahooはBox型の代表的な構成となっていて、横幅は950ｐｘとなります。
アメブロも、この横幅は980pxになっています。
この為、スマホでは別のCSSでスタイルを最定義した構成にして別の表示にしています。
正直、Yahooもアメブロもスマホの画面を見た時に全ての端末で最適化されていません。
まあ、Yahooもアメブロも、サイトはブラウザではなくアプリでみてくれって話なんだろうね。
そうした意味で、レスポンシブではないので、上記のBox型のフレームサイズでは参考になりません。
では、TwitterやFacebookはどうか？
Facebookの場合は、カラムがメッセージエリアなどを含めると4カラムだけど、メインは3カラム。
横幅は974ｐｘ
Twitterはレスポンシブのフレームワークとして標準的なものとして提供されているBoostrapで構成されていて、このBoostrapも実はバージョンによって構成が違います。
現行バージョンは、Boostrap3ですね。
TwitterのBoostrapは
横幅のブレイクポイントが設定されていて@media (min-width: 1236px)
つまり、最小の横幅が1236ｐｘ以上の場合は、3カラムになります。
3カラム表示の場合は横幅は1190ｐｘ
1236ｐｘ以下の場合は、2カラム表示になります。
これは、サイドバーが左右に表示させるか、右に集約するかで変わってくる事になる。
そう考えると、3カラムが標準と考えた場合、コンテンツの配置は、Boostrapの場合が一番ゆとりがある事になる。
Boostrapの2カラムは width: 890px;です。
paddingなどもあるので、 width: 918px;が実質サイズですが。
このように小さなモニターと大きなモニターでサイズを変更をしていく方がいいし、モニターサイズで表示される情報の量が変わってくる。
スマホなどはモニターサイズがかなり可変をしていくし、ブラウザサイズが今のところ、小さいままなので、さほど大きなに替わりはないけど、今後大きくなっていく可能性はある。
まあ、先進的なWebの構成を考えたときには、横幅は920～980ｐｘが画一化された表示サイズといえます。
ただ、これってコンテンツエリアではなく全体の表示になります。
だた、コンテンツエリアとしては、494～655となります。
一番小さいのはFacebookではありますが、Facebookはスマホファーストを進めてきて今のサイズになっています。
この辺りは、やはり、モニターのサイズに依存していて決定をしていく為には、ユーザーの体験を大きく変えすぎないようにするべきで、どういった人がどういった端末で何を見ているのかで変えていく方がユーザーを迷わせない事になります。
依頼をする場合、よく参考とするページと表示が違うといわれたりするけど、参考としているページの表示は絶対値ではなく参考値であり、それを最適化して今の広く普及しているモニターサイズで最適化をして行く方がベターな選択と言えます。
とかく、アメブロとかYahooなどはフレームの構成も古いし、サイバーエージェントなどはこのフレームワークをコーポレートサイトにも使用している事の根拠は、基本、アメブロとユーザー体験を変えないようにしているのだと思います。
そうした意味では、今までの体験とは違う新しいメディアとして打ち出しているオウンドメディアや、AbemaTVなどはフレームのサイズがこれからのモノに最適化されているサイズになっているように見える。
AbemaTVは1000ｐｘであり、アメブロは980ｐｘである。
この差は大きい。
