iPhone向けWebサイト表示方法の実例と制作方法

~iPhone向けWebの定番 6パターン ~

　株式会社モバキッズ 取締役田村健太郎

自己紹介

株式会社モバキッズ CTO iPhone 　ポータル iWorld JAPAN

すべてのサイトにレビューを 現在 100サイト超

設立 1年 4ヶ月の大学生ベンチャー CP様と共同で

Webアプリ /ネイティブアプリの展開 携帯サイトの企画制作 携帯 Eラーニング ASP「モバ勉」

今日のテーマ

iPhone向けWebサイト /Webアプリケーション

表示方法、デザイン どんな構成が主流か

iPhone向けWebの定番 6パターン

iPhone向けWebの定番 6パターン

1カラム 　 　 リスト アイコン

iPhone向けWebの定番 6パターン

大アイコン 大ボタン 上部固定

タイプ１：既存のWebサイトを1カラム化して縮小

meta要素の name属性「 viewport」で最適化

ナビゲーションなどは従来一行のものを二行化することで対応

PＣ版の読み物サイトを iPhone化するときなどに向いている

ＰＣ版の構成を崩さないので gihyo.jp、 asahi.comなど

タイプ２： iPhone標準的なリスト型

iUiライブラリなどで実装 MovableType/Wordpressでのプラグインも豊富

iPhone本体での操作に近いためわかりやすい。

左上ボタンで戻る、など 縦スクロールが容易なため、一覧ページなどに向いている

ヤフオク、ホットペッパー映画生活、ぽすれんなど多数

タイプ 3：ホーム画面風にアイコンを整列

角丸アイコンで直感的な理解絵を見るだけで直感的にわかるものに向いている

ホーム画面感覚で操作可能なため、トップページに向いている

アイコン作るのがやや大変 Yahooトップ、左 2列など

タイプ４：大アイコン＋文字説明

大きめの画像を並べることでビジュアルが向上

ボタンが大きいので押しやすい サイズが大きい分縦スクロールがやや大変

エンタメ系のトップページや、写真つきコンテンツの検索結果一覧などに向いている。

ハドソン、関心空間、 Alike.jp、iWorld JAPANなど

タイプ５：背景画像にマッチした大ボタン配置

ボタンと背景を一体化させることでビジュアル向上

ボタンが大きいので押しやすい スクロールなしで表示するためボタン数が限られる。

リンク先が 10程度のトップページに向いている。

Yahoo無線ＬＡＮスポット、Yahoo外為など、Yahoo系サービスに多い

タイプ 6：ナビゲーションを上部に固定 上部にナビゲーションを置き、操作に応じてコンテンツを下部に読み込んでいく

ページ遷移無しで画面が入れ替わるので、Ｗｅｂアプリケーションに向いている。

google、 Facebookなど

宣伝： iWorld JAPANについて 日本初の iPhoneポータル

iPhone向けWebサイト /アプリを 100以上紹介 商用はほぼ網羅・個人で制作されているものも随時追加

ロボット収集ではなくて人力でリストアップ。昔の YahooJAPANのイメージ

appstoreが注目されているが、より手軽に公開できるWebアプリにもっとスポットをあてたい

社長がデザイン、私がコーディング＆サイト収集で制作期間丸 3日。スピード大事。

iPhone向けWebを作られたら是非登録を iWorld JAPAN上にて。メールでも OK www.iworld.jp