スマートフォン対応のレスポンシブデザイン

スマートフォン対応のレスポンシブデザインとは

ウェブサイトをスマートフォンやタブレットなど、ユーザー端末に最適化することです。

レスポンシブデザインを理解しよう。

レスポンシブデザインは一つのHTMLで、閲覧するユーザーの端末に合わせて、見栄えを変えるWEBデザインのことです。
これまでは、端末に合わせてHTMLとCSSを作成していたのに対し、 responsive_img-01 レスポンシブデザインはHTML一つに、端末ごとのCSSを作成して対応します。 responsive_img-02

レスポンシブWEBサイトの作り方

導入の仕方は簡単で、下のコードをmetaタグに記述するだけで、端末ごとにスタイルを出力してくれます。

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!-- ※基本のスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="任意名.css" />
<!-- ※タブレット用のスタイル（任意名.css） -->
<link rel="stylesheet" media="all" type="text/css" href="任意名.css" /&gt
<!-- ※スマートフォン用のスタイル（任意名.css） -->

対応したCSSを作成します。

/*----------------------------------------------
style.css @media screen 横幅を指定します。
----------------------------------------------*/
@media screen and (min-width: 任意px){

画像や基本コンテンツを画面に対して100％
もしくわautoで設定デザインを決めます。

/*----------------------------------------------
タブレット（任意）.css  横幅を指定します。
----------------------------------------------*/
@media screen and (max-width: 任意px){

基本スタイルシートをコピペして、
タブレットサイズに合わせます。
/*----------------------------------------------
スマフォ（任意）.css  横幅を指定します。
----------------------------------------------*/
@media screen and (max-width: 320px){
現在のところ縦向きのスマフォの最大が320pxｂなので
320pxにしています。

基本スタイルシートをコピペして、
スマフォサイズに合わせます。

これで、レスポンシブデザインの準備ができたわけですが、注意すべき点は、ワイドで見れるPC画面と、折りたたまれて表示される携帯端末の表示を意識して作成するところです。例えば３カラムのサイトで、 PCでは全体が見えますが、携帯端末では１カラムずつの表示が基本なので、表示させる順番を間違えると、訴求力の弱いサイトになってしまいます。 responsive_img-03 特にTOPページでは順番を間違えると致命的です。分かりやすくいうと、下のような感じです。 header（A）→（B）グローバルナビ　
OR メインコンテンツ　
○ header（A）→（D）バナー広告　
× 通常はヘッダーが一番に来ますが、その次にバナー広告がズラズラ並ぶと、意味不明なサイトになってしまいます。
１つのHTMLで端末ごとにCSSを作成するので、 HTMLの構成が鍵になってきます。
またブロックで固めたWEBサイトでは、レスポンシブ化は不可能で、フリーなスタイルが要求されます。（解体すれば可能ですが…） wrapやcontainerなどでグルグル巻きのWEBサイトは、レスポンシブに適さないということです。
レイアウトの崩れがないように wrapやcontainerで包んだサイトがまだまだ多いので、レスポンシブデザインの要領は覚えておいた方が良いでしょう。

誰でも作れるWEBサイトの時代が終わるかも？

レスポンシブデザインは、大前提として、 HTMLとCSSの基礎が分からないと作れないので、素人とプロの差別化（分業）に貢献するかと思われます。
テンプレート化もされていますが、きっと表示する順番がめちゃくちゃになるので、ユーザーには見難いサイトになるでしょう。そこで必要になってくるのが、 WEBデザイナーやWEBクリエイターというわけです。
この状況はスマートフォンの普及が原因なので、私たちには、とても有難い状況です。

レスポンシブデザインで注意すべき点

１、表示順序を考えたレイアウトを心がける。
２、いらない物はdisplay：none;で消す。
３、必要な場合は素材を専用で作る。
４、バナーの多さ（重複）に気をつける。

デザイナーによって重視する点に違いはありますが、当スタジオでは以上の点に気をつけて着手しています。またレスポンシブの課題としては、設定すると端末依存となり、閲覧者が見たいCSS表示で見ることが出来ないことです。
簡単にいうとPC画面で見たい！という要望に応えられない点です。（別々のhtmlがないので仕方ないですね）
逆にいうと、スマフォユーザーに混乱を与えないので、良いかと思います。
PC表示に慣れたユーザーが、スマフォ表示に慣れるのも早いでしょう。
ウィンドウズ８からタッチUI（ユーザーインターフェース）が採用されているので、 WEBサイトも改革が必要な時期なのかもしれません。
記事の内容をもっと詳しくは知りたい方はフリーランスWebデザイナーの仕事　様 http://webdesignerwork.jp/web/responsivewebdesign/
Rochas　様
http://dresscording.com/blog/responsive/background-size.html
DECONCEPTER　様
http://log.deconcepter.jp/2012/10/responsivedesign/
上記をご覧いただければ、詳しく分かりやすく説明されております。参考にさせていただきました。ありがとうございます。
レスポンシブデザインの動作確認をするサイト http://www.responsinator.com/ 上記のサイトで制作したサイトのURLを入れれば、動作の確認ができます。

以上、スマートフォン対応のレスポンシブデザインとはでした。