2013

5

16

『レスポンシブWEBデザインについてまとめてやんよ!!』

スポンサードリンク


年内から来年の内にタブレットの出荷台数がPCを超えるといわれ、いよいよサイト制作にもレスポンシブ化の必要性が日に日に大きくなってきました。



色々なサイトでレスポンシブデザインサイトの制作のポイントを紹介がありましたので、個人的に制作時に必要なポイントをまとめてみました。

レスポンシブデザインにする理由

まず、レスポンシブとは?の説明等はここでは省略しますが、レスポンシブデザインにするべき明確な意思が制作側で固まっていない事には様々な障害にブチ当たる事になります。まぁ要するに

レスポンシブ化はそんな単純な事ではない!!!・・・ってコトです。

レスポンシブデザインのメリット

Googleがレスポンシブ対応を推奨している

  • ・コンテンツが容易にインデックスされやすい
  • ・リダイレクトが不要
  • ・Googleのクローラーへの負担が軽減される
  • ・コンバージョン、直帰率や滞在時間が大幅に改善する成果が見られる

などGoogle先生がレスポンシブデザインを推奨する理由は明確で明白です。Google先生に上位表示してもらうにはお気に入りにしてもらえる様に努めなければなりません。

サーバーサイド面のリスク

ユーザーエージェントを利用せず、サーバーサイドプログラムに頼らずに対応できるという事はプログラムに精通していないHTMLとCSSをメインとしている作業者にも比較的容易に実現しやすく、サーバーサイド方面の負担が減らせます。

SEO対策に有効

従来のPC版、スマホ版といったディレクトリを分けや専用URLを取得したり、.htaccessでアクセスしたデバイスの振り分けや同内容のコンテンツを2種類に作り分けるが類似または重複コンテンツと誤認されない為の”noindex“や”nofollow“の記述が不要となり、ペナルティのリスクも軽減されます。

レスポンシブデザインのデメリット

デザインやレイアウトの自由度の制限

デバイス毎にあまりにも統一性のないデザインはすべきではないのは前提ですが、PCサイトだからできる大きな画像を使ったコンテンツや拘ってるデザインや挙動でユーザーの関心を惹きたいけど、スマホ版サイトではビジュアル面よりもより実用性のあるUIやコンテンツに対する効果の即効性が求められます。

同じページ内で全ての理想を実現させることはとても難しと思います。

サイト全体のデータ量の肥大化

全デバイスに対応できる様にするということはページがロードされると同時に全デバイスに対応させるデータ量が読み込まれる処理が入るのでスマホ専用に最適化されたページよりも明らかな読み込み速度の違いが出てしまいます。

エリアによってはモバイルデバイスの通信環境が未だ安定していない現状でページの表示の遅さは直帰率に繋がる致命的なデメリットです。軽量化のプラグイン等の検討も含めるとさらにコストの増大に繋がっていくため、動的な仕様などもある程度の割り切りも必要とされます。

上記の問題を踏まえた作業工程のコスト増

あらゆるユーザーの環境に左右されないUIを目指す事がレスポンシブの本質である以上、制作側もあらゆる環境に考慮した設計・テストをしなければなりません。

「IEなんてなくなってしまえ!!」や「バグの多いAndroidはシカトっしょ」といったスタンスの制作者はそもそもレスポンシブに対応させるべきではないんでしょうね。気持はわかりますけどね( ̄~ ̄;)

レスポンシブ化にあたっての準備

Media Queriesの実装

レスポンシブに対応させるにはMedia QueriesというCSS3で策定されたMedia Typesの拡張機能を使用できる様にしなければならないのですが、IE自体がCSS3に対応していないので当然Media Queriesも実装されていないのですが、我らがGoogle先生がIEでもMedia Queriesを実装できる様に『CSS3 Media Queries.js』というライブラリを用意してくれています。

※headタグ内に下記を記述して下さい。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

IE8以下をMedia Queriesに対応させる

