2012/03/03

レスポンシブで、マルチデバイスに対応するための制作手順

スマートフォンやタブレット端末、そしてPCとwebサイトをマルチデバイスに対応させる手法として注目を集めているレスポンシブwebデザインでの制作手順をまとめてみます。

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

PC、スマートフォン、タブレットなど、デバイスごとにサイトを制作するのではなく、ブラウザの横幅サイズに合わせてスタイル（デザイン）を調整する方法。まずは下記サイトでウィンドウサイズを伸縮させてみて下さい。

制作手順

  1. サイトの設計
  2. サイトデザイン
  3. 実装（html5）

1. サイトの設計

今回は練習用として簡易のサイトを企画。まずは切替のポイントを考える。最初はiphone4の640pxを考えたけれど、日本の最新スマフォ事情では1280×720の機種が続々と販売されているので720以下はスマフォ用、720より上がPC＋タブレットとしてレイアウトを2パターン考えることにしました。最小幅はiphone3の320px。下図ページ構成。

2. サイトデザイン

違う点はロゴや写真の大きさ、ナビゲーションのデザイン、レイアウトの変更。

3. 実装（html5）

html5で制作するための基本設定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

スマートフォンでページを等倍表示させるためにviewportを設定

iPhoneで自動的に数字をリンクテキストに変更しないように設定

ファビコンやスマフォ向けのWebクリップアイコンを設定する場合（必要な場合）

光沢処理を自分でデザインして、iphoneとAndroidで見た目をそろえる場合はrel="apple-touch-icon-precomposed"とします。下記サイトが詳しく解説してくれています。アイコンを作ってないので設定していません。

Google web fontsを読み込む（必要な場合）

今回、ロゴで使用したフォントに似ているArvoがよさげだったので使ってみました。ここでプチはまりしたのが、指定したGoogle web fontsがIE9で表示されない！検索しても海外の掲示板でIE8は大丈夫なのにIE9はだめだよー、みたいな書き込みを見つけるだけで原因がわからない。でも同じ指定でちゃんと表示されているサイトがあって、もしやと思いファイルをローカルにダウンロードして確認してみると…。原因はローカル環境であることがわかりました。IE8では確認できるのに。ファイルをサーバーにあげるとIE9でも問題なく表示されました。

対応していないブラウザでもhtml5を使えるようにhtml5.jsを読み込む

Media QueriesをIEでも使えるようにcss3-mediaqueries-jsを読み込む

IE7以下で縮小された画像が粗く見えるのを解決するためにimgSizer.jsを設定

個人的に720px以下での画像可変のPC向け（IE6,IE7,IE8）対策は必要ないかと思う。PCで720px以下のウィンドウサイズでウェブブラウズしている人っているのだろうか？今回は720px以下でしか画像の可変は起こらないので設定していません。

スマートフォンの文字サイズの自動調整機能オフに設定

html {-webkit-text-size-adjust: none}

IE8のmax-widthのバグに対するハック

ウインドウサイズに合わせて画像を可変する場合、IE8ではmax-widthで横幅しか縮小されないバグがあるので、下記のcssを設定します。これもPC向けの幅で必要なければやらなくて良いんじゃないかなと思います。一応設定しました。

img {
 max-width:100%;
 height: auto;
 width /***/:auto; /* for ie8 */
}

Media Queriesでウィンドウサイズごとにcssを設定

今回は（スマートフォン≦720px、721px≦PC・タブレット）としたので以下のような設定をしています。

/* for 721px or more */
@media screen and (min-width: 721px) {
PC、タブレット向けcssを記述
}

/* for 720px or less */
@media screen and (max-width: 720px) {
スマートフォンcssを記述
}

とりあえず、これで完成。IE7,IE8,IE9,他のモダンブラウザでも問題なし。一応IE6も大きな問題はなく動作します。

制作後の個人的感想

  • 制作に入る前の設計がとても重要。コンテンツの優先順位を考える。
  • 解像度や画面の大きさが違う様々な端末にそれなりに統一された情報を提供できる。
  • 制作工数が減る。更新や運用が楽。でも慣れるまで少し面倒くさいかも。
  • 携帯の通信速度を考えて、ファイル容量をできるだけ減らす必要がある。今回制作したファイルが約250kb、google webfontを2種類利用しているので＋60kb、外部jsが2つで＋25kb、合計が335kb。Softbankの3G回線速度が500Kbpsとして（1Mbpsは125kbytes/sで計算）ファイルをすべて読み込むのに5秒〜6秒。（合ってるかな？）これだけシンプルなサイトでも5秒〜6秒って…どんだけ。実機で試してないのであくまでも計算上。 ※条件分岐していてもファイルをすべて読み込んでいるらしい？
  • 小規模サイト、テキストベースの情報ページ向き。中規模、大規模サイトには少し厳しい印象。予算が限られている案件の場合に一つのプランとして提案するのはありかも。
  • 回線速度が改善されれば有用。でも、タブレットはともかくスマフォの限られた画面、特異なUIでは最善とはいえないかも。
  • 個人的には期待!!

参考サイト

レスポンシブwebデザイン、Media Queriesへの見解

tag : , ,

0 件のコメント :

コメントを投稿

☝