サイト本体部分のサイズを1200pxに決めた話

どうも、かげさんです(^^)/
あなたがこの記事を読んでいるのは何回目でしょうか？
初めての方、いらっしゃい！
複数回目の方、再訪問ありがとです(・∀・)

Google Search Consoleの「モバイルユーザビリティ」で
「テキストが小さすぎて読めません」というエラーが出ているから
フォントサイズを大きくしよう。

今のレイアウトのままだと
フォントサイズを大きくすると窮屈だと思う。

だから3カラム→2カラムのレイアウトへの変更しよう！

という流れでココ数日、作業しています。

正直、自分でもこのくらいのことをするに当たって
「スピード感が無い」と感じています。

しかしですよ。

1.5リットルの飲み物のフタを締めようとして、プロテインシェーカーのフタを手に持っていた人のアカウントはコチラになります（笑）

疲れているんだろうか(;^_^A

— かげさん111＠ゾロ目好き雑記ブロガー (@kage3111) March 6, 2020

こんなことをするくらいに
疲れている中での作業だと思って
優しい目で見てやってください(^^)

まずはブログ本体の横幅から考える

ココログは、モバイル版だとレイアウト変更の余地がかなり限られているので
ここで考える横幅は、PCで見る時の横幅です。

現在のレイアウトは、ブログ本体部分の横幅が900px。

これは、ブログ作成当時（2005年1月）の
かげさんのマシン環境の影響です。

Let's NOTE CF-W2AW1AXRのディスプレイサイズが
1024ｘ768だったからです。

スクロールバーとかも付くことを考えると
1024ギリギリまでは使わない方が良いから
わずかに余裕がある900pxくらいだね、という判断です。

しかし、今のディスプレイサイズの主流は、
デスクトップだと1920ｘ1080以上が当たり前、
ノートパソコンだと1366ｘ768以上が多いです。

具体的なディスプレイ解像度の利用者率は
Webコンテンツの適正画像サイズを
ディスプレイ解像度の利用者統計データを元に検証した
下記の記事が参考になります。

IISYSの記事
最近主流のPC用ディスプレイ解像度は？【過去10年間の推移】
(確認日：2020/03/07)

主流解像度が分かったところで
とりあえず有名所のサイトの横幅の調査結果が載っているサイトを
いくつかチェック！！

• ELEMENTの記事
  【2019年版】Webデザイナーが覚えておきたいWebデザインの横幅サイズを解説！
  (確認日：2020/03/05)
  
  
• SERENDECの記事
  WebサイトのWidth(横幅)について ~業界毎の主要webサイト調査結果~
  (確認日：2020/03/05)
  
  
• POP BINGO WEBの記事
  最近のホームページの横幅は？世界基準に合わせてみよう
  ものが売れやすいホームページのサイズ、横幅的考え
  (確認日：2020/03/05)

日本の多くの企業は
「1920×1080」と「1366×768」に合わせたサイズではなく
横幅が950pxから1000px程度の大きさで作られていることが分かります。

ざっくりいうと、
昔のかげさんが考えたように1024ｘ768のサイズでも表示されるように
デザインされているみたいです。

ものが売れやすいホームページのサイズは960
と書かれている記事もありますが
最終的にかげさんは横幅1200にしました。

SONYやPanasonicのサイトだって横幅1200なんです。
1200でも良いじゃない！

これで終わると、1200にした根拠が見えないんで
かげさんが1200にした理由を書きますか

横幅：1200にした理由

このブログのコンテンツには「初音ミク冒険記」があります。

初音ミク冒険記の制作課程は、下記のカテゴリにまとまっています。
・PSP関連
・初音ミク冒険記

「初音ミク冒険記」は、当初PSPの自作ゲームとして作り始めました。

このため、初音ミク冒険記のゲーム画面は、
Windows版になってからもPSPの画面サイズ480ｘ272で作られています。

現在のレイアウトだと、横幅480の画像を表示すると
右側の余白が無くなってしまうんです。

大きい画像で説明を付けたくても480だとツライ。

メインコンテンツ部分の横幅を2倍の960にしたとします。
ものが売れやすいホームページのサイズは960。

1カラムレイアウトです…orz

せんせー、サイドバーが欲しいです！　(・∀・)

サイドバーの横幅は、最低300px欲しいです！

将来サイドバーに広告を埋め込むことを考えた場合、
埋め込みタイプの広告は、300pxくらいが多いので
300pxは確保したい！

960px＋300px＝1260px

かげさんの持ってるタブレットPCの横幅は、1280px。

スクロールバーが付くと見づらい！

メインコンテンツの幅：960pxは、却下！

じゃあ、480の1.5倍＝720pxだったら？

現在のように右余白が窮屈なのはイヤだな。
左右のpadingを15pxにすると、
720px＋15pxｘ2＝750px

サイドバー300pxを足して
750px＋300px＝1050px

1050pxまで行くんだったら、いっそ1200がいいか。
（1200だと、1050よりもいろいろ計算しやすい）

1200px－750px＝450px

これをサイドバーの横幅とし、
左右のpadingを15pxにすると、
450px－15pxｘ2＝420px

サイドバーを実質420px使えるならば、
横幅200の区切りを2つ並べて余白を取る
といったレイアウトも組める。

こうして横幅が1200となりましたとさ

ここまではOKだ