マルチデバイス対応の基礎知識
01 デバイスの特性を理解する

総務省が2015年5月19日に発表した「平成26年情報通信メディアの利用時間と情報行動に関する調査報告書」によると、スマー卜フォンの利用率は全年代合わせて62.3%となっています。このうち20代は94.1%、30代は82.2%と、若年層で圧倒的多数を占める結果となっており、タブレッ卜の利用率も全年代平均で20%を超えています。
また2012年から2014年の3年間の推移を見ても、特にスマートフォンは毎年高い伸び率を示しており、これらのデバイスからWebサイトが閲覧される機会も今後ますます増えることは確実です。実際、ごく一般的な内容のWebサイトであっても、アクセス数のおよそ5割から6割はパソコン以外のデバイスから閲覧されるのが当たり前という状況になっているため、Webサイトのマルチデバイス対応はまさに「待ったなし」の状況にあると言えるでしょう。

機器の普及率と合わせてマルチデバイス対応を急ぐ必要がある理由のひとつに、Googlが2015年4月21日からスタートさせた「スマホ対応ラベル」の存在があります。これはGoogleがWebサイトのページ設計がモバイル端末に最適化されているかどうかを判断し、最適化されていると判断したWebサイトには検索結果に「スマホ対応」のラベルをつけるというものです。
「スマホ対応ラベル」の有無はPCからの検索順位には影響ありませんが、モバイルからの検索順位には大いに影響があります。モバイル端末の普及率を考えるとスマホ対応ラベルの有無による検索順位結果の変動は、特にビジネスサイトにおいて死活問題となりかねないため、対応が急がれる大きな要因となっています

Webサイトがモバイル端末に最適化されているかどうかをチェックするツールが「モバイルフレンドリーテスト」です。まずはここでモバイルフレンドリーと認識されるかどうかをチェックし、問題がある場合には何らかの対策を取ることが求められます。

最も大きな特徴は、タッチデバイスであるということでしょう。これはつまり「指で、直接画面を触って操作する」ということを意味しています。したがってマウスを使った細かい操作やキーボードからの高速入力ができるPCとは操作性そのものが大きく異ります。また、指で操作するごとに特化した「スワイプ」「フリック」「ピンチイン／ピンチアウト」といったPCにはない独自の操作インターフェースもあります。

スマー卜フォンやタブレッ卜端末は、近年高機能になってきたとはいえ、やはり全体としてみればPCより総じてスペックが劣る貧弱な端末であるということを忘れてはいけません。そのため、あまりにも処理に負荷がかかるようなコンテンツは避けなければなりません。

Webサイトが閲覧される環境もPCとは大きく異なります。図はPCとモバイル端末のWeb閲覧環境を比較した表ですが、PCでの閲覧環境よりも、モバイル端末を使ったWeb閲覧環境の方が制約が大きいということが分かります。

モバイル端末向けのWebサイトを制作する際、特に注意すべきことは「指で、操作する」という点です。指での操作はマウスと違ってタッチする領域が大きくなるため、細かい文字のテキストリンクが並ぶような、小さく隣接するリンク領域を作らないようにすることが重要です。

スマー卜フォン・タブレッ卜には実に多種多様な機種が存在しています。特にAndroid端末ではアスペクト比の異なる様々な機種が発売されているため、縦向き（Portrait）横向き（Landscape）も含めると少しずつサイズの異なる画面サイズが無数に存在する状態となります。
このような状況では、広い画面を持つことが多いPC向けサイトのように、平均的なモニターサイズに合わせてコンテンツ幅を固定サイズにすることは現実的ではありません。

そこで、モバイル端末向けにWebサイトを制作する場合には、「横幅可変」を前提としたデザインで作るのが基本です。
横幅可変とする場合、「リキッドレイアウト（配置される画像のサイズは固定でコンテナサイズのみ可変）」と「レスポンシブレイアウト（配置される画像サイズやカラム幅も同一比率を保ちながら可変）」の2パターンがありますが、どちらか一方でなければならない理由はありませんので、一画面に収まる情報量とデザインのバランスを見ながら適宜組み合わせてデザインすると良いでしよう。

