スマートフォン 01
スマートフォンデザインの基本1 - デザインのルール

最近のスマートフォンの普及にともない、Web制作の現場ではスマートフォンサイトの制作スキル習得が急務になってきた。本記事ではPCサイトとの違いを踏まえながらスマートフォンサイトのデザインのポイントを解説しよう。

解説／西畑一馬（株式会社まぼろし）

BROWSER iOS Andoroid

スマートフォンサイトのデザインを考えるうえでは、PCサイトと違う点をしっかり理解しておくことが重要だ。たとえば、スマートフォンはPCと比べて画面サイズが小さく、3G回線下では回線が細いためページの読み込みに時間がかかる。CPUも貧弱なため、JavaScriptなどの処理速度も劣ってしまう。

スマートフォンの画面サイズ

スマートフォンの画面サイズで注意したいのは、PCと違い、ディスプレイの実解像度では描画されない点だ。Viewport（「02 コーディングのポイント」の項目で詳しく解説する）のwidthにdevice-widthを指定すると、ディスプレイの実解像度ではなく、devicePixelRatioを元に算出されるCSS解像度でサイトが描画される。

たとえばiPhone4／4Sのディスプレイの実解像度は640×960pxだが、Webサイトを描画するCSS解像度は320×480pxになる【01】。CSS 解像度は実解像度をdevicePixelRatioで割った値だ。devicePixelRatioはデバイスによって異なり、iPhone4／4Sでは2に設定されているため、CSS解像度は640px÷2＝320pxとなる。Android端末ではdevicePixelRatioは1.5や2に設定されていることが多く、CSS解像度は320×533pxや320×569px、360×640pxといった画面サイズが主流だ。ファーストビューがこれらのサイズであることを意識してデザインを考えよう【02】。なお、各デバイスのdevicePixelRatioに関しては筆者のブログ【03】を参照してほしい。

これらの画面の解像度の違いに加え、スマートフォンではデバイスを横向きにして表示するランドスケープモードが搭載されている。たとえばiPhoneでは横向きにした際に、CSS解像度が480×320pxに変化する【04】。このように多様な画面サイズへの対応が必要になるスマートフォンサイトでは、もっともよく見られる横幅である320pxを基準にデザインの最適化を行った上で、横幅が360pxや480px、640pxでも表示が崩れないよう、コンテンツの横幅に合わせてデザインが可変するリキッドデザインで行うのがよいだろう。

【01】iPhoneのCSS解像度

【02】Android のCSS 解像度。ほかにも320px×533px や 320px×569pxなど多様なサイズが存在する。

【03】筆者のブログ（http://blog.webcreativepark.net/2011/01/25-173502.html）では様々な端末のdevicePixelRatioを紹介している。

【04】横向きにした際に画面の解像度が変化する。

画像を鮮明に見せる

スマートフォンサイトを横幅320pxでそのままつくった際に、iPhone4／4Sのような高精細なディスプレイをもつ端末で閲覧すると画像が粗く見えてしまう。このようなdevicePixelRatioが高いデバイス向けの画像最適化テクニックがあり、iPhone のディスプレイ名にちなんで"Retina Display対応"と呼ばれることが多い。CSSの描画はCSS解像度で行われるが、画像はディスプレイの実解像度をもとに描画されるという特徴を利用して、高解像度の画像を埋め込むことで画像を鮮明に見せるテクニックだ【05】。

Retina Display対応はいくつかの手法があるが、最もポピュラーなのはimg要素のheight属性とwidth属性を利用する方法だろう。実際に表示したいサイズの倍のピクセル数の画像を用意して、サイト内に埋め込む際に実際に表示するサイズ（画像の半分のサイズ）のheight属性とwidth属性を指定する【06】。こうすることでページ内の画像を高解像度で表示できる。

書き出しを想定した場合、デザインカンプの段階では320px の倍のサイズの640pxで作成しておけば、コーディングの手間を減らすことができるだろう。

