スマートフォン端末やブラウザの仕様による注意点

スマートフォン端末そのものの仕様や、スマートフォン用ブラウザの仕様による注意点を下記にご紹介しておきます。PC版サイトとは少し勝手が異なりますので、留意しておきましょう。

狭い横幅320pxでも表示できるように
横320×縦480解像度の端末

小型端末は、横320×縦480程度
※高精細画面の場合、「画面の解像度」と「ブラウザ上で表示される縦横サイズ」は一致しない場合がある点に注意。

スマートフォン端末も、世代を経るごとに画面サイズの大きな製品が出てきました。しかし、横幅320px程度で表示される端末も多くあります(※1)。ブラウザの描画領域の幅が320pxしかなくても問題なく閲覧できるように作成しておきましょう。

※1:初代iPhone~iPhone5まで、ブラウザの横幅はすべて320pxです(※2)。モバイル端末の画面サイズ(解像度)のシェアについては、記事「レスポンシブCSSで使うブレイクポイントの決め方」の2ページ目もご参照下さい。

※2:液晶画面の解像度が横幅640pxでも、ブラウザが表示する横幅は320pxになります。詳しくは、記事「CSSの1pxは 液晶画面1ドットで表示されるとは限らない」等をご参照下さい。


 
横幅を固定しない (=リキッドレイアウトで作成する)
縦置き・横置きで横幅は変わる

縦置き・横置きで横幅は変わる

横幅320pxの端末が多いとはいえ、横幅を320px固定にしてデザインすれば良いわけではありません。横320×縦480の端末を横向きに置けば横480×縦320になりますし、もっと広い横幅のスマートフォンも多数あります。どんな横幅でも対応できるよう、リキッドレイアウト(横幅のサイズを固定しないレイアウト)で作成しておきましょう。


 
スクロールバーの表示を前提にしない
スクロールバー表示の有無

スクロールバー表示の有無
※古いバージョンでは常時表示されていたが、最近ではスクロールする瞬間にしか表示されない。

PC用のブラウザでは、スクロールが必要な場面ではスクロールバーが必ず表示されると考えて問題ありません。しかし、モバイル端末では、スクロールバーは(常時は)表示されないと考えておきましょう。

かなり古いAndroidブラウザでは、スクロールバーが常時表示されていました。しかし、最近のバージョンでは、スクロールバーは(普段は)表示されません。スクロールしている瞬間にだけ、ページ上に重なって(半透明で)表示されます。

そのため、ボックスの内部にスクロール領域を設けるデザイン(入力フォームやインラインフレームのほか、CSSで実現する方法もあります)を使うと、どこに情報が隠れているのかが分かりにくくなってしまいます。

したがって、スマートフォン用ウェブページでは、スクロールバーが見えなくても問題なく閲覧・操作できるデザインにしておくのが望ましいでしょう。

Flashは使えない
iPhone等で使われているiOS用ブラウザは、当初からFlashをサポートしていません。また、Android OS用のブラウザでは、昔は(ユーザが自らAndroid版「FlashPlayer」をインストールするか、または標準でインストールされている端末を使っていれば)Flashを表示できました。しかし、現在では標準でもインストールされていませんし、新規の配布も行われていません。スマートフォン用ウェブページ内では、Flashは使えないと考えておきましょう。


 
載せただけで装飾を変更するデザイン(hover)に注意
マウスを載せると現れるサブメニュー

マウスを載せると現れるサブメニュー

PC用ウェブページでは、マウスを載せたときにデザインを変更したり、サブメニューを表示したりするデザインがよく使われます。CSSのhover疑似クラスを使うだけなので実現も簡単です。

しかし、指による「タップ」で操作するスマートフォンでは、このデザインは表示できないと考えた方が良いでしょう。

PC用と共用のウェブページならそのデザインを用意していても構いませんが、見えなくても問題ないような作りにしておく必要があります。例えば、マウスポインタを上に載せてサブメニューが表示されるデザインなら、タップ(クリック)してもサブメニューが表示されるようにしたり、サブメニューと同じ内容を別の場所にも用意するなどの対策が必要です。

自動縮小機能の制御
Viewportの指定がないページは自動で縮小表示される

Viewportの指定がないページは自動で縮小表示される

スマートフォン向けの対策が施されていないウェブサイトを、スマートフォン用のブラウザで閲覧すると、右図のように全体が縮小されて表示されます。これは、「ブラウザの横幅がもっと広い」と仮定してレンダリングした結果を、スマートフォンの実際の横幅に合わせて縮小しているからです。

この縮小を防いだり、レンダリングする仮の横幅を指定したりするには、meta要素を使って「viewport」という値を指定の書式で記述します。詳しくは記事「スマートフォン用ページが自動縮小されないようにする」をご参照下さい。

さて、次に、スマートフォン用ウェブサイトの作り方や表示確認方法についてを見ていきましょう。