実践
第1回 スマホ環境の特徴

まずはスマートフォンの特徴を概観してみましょう。「スマートフォン」と一口にいっても、iOS、Androidなど複数のOSがあり、多くの機種があります。

2012年06月21日発行

目次

スマートフォンの特徴を知る

まずは、スマートフォンの特徴を概観してみましょう。「スマートフォン」と一口にいっても、iOS、Androidなど複数のOSがあり、多くの機種があります。

またデスクトップとは異なる環境を持っています。1つめは端末の画面が小さいこと。2つめは搭載されているブラウザのCSS3への対応度が高いこと。3つめは回線の通信速度がデスクトップ環境に比べ大変遅いことです。

スマートフォン環境の特徴
  • 画面がデスクトップに比べ小さい
  • 標準ブラウザのCSS3への対応度が高い
  • 回線の通信速度がデスクトップに比べ遅い

HTMLやCSSをブラウザで表示する仕組みは同じですので、これまでのデスクトップ用のサイト制作ノウハウを流用できる一方で、上記のようにデスクトップとスマートフォンには大きな違いがあります。そのため、スマートフォンに特化した知識や技術が必要になってくるのです。

端末のさまざまな解像度

物理的な解像度も端末によってさまざまです。代表的なものでも4種類ほどあります。

解像度(px)320×480480×800480×854640×960

これだけ解像度にバリエーションがあると、どの解像度を基準にデザインするのか迷ってしまいそうです。幅320pxを基準にデザインをしてしまうと、幅640pxの端末では、幅が1/2の状態で表示されてしまうのでは?などと思いがちです。

ピクセルレートという仕組み

通常、画面の大きさが同じであれば、解像度が高くなればなるほど、1ピクセルの大きさは小さくなっていきます。例えば、幅30px、高さ30pxの画像があったとします。1ピクセルを900個使って描画するのですが、高解像度と低解像度ではピクセルの大きさが違うため、高解像度の画面上ではより小さく、低解像度の画面では、より大きく表示されます。

デスクトップのモニタでは解像度を変更できますので、上記の関係を擬似的に体験することができるでしょう。解像度を低く設定すると、ウインドウやアイコンは大きく表示され、ぼんやりとした画像になります。逆に解像度を高くすると、より小さくなり、文字や画像のエッジがくっきりとしてきます。

低解像度
800×600にモニタを設定。ダイアログやアイコン類が高解像度に比較すると大きく表示される。
高解像度
1280×800にモニタを設定。ダイアログやアイコン類が低解像度に比較すると小さく表示される。

もしスマートフォンが、上記のようにデスクトップと同様の仕組みであれば、1つのページが表示される大きさは、端末の解像度によってまちまちになってしまいます。そのままでは、同じような見栄えをキープすることは不可能です。

このような問題を回避するために、スマートフォン端末のWebKit系ブラウザ(iOSのSafari、Androidの標準ブラウザなど)は、devicePixelRatioというプロパティに対応しています。

devicePixelRatioとは、1ピクセルの描画を、デバイス上の何ピクセルで行うかを決定する値です。

物理的ピクセル数320px480px640px
devicePixelRatioの値11.52
表示ピクセル数320320320

例えば上記のようなdevicePixelRatioの値が設定されている場合、4px平方の画像がどのように描画されるか考えてみます。

devicePixelRatioが1の場合は、4pxはピクセル4つ分を使って描画されます(4×4=16ピクセル)。2の場合は、4pxはピクセル8つを使って描画されます(8×8=64ピクセル)。1.5の場合はピクセル6つが使われます(6×6=36ピクセル)。

4px描画時に使われるピクセル数
devicePixelRatioによって4pxの描画に使うピクセルの数が変わってくる。

このようにdevicePixelRatioがあることによって、どの端末でも4px平方の画像は、人の目にはほぼ同じ大きさに見えるようになっているのです。ただ、すべてが同じというわけではありません。同じ大きさに見えたとしても、解像度が高い画面の方が、より多くのピクセルを使って描画されていますので、精細な表現が可能になります。

ほとんどのスマートフォン端末に標準搭載されているWebKit系のブラウザでは、JavaScriptでwindow.devicePixelRatioとすると、その端末に設定されている値を取得することができます。

var ratio = window.devicePixelRatio;
document.write("<p>このデバイスのdevicePixelRatioは"+ ratio + "です。</p>");
スマートフォン端末に設定されているdevicePixelRatioを表示
JavaScriptのwindow.devicePixelRatioでWebKit系のブラウザに設定されている値が取得できる。iPhoneのSafariやAndroidの標準ブラウザで読み込むと数値が変化する。対応していないブラウザはundefinedとなる。

320ピクセルを基準にデザイン

以上の理由から、デザインは基本的には320pxを基準に制作すればよいということがわかります。Retinaディスプレイなど高解像度なモニタに対応するために、320pxを基準に、データはその2倍の640pxで作成する手法もありますが、基準となっているのは320pxです。

またデスクトップとの大きな違いとして、1ピクセル未満(0.5ピクセル)の描画も行われる場合もあることに留意しておきましょう。

