ウェブサイトのモバイル対策: Responsive Web Design [レスポンシブWebデザイン]
(U.S. FrontLine誌 2014年9月5日号 掲載分)
前回、近年登場した、新しいモバイル対応サイトの画期 的な構築方法である、レスポンシブ・ウェブデザインにつ いて、軽く触れました。昨今のデバイスやインターネット 閲覧環境の多様化により、モバイルユーザーが増え続けて いる中、ユーザーが閲覧している画面サイズも、かなりの バラツキが出ています。一番割合的に多い画面サイズでも、 全体の１割強という状況で、サイト制作側も、モバイル対 応は、必要不可欠になってきたと言えます。
[もっと詳しくレスポンシブWebデザインについて知りたい方はこちらも参照ください： レスポンシブ・ウェブデザインとは？]
従来のモバイル専用サイトの問題
以前より、モバイル専用サイトは、大手企業サイトを中心 に存在はしていました。ただ通常サイトとは別に構築する ことで、色んな問題があり、あまり普及はしませんでした。 モバイル専用サイトは、通常サイトの簡易機能版サイト という位置づけで、通常サイトにある全ての機能・コンテ ンツが使えるものにはなっていないケースがほとんどでし た。ユーザーからすると、使い勝手や得られる情報という 面で、かなりストレスを感じることが多く、モバイル専用 サイトがあるとは分かってはいても、あえて多少見難くと も、スマートフォン上で通常サイトの方を利用するユーザ ーも多くいたと思います。
検索エンジン的には、通常サイトとモバイル専用サイト は、ミラー（重複）コンテンツになりやすく、リダイレクト （自動でページを転送させる行為）も多発するなど、SEO的 に色んな問題を抱えることになります。
ログ解析においても、コンテンツが二重化していること で煩雑になり、勿論、開発費も二重にかさみ、ページの更 新・追加作業といった メンテナンス的にも、コストがかさ むことになります。
そこで近年登場したのが、レスポンシブ・ウェブデザイン という手法です。ちなみにResponsiveとは、「反応がいい」 という意味ですが、元は建築用語の「Responsive Design 変化できる建築デザインの意」から引用されたそうです。
レスポンシブ・ウェブデザインとは？
モバイル専用サイトのように、ファイルを二重化構造
でもつことなく、通常サイトに必要なファイルに、少し拡
張した記述をすることで、ユーザーが様々な画面解析度で
閲覧した場合でも、柔軟な表示を実現する手法のことです。
技術的には、大きく３つの要素から構成されます。
「フルードグリッド」は、液体が器の形に合わせて、流動 的にカタチを変えるかのように、画像やテキストなど、ウ ェブページのコンテンツを、どんな画面サイズで閲覧され ても、きれいに整列させたレイアウト表示を実現する技術。 「フルードイメージ」は、画像を、縦横比を保ったまま、 画面解析度に合わせて、伸縮させる技術。
画像に関しては、例えばモバイルから閲覧された場合に だけ、小さいサイズの画像をロードさせ、回線事情の悪い 環境下でもレスポンスを改善することなども行えます。
「メディアクエリー」は、ユーザーの画面解析度に合わせ て、任意のスタイルを適用できるようにする記述で、これ を利用して例えばモバイル用のメニューの表示も簡単に行 えます。
レスポンシブ・ウェブデザインの利点・欠点
メリットは、今後も増え続ける様々なデバイスへの表示 が柔軟に対応でき、ファイルを一元管理できるため、生産 性・メンテナンス性に優れ、デザイン性やURLも統一でき、 SEO的にも有効（Googleも推奨している）になることです。 デメリットは、通常のサイトを構築するよりは、記述し なければならないコードや、考慮事項が増えるため、テス トも含め、開発コストは上がります。それでもモバイル専 用サイトを別に開発するよりは、一般に安くなります。
コードがより複雑化するため、設計段階から、それな りのスキル・知識をもった開発者が携わる必要があります。 適切なスキルのない開発者が関わると、返ってメンテナン ス性が悪くなり、不測の事態を招く可能性もあります。
前回、近年登場した、新しいモバイル対応サイトの画期 的な構築方法である、レスポンシブ・ウェブデザインにつ いて、軽く触れました。昨今のデバイスやインターネット 閲覧環境の多様化により、モバイルユーザーが増え続けて いる中、ユーザーが閲覧している画面サイズも、かなりの バラツキが出ています。一番割合的に多い画面サイズでも、 全体の１割強という状況で、サイト制作側も、モバイル対 応は、必要不可欠になってきたと言えます。
[もっと詳しくレスポンシブWebデザインについて知りたい方はこちらも参照ください： レスポンシブ・ウェブデザインとは？]
従来のモバイル専用サイトの問題
以前より、モバイル専用サイトは、大手企業サイトを中心 に存在はしていました。ただ通常サイトとは別に構築する ことで、色んな問題があり、あまり普及はしませんでした。 モバイル専用サイトは、通常サイトの簡易機能版サイト という位置づけで、通常サイトにある全ての機能・コンテ ンツが使えるものにはなっていないケースがほとんどでし た。ユーザーからすると、使い勝手や得られる情報という 面で、かなりストレスを感じることが多く、モバイル専用 サイトがあるとは分かってはいても、あえて多少見難くと も、スマートフォン上で通常サイトの方を利用するユーザ ーも多くいたと思います。
検索エンジン的には、通常サイトとモバイル専用サイト は、ミラー（重複）コンテンツになりやすく、リダイレクト （自動でページを転送させる行為）も多発するなど、SEO的 に色んな問題を抱えることになります。
ログ解析においても、コンテンツが二重化していること で煩雑になり、勿論、開発費も二重にかさみ、ページの更 新・追加作業といった メンテナンス的にも、コストがかさ むことになります。
そこで近年登場したのが、レスポンシブ・ウェブデザイン という手法です。ちなみにResponsiveとは、「反応がいい」 という意味ですが、元は建築用語の「Responsive Design 変化できる建築デザインの意」から引用されたそうです。
レスポンシブ・ウェブデザインとは？
「フルードグリッド」は、液体が器の形に合わせて、流動 的にカタチを変えるかのように、画像やテキストなど、ウ ェブページのコンテンツを、どんな画面サイズで閲覧され ても、きれいに整列させたレイアウト表示を実現する技術。 「フルードイメージ」は、画像を、縦横比を保ったまま、 画面解析度に合わせて、伸縮させる技術。
画像に関しては、例えばモバイルから閲覧された場合に だけ、小さいサイズの画像をロードさせ、回線事情の悪い 環境下でもレスポンスを改善することなども行えます。
「メディアクエリー」は、ユーザーの画面解析度に合わせ て、任意のスタイルを適用できるようにする記述で、これ を利用して例えばモバイル用のメニューの表示も簡単に行 えます。
レスポンシブ・ウェブデザインの利点・欠点
メリットは、今後も増え続ける様々なデバイスへの表示 が柔軟に対応でき、ファイルを一元管理できるため、生産 性・メンテナンス性に優れ、デザイン性やURLも統一でき、 SEO的にも有効（Googleも推奨している）になることです。 デメリットは、通常のサイトを構築するよりは、記述し なければならないコードや、考慮事項が増えるため、テス トも含め、開発コストは上がります。それでもモバイル専 用サイトを別に開発するよりは、一般に安くなります。
コードがより複雑化するため、設計段階から、それな りのスキル・知識をもった開発者が携わる必要があります。 適切なスキルのない開発者が関わると、返ってメンテナン ス性が悪くなり、不測の事態を招く可能性もあります。
