I Phone Lt Design6 080810

All rights reserved by mobkids Inc. 2008

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

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

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


自己紹介

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

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

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

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


今日のテーマ

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

– iPhone向け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上にて。メールでも。

www.iworld.jp

Documents

I Phone Lt Design6 080810