レスポンシブWebデザイン

みなさん、レスポンシブWebデザインをご存知ですか?

BtoCサイト制作の際、レスポンシブWebデザインが選択されることが多くなってきました。レスポンシブWebデザインは、同じHTMLコードで、表示するブラウザのウィンドウの幅にレイアウトを最適化するテクニックです。その最適化は、コンテンツの各ブロックの移動、縮小、順番入れ替え、表示/非表示の切り替え、UIの変更などがあります。

以下、参考のサイトです。サイトを開いたら、ブラウザのウィンドウ幅をだんだん狭くしていってみてください。そこで目の当たりにするのがレスポンシブWebデザインという訳です。

日本国内の秀逸なレスポンシブWebデザイン を集めたページ
http://responsive-jp.com/

スタジオパーク。私の大好きなレスポンシブWebデザインサイトです。いろんな意味で、とてもよくできています。人に説明する時によく紹介します。
http://www.nhk.or.jp/studiopark/

そして本サイトも企画当初からレスポンシブWebデザインを採用しています。

 

レスポンシブWebデザインが制作側の人気を集めだした背景にはタブレット、スマホの急速な普及があります。タブレットやスマホからのトラフィックが急速に増えつつある一方、専用のサイトを制作するにはそれなりのコストがかかります。

またスマホ用コンテンツが異なるURLだがPC同様のコンテンツであるときに、パンダアップデートにひっかからないか、などの気がかりがつきまといます。レスポンシブWebデザインでは基本的に同一URL、同一HTMLコードで実現するため、SEOフレンドリーな事も人気の一つです。

1. 対象のデバイス、あるいは画面ごとに別の版とコードを作成するコスト。

2. Googleなど検索エンジンが混乱しない。

 

さて、本来タブレット、スマホ用のレイアウトや見せ方が必要なのは、ひとえにユーザビリティを良くする事にあります。

画面が小さい時にも情報が見やすい事はもちろんとして、移動しながら、あるいは外出先で利用するといったシーンにそぐうメニュー、機能、情報が欲しい。そのためにはPC版と異なるメニューやワークフローが必要という事も多いでしょう。

レスポンシブWebデザインは、通常PCと同一コンテンツを違ったレイアウトで見せるものですので、異なるワークフローを実現するものではありません。この事を理由にレスポンシブWebデザインは意味が無いという人もいますが、私は単に方式を組み合わせれば良いだけだと思います。

ワークフローはワークフローで異なるURLでタブレット、スマホ用の画面を見せれば良いですし、その画面は多くのデバイスにフィットするレスポンシブWebデザインにするのが良い、と思います。

またレスポンシブWebデザインはBtoCから出てきた方式ですが、業務システムにも有用だと感じます。遅かれ早かれ業務システムの世界でもSEはレスポンシブWebデザインを前提とした画面設計をする必要がでてくるでしょうから、習得される事をお勧めします。

今後、この話題も逐次ご紹介して行きたいと思います。

 

Posted in

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">