カテゴリーアーカイブ: ウェブ

レスポンシブ・ウェブデザイン

ウェブはPCからスマートフォン、タブレットまで多様なデバイスによって閲覧される時代になりました。ウェブのコンテンツをより魅力的にするためにはそれぞれのデバイスに最適化する必要性が生まれてきています。しかしデバイスごとに別々のコンテンツを制作するのは非効率的です。そこでその解決法として注目されている手法が「レスポンシブ・ウェブデザイン」(Responsive Web Design)です。この手法を使えば、ワンソースですべてのデバイスに対応することが可能になります。

では、具体的な事例でレスポンシブ・ウェブデザインを実感してみてください。この手法は現段階では国内よりも海外に多くの事例があります。最も有名な事例としてあげたいのがアメリカ大統領であるバラク・オバマ氏のウェブサイトです。

PC、スマートフォン、タブレットでこのウェブサイトを確認してみると含まれるコンテンツはまったく同じですが、レイアウトがそれぞれ異なることがわかると思います。PCでサイトを見ている場合はブラウザの幅を変えるだけで、スマートフォン、タブレットのレイアウトを確認することもできます。ブラウザの幅を狭めていくと、文字や画像が移動してどんな幅であってもすべてのコンテンツが表示されます。なお、デバイスの表示領域は機種によってもすこしずつ異なっていますが、この手法であればそれも問題にならず、極めて汎用性の高い手法であることが実感できることと思います。

ただコンテンツのデザインが固定的である場合や、大規模なウェブサイトには不向きな面もあります。これからウェブサイトを新たに構築したりリニューアルする予定があり、規模が比較的小~中規模でデザインの制約が少ない場合にはひとつの候補として考えておくのがよいでしょう。

なお、このウェブサイトもレスポンシブ・ウェブデザインの手法で制作されています。

参考文献 「レスポンシブ・ウェブデザイン標準ガイド」(こもりまさあき著、エムディエヌコーポレーション)

参考ウェブサイト Media Queries (海外事例が多数掲載されています)