昨年、スマートフォンの出荷台数がガラケーの出荷台数を超え、いよいよ本格的にWebサイトをスマホ対応させる時が来ている。スマホ時代に問題となるのが、異なる画面サイズに対応したWebサイトを構築する必要があるという点である。今回は、このマルチスクリーン時代に必要なとなる、「レスポンシブ・デザイン」の必要性について説明した記事をご紹介したい。

レスポンシブ・デザインとは？マルチデバイス時代に求められる企業サイト

組織の大小に関わらず、あなたのWebサイトをよく見てみる時です。きっと、デスクトップやラップトップでのスクリーンでは素晴らしい見栄えかもしれないしかし、近年広がりを見せるタブレットやスマートフォンにおける異なるサイズのスクリーンでは果たしてどうだろうか？“あまりいい見栄えではない”と多くの人が答えるでは？だからこそ、全ての企業がレスポンシブ・デザイン（注）を取り入れる必要があるのだ。（注：原文ではアダプティブ・デザインとなっていますが、日本語ではレスポンシブ・デザインの方が分かりやすいと考え、レスポンシブデザインで統一しています）

従来のWebサイトのデザインがモバイル端末でうまく機能しないことを知るには、ちょっとした実験をしてみるといい。ラップトップもしくはデスクトップを使って、あなたの企業のWebサイトへ行きなさい。スクリーンのサイズによって、そのWebサイトはスクリーンいっぱいに表示されるか、両サイドに境界線を持つようになるだろう。

マウスの矢印でブラウザの右下の角を捉える。それを右から左へ対角線上にドラッグして上げていくことで、ウィンドウのサイズを小さくしてみよう。もし、あなたのWebサイトがレスポンシブ・デザインになってない場合は、ウィンドウのサイズが小さくなるほどにそのWebサイトは隠れてしまうだろう。初期設定時のWebサイトの幅よりも小さくなった途端に、右端と下端にスクロールバーが出現する。こうなったらページを動かす唯一の方法はスクロールするしかない。

スマートフォンのサイズにまでウィンドウを小さくしてみよう。どんな風に見えますか？全然良くないというのがわかりましたか？恐らく現実的に役に立たないでしょう。

もし、あなたのWebサイトがレスポンシブ・デザインに対応している場合、そのウィンドウを小さくさせる際、テキストは自動的に整形され、写真も小さなスクリーンに合うように移動して表示されるだろう。ナビゲーションメニューもまた小さな画面に合わせて表示される。あなたのWebサイトはあらゆるデバイスで機能するだろう。

最後に重要なことを付け加えると、全てのスマートフォンが皆同じサイズのスクリーンではないということだ。Androidのスクリーンは、iphone、BrackBurryのそれとも異なる。タブレットでさえ同じことが言える。適応力のないWebサイトは、タブレットやスマートフォンを使ってそれを見る人々にスクリーンのサイズのせいで、結局どこかにどうにかしてスクロールさせることになる。

適応力のあるWebサイトとはどのように見えるのか知りたければ、ぜひ私のWebサイト burrus.com（ http://www.burrus.com/)を訪れてほしい。他にも http://calebogden.com/、 http://owltastic.com/、 http://thinkvitamin.com/

などある。そのいずれかを訪れて、試してみてほしい。ラップトップで最初にWebサイトを表示させ、先ほどやったように、プラウザのウィンドウを縮めてみる。そのサイトがあらゆるサイズのスクリーンに合うように変化するのに気がつくだろう。

（注：日本語のサイトの例としては、NHKのスタジオパークを訪問するといいでしょう。リンクはこちら。）

さらに、タブレットやスマートプォンでも試してみる。スクリーンのサイズに関わらず、素晴らしい見栄えだろう。Webサイトディベロッパーは皆一旦このコンセプトを理解すれば、これを実現することができる。

さあ、ウェブデザイナーの所に行き、彼等にレスポンシブ・デザインを取り入れたサイトへ変えてもらおう。今まさにレスポンシブなWebサイトを作ることが求められているのだから！！！

まとめ

マルチスクリーン時代になり、企業のWebサイトも、スマートフォンやタブレットなど様々なデバイスに対応する必要がある。本文中にあるとおり、自社のWebサイトを開いて画面サイズを変更してみると、自社のサイトがモバイルでどう表示されるかが判るだろう。これを機に自社サイトのデザインの見直しをする事をおすすめしたい。

出典：Why Your Organization Needs an Adaptive Website.

（参考）NHKスタジオパークは以下の記事を参考にさせて頂きました。

これからの企業サイトは「レスポンシブ・ウェブデザイン」であるべきだ