さすがのGoogle先生も面倒みてくれるのはIE9までで、やはりというかさすがというかIE8以下は放置状態です。ここで制作側は一つの決断を迫られます

IE8以下をレスポンシブ設計の仕様に含めるか否か?

上記でもあるようにページロード時のデータ処理が多くなるという事はIE8を標準としているOSを搭載したPCスペックを考慮するとそのページを閲覧する行為自体が当事者の環境に負担をかける物となるのは良いとも思いません。 この問題に関してはプロとしての責任放棄という事ではなくクライアントの希望次第によってくると思います。 ただ実装する場合でも対応策については有効な手段が既にあります。

Respond.js

IE6~8でCSS3 Media Queries(max-widthとmin-width)を解釈可能にしてくれます。しかしこのRespond.jsも正常に機能しなくなってしまうケースがあります

ケース1 CSSファイル内の@importは無効

CSSファイル内の@importは無効でHTMLファイルから直接link要素で読み込まれたCSSファイルのみ対象となる。(同一のサーバー上に置く)

/* 例) ダメな指定 */
<link href="./css/style.less" rel="stylesheet/less" media="screen and (min-width: 480px)" />
/* 例)良い指定 */
<link href="./css/style.css" rel="stylesheet" media="screen and (min-width: 480px)" />

ケース2 属性セレクタに対するバグ

属性セレクタ(input,button)の記述をすると無効になる」というバグがある

ケース3 Ajax処理前のレンダリングはNG

Ajax完了前にレンダリングするとFOUC(Flash of Unstyled Content)によるページのレイアウト崩れが起こる

ケース4 ローカル環境での動作確認は不可

HTTP接続によって閲覧しないとこのJSは動作しない 以上の条件下による制約はありますが、CSS3 Media Queries.jsとRespond.jsの組み合わせによりIE8以下にもレスポンシブが対応できますが、あまり意味はないかも・・・。

HTML5タグで記述されたサイトの場合

既存のサイトをレスポンシブ化させるならば話は別ですが、新規の場合はHTML5で制作すると思われますが、<article><aside><header><footer>などのHTML5の新要素はIE8以下ではタグと認識されずにレイアウト崩れを防ぐのが『html5shiv.js』です。

html5shiv.js

リンクからファイルをダウンロードし、HTMLの<head>内に下記を記述

