このページの本文へ

DESIGN 実践!iPhone&Androidサイト制作ガイド ― 第3回

サイト制作の前に知りたいiPhone/Androidの仕様

2010年08月11日 10時00分更新

たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷
iphone-android

 スマートフォンはPCに近いとはいえ、モバイルならではの制限があります。iPhone/Android向けのサイト制作を始める前に、それぞれの仕様を確認しましょう。


iPhoneの仕様を知る

 iPhone(アイフォーン)は、2007年に米国で初代機が発売され(日本では未発売)、その後、3G、3GS、そして2010年にiPhone 4が発売されました。それぞれの仕様は以下の通りですが、ここではWeb制作に重要なWebブラウザーまわりを中心に掘り下げていきましょう。

iPhone iPhone 3G iPhone 3GS iPhone 4
サイズ 115×61×11.6mm 115.5×62.1×12.3mm 115.2×58.6×9.3mm
重さ 135g 133g 135g 137g
容量 4GB, 8GB, 16GB 8GB,16GB 8GB,16GB,32GB 16Gまたは32GB
カラー ブラック ホワイトまたはブラック
画面サイズ 3.5インチ
画面解像度 480×320px (163ppi) 960×640px(326ppi)
カメラ 2メガピクセル 3メガピクセル 5メガピクセル
搭載OS iPhone OS 1.0 iPhone OS 2.0
※iOS4にバージョンアップ可能
iPhone OS 3.0
※iOS4にバージョンアップ可能
iOS 4
Safari 3.0 3.1.1 4.0 4.0.5


■iOS(iPhone OS)

 iOS(3.0以前は「iPhone OS」)は、アップルがiPhoneなどの小型端末用に開発した専用OSです。初代iPhoneに1.0が搭載されたあと、新モデルの発表に合わせてバージョンを重ねています(iPhone 4にはiOS 4が搭載)。iPhone 3G以降はOSのバージョンアップができるようになり、最新版のiOS4にも対応しています。


■iPhone標準ブラウザー「Safari」

 iPhoneには標準ブラウザーとして「Safari」が搭載されています。SafariはもともとアップルがMac OS X向けに開発したWebブラウザーで、Windows版も無償で配布されています。基本的な表示能力はiPhone版もデスクトップ版もほぼ同じですが、iPhone版にはいくつの制限があるため、「Mobile Safari」などと呼んで区別することもあります。

 Safariはオープンソースのレンダリングエンジン「WebKit」を採用し、HTML5やCSS3などの最新技術をいち早く取り入れている前衛的なWebブラウザーです。JavaScriptが高速に動作し、グーグルの「Chrome」やオペラ ソフトウェアの「Opera」など、JavaScriptの実行速度の評価が高いブラウザーとも肩を並べる性能を誇っています。

 iPhoneに搭載されているSafariは、前の表のとおり、iOSのバージョンアップに合わせてアップデートされており、2010年8月時点の最新版は「4.0.5」です。といっても、バージョンアップにおける変更点は、ほとんどの場合、コピー&ペーストへの対応やセキュリティアップデートなどの機能面での改善、HTML5/CSS3の先行実装などが主で、Webページの基本的なレンダリング性能はほとんど変わりません。

 PCサイトのように「IE6とIE7で表示結果がまったく異なる」といったケースは少なく、制作者にとっては扱いやすいブラウザーと言えます。


■派生ブラウザーとWebビュー

 iPhone向けのアプリケーションをダウンロードできる「App Store」には、世界中の開発者が開発したさまざまなアプリが配布・販売されています。中にはWebブラウザーも多くあり、無料かもしくは数百円で販売されていますが、ほとんどの場合、これらのブラウザーは「Webビュー」と呼ばれるSafariのエンジン部分を利用しています。このため、Webページのレンダリング結果はSafariとまったく同じです。

 例外として、オペラ ソフトウェアの「Opera mini」があります。Opera miniはレンダリングエンジンを内蔵しておらず、オペラのサーバー上でレンダリングした結果を受け取って表示します。PC向けのOperaとSafariで表示結果に違いがあるように、iPhoneのSafariとOpera miniでも表示結果には差が出ます。

標準の「Safari」(左)と、「Opera mini」(右)の表示の違い。角丸や罫線の処理など細部に違いがある


iPhoneの兄弟分、iPod touchとiPad

 iOSを搭載した端末はiPhone以外にも、「iPod touch」と「iPad」があります。iPod touchは、2007年に第1世代が発売されたあと、iPhoneのモデルチェンジと合わせる形で、第2世代・第3世代が発売されています(第4世代は本連載執筆時点では発売されていません)。

 iPod touchは、iPhoneから携帯電話の通話機能やカメラなどの一部機能を省いた音楽プレイヤーです。WiFi(無線LAN)環境下でしか利用できないものの、iPhoneと同じWebブラウザーを搭載しており、Web閲覧端末としても利用できます。そのため、Web制作においてはiPod touchも「スマートフォン」と見なしてほぼ問題ありません(本連載で「iPhone」と表記した場合はiPod touchも含むものとします)。

 一方のiPadには「WiFiモデル」と「3Gモデル」があり、3Gモデルでは携帯電話の通信回線を利用できるため「スマートフォン」と呼べるかもしれません。しかし、本体サイズが240×190mm、解像度が768×1024ピクセルもあることから、Web閲覧端末としてはむしろノートパソコンに近いといえます。iPhone向けのサイトももちろん表示できますが、大画面では逆に見づらくなるため、iPhoneとiPadは切り離して考えるのが一般的です。実際、iPhone向けには最適化したサイトを表示するYahoo! JAPANやNAVERなどの情報サイトでも、iPadの場合はあえてPC向けのWebサイトを表示しています。


解像度が格段に向上したiPhone 4

 2010年6月に発売されたiPhone 4は、本体の大きさや画面サイズは従来のiPhoneシリーズとほぼ変わらないものの、画面解像度はそれまでの480×320ピクセルから960×640ピクセルへと大幅に向上しました。これによって画面がより鮮明になり、PCサイトを表示した時でも文字や細かい画像をはっきりと認識できるようになりました。

 ただし、前回の記事で説明したとおり、Mobile Safariには表示サイズを規定する「Viewport」という考え方があるため、特にiPhone 4だけを意識してWebサイトを作る必要はありません。実際、iPhone 4登場以前に作られたiPhone向けサイトを表示しても、きちんと全画面で表示されます。逆にiPhone 4向けに、写真などをより美しく見せる方法もありますので、今後の連載の中で紹介しましょう。

書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたっては構成を全面的に見直し、記事公開後の最新情報や現場で役立つ追加情報も多数盛り込んでいます。画面設計に便利な特製ノート付き。

iPhone+Android
スマートフォンサイト制作入門

本体 2,380円+税、B5変形判216ページ(オール4色刷)
ISBN:978-4-04-870218-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング