iPhone 3G発表記念!
iPhoneにおける次世代モバイルブラウジングの波

この記事を読むのに必要な時間:およそ 4 分

ここでは,次世代モバイル機器として台頭してきているiPhoneについて,実際のiPhone対応サイト制作やアメリカ動向とともに,今後の展望を占います。

iPhone(日本商標:アイフォーン)の基礎知識

iPhoneは,2007年6月29日にアメリカで発売されたスマートフォンに位置付けられる携帯電話です。それまで,アメリカ国内でモバイル経由でWebにアクセスしている人は全体利用者数のうち10%以下でした。しかし,iPhoneにはWebブラウザのSafariが標準搭載されており,従来のモバイル特有のインターフェースによる制限がなくなったうえ,無線LANに対応していることから,登場以来多くの人がiPhone,すなわちモバイル経由でのWebブラウジングを行うようになりました。

また,iPod touchと共通のタッチパネルを採用することにより,「つまむ」「広げる」「滑らせる」などの操作が可能になり,物理的なボタンを一切使わずにWebをブラウズできることから,次世代のインターフェースを備えた端末と言われています。それに伴い,2008年に入り多くの米国企業がiPhone向けのサイト構築を始めています。

こういった背景から,執筆時点で,iPhoneの日本国内向けの具体的な販売予定はありませんが,将来的に導入されることを見越しておくと良いでしょう。また。海外向けのサイト構築を予定・運営している方にとっても今後軽視できない端末となるでしょう。

ここでは,iPhoneの特徴や制限を理解したうえで,最適なサイト構築のための説明をいたします。

iPhone版Safariにおける仕様

画面の大きさと解像度は表1のとおりです。また,図1のように,iPhoneにはWeb用に標準ブラウザとしてSafariが搭載されています。

表1 画面の大きさと解像度

画像 縦にした場合:320px×356px
(アドレスバーを除いた場合は320px×416px)
画像 横にした場合:480px×208px
(アドレスバーを除いた場合は480px×268px)
解像度:160ppi

図1 iPhone版Safari

図1 iPhone版Safari

Safariが搭載されたことにより,今までのモバイル向けブラウザでは体験できなかったブラウジングが可能となりました。しかしながら,実際はMac版のものと違う点が多くあり,考慮する必要があります。表2は機能面に関する仕様説明です。

表2 iPhone版Safariの仕様

Cookie(クッキー)は利用可能
同時に8枚までのページを開くことが可能
標準の状態ではポップアップウィンドウをブロック
PDFやワードファイルの閲覧が可能
サポートしている画像の種類:.gif,.jpg,.png,.tiff
表示用使用可能フォント:American Typewriter,Arial,Arial Rounded MT Bold,Courier,Courier New,Georgia,Helvetica,Helvetica New,Marker Felt,Times New Roman,Trebuchet MS,Verdana,Zapfino
CSS1,CSS2およびCSS3の一部をサポート
Flashプラグインは利用不可(Flashプレーヤのダウンロード,インストールも不可)
Javaプラグインは利用不可
JavaScriptによるmouseOverやmouseOutなどのマウスを使ったイベントは利用不可
CSSによるa:hover,a:activeクラスは利用不可
ストリーミングコンテンツ以外のHTML,CSS,JavaScriptなどの1ファイルにおける最大サポートサイズは10Mバイト
.gif,png,.tiffファイルの最大サポートサイズは8Mバイト
.jpgファイルの最大サポートサイズは128Mバイト
JavaScriptの動作が開始するまでの待ち時間は最大で5秒
.gzip圧縮端子をサポート
iFrameをサポート
フレームセットは利用不可

iPhone向けサイト作成の10のポイント

それでは,上記の仕様をふまえたうえでiPhone向けのサイト制作のポイントを説明いたします。

ポイント①:Flashコンテンツは一切使用しない

iPhoneをターゲットにサイトを作る際に,まず最初に気を付けなければいけないのが,Flashによるコンテンツです。搭載されているSafariはなぜかFlashプラグインをサポートしておらず,Flashベースのサイトはすべて表示されません(図2)。

図2 Flashコンテンツが表示されていない状況

図2 Flashコンテンツが表示されていない状況

ポイント②:iPhone専用ページを作る

