PR

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


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

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

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

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

 サービスも登場しています。2013年4月、スマホ向けサイト構築支援を行うロックウェーブ(滋賀県)と、Webサイトなどの制作会社であるアマナが共同で、レスポンシブWebデザインを採用したECサイトの構築支援サービスを始めました。

 レスポンシブWebデザインを使えば、同じ内容のWebページが、自動的に最適なレイアウトで端末に表示されます。端末ごとにWebページを準備せずに済むので、開発コストを大幅に減らせます。ロックウェーブの岩波裕之社長は、「(レスポンシブWebデザインを使わないときに比べ)運用コストを6割削減できる」と言います。

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