スマートフォンサイトの
   トレンドとユーザビリティ
2010年6月19日
■アジェンダ
■携帯開国論(10分)
・ガラパゴスケータイからスマートフォンへ
└シェア現状&予想

■スマートフォン時代のユーザビリティ(25分)
・HTML5+CSS3対応状況
・ファーストビュー
・サイトデザイン傾向

■スマートフォンと...
■自己紹介


 (株)IMJモバイル所属の
 モバイルクリエイター。



        http://www.imjmobile.co.jp/
■実績




      Web creators    ユーザー視点でつくる
      2009年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月
...
■携帯開国論
・ガラパゴスケータイからスマートフォンへ(まとめ)


・2010年中にはモバイルユーザーの
1割がスマートフォンユーザーに。
2012年には2割に達する模様。

・某ECサイトの売上中、スマートフォンユー
ザーは既に1割以上に達...
スマートフォン時代の
  ユーザビリティ
■スマートフォン時代のユーザビリティ
・ファーストビューの考え方

          端末       キャリア      横×縦(単位:ピクセル)
       Xperia     docomo        480×854
      ...
■スマートフォン時代のユーザビリティ
・ファーストビューの考え方(現モバイルサイト)

         240p
         x




                 ファーストビューにすべてのサー
  320p          ...
■スマートフォン時代のユーザビリティ
・ファーストビューの考え方(スマートフォンサイト)
        320p
        x




                  ファーストビューで検索ウィンドウ
               ...
■スマートフォン時代のユーザビリティ
・ OSとHTML5+CSS3対応状況

  端末         キャリア              OS           HTML5対応
Xperia     docomo     android ...
■スマートフォン時代のユーザビリティ
・OSとHTML5+CSS3対応状況

ex) XperiaでのCSS3サポート状況
■角丸                ■シャドー
-webkit-border-radius:8px;         ...
■スマートフォン時代のユーザビリティ
・ 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でも同様)で
          ...
■スマートフォン時代のユーザビリティ
・ 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" t...
■スマートフォンと共存するために。
・端末振分け

