More Related Content Similar to スマートフォンサイトのトレンドとユーザビリティ (20) More from SwapSkills (13) スマートフォンサイトのトレンドとユーザビリティ4. ■実績
Web creators ユーザー視点でつくる
2009年7月号 携帯サイト制作の基礎知識
執筆記事掲載
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
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));
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]