Your SlideShare is downloading. ×
0
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

スマートフォンサイトのトレンドとユーザビリティ

12,233

Published on

SwapSkils2010 vol.4開催 …

SwapSkils2010 vol.4開催
(株)IMJモバイル
丸居 久仁男

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,233
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
98
Comments
0
Likes
9
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. スマートフォンサイトの トレンドとユーザビリティ 2010年6月19日
  • 2. ■アジェンダ ■携帯開国論(10分) ・ガラパゴスケータイからスマートフォンへ └シェア現状&予想 ■スマートフォン時代のユーザビリティ(25分) ・HTML5+CSS3対応状況 ・ファーストビュー ・サイトデザイン傾向 ■スマートフォンと共存するために。(30分) ・端末振分け ・文字サイズ ■デザインのサンプル ・ケータイサイトのデザイン ・iPhoneサイトのデザイン(国内) ・iPhoneサイトのデザイン(海外) ・PCサイトとの比較 ■ありがちな失敗談
  • 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
  • 9. ■携帯開国論 ・ガラパゴスケータイからスマートフォンへ(まとめ) ・2010年中にはモバイルユーザーの 1割がスマートフォンユーザーに。 2012年には2割に達する模様。 ・某ECサイトの売上中、スマートフォンユー ザーは既に1割以上に達している。 ※非公式情報
  • 10. スマートフォン時代の ユーザビリティ
  • 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 HTML5対応 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
  • 17. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 スマートフォンで完全版が表示可 能なブラウザはDesire(Softbank) のみ!
  • 18. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 それ以外のスマートフォン(i- Phone3G、Xperiaでも同様)で は、グダグダ版のドラえもんが表 示される… ※後ろはPCのIE8版
  • 19. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 http://lomo.hmds.jp/anpanman/
  • 20. ■スマートフォン時代のユーザビリティ ・サイト傾向 タブ切替型 アイコン型 プロパティ型 (リスト型)
  • 21. ■スマートフォン時代のユーザビリティ ・サイト傾向 複合型
  • 22. ■スマートフォン時代のユーザビリティ ・モバイルサイトのユーザビリティ http://www.lottesoh.jp/
  • 23. ■スマートフォン時代のユーザビリティ ・モバイルサイトのユーザビリティ ユーザー視点でつくる 携帯サイト制作の基礎知識
  • 24. スマートフォンと 共存するために。
  • 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)での独自拡張
  • 30. ■スマートフォンと共存するために。 ・モバイルサイトの検証方法 ▼docomo iモードHTMLシミュレータⅡ http://www.nttdocomo.co. jp/service/imode/make/content/browser/html/tool2/inde x.html ▼FireMobileSimulator http://firemobilesimulator.org/ ※FF 用アドオン
  • 31. ■スマートフォンと共存するために。 ・スマートフォンの検証方法 ▼Windows向けスマートフォン検証ツール http://gadget.journal.mycom.co. jp/widget/_pri_m92D5xxY.html?cat=&key=2 ※ただし、前述のドラえもんのように微妙に違うので注意。 ▼その他、簡易的にPCのSafari4等で検証可能。 ※ただし、前述のドラえもんのように微妙に違うので注意。
  • 32. デザインサンプル
  • 33. ■デザインサンプル ・モバイルサイト
  • 34. ■デザインサンプル ・iPhoneサイト(日本)
  • 35. ■デザインサンプル ・iPhoneサイト(海外)
  • 36. ■デザインサンプル ・PCサイト(Yahoo)
  • 37. ■デザインサンプル ・スマートフォンサイト(Yahoo) 新デザイン 旧デザイン
  • 38. ■デザインサンプル ・PCサイト(マイコミジャーナル)
  • 39. ■デザインサンプル ・スマートフォンサイト(マイコミジャーナル)
  • 40. ■デザインサンプル ・もっと見たい方は・・・ モバイルデザインアーカイブ http://mobiledesignarchive.jp/ iPhoneデザインアーカイブ http://iphonedesignarchive.jp/
  • 41. 失敗談 ・画像の容量オーバーで表示できなくなった。 ・面倒がって3キャリアの端末を2キャリア分しか検証せ ず、さぼった1キャリアが崩れていた。 ・前段での握りが甘いと失敗してしまいがちです。遠慮せ ずに不明点や疑問点は事前に詰めておかないと面倒で す。 ・クライアントへのグチを本人に送ってしまった。
  • 42. 質疑応答
  • 43. プレゼント

×