gihyo.jp » WEB+DESIGN STAGE » 一般記事 » iPhone 3G発表記念! iPhoneにおける次世代モバイルブラウジングの波

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

ここでは,次世代モバイル機器として台頭してきている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://www.btrax.com/
iPhone向けサイト制作サービス:http://www.siteforiphone.com/jp

バックナンバー

モバイル

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

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

2010年版SEO体得講座

本連載では,いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて,最新トレンドからすぐに使えるTipsまでを紹介します。

小型Linuxサーバの最高峰 OpenBlockS 600活用指南

搭載メモリの増加,CPUクロックの向上など,あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から,活用するためのさまざまなノウハウを紹介していきます。

はじめMath! Javaでコンピュータ数学

プログラミング言語入門者向けに,知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で,即活用できる知識を目指します。

教科書には載っていない ネットワークエンジニアの実践技術

ネットワークエンジニア,インフラエンジニアのトラブル対応には,時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について,実例を元に紹介します。

Googleケータイ,世に現る

2008年9月,Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。

モバゲーオープンプラットフォームに挑戦!――面白法人カヤック流モバゲーオープンプラットフォーム企画と開発のイロハ

2010年1月にリリースとなったモバゲーオープンプラットフォーム。その制作企業であるカヤックが,アイデアを企画に落とし込み,開発までのノウハウを紹介します。

プロトタイピングツールSketchFlowを用いた,Silverlightアプリ開発

SketchFlowプロトタイプ作成からアプリケーション開発までをExpression Blend 3を使って実践的に解説します。

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス

最近のコメント