スマートフォン基礎知識
  • デザインは320pxを基準に
  • 1ピクセル未満の描画も可能

CSS3の対応度が高い

次に、スマートフォンに搭載されているブラウザの特徴「CSS3対応度が高い」という点を考えてみます。

スマートフォンの代表的なブラウザといえば、iOS用Safari、Androidブラウザがありますが、そのほかにもFirefox、Opera、Dolphin Browserなどのブラウザがあります。MicrosoftのWindows Phone 7には、Internet Explorer 9ベースの専用ブラウザが搭載されています。

これらのブラウザをざっと分類すると、WebKitと呼ばれるレンダリングエンジンを搭載したiOS用Safari、Androidブラウザ、Dolphinブラウザがひとつのメイングループです。それ以外にFirefox、Opera、Internet Explorerがあると考えておくといいでしょう。

どのようなCSSに対応しているのか

具体的には以下のようなCSS3プロパティに対応しています(2012年6月上旬現在)。

rgba()

CSS Color Module Level 3(2011年6月7日付け勧告)

http://www.w3.org/TR/css3-color/

text-shadow

CSS Text Level 3(2012年1月19日付け草案)

http://www.w3.org/TR/css3-text/

background-image、backgrond-size、border-radius、box-shadow

CSS Backgrounds and Borders Module Level 3(2012年4月17日付け勧告候補)

http://www.w3.org/TR/css3-background/

display:flexbox

CSS Flexible Box Layout Module(2012年6月12日付け草案)

http://www.w3.org/TR/css3-flexbox/

linear-gradient

CSS Image Values and Replaced Content Module Level 3(2012年4月17日付け勧告候補)

http://www.w3.org/TR/css3-images/

これらはW3Cで策定、もしくは策定中の仕様に沿ったプロパティですが、このままではWebKit系のブラウザで使用することができません。

というのも、これらのプロパティは「先行実装」という形で、ブラウザに機能が搭載されています。CodeGridでも何度か触れていますが、実験的な先行実装(独自拡張)を行う場合は、原則、ベンダープリフィックスと呼ばれる接頭辞をつける必要があります。

ここで紹介するプロパティのうちいくつかは、以下のようなベンダープリフィックスをつけて記述します。

W3Cの仕様書border-radiusbox-shadowdisplay:flexboxlinear-gradient
ベンダープリフィックスあり-webkit-border-radius*-webkit-box-shadowdisplay:-webkit-box-webkit-gradient
*注:border-radiusのベンタープリフィックス

border-radiusに関しては、Google Chromeではベンダープリフィックスなしで使うことができますが、iOS用Safariではバージョンによって、必要な場合があります。

さらにプロパティによっては、W3Cの記述に単純に、ベンダープリフィックスをつけるだけでなく、プロパティの値の指定方法が異なっている場合があります。これは独自実装であるがゆえの不整合なのですが、一度、ブラウザに実装されてしまえば、例えそれがW3C仕様書と食い違っていたとしても、長期間利用が可能になります。これについては後述します。

スマートフォン環境だから使えるCSS3

CSS3はデスクトップ環境でも実用に耐えうるものばかりですが、デスクトップではCSS3に対応していない、あるいはChromeやSafariに比較すると、対応度が低いInternet Explorerが大きなシェアを占めています。それに対する手当てなしには、すんなりと導入はできません。

現在の状況では、CSS3など新技術をいち早く取り入れられる環境としては、やはりスマートフォン環境に分があります。

次回、これまでピクセルグリッドが実際のスマートフォンサイトを実装する際に、必要があれば使うことの多い、比較的安全なCSS3のプロパティや値を紹介します。

回線速度が遅い

もうひとつ頭に入れておかなければならないのが、回線速度のことです。スマートフォンの回線速度は、デスクトップ環境に比べ、かなり貧弱です。回線の込み具合に影響されますが、docomo Xiを除けば1Mbps程度の速度です。1Mbps程度というのは、現在のデスクトップ環境の10分の1以下の速度です。ADSLなどの2000年代初頭の通信環境を思い浮かべていただくといいでしょう。

あまりにも、容量が大きいページを作ると、表示も遅くなり、それだけでユーザーにストレスを与える結果になります。いかに少ない容量で、必要な情報とそれにふさわしい表現ができるのかをじっくり吟味する必要があります。

以上2点がスマートフォン特有の事情です。次回はこのうち「CSS3への対応度が高い」という点を取り上げて詳しく解説します。

小山田 晃浩
小山田 晃浩
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2015年まで5連続でMicrosoft MVP for IEを受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。

外村 奈津子
外村 奈津子
エディター

情報出版社に在籍中、Mac雑誌、中高年向けフリーペーパー、コラムサイト運営、健康食雑誌、グラフィック・Web技術書籍編集、IT系ニュースサイトの編集記者を経験。その後フリーランスのエディター/ライターとして独立。2011年4月より株式会社ピクセルグリッドへ入社。ピクセルグリッドが提供するフロントエンド技術情報を提供するサービス「CodeGrid」の編集を担当している。行政書士試験合格(未登録)。