ホームページの表示幅はどうやって決めてるんですか？と聞かれる事がある。

ホームページを勉強している人から、最近良く聞かれる質問です。
特にレスポンシブデザインをやっている人に多いですね。
レスポンシブデザインだと、ブレイクポイントの関係で色々と悩んでいる人が多いみたいなので、今日はそのあたりのお話しを。
どちらかと言うと今回はデザイン初心者向けかな？

まずは何を基準にするかが問題

レスポンシブデザインだからと言う問題ではなく、まずは横幅いくつにすればイイの？と言う素朴な疑問にぶち当たる人がいます。
ワードプレスなどのCMSテーマを改造する場合などは、テーマの横幅を使うえば良いので、あまり意識する事も無いと思いますが、オリジナルで作ろうと思うと、この問題は、最初にぶち当たる壁です。

デザインを起こすにしても、横幅を決めておかないと、デザインが出来ません。
ですが、これが難しい。

現在のホームページ制作はアクセスキャリアの種類が増えたおかげで、様々なモニタサイズへの対応が必要になっています。（PC・タブレット・スマートフォンなど）

最も小さいスマートフォンで横幅が640px程度。そしてPC用液晶モニタだと40インチ以上と言う巨大なモニタがあり、3800px以上の横幅サイズです。また、最近では液晶TVでのブラウジングが可能な機器もあるので、昔のように画面サイズを基準でホームページを作ることが難しくなっています。

一時期リキッドデザインと言う手法が流行りました。これはレスポンシブデザインが一般化する前に、複数のモニタサイズに対応する為に、画面サイズに対して、横幅を％（パーセント）指定で作って、表示させたモノでした。モニタのサイズが変わっても、ピクセル指定ではないので、画面サイズに合わせた表示が出来る便利な手法です。代表的なサイトに、Amazon、ウィキペディアなどがあります。
ですが、昨今のモニタの大型化で横幅全画面での表示では、見た目が悪くなるようになってしまいました。

ではどうするか。
もう、こうなると表示する最大幅を決めて作るしかありません。
横幅の最大値を決定して、内部のレイアウトはリキッドデザインの様に伸縮させる形に作ります。

そこで横幅の最大値ですが、現在の主流は1000～1200pxぐらいの様です。
これは11インチ程度の小型ノートPCを基準にしている様で、現在の小型ノートPCだと横幅が1280px程度ですから、そのあたりが基準になっているようです。

この辺りは、ユーザーエージェント※1での判断があると思います。ユーザーエージェントでの最小値を考えると小型ノートPCがおそらく最小の数値だと思います。（PC用15インチ液晶だと980pxあたりの可能性もありますが……）
ですからPCアクセスを考えた時に一番小さいノートPCを基準にする事は、理にかなっていると言うわけです。

私が作る場合はホームページの種類にもよりますが、大体1000～1100px幅で制作する事が多いですね。最大1100pxであれば、数年前のノートPCもでかろうじて画面いっぱいで見る事が出来ます。
安全マージンを見るのであれば、1000px程度が良いかと。
また、スタイルシートを上手く使って、1100px以下の小さい画面のノートPCでもホームページを綺麗に見せる事は出来ますが、そのあたりの話は、また後日にします。

最近流行りの1カラムデザインでも、一見すると横方向は全画面表示の様に見えますが、画面センターを中心にして横幅が決まっている場合が多くあります。（1カラムの場合はリキッドデザインに近い作りの場合が多くありますね）

ブレイクポイントでの対応は

レスポンシブデザインを使っているのであれば、ブレイクポイントを設定して対応すればよいと思う方もいるかもしれませんが、作業効率を考えるとあまり賢いやり方ではありません。
ブレイクポイントが増えるとそれだけ画面確認の作業が増えますので、出来ればブレイクポイントは少ない方が良いんです。

ブレイクポイントの設定も、ある意味においてホームページ制作の要ではありますが、個人的にはユーザーエージェントを優先して、PC・タブレット・スマートフォンを上手く切り替えられる様に設定出来れば良いと考えます。ですので、ブレイクポイントは2つぐらい（タブレット・スマートフォン）が適当かと思います。

多すぎるブレイクポイントは制作の混乱を招くだけでなく、メンテナンス性も悪くなるので、難しいですね。

この話は、2015年現在の話であって5年後はどうなっているか解りません。
個人的な感覚では、デバイスの小型化よりもモニタの高性能化が進むでしょう。ですが、どんなに高性能な小型画面でもPCサイズの画面をスマートフォンで表示する事は無理でしょうから、今ぐらいの表示幅がベストなのかもしれませんね。