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

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

on

  • 14,030 views

SwapSkils2010 vol.4開催

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

Statistics

Views

Total Views
14,030
Views on SlideShare
13,870
Embed Views
160

Actions

Likes
9
Downloads
97
Comments
0

4 Embeds 160

http://swapskills.info 147
http://memo.fonfon.jp 9
http://www.health.medicbd.com 3
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • スマートフォンサイトの トレンドとユーザビリティ 2010年6月19日
  • ■アジェンダ ■携帯開国論(10分) ・ガラパゴスケータイからスマートフォンへ └シェア現状&予想 ■スマートフォン時代のユーザビリティ(25分) ・HTML5+CSS3対応状況 ・ファーストビュー ・サイトデザイン傾向 ■スマートフォンと共存するために。(30分) ・端末振分け ・文字サイズ ■デザインのサンプル ・ケータイサイトのデザイン ・iPhoneサイトのデザイン(国内) ・iPhoneサイトのデザイン(海外) ・PCサイトとの比較 ■ありがちな失敗談
  • ■自己紹介 (株)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月 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×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
  • ■スマートフォン時代のユーザビリティ ・ファーストビューの考え方(現モバイルサイト) 240p x ファーストビューにすべてのサー 320p ビスに対するショートカットが設け られている。 x ファーストビュー内に主要なメ ニューが収まっている。
  • ■スマートフォン時代のユーザビリティ ・ファーストビューの考え方(スマートフォンサイト) 320p x ファーストビューで検索ウィンドウ が見える。 主要なサービスに対するショート カットが設けられている。 480p x
  • ■スマートフォン時代のユーザビリティ ・ 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 △
  • ■スマートフォン時代のユーザビリティ ・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のみの仕
  • ■スマートフォンと共存するために。 ・端末振分け ■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; } ?>
  • ■スマートフォンと共存するために。 ・端末振分け ■.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]
  • ■スマートフォンと共存するために。 ・端末振分け メディアクエリー .htaccess PHP 環境に応じて、いずれかの機能を利 用して振分けを実行しましょう。
  • ■スマートフォンと共存するために。 ・文字サイズ 既存のPCサイトやモバイルサイトの文字サイズ指定だ と、スマートフォン上で表示される文字サイズは小さく表 示されてしまう。そこで・・・ -webkit-text-size-adjust 150 % iPhone(MobileSafari)での独自拡張
  • ■スマートフォンと共存するために。 ・モバイルサイトの検証方法 ▼docomo iモードHTMLシミュレータⅡ http://www.nttdocomo.co. jp/service/imode/make/content/browser/html/tool2/inde x.html ▼FireMobileSimulator http://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キャリアが崩れていた。 ・前段での握りが甘いと失敗してしまいがちです。遠慮せ ずに不明点や疑問点は事前に詰めておかないと面倒で す。 ・クライアントへのグチを本人に送ってしまった。
  • 質疑応答
  • プレゼント