■PH
P
<?php
$header = getallheaders();
$agent = $header["User-Agent"] ;
header( "HTTP/1.1 301 Mo...
■スマートフォンと共存するために。
・端末振分け

 ■.htaccess


# 携帯用(ディレクトリを「mobile」とした場合) RewriteCond %
{HTTP_USER_AGENT} DoCoMo RewriteCond %{H...
■スマートフォンと共存するために。
・端末振分け



       メディアクエリー
       .htaccess
       PHP

環境に応じて、いずれかの機能を利
用して振分けを実行しましょう。
■スマートフォンと共存するために。
・文字サイズ


既存のPCサイトやモバイルサイトの文字サイズ指定だ
と、スマートフォン上で表示される文字サイズは小さく表
示されてしまう。そこで・・・



  -webkit-text-size-adju...
■スマートフォンと共存するために。
・モバイルサイトの検証方法



▼docomo iモードHTMLシミュレータⅡ
http://www.nttdocomo.co.
jp/service/imode/make/content/browser/...
■スマートフォンと共存するために。
・スマートフォンの検証方法



▼Windows向けスマートフォン検証ツール
http://gadget.journal.mycom.co.
jp/widget/_pri_m92D5xxY.html?cat...
デザインサンプル
■デザインサンプル
・モバイルサイト
■デザインサンプル
・iPhoneサイト(日本)
■デザインサンプル
・iPhoneサイト(海外)
■デザインサンプル
・PCサイト(Yahoo)
■デザインサンプル
・スマートフォンサイト(Yahoo)




                     新デザイン




      旧デザイン
■デザインサンプル
・PCサイト(マイコミジャーナル)
■デザインサンプル
・スマートフォンサイト(マイコミジャーナル)
■デザインサンプル
・もっと見たい方は・・・




モバイルデザインアーカイブ
http://mobiledesignarchive.jp/

iPhoneデザインアーカイブ
http://iphonedesignarchive.jp/
失敗談
・画像の容量オーバーで表示できなくなった。

・面倒がって3キャリアの端末を2キャリア分しか検証せ
ず、さぼった1キャリアが崩れていた。

・前段での握りが甘いと失敗してしまいがちです。遠慮せ
ずに不明点や疑問点は事前に詰めておかないと...
質疑応答
プレゼント
Upcoming SlideShare
Loading in...5
×

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

12,266

Published on

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

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

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

No notes for slide

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

  1. 1. スマートフォンサイトの トレンドとユーザビリティ 2010年6月19日
  2. 2. ■アジェンダ ■携帯開国論(10分) ・ガラパゴスケータイからスマートフォンへ └シェア現状&予想 ■スマートフォン時代のユーザビリティ(25分) ・HTML5+CSS3対応状況 ・ファーストビュー ・サイトデザイン傾向 ■スマートフォンと共存するために。(30分) ・端末振分け ・文字サイズ ■デザインのサンプル ・ケータイサイトのデザイン ・iPhoneサイトのデザイン(国内) ・iPhoneサイトのデザイン(海外) ・PCサイトとの比較 ■ありがちな失敗談
  3. 3. ■自己紹介 (株)IMJモバイル所属の モバイルクリエイター。 http://www.imjmobile.co.jp/
  4. 4. ■実績 Web creators ユーザー視点でつくる 2009年7月号 携帯サイト制作の基礎知識 執筆記事掲載
  5. 5. 携帯開国論
  6. 6. ■携帯開国論 ・ガラパゴスケータイからスマートフォンへ(シェア現状&予想) 2010年1 2010年2 2010年3 2010年4 月 月 月 月
  7. 7. ■携帯開国論 ・ガラパゴスケータイからスマートフォンへ(シェア現状&予想) 2010年1 2010年2 2010年3 2010年4 月 月 月 月
  8. 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. 9. ■携帯開国論 ・ガラパゴスケータイからスマートフォンへ(まとめ) ・2010年中にはモバイルユーザーの 1割がスマートフォンユーザーに。 2012年には2割に達する模様。 ・某ECサイトの売上中、スマートフォンユー ザーは既に1割以上に達している。 ※非公式情報
  10. 10. スマートフォン時代の ユーザビリティ
  11. 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. 12. ■スマートフォン時代のユーザビリティ ・ファーストビューの考え方(現モバイルサイト) 240p x ファーストビューにすべてのサー 320p ビスに対するショートカットが設け られている。 x ファーストビュー内に主要なメ ニューが収まっている。
  13. 13. ■スマートフォン時代のユーザビリティ ・ファーストビューの考え方(スマートフォンサイト) 320p x ファーストビューで検索ウィンドウ が見える。 主要なサービスに対するショート カットが設けられている。 480p x
  14. 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. 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. 16. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html
  17. 17. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 スマートフォンで完全版が表示可 能なブラウザはDesire(Softbank) のみ!
  18. 18. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 それ以外のスマートフォン(i- Phone3G、Xperiaでも同様)で は、グダグダ版のドラえもんが表 示される… ※後ろはPCのIE8版
  19. 19. ■スマートフォン時代のユーザビリティ ・ OSとHTML5+CSS3対応状況 http://lomo.hmds.jp/anpanman/
  20. 20. ■スマートフォン時代のユーザビリティ ・サイト傾向 タブ切替型 アイコン型 プロパティ型 (リスト型)
  21. 21. ■スマートフォン時代のユーザビリティ ・サイト傾向 複合型
  22. 22. ■スマートフォン時代のユーザビリティ ・モバイルサイトのユーザビリティ http://www.lottesoh.jp/
  23. 23. ■スマートフォン時代のユーザビリティ ・モバイルサイトのユーザビリティ ユーザー視点でつくる 携帯サイト制作の基礎知識
  24. 24. スマートフォンと 共存するために。
  25. 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. 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. 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. 28. ■スマートフォンと共存するために。 ・端末振分け メディアクエリー .htaccess PHP 環境に応じて、いずれかの機能を利 用して振分けを実行しましょう。
  29. 29. ■スマートフォンと共存するために。 ・文字サイズ 既存のPCサイトやモバイルサイトの文字サイズ指定だ と、スマートフォン上で表示される文字サイズは小さく表 示されてしまう。そこで・・・ -webkit-text-size-adjust 150 % iPhone(MobileSafari)での独自拡張
  30. 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. 31. ■スマートフォンと共存するために。 ・スマートフォンの検証方法 ▼Windows向けスマートフォン検証ツール http://gadget.journal.mycom.co. jp/widget/_pri_m92D5xxY.html?cat=&key=2 ※ただし、前述のドラえもんのように微妙に違うので注意。 ▼その他、簡易的にPCのSafari4等で検証可能。 ※ただし、前述のドラえもんのように微妙に違うので注意。
  32. 32. デザインサンプル
  33. 33. ■デザインサンプル ・モバイルサイト
  34. 34. ■デザインサンプル ・iPhoneサイト(日本)
  35. 35. ■デザインサンプル ・iPhoneサイト(海外)
  36. 36. ■デザインサンプル ・PCサイト(Yahoo)
  37. 37. ■デザインサンプル ・スマートフォンサイト(Yahoo) 新デザイン 旧デザイン
  38. 38. ■デザインサンプル ・PCサイト(マイコミジャーナル)
  39. 39. ■デザインサンプル ・スマートフォンサイト(マイコミジャーナル)
  40. 40. ■デザインサンプル ・もっと見たい方は・・・ モバイルデザインアーカイブ http://mobiledesignarchive.jp/ iPhoneデザインアーカイブ http://iphonedesignarchive.jp/
  41. 41. 失敗談 ・画像の容量オーバーで表示できなくなった。 ・面倒がって3キャリアの端末を2キャリア分しか検証せ ず、さぼった1キャリアが崩れていた。 ・前段での握りが甘いと失敗してしまいがちです。遠慮せ ずに不明点や疑問点は事前に詰めておかないと面倒で す。 ・クライアントへのグチを本人に送ってしまった。
  42. 42. 質疑応答
  43. 43. プレゼント
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×