<!--[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<![endif]-->

html5shivの注意点

これでIE8にもHTML5のタグが認識されます・・・・が!!!

ここで誤認してはいけません。これはあくまでIE8で認識されないHTML5のタグを「コイツ、タグだからね」と、とりあえずな解釈をしてくれるだけであってこのライブラリでHTML5の<video><canvas>などのHTML5が利用できるようになる魔法のスクリプトではありませんのであしからず・・・。

IE8以下に対応するサイトの記述の注意点

他のブラウザでは問題なく表示されているのにIEではレイアウトが崩れているというのは製作者あるあるネタですが、大体の原因がIEの”標準基準モード”と”後方互換モード”のCSSの解釈の違いによる物が考えられます。

例えば、以下の様なCSSを記述した場合の各モードの見え方です。

div.box {
    width: 500px;
    padding: 50px;
    border: 5px solid #000;
}

001
  • 標準準拠モードは width 及び height に padding 及び border を含みません
  • 後方互換モードは width 及び height に padding 及び border を含みます

※IEの後方互換モードで動作するときのサイズの算出方法のバグが他のブラウザと仕様が異なるためpaddingとborderは極力使わずmarginで対応する様にするか上記の使用を頭に入れた設計を!

html5.jsとCSS3 Media Queries.jsの併用時の宣言

<!--[if lt IE 9]>
<script src="./js/html5shiv.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

尚、HTML5仕様の場合のCSSは以下のタグはblock要素しておくと良いと思います。

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

PC以外のデバイスに対応する環境準備

スマホ&タブレットへの対応準備

レスポンシブ対応の一番の目的はスマホやタブレットといったPC以外のデバイスでも最適な状態で閲覧できる様にする事だと思うのでこちらもそれぞれの環境に対応させる準備が必要です。

view-port指定

スマホサイト制作の際に最初に覚えるべきview-portの指定ですが、view-portのなんたるかはたくさん紹介しているサイトがありますのでここでは省略しますが、あらゆるディスプレイサイズに対応させる指定をさせるためにこちらではあえて下記の指定記述をさせていただきます。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

Landscape(横画面)用の設定

スマホとタブレットの仕様として縦画面と横画面の表示切替ができますが、テキストサイズを縦横同じ指定していると主に横画面にしたときにコンテンツ幅が調節されると必要以上に文字が小さく見えてしまうため、CSSのtext-size-adjustで文字サイズを自動調整させます。

body {
  -webkit-text-size-adjust: 100%;
}

各スマホOSの仕様対策

iOSの電話番号の自動検出

iOSでは一定数の連続した数字のテキストを自動的に電話番号と認識してそのテキストをタップすると通話機能が立ち上がってしまいますので、こちらの機能を切ります。

<meta name="format-detection" content="telephone=no" />

Retinaディスプレイの対応

Apple製品のRetinaディスプレイですが、PC用に2倍の解像度画像を使った物をそのままスマホでも指定しまってはページのロードにとんでもない負担をかけてしまうため、こちらのRetinajs.jsライブラリを使用します。

詳しい使用方法はここでは省きますが、以下の記述でPC用の高解像度の画像とスマホ用の要領を抑えた画像の切り替えが可能となります。

retina_image.jpg  /* 通常の画像用指定 */
retina_image@2x.jpg  /* Retinaディスプレイ用高解像度画像指定 */

各OSのリンク時のタップカラー

各OSのデバイスのリンク時のハイライトカラーはデフォルト設定ですが、こちらもこだわる場合は以下の指定で調節可能です。

a { -webkit-tap-highlight-color:rgba(245,78,150,0.3); }

デバイス毎のブレイクポイント

Media QueriesのCSSの切り替えとなる分岐点(ブレイクポイント)ですが、主に320, 480, 600, 768, 1024で区切られているケースが主流の様です。

主要と思われるMedia Queriesの指定CSS一覧を作成しましたので参考までにどうぞ。↓

『スマホ・タブレット別にmedia queryのCSS一覧作ってやんよ!!!』

しかし国内サイトではまだPC→スマホの2パターンの切り替えレイアウトが多く見られますが、タブレットユーザーは今後も爆発的に増えていくと思われますので、より多くのユーザー環境に応えるためにタブレットサイズ対応は、宿敵IEブラウザ・AndroidOS勢の”なんじゃこりゃエラー”に続く制作側の宿敵となりそうです。

ちなみにタブレットサイズのブレイクポイントはiPhone基準(768px)かAndroid基準(800px)かでも大きく分かれている様ですが、こちらはクライアントの要望なりアクセスユーザーの需要の多い方に合わせる方が良いと思います。

レスポンシブ化のまとめ

今更ながらレスポンシブについて色々調べて、今回改めて知った事もありましたので、ご覧の方にもなにかしらの参考になればと思います。

すべてのユーザー環境に対応させるためのレスポンシブとはいえ、現状の市場のすべてのデバイスに完璧に対応させる事は不可能(とまではいかずとも現実的ではない)ですし、レスポンシブデザインで制作したサイトが最強という確証や実績がある訳でもないですし、とにかくレスポンシブデザインを制作する際には

  • レスポンシブのメリット・デメリットを把握し、作成するべきサイトがレスポンシブに適しているかを検証する!

  • 初期段階の入念な設計と制作過程での時予期せぬ問題に備えるための細かいテストの繰り返しが大事!!

  • 対応させるデバイスの選定とユーザー環境の割り切りは必要!あらゆる環境のユーザーに対応する事はできない!!!

以上の点を個人的な見解として今回は〆させていただきますm(_ _)m

トップへ