Bambooo!


レスポンシブWebデザインをちょっとかじってみた。

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

まずPCやスマートフォン、タブレット等様々なデバイスに対応する複数のテンプレートやページを制作するのではなく、ディスプレイの幅に合わせてデザインを最適化する方法でCSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更する手法です。

「なぜ、レスポンシブWebデザインなのか」

Webサイトをマルチデバイスに対応させる場合、少し前であれば、iPhoneやiPadなどのOSやスクリーンサイズごとにキメ細かくデザインを調整したテンプレートを用意し、サーバーサイドの技術などを利用して振り分ければよかったのですが、昨今、各社から様々な端末が発売されスクリーンサイズを把握すらできない状況です・・・。その為、ディスプレイのサイズに合わせてスタイリングする手法が注目されています。弊社でもサイト全体をWordPress(CMS)で構築してスマホ用のテーマを別途制作する事がほとんどなのですが、正直PCサイト制作同等に工数がかかってしまいます・・・。そこでレスポンシブWebデザインを採用する事で制作コストを多少は軽減する事は可能ではないかと考えられます。

「リキッドデザインとの違いは?」

これまでの「リキッドデザイン」と似たような感じですが、違いは、リキッドデザインはブラウザの横幅サイズに応じて可変しますが、レイアウトは同一に対し、「レスポンシブwebデザイン」はブラウザの横幅サイズに応じて、レイアウトやデザインも含めて可変します。ですので、スマートフォンでの閲覧時は大きなイメージを表示させないとか、メニューのスタイルを変えるといった可能になるわけですね。

2012/03/09 Posted in 仕事関係 by AT (この記事は投稿から14年が経過しています)

Leave a Reply

CAPTCHA