I Phone Lt Design6 080810
-
Upload
kentaro-tamura -
Category
Documents
-
view
1.267 -
download
2
description
Transcript of I Phone Lt Design6 080810
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
タイプ1:既存のWebサイトを1カラム化して縮小
– meta要素の name属性「 viewport」で最適化
– ナビゲーションなどは従来一行のものを二行化することで対応
– PC版の読み物サイトを iPhone化するときなどに向いている
• PC版の構成を崩さないので– gihyo.jp、 asahi.comなど
All rights reserved by mobkids Inc. 2008
タイプ2: iPhone標準的なリスト型
iUiライブラリなどで実装 MovableType/Wordpressでのプラグインも豊富
iPhone本体での操作に近いためわかりやすい。
左上ボタンで戻る、など 縦スクロールが容易なため、一覧ページなどに向いている
ヤフオク、ホットペッパー映画生活、ぽすれんなど多数
All rights reserved by mobkids Inc. 2008
タイプ 3:ホーム画面風にアイコンを整列
角丸アイコンで直感的な理解 絵を見るだけで直感的にわかるものに向いている
ホーム画面感覚で操作可能。トップページに向いている
アイコン作るのがやや大変 Yahooトップ、左 2列など
All rights reserved by mobkids Inc. 2008
タイプ4:大アイコン+文字説明
大きめの画像を並べることでビジュアルが向上
ボタンが大きいので押しやすい サイズが大きい分縦スクロールがやや大変
エンタメ系のトップページや、写真つきコンテンツの検索結果一覧などに向いている。
ハドソン、関心空間、 Alike.jp、iWorld JAPANなど
All rights reserved by mobkids Inc. 2008
タイプ5:背景画像にマッチした大ボタン配置
ボタンと背景を一体化させることでビジュアル向上
ボタンが大きいので押しやすい スクロールなしで表示するためボタン数が限られる。
リンク先が 10程度のトップページに向いている。
Yahoo無線LANスポット、Yahoo外為など、Yahoo系サービスに多い
All rights reserved by mobkids Inc. 2008
タイプ 6:ナビゲーションを上部に固定 上部にナビゲーションを置き、操作に応じてコンテンツを下部に読み込んでいく
ページ遷移無しで画面が入れ替わるので、Webアプリケーションに向いている。
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