HTML5+CSS3 |
Smartphone編
|
Lesson 2 | スマートフォンサイトの 制作をはじめる前に |
||||
制作・文 | 山田 敬美(ネイバージャパン株式会社) |
スマートフォンサイトの制作では、いくつか注意しておきたいことがある。制作に関わる人すべてがこれらを共通認識とし、必要なことは事前に取り決めておくことで、プロジェクトを円滑に進められるだろう。 |
スマートフォンサイトの
メリット・デメリット
また、PC用サイトは画像やファイルのサイズが大きいため、3G回線では表示するのに時間がかかってしまう。
スマートフォン向けにサイトを最適化すると、このような不便さを解消できる。
ただし、スマートフォンに最適化することで逆に不便になることもある。
画面サイズが小さいため、PCサイトと比べて情報量は減ってしまう。PCサイトの操作に慣れている人にとっては、スマートフォンサイトのUIをまた学習し直さなければならない。
そのため、スマートフォンに最適化する場合でも、PC サイトへのリンクもつけて、ユーザーがどちらで見るかを選択できるようにしておくとよいだろう【1】【2】。
【1】AmazonのiPhoneサイト。左上のPCサイトへのボタンから、通常のPC向けサイトを表示できる
【2】情報量はPCサイトの方が格段に多いが、文字は拡大しないと読めない。ど ちらで閲覧するかはユーザーに選択させたい
どのようなサイトを
最適化すべきか?
ショッピングサイトが最適化されてい れば、カートに入れるボタンが押しやすくなり、購入ステップのたびに画面を拡大する手間もなくなり、売上アップにつながるかもしれない。
また、別の使い方としてネイティブアプリケーションにHTMLを組み込むこともある。ネイティブアプリケーションはWebViewという機能を使って、アプリ内にHTMLのページを表示できる。
更新性のある部分のみにWebView を使えば、HTMLがわかる人であれば誰でも アプリ内の更新作業ができるようになる。
既Webサイトをスマート
フォン向けに最適化する
一つは、スマートフォンサイト専用に HTMLを分けて制作する方法で、もう一 つは、PCサイトのHTMLをそのまま使っ て、CSSだけで最適化する方法だ。
どちらがよいかは一長一短なので、サイ トの特性や想定工数によって判断しよう【3】
【3】スマートフォン最適化の方法とメリット・デメリット
デフォルトブラウザの比較
まったく別物というほどではないが、ブラウザの仕様はそれぞれ異なるので注意が必要だ【4】。
【4】iPhoneとAndroidのブラウザの比較
各OSのバージョンと
対応すべき範囲
一方Androidの場合は、日本で発売されているほとんどの機種はAndroid 1.6 以降のため、1.5以下はまず対象外としても問題ない※01。
一般的にはAndroid 1.6 以降を推奨環境としているサイトが多いが、最近ではAndroid 2.1以降のみを対応としているサイトもある【6】【7】※02。
どこまでを対象とするかは、サイトの特性や予算によって判断が必要だ。
※01
HT-03Aはデフォルトでは1.5だが、1.6にバージョンアップ可能。
※02
GREEでは、Android 2.1以降しか対応していない。
https://help.gree.jp/app/answers/detail/a_id/3104/~/スマートフォン版greeの対象機種を教えてください。
【5】iOSのバージョン別シェア
【6】Androidのバージョン別シェア
http://insights.chitika.com/2011/61-of-ipads-already-running-ios-4-january-ios-and-android-os-breakdown/
【7】Androidのバージョンの推移
http://developer.android.com/resources/dashboard/platform-versions.html
スマートフォンサイトのデバッグ
はじめに、PCのSafariでおおまかな確認をする。PC のSafari では、ユーザーエージェントを簡単に切り替えられる※03。
Mobile Safariを選択すれば、iPhone だ と偽ってスマートフォンサイトを表示できる。
次に、手順でPCに入れたエミュレータを通して確認する(エミュレータの導入方法は、後に解説する「LESSON 09 スマートフォンサイトのデバッグ環境構築」を参照)。
最終的に実機でチェックして問題なければ完成となる。
実機でしか確認できないこともあるため、iPhoneとAndroidそれぞれ、最低でも手元に1台は置いておきたい。
※03
Safariの環境設定で [メニューバーに"開発"メニューを表示] にチェックを入れ、[開発] - [ユーザエージェント] でMobile Safariを選択。
実機での確認はWebサーバが必要
テスト用のWebサーバが用意できる場合はそちらを使い、できない場合は自分のPCを使えばよい。
ただし自分のPCを使う場合は、スマートフォンとPCが同じネットワーク上にあることが条件となる。
Macの場合はOSデフォルトの「Web共有」機能を、Windowsの場合は「XAMPP(http://www.apachefriends.org/jp/xampp-windows.html)」を使えば、自分のPCをWebサーバとして使うことができる。
Androidの検証機の問題
特定の機種のみで不具合報告があった場合、専門の検証業者もいるので、そういったものの利用も検討するとよいだろう。
>>目次に戻る