「モバイルファースト」の理念に基づくデザイン手法 レスポンシブWebデザイン入門セミナー

マルチデバイス対応の最新手法、そのメリットとは

2011年秋、あるサイトのリニューアルが、Web業界において注目を浴びました。そのサイトの名は、 The Boston Globe 。注目の理由は、同サイトが採用した「レスポンシブWebデザイン」という考え方です。以来、マルチデバイス対応のいち手法として広まりつつあるこの考え方を、根底にある「モバイルファースト」の理念とあわせてご紹介、長所や短所を解説します。

近年急速に普及しつつあるのが、スマートフォンとタブレット型デバイスに代表される、モバイルデバイスです。従来のデスクトップPCやノート型PCに加え、モバイルデバイスを使ってWebサイトにアクセスすることが広く一般化した現在、さまざまなデバイスに対応させること（＝マルチデバイス対応）は、Webサイトにとって必須の要件となりつつあります。

「さまざまなデバイス」、と一言で言っても、それらのあいだには実に多くの違いが存在します。スクリーンのサイズや通信速度、搭載されているCPUやメモリはもちろん、入力に用いるキーボードはソフトウエアかハードウエアか？搭載しているOSの種類、バージョンは？そしてWebブラウザの種類、バージョンは？などなど。

表示デバイスの種別ごとにHTMLファイルを出力し分けることで、個別に内容やレイアウト、表示に要する時間を最適化することは、理想的な対応策です。しかし、今日あるまでにデバイスが多様化した状況下において、CMSの活用なくこれを実現することは難しく、そしてすべてのWebサイトでCMSが導入されているわけではありません。

そうしたなか、 The Boston Globe での採用を機に注目を浴びているのが、「レスポンシブWebデザイン」という考え方です。まずモバイル環境を対象にデザインを行う「モバイルファースト」の理念をベースに、さまざまなスクリーン幅に向けレイアウトや画像の表示サイズを変化させるこの手法は、最適化とは言えないまでも一定の有効性があります。

当社のサイトも、2012年2月のリニューアルにおいて、レスポンシブWebデザインの考え方を取り入れました。本セミナーでは、レスポンシブWebデザインの長所や短所、当社サイトにおける導入の実際などを解説。今後のマルチデバイス対応のヒントを得ていただけます。特に2012年度、Webサイトのリニューアルを検討されている方にはご参加いただきたいセミナーです。