デバイスごとにhtmlを用意してWebサイトを作るのではなく、PC・タブレット・スマートフォンなどのデバイスに対して、ワンソース(1つのhtmlファイル)で対応するWebサイト制作手法「レスポンシブWebデザイン」が注目されており、cherry-pickで制作・開発するマルチデバイス対応サイトでも多く利用されています。
なぜレスポンシブWebデザインが注目されているのか？
様々な幅を持つスマートフォン/タブレット端末が出現し続けている
PC、スマートフォン、タブレットPC、デジタルサイネージなど、様々な解像度を持つデジタルデバイスは増え続けています。これにより、従来のマルチデバイス対応アプローチである「ユーザーエージェントによるデバイスごとのデザイン切り替え」や「PCサイトのhtml変換ツールを用いたデバイスごとのデザイン切り替え」では対応しきれないことが増えてきました。
GoogleがレスポンシブWebデザインを推奨。
Google社がスマートフォン専用サイトの構築方法として、「同じ一連の URL ですべてのデバイスに配信するサイトで、それぞれの URL がすべてのデバイスに同じ HTML を配信し、CSS を使ってデバイスでページをレンダリングする方法」であるレスポンシブWebデザインを推奨しています。
多手法に比べてレスポンシブWebデザインはSEO最適化がしやすく、ペナルティの対象となりにくいメリットもあります。
モバイルデバイス(スマートフォン/タブレット)からの閲覧機会増加
みなさんはFacebookやTwitterを見るとき、PCとモバイルのどちらを多く利用しますか？
情報の流通チャネルがソーシャルメディアに移行し、多くのユーザーがモバイルデバイスを用いてWebコンテンツを閲覧するようになりました。B2Bビジネスにおいても例外ではなく、ビジネスマンの多くがスマートフォン/タブレットを用いて業務を行う今、Webサイトのモバイル対応の必要性が高まり続けています。
Webサイトでの情報発信を一元化したい
ソーシャルメディアの出現以降、Web担当者の情報発信業務は増え続けており、「情報発信の手間を最小限にし、可能な限り一元化する」必要が出てきています。
レスポンシブWebデザインは、デバイスごとにhtmlファイルを用意する必要がないため、Webサイト更新の手間を少なくできるメリットがあります。
cherry-pickサイトでもレスポンシブWebデザインが採用されています。
ご覧いただいているcherry-pick inc.のWebサイトでも「レスポンシブWebデザイン」が採用されています。
PC/タブレット/スマートフォンの閲覧に対応しています。
cherry-pickサイト(/)
レスポンシブWebデザインを実現するための技術
レスポンシブWebデザインは、マルチデバイス対応アプローチとして、従来のデバイスをWebサイト最適表示の基準にする手法ではなく、「デバイスの横幅」をWebサイト最適表示の基準にする手法です。
具体的には「メディアクエリ（Media Query）」、「フルードグリッド（Fluid Grid）」、「フルードイメージ（Fruid Image）」の３つの技術要素で実現されています。
メディアクエリ（Media Query）とは？
ユーザーがWebサイトを閲覧するデバイス環境（画面サイズ）に合わせて表示を変えることができる、CSS2のメディアタイプの拡張機能です。
フルードグリッド（Fluid Grid）とは？
「フルードデザイン(Fluid Design）」と「グリッドデザイン（Grid Design）」を合わせたものです。フルードデザインはブラウザの横幅が変わってもレイアウトを維持したまま要素のサイズを自動調整する手法です。グリッドデザインはWebページの要素を罫線や枡目に沿って配置するレイアウト手法です。
フルードイメージ（Fruid Image）とは？
ブラウザのウィンドウ幅にあわせて画像のサイズをフィットさせる手法のことです。
なぜレスポンシブWebデザインを選ぶのか、選ばないときの判断基準は？
ページ設計・デザインするときに外せないポイントとは...
まずはお気軽にご相談ください。
レスポンシブWebデザインでマルチデバイス対応したWebサイト制作、CMS開発についてお悩みであればまずはお問い合わせください。
お客様のビジネスゴールに応じてご提案させていただきます。
レスポンシブWEBデザインの導入を迷っていらっしゃるならお電話でのアドバイスだけでもお気軽にご相談ください。
