これからのマルチデバイス対応

はじめまして、GMO NIKKOの内木場(うちこば)と申します。

普段は社内外に向けたツールの開発・運用を担当しています。

他のライターさんのような、クリエイティブやマーケティングといった仕事とは縁遠い職種ですので、ちょっと毛色の異なる記事になると思いますが、よろしくお願いいたします。

WEBサイトを閲覧できるデバイスが急増

昨年から今年にかけてのIT業界での大きな動きといえば、スマートフォンやタブレットPCの爆発的な普及ではないでしょうか。
WEBサイトの解析をされている方ですと、PCやフィーチャーフォン以外のこういったデバイスからのアクセスが増えてきていることを実感されている方も多いかと思います。

WEBサイトのマルチデバイス対応がさらに重要に!

今までのようにPCサイト、モバイルサイトと別々のHTMLファイルを用意して(ひどいときには、ブラウザ別、キャリア別のファイルを用意したりとか)対応していたかと思いますが、そこにスマートフォン用とかタブレット用を用意するとなると、サイト作成のコストもバカになりませんし、コンテンツ管理も大変ですよね。

そんなWEBサイト開発者共通の悩みに対して、新たな救世主が現れました。

レスポンシブWEBデザイン

レスポンシブWEBデザインとは、WEBサイトの表示切り替えの基準を「デバイス(ブラウザ)の種類」によって判別するのではなく、「デバイス(ブラウザ)の表示幅」によって判別しようというものです。
しかも、表示幅ごとのHTMLファイルを用意するのではなく、1つのHTMLファイルをCSS3(メディアクエリー)で制御して表示を切り替える というものです。

デバイスごとに複数作成する必要がないので、制作コストも管理コストも1つのWEBサイト分で済みますので開発者にとっては嬉しいことこの上ないものですし、閲覧者側もアクセスするURLは1つでデバイスごとに最適化されたページが表示されるので、快適なブラウズが行えます。
まさに「Win-Win」

レスポンシブWEBデザインの事例

マルチデバイス対応にお悩みのWEB開発者の方から見るとまさに「銀の弾丸」のようなレスポンシブWEBデザイン。これを実際に採用されているWEBサイトをいくつかご紹介いたします。
実際に各サイトを訪れていただき、ブラウザサイズを変えていただくと動的にレイアウトが変わっていることが確認できると思います。
(IEですとうまく表示されない場合があります。ChromeやFirefox、Operaなどでお試しください)

Sony USA

1200px

800px

600px

 

 

 

 

 

 

mochrom

1200px

600px

 

1 2
ご相談はこちら
photo

ライター:アド論 編集部


Contents

ico人気記事