【05】通常に表示（上）したより、Retina Display対応した表示（下）のほうが鮮明に見える。

【06】img要素にwidthとheightを指定してRetina Display対応を行う。

回線速度と画像サイズのバランス

スマートフォンサイトの制作では、3G回線で閲覧しているユーザーのインターネット回線が細いこともしっかりと心にとどめておかなくてはならない。サイトの軽量化に最も効果的なのが、利用する画像の数を減らしサイズを小さくすることだ。

スマートフォンサイトではCSS3が利用できるため、デザインカンプの段階からCSS3で再現しやすい表現も視野に入れながらデザインを考えるとよいだろう。もちろん、画像を使わないことを重視しすぎてデザインのクオリティが落ちるのは本末転倒なので、バランスが大切だ。

スマートフォンサイトでは、前述したRetina Display対応と3G回線対応という、相反する性質をもつ対応を行う必要がある。たとえば、ロゴなどの重要な画像はRetina Display対応を行い、それ以外の画像は表示サイズどおりのピクセル数にしておくといった対応もあるだろう。サイトの特徴やユーザーの利用形態などを考慮しながら、見栄えの良さと軽さを両立させていこう。

タッチインターフェイス

スマートフォンサイトとPCサイトの最大の違いは、マウスではなく、指で操作するという点だ。そのため、指先よりも小さな箇所をタップ（画面をタッチすること。マウス操作でのクリックにあたる）するのが難しいので、リンク領域は大きく取っておく必要がある。また、Androidではユーザーがタップしたと考えるポイントより、少し下の位置がタップされる傾向にある（正確には、iPhoneが実際にタッチされたポイントをユーザーが押したと感じているポイントへと補正している【07】）。この点を踏まえても、iPhone、Androidの両方に対応するサイトはリンク領域を大きく確保しておく必要があるだろう。

AppleはiOSアプリを作成する上でのガイドライン「アップルヒューマンインタフェースガイドライン」【08】上で、タップするターゲット領域の目安を"少なくとも44×44px"としているので、サイト制作でも参考にするとよいだろう。

リンク領域を大きくとろうとして生まれたひとつの例が、スマートフォン向けのナビゲーションだ【09】。見出しや画像、キャプションといったひと通りの情報をタップしやすいサイズのボックスで包んで、リンクのナビゲーションとして利用している。PCサイトのように青色の下線でリンクを示すといった表現はあまり使われず、代わりにリンクの右側にリンクアローを設置してタップ領域であることを示すことが多い。

【07】iPhoneとAndroidではタッチされるポイントが異なる。

【08】

【09】MdNのスマートフォンサイト、押しやすい大きめのナビゲーションと右側のリンクアローはスマートフォン向けサイトの定石といっていいだろう。

スマートフォン専用サイトか、 PCとの共用サイトか

最初からスマートフォンに特化したサイトを制作する案件でない限り、サイトのコンテンツはおおむねPCサイトから展開することになる。PCサイトをスマートフォンに対応させる方法はいくつか存在するが、もっとも多いのはスマートフォン専用サイトを構築するケースだ【10】。

スマートフォン専用サイトでは、PCサイトとは別のデザインを用意し、専用のHTMLとCSSで構築を行う。専用のサイトを立ち上げるため、スマートフォンでは不要なコンテンツを削除したり、逆に必要なコンテンツを追加したりなどが容易な点が特長だ。

問題はPCとスマートフォンで別々にサイトを立ち上げなくてはいけないため、必然的に制作コストが増加する点と、同一コンテンツでもスマートフォンサイトとPCサイトでURLが変わってしまう点だ。TwitterやFacebookでURLがシェアされた場合、ユーザーがPCで見るかスマートフォンで見るかはわからないため、URLが異なるとユーザーに適切な表示を提供できない可能性もある。この問題は筆者が公開しているPc2Sp.js などのJavaScriptライブラリで対応可能だ【11】。