初めてモバイル向けのユーザーインターフェース（UI）を設計するのであれば、Appleの「UI Design Do's and Don'ts」が参考になります。英語サイトですが、簡潔な文言と分かりやすい写真で「モバイルUIデザインでやっていいこと、悪いこと」を10個厳選して紹介してくれています。特に

• デバイスの画面サイズに合わせたレイアウト
• 最低44×44px以上のリンク領域
• 最低11point以上の文字サイズ

あたりはモバイル向けのUIデザインを行う上での最低限の常識となっています。また、これ以外の項目もいずれも大事なことばかりですので、是非一度目を通しておくことをお勧めします。

viewportとは、モバイル端末においてデバイスのスクリーンを何ピクセル×何ピクセルとして扱うかを設定するもので、いわばモバイル端末の「仮想ウィンドウサイズ」とも言えるものになります。通常のPC向けWebサイトをスマー卜フォン等で閲覧すると、多くの場合そのまま縮小されて全体が表示されると思いますが、これはデフォルトのviewportのサイズが多くの場合980pxとなっているためです。

viewportが980pxの状態でPCサイトを閲覧した場合、本来320～360px程度しかないスクリーンの中に980px分の情報を縮小して詰め込む形となりますので、文字などは小さくなりすぎて拡大しないと読めません。また、拡大すれば当然画面内に情報が収まらなくなりますので、他の部分を見るには画面を縦横に移動させる必要もあります。これでは閲覧する際にストレスが溜まってしまいます。
そこで、モバイル向けのWebサイトを制作する際にはモバイルの画面サイズに最適化されたレイアウトにした上で、それをデバイス本来の画面サイズに合わせたviewportで表示する必要があります。
viewportの値を変更するには、meta要素を使います。HTMLのhead要素の中で以下のように記述すると、それぞれのデバイス本来のスクリーンサイズに合わせて自動的にviewportのサイズを調整してくれるようになります。

画面サイズと解像度の関係は、PCとモバイルでは少し様子が異なります。PCでは基本的に解像度が高くなれば画面サイズもそれに比例して大きくなりますが、モバイル端末の場合は解像度の大きさと画面サイズが比例しません。例えばiPhone3までとiPhone4/5は物理的な端末の画面サイズは同じです。しかし、解像度を比較するとiPhone3までが320×480なのに対して、iPhone4/5は640×960です。解像度が2倍になっているのに、画面サイズは変わりません。なぜでしょうか？
それはスクリーンのピクセル密度が2倍になっているからです。ピクセル密度とは1インチあたりのピクセル数のことで、dpi（dot per inch）やppi（pixel per inchと呼ばれています。ピクセル密度が高いほど、面積あたりの解像度が高くなります。ちなみにAppleではiPhone4以降で採用されたピクセル密度が通常の2倍以上あるディスプレイのことを「Retinaディスプレイ」と呼んでいます。Androidではごのような呼び名はありませんが、同様にピクセル密度の高い端末が存在しています。

端末の解像度ピクセル密度が高くなると、同じサイズの画面の中により広い表示領域を確保できます。しかし単純に1px＝液晶の1dotとして表示させてしまうと困ったことがおきます。例えば320ｘ320pxの要素を表示させた場合、iPhone3までは画面幅いっぱいに表示されたのに、iPhone4以降では画面の半分にしか表示されないことになり、端末の解像度ピクセル密度によって見え方がバラバラになってしまいます。このような事態を避けるために考えられたのが「デバイスピクセル比（device-pixel-ratio）」という概念です。

