“レスポンシブWebデザイン”を活用することで、1つのサイトでマルチデバイス対応が可能
スマートフォン対応の１つの選択肢として、たにぐち氏が注目するのが、 “レスポンシブWebデザイン”だ。
「デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する手法を採用し、PCサイトをスマフォやタブレットで閲覧した際にもレイアウトを自由に変えて対応するやり方です。HTMLはそのままに、CSS3の“メディアクエリ”を利用してスタイルシートだけでデザインを自動的に変更します。こういう手法があることも覚えておくとよいですね」
これで、PCとスマートフォン、両方に最小限のコストで対応できるわけだ。メディアとしての統一感を出したい場合や、ブランドサイトのように、ビジュアルを豊富に採り入れたデザイン重視のサイトの場合、多いに有効的なものとなるだろう。
ポイント7 “レスポンシブWebデザイン”という、PC/スマートフォンを横断する考え方を選択肢に加える
「未来館のひと」のスマートフォンサイト（iPhoneでの表示） たにぐち氏が制作を手掛けた日本科学未来館のブログサイトを紹介。プラットフォームにはWordPressを使用し、 レスポンシブWebデザインを採り入れ、スマートフォンでの閲覧時には自動的にレイアウトが変更され、快適に閲覧・操作ができる
ライカのプロモーション・サイト「Leica Explorer」（iPhoneでの表示） レスポンシブWebデザインで最適化されているため、PCのサイトのコンテンツ構成をそのままに、デバイスによって見え方が自動調整される。 実際に、端末を変更してアクセスしてみると、その様子を確認できるので、参考にしてほしい。
CMSとして企業サイトで採用されることも多いWordPressであるが、HTML5製のテーマ「Constellation Theme」は、 メディアクエリを介してPC、iPhone、iPadにもレイアウトが最適化される
