レスポンシブデザインでもPC表示には最小幅(min-width)を指定すべき4つの理由
今やレスポンシブサイトをは対応して当たり前になりましたが、細かい構築方法はサイトによってまちまちです。
その中で今回は「PC表示の時、最小幅(min-width)を指定すべきか?」という事について取り上げようと思います。
最小幅の指定は大規模なサイトほど行っている傾向にあり、逆に、数ページ程度の小規模でデザイン重視のサイトは指定していない傾向にあるように感じます。
私の意見としては「要望が無い限りは最小幅(min-width)を指定すべき」という事です。なぜそうするのか、4つの理由を説明していきます。
この記事の目次
1. 表示が崩れる可能性が高まる
最小幅を指定しないと必要以上にコンテンツ幅が狭まるわけですから、予期せぬ位置で文字が折り返すなどしてレイアウトが崩れる可能性があります。
さらに、原則としてコンテンツ幅が可変しても文字サイズは固定される為、コンテンツ幅が狭くなるほど画面が窮屈になり文字の可読性が落ちる事になります。
これは、スマホと同じレイアウトにすれば解決するように思いがちですが、PCのコンテンツ幅はスマホよりも広い為、要素がスカスカになりかねない為、そこまで簡単な話ではないのです
2. ブレークポイントが乱立し、メンテナンスし難くなる
1で説明した事態を打開するためにブレークポイントを設定しレイアウトを調整するわけですが、これがまた厄介なんですよね。
例えば、「文字が折り返しそうだから・・・」という理由でブレークポイントを設定すれば、文字量が変わるたびにブレークポイントも設定し直さなければいけなくなります。
さらに、状況によっては「同じフォーマットなのに文字数が違うから、それぞれ異なるブレークポイントを設定しなくてはならない」なんて事もあるのです。
というように、ブレークポイントが乱立してメンテナンス性の低下を招く危険性があるのです。
3. 簡単な文字修正が困難になる可能性が高まる
先ほど説明した事の繰り返しになりますが、ブレークポイントの設定し直しが発生する為、簡単な文字修正ですら対応が難しくなる可能性があるのです。
ブレークポイントを設定する代わりに、Javascriptでレイアウトを制御する方法もありますが、これをやってしまうと、少し大きめな修正が入った時にプログラミングスキルが無い人が修正出来ません。運営し難くなってしまうんですよね。
4. そもそも最小幅(min-width)を指定しない理由が無い
そもそも最小幅を設定せず可変にする必要性が感じられません。
このご時世、XGA(1024×768)以下のディスプレイを使っている人はまず見かけません。タブレットもPC同等の表示が可能なわけですしね。
そもそも、大手サイトが最小幅を指定しているわけですから、それに合わせた作りにすれば間違いないのです。大手サイトがそうであるなら利用者は「そういうものなんだな」と認識するのですから。
まとめ
PC表示の時に最小幅を指定しているサイトは数多く存在します。むしろ規模の大きい企業サイトではこれが多数派です。なぜなら、規模が大きいほどリスクが高まる為です。
余計なトラブルや不要なコスト増を防ぐ為にも、原則としてレスポンシブデザインでもPC表示の時は最小幅(min-width)を指定する事をオススメします。