ただし、Googleは検索エンジンがまれにスマートフォンサイトとPCサイトの関連付けを適切に抽出できないことがあることから、次に紹介するレスポンシブ・ウェブデザインによるスマートフォン対応を推奨している。

【10】スマートフォン専用サイトを構築している例。PC用のサイト（上）とスマートフォン用のサイト（右）

【11】PC用のコンテンツとスマートフォン用のコンテンツを関連付けてデバイスにより転送処理を行うJavaScriptライブラリ。
http://blog.webcreativepark.net/2012/04/19-120731.html

レスポンシブ・ウェブデザイン

レスポンシブ・ウェブデザインは、現在注目されているスマートフォン対応の手法だ【12】。ブラウザの横幅によって読み込むCSSファイル、もしくは記述の一部を切り替えて、異なるデザインをユーザーに提供する。

たとえばスマートフォンではブラウザの横幅が320〜640pxで表示されることが多いので、640pxを起点（ブレークポイント）として、横幅が640px以下の場合はスマートフォン用のデザイン、641px以上の場合はPCやタブレット用のデザインを提供することで、スマートフォンに対応できる【13】。

複数のブレークポイントを設定して、スマートフォンの縦向き（ポートレート）、横向き（ランドスケープ）、タブレット、PCと、デバイスや状態に応じて提供するデザインを細かく変えることも可能だ。レスポンシブ・ウェブデザインではスマートフォン用のサイトもPC用のサイトも同一のHTML、URLで提供されるため、前述した専用サイトの問題は解決されているが、副産物として別の問題が生じてしまう場合もある。

それは、PCサイトとスマートフォン用のサイトのデザインやコンテンツの差異が大きくなるほど、スマートフォンには不要なPC用の大きな画像やJavaScriptなども読み込まざるを得ない点だ。レスポンシブ・ウェブデザインを採用する場合は、なるべくデザインの差異を発生させず、発生した場合はJavaScriptなども活用して差異を吸収する必要がある【14】。

【12】レスポンシブ・ウェブデザインを採用しているNHK STUDIO PARK（http://www.nhk.or.jp/studiopark）のサイト。PC用のサイト（左）とスマートフォン用のサイト（右）。

【13】メディアクエリーを用いて読み込むスタイルシートを切り替えている。ウィンドウサイズが480px以下の場合にはsp.cssを、481px以上の場合にはpc.cssを読み込み、メディアクエリーに対応していないIE9未満のブラウザではsp.cssを読み込んでいる。

【14】ブレークポイントにより読み込む画像を変更することが可能なJavaScript ライブラリ「Response JS」（http://responsejs.com/）。

そのほかのスマートフォンへの対応手法

スマートフォンへの対応には、ほかにもさまざまな手法が存在する。たとえばYahoo! JAPANはスマートフォンやタブレットの専用サイトを立ち上げた上で、さらに専用サイト内でレスポンシブ・ウェブデザインを採用することで、ポートレート表示／ランドスケープ表示でレイアウトを切り替えている【15】。

ほかにもJavaScriptやSSI、PHPでユーザーエージェントを判定し、スマートフォンからのアクセスの場合に異なるCSS を適用する方法をとる場合も多い【16】【17】【18】。

この方法はスタイルシートの読み込みだけでなく、ほかのHTML、たとえばimg要素やscript要素をデバイスごとに切り替えることもできる。

すべての手法にメリット・デメリットが存在し、現状ではベストプラクティスは存在しない。それぞれの手法の特性を理解し、コンテンツに合った手法を採用するとよいだろう。

【15】Yahoo! JAPAN（http://www.yahoo.co.jp）のPC用のサイト（左）とスマートフォン用のポートレートデザイン（中）とランドスケープデザイン（右）。

【16】JavaScriptでスマートフォンとPCのスタイルシートの読み込みを変更するスクリプト。

【17】SSIを利用しスマートフォンとPCのスタイルシートの読み込みを変更するコード。

【18】PHPを利用してスマートフォンとPCのスタイルシートの読み込みを変更するコード。

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。