レスポンシブWebデザイン

読み方 : れすぽんしぶうぇぶでざいん

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

同じ内容のWebページのレイアウトデザインを端末の画面サイズに応じて自動的に変える手法。パソコン(PC)やタブレットなど、マルチデバイス化への対応策として注目が集まっている。

「スマートフォンで、インターネット上のWebページにアクセスしたら、小さい文字で表示されて読めなくて困った」。こうした経験は誰にでもあるかと思われる。このような現象が起こるのは、そのWebページがパソコン(PC)向けにしか作られていないからだ。

従来の解決法は、Webページのコンテンツとレイアウトを定めるHTMLファイルをデバイスごとに用意すること。企業にとってその手間とコストが課題だった。

効果:端末ごとのページが不要に

こうした負担を大幅に減らす手法としてここ1、2年、注目を集めているのが、レスポンシブWebデザインである。NTTドコモやソニーといった企業が、自社運営のWebサイトで採用している。

レスポンシブWebデザインを使えば、同じ内容のWebページが、自動的に最適なレイアウトで端末に表示される。端末ごとにWebページを準備せずに済むので、開発コストを大幅に減らせる。

レスポンシブWebデザインでは、Webサイトの開発者が、Webページごとに、Webページの内容を記述するHTMLファイルと、Webページのレイアウトを指定するCSS(カスケーディング・スタイル・シート)ファイルの2つを作成しておく。CSSファイルには、Webブラウザの画面幅に合わせてレイアウトを変化させるよう、指定する。

するとインターネット利用者がそのWebページにアクセスしたとき、利用者の端末上のWebブラウザがこれら2種類のファイルを読み込む。ブラウザは読み込み結果に基づき、横幅に合わせてWebページを表示させる仕組みだ。

動向:米グーグルの推奨で注目

レスポンシブWebデザインへの関心度が高まったのは、2012年6月、米グーグルがWebサイト運営者に対して、レスポンシブWebデザインの採用を推奨すると発表したことがきっかけだ。

同社は急増するスマホのユーザーの利便性を向上させる方策として、スマホ向けサイトの情報収集エンジンを追加するなどしてきた。だが検索結果がPC向けサイトのみの場合もしばしば。そこでグーグルは、Webサイト運営者にも協力を仰いだわけだ。

今後は企業内で「PC向けのシステムを、スマホやタブレットからも使いたい」とのニーズは増えることだろう。それに迅速に対応するためにも、企業はレスポンシブWebデザインのスキルを備えた人材の確保が重要になりそうだ。

出典:ITpro「今日のキーワード」(C)日経BP社

[2014年 6月27日 公開]

課題解決に役立つ資料集「ITライブラリー」

じっくり検討いただけるよう、多種多様なおすすめ資料を取りそろえています。

大塚商会の法人向け通販サイト(たのめーる)のご紹介