Embed Size (px)
DESCRIPTION
SwapSkils2010 vol.4開催 (株)IMJモバイル 丸居 久仁男
Citation preview
スマートフォンサイトのトレンドとユーザビリティ
2010年6月19日
■携帯開国論（10分）・ガラパゴスケータイからスマートフォンへ└シェア現状＆予想
■スマートフォン時代のユーザビリティ（25分）・HTML5+CSS3対応状況・ファーストビュー・サイトデザイン傾向
■スマートフォンと共存するために。（30分）・端末振分け・文字サイズ
■デザインのサンプル・ケータイサイトのデザイン・iPhoneサイトのデザイン（国内）・iPhoneサイトのデザイン（海外）・PCサイトとの比較
■ありがちな失敗談
■アジェンダ
■実績
ユーザー視点でつくる携帯サイト制作の基礎知識
Web creators2009年7月号執筆記事掲載
携帯開国論
■携帯開国論・ガラパゴスケータイからスマートフォンへ（シェア現状＆予想）
2010年1月
2010年2月
2010年3月
2010年4月
■携帯開国論・ガラパゴスケータイからスマートフォンへ（シェア現状＆予想）
2010年1月
2010年2月
2010年3月
2010年4月
2010年1月 2010年2月 2010年3月 2010年4月
3G端末（xhtml対応）
docomo（3G） 47.2% 47.2% 47.4% 47.6%
au（3G） 28.1% 28.1% 28.2% 28.2%
Softbank（3G） 19.1% 19.2% 19.5% 19.6%
eMobile 2.0% 2.0% 2.1% 2.0%
合計 96.3% 96.6% 97.2% 97.4%
2G（HTML対応）
合計 3.7% 3.4% 2.8% 2.5%
モバイル契約台数総数 111,026,600 111,515,200 112,182,900 112,714,800
社団法人 電気通信事業者協会の調査値より
2010年4月現在 2010年末予測 2011年末予測 2012年末予測
スマートフォン出荷台数 4.0% 8.2% 13.2% 18.8%スマートフォン出荷台数累計予測 4,399,000 9,149,000 14,699,000 20,998,000
■携帯開国論・ガラパゴスケータイからスマートフォンへ（シェア現状＆予想）
■携帯開国論・ガラパゴスケータイからスマートフォンへ（まとめ）
・2010年中にはモバイルユーザーの1割がスマートフォンユーザーに。2012年には2割に達する模様。
・某ECサイトの売上中、スマートフォンユーザーは既に1割以上に達している。※非公式情報
スマートフォン時代のユーザビリティ
■スマートフォン時代のユーザビリティ・ファーストビューの考え方
端末 キャリア 横×縦(単位：ピクセル)
Xperia docomo 480×854iPhone3G SoftBank 320×480iPhone4G SoftBank 640×960iPad SoftBank 768×1024 Desire SoftBank 480×800SI01 au 480×960SI02 au 480×800
■スマートフォン時代のユーザビリティ・ファーストビューの考え方（現モバイルサイト）
240px
320px
ファーストビューにすべてのサービスに対するショートカットが設けられている。
ファーストビュー内に主要なメニューが収まっている。
■スマートフォン時代のユーザビリティ・ファーストビューの考え方（スマートフォンサイト）
320px
480px
ファーストビューで検索ウィンドウが見える。主要なサービスに対するショートカットが設けられている。
■スマートフォン時代のユーザビリティ・ OSとHTML5+CSS3対応状況
端末 キャリア OS HTML５対応
Xperia docomo android OS 1.6 △
iPhone3G SoftBank iPhone OS 3.1 △
iPhone4G SoftBank iPhone OS 4 ○iPad SoftBank iPhone OS 3.2 △
Desire SoftBank android OS 2.1 ○SI01 au android OS 1.6 △
SI02 au Windows Mobile6.5.3 △
■スマートフォン時代のユーザビリティ・OSとHTML5+CSS3対応状況
ex） XperiaでのCSS3サポート状況
-webkit-border-radius:8px;
■シャドー
-webkit-box-shadow: #999 4px 2px 4px;
■グラデーション
background: -moz-linear-gradient(top, #999999, #1b1b1b);background: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#1b1b1b));
■鏡面
background: -moz-linear-gradient(top, #1b1b1b, #ffffff);background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#1b1b1b));
■角丸
↓具体的には↓
■スマートフォン時代のユーザビリティ・ OSとHTML5+CSS3対応状況
http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html
■スマートフォン時代のユーザビリティ・ OSとHTML5+CSS3対応状況
スマートフォンで完全版が表示可能なブラウザはDesire（Softbank）のみ！
■スマートフォン時代のユーザビリティ・ OSとHTML5+CSS3対応状況
それ以外のスマートフォン（i-Phone3G、Xperiaでも同様）では、グダグダ版のドラえもんが表示される…
※後ろはPCのIE8版
■スマートフォン時代のユーザビリティ・ OSとHTML5+CSS3対応状況
http://lomo.hmds.jp/anpanman/
■スマートフォン時代のユーザビリティ・サイト傾向
アイコン型 プロパティ型（リスト型）
タブ切替型
■スマートフォン時代のユーザビリティ・サイト傾向
複合型
■スマートフォン時代のユーザビリティ・モバイルサイトのユーザビリティ
http://www.lottesoh.jp/
■スマートフォン時代のユーザビリティ・モバイルサイトのユーザビリティ
ユーザー視点でつくる携帯サイト制作の基礎知識
スマートフォンと共存するために。
■スマートフォンと共存するために。・端末振分け
■メディアクエリー
●iPhone用の指定 <link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet"/>
●PC用の指定<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet"/>
●Internet Explorer(IE)用の指定<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
※CSS3のみの仕様
■スマートフォンと共存するために。・端末振分け
■PHP<?php$header = getallheaders();$agent = $header["User-Agent"] ;header( "HTTP/1.1 301 Moved Permanently" );if(ereg("iPhone" , $agent)){ /* 端末タイプは iPhone */header("Location: iphone用パス");exit;} elseif (ereg("android", $agent)) { /* 端末タイプは android */header("Location: android用パス");exit;} elseif (ereg("DoCoMo", $agent)) { /* 端末タイプは DoCoMo */header("Location: DoCoMo用パス");exit;} elseif (ereg("UP.Browser", $agent)) { /* 端末タイプは au */header("Location: au用パス");exit;} elseif (ereg("KDDI", $agent)) { /* 端末タイプは au */header("Location: au用パス");exit;} elseif (ereg("SoftBank", $agent)) { /* 端末タイプは softbank */header("Location: softbank 用パス");exit;} elseif (ereg("vodafone", $agent)) { /* 端末タイプは softbank */header("Location: softbank用パス");exit;}else { /* 一般のブラウザ */header("Location: パソコン用パス");exit;}?>
・・・iPhone用・・・android用・・・docomo用・・・au(win)用・・・au(2G)用・・・Softbank用・・・vodafone用・・・PC用
■スマートフォンと共存するために。・端末振分け
■.htaccess
# 携帯用（ディレクトリを「mobile」とした場合） RewriteCond %{HTTP_USER_AGENT} DoCoMo RewriteCond %{HTTP_USER_AGENT} (Vodafone|J-PHONE|SoftBank) RewriteCond %{HTTP_USER_AGENT} (UP\.Browser|KDDI) RewriteCond %{REQUEST_URI} !^/mobile/ RewriteRule ^(.*)\.html$ /m/$1.html [L]
#スマートフォン用（ディレクトリを「smart」とした場合） RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod) RewriteCond %{HTTP_USER_AGENT} iPad RewriteCond %{HTTP_USER_AGENT} Android RewriteCond %{HTTP_USER_AGENT} BlackBerry RewriteCond %{REQUEST_URI} !^/smart/ RewriteRule ^(.*)\.html$ /smart/$1.html[L]
■スマートフォンと共存するために。・端末振分け
メディアクエリー.htaccessPHP
環境に応じて、いずれかの機能を利用して振分けを実行しましょう。
■スマートフォンと共存するために。・文字サイズ
既存のPCサイトやモバイルサイトの文字サイズ指定だと、スマートフォン上で表示される文字サイズは小さく表示されてしまう。そこで・・・
-webkit-text-size-adjust 150％iPhone（MobileSafari）での独自拡張
■スマートフォンと共存するために。・モバイルサイトの検証方法
▼docomo iモードHTMLシミュレータⅡhttp://www.nttdocomo.co.jp/service/imode/make/content/browser/html/tool2/index.html
▼FireMobileSimulatorhttp://firemobilesimulator.org/※FF 用アドオン
■スマートフォンと共存するために。・スマートフォンの検証方法
▼Windows向けスマートフォン検証ツールhttp://gadget.journal.mycom.co.jp/widget/_pri_m92D5xxY.html?cat=&key=2※ただし、前述のドラえもんのように微妙に違うので注意。
▼その他、簡易的にPCのSafari4等で検証可能。※ただし、前述のドラえもんのように微妙に違うので注意。
デザインサンプル
■デザインサンプル・モバイルサイト
■デザインサンプル・iPhoneサイト(日本)
■デザインサンプル・iPhoneサイト(海外)
■デザインサンプル・PCサイト(Yahoo)
■デザインサンプル・スマートフォンサイト(Yahoo)
旧デザイン
新デザイン
■デザインサンプル・PCサイト(マイコミジャーナル)
■デザインサンプル・スマートフォンサイト(マイコミジャーナル)
■デザインサンプル・もっと見たい方は・・・
モバイルデザインアーカイブhttp://mobiledesignarchive.jp/
iPhoneデザインアーカイブhttp://iphonedesignarchive.jp/
失敗談
・前段での握りが甘いと失敗してしまいがちです。遠慮せずに不明点や疑問点は事前に詰めておかないと面倒です。
・面倒がって3キャリアの端末を2キャリア分しか検証せず、さぼった1キャリアが崩れていた。
・画像の容量オーバーで表示できなくなった。
・クライアントへのグチを本人に送ってしまった。
質疑応答
プレゼント