まずWebデザインで扱うピクセルを「CSSピクセル（csspx）」液晶上の物理的なdot＝ピクセルを「デバイスピクセル（dpx） 」として区別して考えてください。Retinaディスプレイのようにピクセル密度が2倍となったスクリーンでは、1csspx=2dpxとして表します。1つのcssピクセルを何ピクセルのデバイスピクセルで表示するかの比率、これがデバイスピクセル比です。
多くのPCモニタや初期のスマー卜フォンでは「cssピクセル＝デバイスピクセル」なのでデバイスピクセル比のことを気にする必要はありませんが、いまやデバイスピクセル比が1 、1 .5、2、3といった様々な種類のデバイスが存在するため、マルチデバイス対応のWebサイトを制作する時にはこの点にも注意が必要となります。

デバイスピクセル比が異なる複数のデバイス向けにWebサイトを制作する場合、問題となるのはビットマップ画像の扱いです。前述した通り、デバイスピクセル比が2の端末では、1csspx=2dpxとして横2倍に拡大される形となります。 その際、jpegやpngのようなビットマップ形式の画像データは、拡大されるとぼやけて画質が悪くなってしまうのです。これは、Photoshopなどで100×100pxの画像を無理矢理200×200pxに解像度変更した場合に起ごる現象と同じものですので、経験のある方も多いと思います。
つまり、PCサイトを作るときのように表示したい原寸サイズの画像を用意していたのでは、Retinaディスプレイなどでは画像がぼやけてしまい、画面のクオリティが下がってしまうのです。

この問題を解決するには、Retina環境では「表示したいcssピクセルの2倍サイズの画像を用意し、1/2に縮小して表示する」という対策を取ることになります。Webサイトで使用する画像はimg画像と背景画像の2種類がありますが、img画像の場合はwidth / heightで、背景画像の場合はbackground-sizeプロパティを使ってそれぞれ1/2サイズに縮小表示させます。
また、レスポンシブウェブデザインのように画像自体が固定サイズではなく伸縮するような場合は、数値で1/2 サイズに固定することはできませんので、2倍サイズの画像を用意しておき、親要素のサイズに合わせて自動縮小されるようにしておくことで対応します。

このようにマルチデバイス対応を考える場合、どうしてもデバイスピクセル比が2以上の端末に対して画像をどのように見せるかという問題がつきまといます。この問題の難しいところは、デバイスピクセル比の大きい端末に合わせると、そうでない端末にとっては無駄に大きな画像データを読み込まなければならなくなる、という点にあります。

理想的なのは、画面サイズや解像度に合わせて複数サイズの画像を用意しておき、ブラウザ側が自動的に自らの環境に適したものだけを選択的に読み込んで表示してくれることです。これができれば、それぞれの環境に適したサイズの画像のみを1枚だけ読みこめば良いので、データ容量の無駄は少なくなります。
このようなしくみで表示される画像のことを「レスポンシブイメージ」と呼びます。レスポンシブイメージの仕組みは現在HTML・CSSで仕様を固めている最中で、既に一部の環境では利用が可能となっているものもあります。従って、Retina対応する環境をこれら最新環境のみとすることができるのであれば、新しいレスポンシブイメージの仕組みを使って対応することが可能です。
しかし、レスポンシブイメージに対応していない環境でも適切にRetina対応したいとなると、別の方法を検討する必要が出てきます。以下がその対策方法です。

①背景画像の場合

背景画像を解像度によって差し替える際には、CSS3のメディアクエリによる分岐を利用します。

②img画像の場合

HTML上に埋め込まれたimg画像を動的に差し替えることは、現状のHTMLやCSSでは不可能ですので、解像度によって画像を差替えたければ何らかのプログラム言語を利用することになります。このうち最も有名なものは「Retina.js」です。このスクリプトは、「元画像のファイル名＠2x.png 」のように拡張子の前に「＠2x」という文字列をつけて元画像と同じフォルダに2倍の画像を格納しておけば、あとはスクリプトファイルを読み込むだけで自動的にRetina環境だった場合に＠2xの方に画像を差替えて表示してくれます。

●Retina.js：http://imulus.github.io/retinajs/

