Recommandé
Contenu connexe
En vedette
En vedette (13)
Similaire à スマートフォンサイトのトレンドとユーザビリティ
Similaire à スマートフォンサイトのトレンドとユーザビリティ (20)
Plus de SwapSkills
Plus de SwapSkills (13)
スマートフォンサイトのトレンドとユーザビリティ
- 1. スマートフォンサイトの トレンドとユーザビリティ 2010年6月19日
- 3. ■自己紹介 (株)IMJモバイル所属の モバイルクリエイター。 http://www.imjmobile.co.jp/
- 4. ■実績 Web creators ユーザー視点でつくる 2009年7月号 携帯サイト制作の基礎知識 執筆記事掲載
- 5. 携帯開国論
- 6. ■携帯開国論 ・ガラパゴスケータイからスマートフォンへ（シェア現状＆予想） 2010年1 2010年2 2010年3 2010年4 月 月 月 月
- 7. ■携帯開国論 ・ガラパゴスケータイからスマートフォンへ（シェア現状＆予想） 2010年1 2010年2 2010年3 2010年4 月 月 月 月
- 8. ■携帯開国論 ・ガラパゴスケータイからスマートフォンへ（シェア現状＆予想） 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
- 11. ■スマートフォン時代のユーザビリティ ・ファーストビューの考え方 端末 キャリア 横×縦(単位：ピクセル) Xperia docomo 480×854 iPhone3G SoftBank 320×480 iPhone4G SoftBank 640×960 iPad SoftBank 768×1024 Desire SoftBank 480×800 SI01 au 480×960 SI02 au 480×800
- 12. ■スマートフォン時代のユーザビリティ ・ファーストビューの考え方（現モバイルサイト） 240p x ファーストビューにすべてのサー 320p ビスに対するショートカットが設け られている。 x ファーストビュー内に主要なメ ニューが収まっている。
- 13. ■スマートフォン時代のユーザビリティ ・ファーストビューの考え方（スマートフォンサイト） 320p x ファーストビューで検索ウィンドウ が見える。 主要なサービスに対するショート カットが設けられている。 480p x
- 14. ■スマートフォン時代のユーザビリティ ・ 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 △
- 15. ■スマートフォン時代のユーザビリティ ・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));
- 16. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html
- 18. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 それ以外のスマートフォン（i- Phone3G、Xperiaでも同様）で は、グダグダ版のドラえもんが表 示される… ※後ろはPCのIE8版
- 19. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 http://lomo.hmds.jp/anpanman/
- 20. ■スマートフォン時代のユーザビリティ ・サイト傾向 タブ切替型 アイコン型 プロパティ型 （リスト型）
- 21. ■スマートフォン時代のユーザビリティ ・サイト傾向 複合型
- 23. ■スマートフォン時代のユーザビリティ ・モバイルサイトのユーザビリティ ユーザー視点でつくる 携帯サイト制作の基礎知識
- 25. ■スマートフォンと共存するために。 ・端末振分け ■メディアクエリー ●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のみの仕
- 26. ■スマートフォンと共存するために。 ・端末振分け ■PH P <?php $header = getallheaders(); $agent = $header["User-Agent"] ; header( "HTTP/1.1 301 Moved Permanently" ); ・・・iPhone用 if(ereg("iPhone" , $agent)){ /* 端末タイプは iPhone */ header("Location: iphone用パス"); exit; ・・・android用 } elseif (ereg("android", $agent)) { /* 端末タイプは android */ header("Location: android用パス"); ・・・docomo用 exit; } elseif (ereg("DoCoMo", $agent)) { /* 端末タイプは DoCoMo */ header("Location: DoCoMo用パス"); ・・・au(win)用 exit; } elseif (ereg("UP.Browser", $agent)) { /* 端末タイプは au */ ・・・au(2G)用 header("Location: au用パス"); exit; } elseif (ereg("KDDI", $agent)) { /* 端末タイプは au */ ・・・Softbank用 header("Location: au用パス"); exit; ・・・vodafone用 } elseif (ereg("SoftBank", $agent)) { /* 端末タイプは softbank */ header("Location: softbank 用パス"); exit; ・・・PC用 } elseif (ereg("vodafone", $agent)) { /* 端末タイプは softbank */ header("Location: softbank用パス"); exit; }else { /* 一般のブラウザ */ header("Location: パソコン用パス"); exit; } ?>
- 27. ■スマートフォンと共存するために。 ・端末振分け ■.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]
- 28. ■スマートフォンと共存するために。 ・端末振分け メディアクエリー .htaccess PHP 環境に応じて、いずれかの機能を利 用して振分けを実行しましょう。
- 29. ■スマートフォンと共存するために。 ・文字サイズ 既存のPCサイトやモバイルサイトの文字サイズ指定だ と、スマートフォン上で表示される文字サイズは小さく表 示されてしまう。そこで・・・ -webkit-text-size-adjust 150 ％ iPhone（MobileSafari）での独自拡張
- 32. デザインサンプル
- 37. ■デザインサンプル ・スマートフォンサイト(Yahoo) 新デザイン 旧デザイン
- 42. 質疑応答
- 43. プレゼント