レスポンシブ web デザイン の魅力

 

 

新規制作で、レスポンシブwebデザインが採用となり、

今回がつっと制作させていただいたので、メモ。

 

レスポンシブwebデザインとは?

去年頃から注目されていたのですが、

アメリカのMicrosoft をはじめ、国内外問わずwebサイトで採用が進んでいる

webデザイン・コーディング手法です。

レスポンシブwebデザインは、スマートフォン、タブレット端末などの、

各デバイスに最適化して、webサイトを表示させる事です。

 

まずはこちらのサイトをPCで見た場合

http://www.mammina.co.jp/

mammina-pc

mammina-pc

 

一般的なwebサイトに見えるかと思います。

こちらをiPadで見ると・・・

 

mammina-tablet

mammina-tablet

 

コンテンツの位置がまるっと変わりましたね。

さらにiphoneでみると・・・

 

mammina-smartphone

mammina-smartphone

 

初めて見たときはおお〜とかなり感動しました^^

PCで見ているひとより、iphone,ipadなどの端末のアクセスが多い、

webサイト(ファッション、情報サイトなど)は特に今後導入が進んで行くかと思います。

wordpressの2013年3月時点でのデフォルトテンプレートの最新版の

Twenty Twelveもレスポンシブwebデザインで構成されています。

 

 − モバイル対応の今まで

/sp/などの別ディレクトリに、モバイル用ファイルを制作して、

UAなどで振り分けるという方法が一般的だと思います。

 

−  上記の問題点

一カ所の修正の際でも、PC、モバイルの複数ページの修正を行う。

seo的に不利(同コンテンツで、リンク分散)

タブレット端末の表示では拡大しないと見えづらい。

 

−  レスポンシブwebデザインでの解決

PC、スマートフォン、タブレット端末などを一つのファイルで統一して

管理が可能。seo的にも最高^^

問題点はのちほど・・・

 

 

レスポンシブwebデザインの問題点

一見webデザインの革命。今後は全てレスポンシブに!

と思いたいのですが、諸刃の剣?の手法です。

 

 - 基本的に情報は一緒

PCでもスマートフォンでも、情報は一緒です。

一定のテキスト料情報サイトの場合はいいのですが、

情報の多い場合は離脱につながりかねないです。

 

 - 制作側の負担増

実際制作して気づいたのは、これ三つサイト作ってるのと、

一緒じゃない??と思う事が多々ありました。

理由はcssでのレイアウト変更デザインなどは、

PCが元にデザインできるとはいえ、ブラウザ、デバイスのチェックも、

それぞれおこなう事になるので、制作の前段階の調査、MTは是非意識して頂いた方がおすすめです。

いいですね!やりましょう!で後ほど死にかけます(体験済)

 

 - デバイスごとの設定に限界

のちほど後述しますが、制作時CSS3 Media Queriesという機能で、

ブレイクポイント(pxで横幅を指定してcssを反映するポイント)を設定するのですが、

一般的に最も統一したサイズかつ市場で浸透しているiphone, ipadの横幅 に合わせたり、

任意の横幅を設定したります。

問題なのはAndroid端末のデバイスサイズはバラバラで、

タブレット端末のバリエーションも数多く販売されており、

個々の端末に応じてブレイクポイントを設定するのは難しくなってきています。

 

 

でもやっぱりいい!!

以上のように、一長一短のデザインですが、

情報が少ない企業サイトや、モバイルやタブレット端末での使用が多い情報サイト。

特にモバイルに馴染み深い10代、20代女性向けコンテンツ、事業を行っている場合は、

かなりおすすめできるのでは、と思っています。

 

seo的にもひとつのURLに統一できるので、かなり有利です。

導入の是非と、導入前の調査、設計をしっかり組む事ができれば、

ぜひ一度制作してみてください。

ちなみにコチラの記事をご紹介いただけました。
業界研究.comさんのWEB制作業界にミライはあるの??
 

次回レスポンシブwebデザイン 制作編やってみます^^