このようにCSS3メディアクエリやJavaScriptを使って使用する画像を使い分けることはできるのですが、ここにも問題があります。メディアクエリの場合もRetina.jsを使った場合も、まず度等倍画像を読み込み、その後2倍画像に差し替えるという手順を踏むため、Retina環境において等倍と2倍の2種類の画像が両方ともダウンロードされてしまうという問題が生じています。つまり見た目の美しさと表示パフォーマンスがトレードオフの関係になってしまっており、美しさを追求すればするほどデータ転送量が肥大化し、表示パフォーマンスが落ちていくというジレンマに陥ってしまう恐れがあるのです。
この問題はレスポンシブイメージがきちんと使えるようになるまでは技術的に回避が困難であるため、クオリティと表示パフォーマンスを天秤にかけ、ある程度何かを犠牲にして妥協する必要があるのが現状です。

表示パフォーマンスを良くするためには、画像を使用する箇所を減らすことと、画像のデータサイズ・転送量を小さくすることの2点が基本的な対策となります。ただしそれによってクオリティが著しく低下するような ことがあっては本末転倒なので、ある程度クオリティを保ちつつ、最小の転送データサイズで済むようなバランスを考えて対策を取ることが重要となってきます。

①ビットマップ画像を減らす

マルチデバイス対応のサイトを制作する場合、まず挙げられることは「極力ビットマップ画像を使わないようにデザインする」ということです。もちろん必要な写真データ等は使えば良いのですが、例えば

• CSSで描画可能なオブジェクトはCSSに任せる
• 特殊な書休はWebフォントを利用する
• 単色アイコンはアイコンフォントを利用する

といったように、ビットマップ画像以外の選択肢がある場合には基本的にそちらを選ぶようにすれば、Retina対応しなければならない箇所を減らすことができます。

• Google Fonts
• Icon Moon

②画像データサイズを最適化

Photoshop等から書き出されただけの画像データには、表示には関係のないメタデータ等が含まれています。専用の画像最適化ツールを使えば、クオリティを下げることなくデータサイズを最適化することも可能です。どうしても使わなければならない画像については最適化しておきましょう。

• ImageOptim
• lmageAlpha
• PNGmicro
• JPEGmicro

③2倍画像のみ用意する

スマートフォン専用サイトの場合、既にシェア的にはデバイスピクセル比が2以上の端末の方が多い状況のため、全ての画像を2倍サイズのみとすることで、等倍／2倍を差し替えるよりも結果的に多くの環境ではデータ転送量を減らすことができます。

④2倍画像を用意しない

レスポンシブ・ウェブデザインの場合は画面の大きいデスクトップ向けの画像素材がほとんどとなります。レスポンシブの場合は画面サイズが小さくなるのに合わせて画像も縮小表示されるため、スマートフォン環境であれば特に差替えなくても写真のクオリティは保てるケースが多くなります。このような伸縮前提の画像については2倍画像を用意しないようにすることで、無駄な読み込みを抑えることができます。

画面サイズやデバイスピクセル比などの環境に応じて使用する画像を選択的に表示できる新しい画像のことをレスポンシブ・イメージといい、マルチデバイス対応する場合の画像問題を解決すべく、現在HTML・CSS両面から仕様策定が進んでいるところです。現状では各ブラウザの実装状況の足並みが揃わないのでまだ限られた環境でしか使うことはできないのですが、将来的にはこれらを活用することで最適な画像選択ができるようになる予定です。

①srcset属性

img画像として表示させる画像ソースを複数用意しておき、ブラウザが環境に合わせて自動的に適切なサイズの画像を選択してくれる新しい属性です。画面サイズ、画面解像度、またはそれらの組み合わせ条件に応じて表示する画像ソースを切り替えることができます。画像ソースには基本的に同じ画像のサイズ違いを用意します。

②picture要素

picture要素の子要素としてsource要素・img要素を用意し、画面サイズ、画面解像度などの条件に応じて表示する画像を出し分けるための新しい要素です。source要素には環境ごとの異なる画像を、img要素にはデフォル卜表示用の画像を記述します。

③image-set( )

image-set( )は解像度の異なる複数の背景画像を出し分けるためのbackground-imageの新しい値です。