All rights reserved by mobkids Inc. 2008

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

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

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

All rights reserved by mobkids Inc. 2008

自己紹介

• 株式会社モバキッズ CTO• 設立 1年 4ヶ月の大学生ベンチャー

– CP様と共同でWebアプリ /ネイティブアプリの展開

– 携帯サイトの企画制作– 携帯 Eラーニング ASP「モバ勉」

• iPhone ポータル iWorld JAPAN– すべてのサイトにレビューを– 現在 100サイト超

All rights reserved by mobkids Inc. 2008

今日のテーマ

• iPhone向けWebアプリの表示／デザイン

– iPhone向けWebアプリケーションを制作される際のご参考になれば幸いです。

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

All rights reserved by mobkids Inc. 2008

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

1カラム リスト アイコン

All rights reserved by mobkids Inc. 2008

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

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

All rights reserved by mobkids Inc. 2008

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

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

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

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

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

All rights reserved by mobkids Inc. 2008

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

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

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

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

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

All rights reserved by mobkids Inc. 2008

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

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

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

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

All rights reserved by mobkids Inc. 2008

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

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

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

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

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

All rights reserved by mobkids Inc. 2008

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

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

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

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

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

All rights reserved by mobkids Inc. 2008

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

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

google、 Facebookなど

All rights reserved by mobkids Inc. 2008

宣伝： iWorld JAPANについて

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

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

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

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

• iPhone向けWebを作られたら是非登録を– iWorld JAPAN上にて。メールでも。

www.iworld.jp