今回は、ホームページをマルチデバイスに対応させるための「レスポンシブWebデザイン」と「ブレイクポイント」について、制作現場からの経験談と考察です。

レスポンシブWebデザインとは

ウェブサイトをスマホやタブレット、PCなどのあらゆる端末で見やすく表示する技術に「レスポンシブWebデザイン」というものがあります。

サイトを表示する端末の画面サイズに応じてCSSを切り替えることで、スマートフォンなどの小さな画面でも、PCのように大きな画面でも、最適なレイアウトを実現できるのが「レスポンシブWebデザイン」の特長です。

これの何が良いかと言うと、PC用のページとスマホ用のページをそれぞれ別ページとして制作する必要がなくなるため、サイトの管理が楽になり、更新性も上がります。また、端末のUAを判別して振り分けるような処理も不要になり、それに伴う検索エンジンへのややこしい配慮なども要らなくなります。

現在、レスポンシブWebデザインはスタンダードな技術として多くのウェブサイトで採用されています。セブンシックスでも、クライアントのサイトを構築するときは原則として「レスポンシブWebデザイン」を採用しています。

ブレイクポイントとは

レスポンシブWebデザインでサイトを作るとき、あらかじめ「表示を切り替える横幅を何pxにするか」を決めておかなければなりません。例えば、「横幅が639pxまでが1カラムで、640px以上で2カラムになる」というようなルールです。

この表示が切り替わるポイントを「ブレイクポイント」と呼びます。

ブレイクポイントは、たいてい1つ、もしくはせいぜい2つくらいが一般的です。1つの場合は、スマホ用のレイアウトとPC用のレイアウトに分かれます。2つだと、スマホ用、タブレット用、PC用で分けたりします。私の経験上では、ほとんどの企業サイトはスマホ用とPC用の2つに分かれていて、必要に応じて特定の箇所だけレイアウト数を追加するパターンが多いです。3つ以上のブレイクポイントは制作コストも上がるためあまり見かけません。

多くのウェブサイトで採用されるこのレスポンシブWebデザインですが、実は「ブレイクポイントをどの位置にするか」はサイトによってバラバラです。

最初の段階であらかじめ決まっていることもありますし、コーディングをする人が判断するケースもあります。支給されるデザインによっても許容できる範囲は変わるでしょう。ターゲットとなる端末の横幅を基準に決めようと思っても、同じiPhoneですらモデルによって横幅は違います。

ですから、ブレイクポイントをいくつにするかという課題は、制作者にとって悩みの種でもあるわけです。

768pxから900pxへ

セブンシックスでは、これまで多くのサイトを768pxというブレイクポイントで制作してきました。

768pxというのは、画面サイズの規格でいうところのXGAおよびWXGAの短辺の長さで、ちょうどiPadを縦持ちしたときの横幅にあたります。

・767px以下：スマホ用のレイアウト（スマホ〜一部の小型タブレットまで）
・768px以上：PC用のレイアウト（iPad〜PCの大画面まで）

こんなふうに分けることを前提に、デザインや構築を行ってきました。768pxはわりとよく使われる数値のため、よそで作られているサイトでも見かけることは多いです。また、768pxピッタリのときをPC側ではなくスマホ側に含めるパターンもよく見かけます。

複数のブレイクポイントを設定するにはそれなりの予算がかかります。うちのクライアントの多くは中小企業ですから、ブレイクポイントを1つに絞るために768pxを採用したという経緯があります。

ですが、ここ最近、基本となるブレイクポイントを900pxに見直して制作しています。

ブレイクポイント900pxのメリット

では一体、ブレイクポイントを768pxから900pxにすることで何が変わるのでしょう。

まず第一に、デザインの自由度です。

ブレイクポイントが768pxの場合、PC用レイアウトのグローバルナビゲーションなど横並びのメニューが収まりきらないケースがありました。そのため、メニューに並ぶ文字数を減らしたり、ナビゲーション部分だけブレイクポイントを増やすなどして対処する必要がありました。

ブレイクポイントを900pxにすることで、横並びにしたときの許容量が増え、デザイン制作時にそこまで慎重になる必要がなくなりました。いいですね。

もうひとつが、特定の端末への依存解消です。

768pxというのは、良くも悪くもiPadを基準にしたサイズです。実質、タブレットはiPad一強という現状ですが、それでも特定の端末のサイズを意識しすぎるのは良いことではありません。

900pxというのは、768pxよりも大きく、960pxよりも小さい、大きい画面と小さい画面を2分するのにほどよい中間地点です。マルチデバイス対応という観点からも、悪くない選択肢じゃないかと思います。

ブレイクポイント900pxのデメリット

デメリットは、iPad縦持ちのときにスマホ表示になることでしょうか。

私は、普段iPadを使うときは縦と横をそのときの気分で持ちかえて使っています。縦持ちのときにスマホ表示になるサイトが個人的にはあまり好きではなかったので、それがちょっとマイナスです。

でも、それも特定のデバイスに限った問題ですから、気にしすぎるのもよくないかもしれませんね。予算があるなら600pxあたりにもうひとつブレイクポイントを追加することで解消できそうです。

まとめ

900pxのブレイクポイントはなかなか好感触です。

実は4〜5年ほど前に制作したサイトで、960pxをブレイクポイントにした案件がありました。そのときはコーディングを外部に委託したことで、細かいデザイン調整の指示が出せないことから思い切って960pxを採用することにしました。振り返ってみると、それで何の問題もなかったのです。そのサイトは今でも現役で稼働しています。

今後も最適値を探っていくことはもちろんですが、ひとまず、900pxを基準としてやっていこうかなと考えています。