Safariブラウザが搭載されていることからもわかるとおり,PC向けのサイトも閲覧可能ですが,文字の大きさや,画像,コンテンツの面でiPhoneにとって最適なページを作成するには,専用ページを作ることをお勧めします。また上記の通り,ホームページがすべてFlashで作られている場合は,専用ページは必須となります.

ポイント③:ページ全体を軽めにする

iPhoneからサイトにアクセスする際に無線LANを利用していればブロードバンドスピードでサイトをブラウズすることが可能ですが,Wi-Fi環境がない場合は,GPRSもしくはEDGEを使ってアクセスすることになり,最大でも220KB/Sのスピードに制限されます。したがって,ページに掲載されるコンテンツはなるべく軽くしておくほうが良いでしょう。

ポイント④:縦の状態を想定してデザインする

iPhoneを90度回転させることで,ページを横向きに表示することが可能ですが,実際に使ってみると,縦の長さが限定されるため,とても使いにくく,Webブラウジングの際は通常縦向きに使います。したがって,インターフェースをデザインする際には縦向きで最適な状態を想定してください.

ポイント⑤:ズーム機能を想定する

iPhoneでサイトをブラウズする際の最大の特徴と言えるのが,ズーム機能です。今までになかったインターフェース要素なので,デザインする側としては,どのように活用するかがポイントとなります。基本的には,ズームアウトの状態でページのどの部分にどのようなコンテンツがあるかを知らせ,詳細はズームインの状態で見てもらうようなデザインが良いでしょう。

ポイント⑥:ページ構成は大きな見出し+説明文

上記のズーム機能を活用することで,多くの情報を1つのページに掲載することが可能です。iPhoneでのブラウジングはズームアウト状態で必要な情報を探し,見つかり次第ズームインするのが基本になりますので,見出しは大きめ(15ピクセル以上)で,本文は小さめの文字で作成すると良いでしょう.

ポイント⑦:フォームの要素は少なめにする

iPhoneを使っていてわかるのは,フォーム入力が非常に困難だということです。とくにたくさん並んだチェックボックスやラジオボタンは,非常に押しにくいうえに他のボタンを押してしまいがちです。ユーザの便宜性を最優先し,フォーム要素はなるべく少なくしましょう。

ポイント⑧:ナビゲーション要素はページ上部に設定

画面が小さいこともあり,ナビゲーション要素はスクロールなしでも見れるページ上部に表示されるようにしましょう。理想的にはページ上部から測って400px以内の場所です。

ポイント⑨:ページ数を少なめにし,情報はなるべく1つのページに収める

PCの場合と違い,ブラウザのコントロールボタンが限られていますので,なるべくページの行き来を少なめにするために,1ページになるべく多くのコンテンツを掲載してください。細かくページ分けすると,ロードするたびに待ち時間が多くなりユーザビリティが下がってしまいます。その点,滑らせるを活用することでスクロールは比較的容易です。

ポイント⑩:背景はなるべく暗めにする

アメリカで2008年はエコがトレンドと言われています。PCの背景画像を暗めにすることにより,消費電力が少なく省エネにつながります。iPhone向けのサイトも背景を暗めに設定することにより,バッテリの消費電力が少なくて済むため,ユーザにとってはありがたいサイトになります。

著者プロフィール

Brandon Hill(ブランドン・ヒル)

btrax, Inc. 代表取締役。日本人の母,アメリカ人の父を持つバイリンガルWebコンサルタント。サンフランシスコ州立大学デザイン課卒業後,シーベルシステムズなどのWebサイトデザイン構築をはじめとして,シリコンバレーにてフリーのWebデザイナーとして活動。2004年より,外資系企業を中心にに日米両マーケット向けトータルWebサービスを提供するbtrax(ビートラックス)を立ち上げ,現在では日米マーケット市場に関するビジネスコンサルティング業務も実施。Webを介して日本企業が世界に羽ばたくのをサポートするのが目標。

URLhttp://blog.btrax.com/jp
iPhone向けサイト制作サービス:http://www.siteforiphone.com/jp

バックナンバー

モバイル

  • iPhone 3G発表記念! iPhoneにおける次世代モバイルブラウジングの波

コメント

コメントの記入