メンバーズブログ

じょうほうのツボ!

情報制作に係る新しい「こと」、変わった「もの」を紹介していきます。

レスポンシブWebデザイン

最近ホームページ開発で話が多いレスポンシブWebデザインについて紹介します。

レスポンシブWebデザイン(Responsive Web Design)は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。

レスポンシブWebデザインが注目されているのはスマートフォンが普及してきたためです。ホームページ制作時はPC向けのWebサイトを基本に制作をしていますが、スマートフォンの普及に伴い小さな画面でも見やすいようにデザインしたいという要望が増えてきました。
しかし従来型の開発方法では、それぞれの端末にごとにHTMLデータなどを作成する必要があります。
現在国内で発売されているスマートフォンのOSはiOS、Android、Windows Phoneの3つがあり、それぞれ搭載しているブラウザも異なります。さらにスマートフォンにはポートレートモード(縦置き)とランドスケープモード(横置き)があるので、端末数×スクリーンサイズに対応しなければなりません。
それらの開発コストを抑えられる点が、レスポンシブWebデザインの特徴となっています。

以下のサイトはレスポンシWebブデザインで作られているサイトです。
パソコン上でブラウザー横幅を広げたり縮めたりしても表示パターンが変わるので試してみて頂ければと思います。

首相官邸 www.kantei.go.jp/

NHKスタジオパーク www.nhk.or.jp/studiopark/

レスポンシブデザインを集めたサイト http://responsive-jp.com/


無題.pngのサムネール画像 

画面は左はスマートフォン、右はPC向け表示のイメージ

この記事を書いた人

木島 博章(ハリウコミュニケーションズ株式会社)

情報制作担当。
情報資源の有効的活用方法を模索し、Webなどデジタル媒体から印刷物まで幅広く手がける。

他のメンバーを見る

  • ちょっと知りたい不動産の一口知識
  • 四方山雑記帳
  • hariu Blog
  • めっけもん
  • 仙台・宮城のうまいもの&直売所めぐり
  • コバチャンの深〜い話
  • 小さなギモン調べてみました!
  • 建築と風景
  • ぽらぽら物語り
  • ほっとひといき!
  • マクロの眼
  • ローカル・グローバル
  • トキの目
  • 空飛ぶ「こころ」
  • 黒ひげのモノローグ
  • まるでかく
  • 女将のつぶやき
  • インフォメーションブログ