レスポンシブWebデザインを制作するときの考え方と実装について 前編
今回はとある活動で「レスポンシブWebデザイン」をすることになりました。
貴重な経験だったのと、理解をもっと深めたいなと思ったので
今までに学んだことについてまとめて記事にさせていただきたいと思います!
◆レスポンシブWebデザインとは
レスポンシブWebデザインとは、PC・タブレット・スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。
ブラウザーのスクリーンサイズを基準にCSSのMedia Query(メディアクエリー)でレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。
つまり、PC、タブレット、スマートフォンなどのデバイスをwebサイト表示の判断基準にするのではなく、ブラウザの横幅サイズをwebサイト表示の判断基準にして、ページのレイアウトデザインを柔軟に調整できるディスプレイの最適化を図っています。
さらに新しいOSやデバイスが登場しても単一のHTMLなのであまり修正する必要もない！ということですね。
作ってみて、失敗しての繰り返しで理解できたことは多くありました。
知識・考え方は理解していましたが、いざ制作！となると上手くいかないことがあり、
そこで気づいた制作時の注意点として、いくつか上げてみたいと思います。
◆「モバイルファースト」という考え方
私がこの言葉を聞いたのは、某会社のセミナーでした。
これは「モバイルを起点に企画やデザインを考える」というコンセプトです。
（混乱しがちですが、ただスマートフォンサイトを作ってからPCサイトを作ること、というサイト制作の順番ではありません。ですがスマートフォンサイトから設計していくとのことです。）
だからwebサイトのコンテンツもスマートフォンを中心に考え設計します。
◆スマートフォンの画面設計時に考える要素として
1.PCに比べてスクリーンが小さいのでユーザーの目的が達成させられるように
スマートフォンサイトでは画面解像度がPCと比較して小さく、iPhoneなら320px×480px(iPhone4以降のRetinaディスプレイ対応なら640px×960px)、Androidは機種によって違いますが480px×800pxが多いのではないでしょうか。そうなるとユーザーが求めている情報にたどり着くことが遅くなりえる不要な情報はなくす方が望ましいかと思います。なのでユーザーが目的を達成させるための導線は最小限に設計する必要があります。
またwebサイトが表示された最初の画面(ファーストビュー)に入れる情報も上記の点を意識すべきでしょう！
2.会社や家とは違い、時間と場所に様々な利用シーンがある
ユーザーがモバイルを使用する利用シーンは様々ありますよね。電車の移動時や家でテレビを見ながらなど...設定しているターゲットユーザーの行動にあったアプローチが求められると思います。
3.通信速度などに関するパフォーマンスの違い
スマートフォンはインターネットの通信速度がPCと違い遅いのも特徴的です。
みなさんも使っていて早くなれば良いのに…とおもっているのでは？
参考：「スマートフォンに関するアンケート http://www.marsh-research.co.jp/examine/ex2409.html」
今後スマートフォンで「非常に重視」していく点は、「通信速度！」というユーザーの意見もあるほどです。
なので必要以上に画像を多く使用するのをさけて、CSS3で表現できるところは使用し、CSSファイルは圧縮サービスを利用することでファイル容量を小さくすることが出来ます！
参考：「CSS圧縮webサービス css compressor(http://www.webcyou.com/?p=2047)」という記事も参考にしてみて下さいね。
4.使用するイメージ画像について
スマートフォンのデザインを考えてPCへ移行するときに、キービジュアルなどの拡大する画像とそのままの大きさの画像が出てくると思います。
またRetinaディスプレイや高解像度ディスプレイの場合も想定すると一つひとつの画像をそのディスプレイの解像度に合わせて作るというやり方よりは、使用する画像をSVG形式のベクター画像にして拡大縮小しても画像が粗くなることがないやり方をお勧めします。
他にも考慮する点がありますが、以上の注意点などを踏まえてました。
ですが、実際にやってみると「ブラウザの横幅を狭くしたら...」や「PCの時のこうだったから...」などPCサイトのデザインを優先に考えていたときもありましたね(汗)。
後編はレスポンシブWebデザインのコーディング実装について書いていきます！
少しでもみなさんのお役に立てていただけたら幸いです！
