More Related Content Similar to マークアップ講座 03 スマートフォン・デバイス最適化 (20) More from eiji sekiya (7) マークアップ講座 03 スマートフォン・デバイス最適化7. 1-1. 解像度
スマートフォン解像度
代表的な解像度
デバイスCSSピクセル
(ブラウザピクセル)
デバイス
ピクセル比
解像度インチ
iPhone 6 Plus 414 ✕ 736 2.61 1080 ✕ 1920 5.5
iPhone 6 375 ✕ 667 2 750 ✕ 1334 4.7
iPhone 5S 320 ✕ 568 2 640 ✕ 1136 4
iPhone 5 320 ✕ 568 2 640 ✕ 1136 4
iPhone 4S 320 ✕ 480 2 640 ✕ 960 3.5
iPhone 4 320 ✕ 480 2 640 ✕ 960 3.5
iPhone 3GS 320 ✕ 480 1 320 ✕ 480 3.5
iPhone 3G 320 ✕ 480 1 320 ✕ 480 3.5
8. 1-1. 解像度
スマートフォン解像度
iPhone 6 Plusの解像度の仕組み
『PaintCode』
http://www.paintcodeapp.com/news/
iphone-6-screens-demystified
9. 1-1. 解像度
スマートフォン解像度
代表的な解像度
デバイスCSSピクセル
(ブラウザピクセル)
デバイス
ピクセル比
解像度インチ
GALAXY Note 3
SC-01F 360 ✕ 640 3 1080 ✕ 1920 5.7
GALAXY S4 SC-04E 360 ✕ 640 3 1080 ✕ 1920 5
GALAXY S III SC-06D 360 ✕ 640 2 720 ✕ 1280 4.8
GALAXY S II 320 ✕ 533 1.5 480 ✕ 800 4.3
Nexus S 320 ✕ 533 1.5 480 ✕ 800 4
Xperia Z Ultra
(ファブレット) 540 ✕ 918 2 1080 ✕ 1920 6.4
XPERIA A SO-04E 360 ✕ 598 2 720 ✕ 1280 4.6
GALAXY Note 3
SC-01F 360 ✕ 640 3 1080 ✕ 1920 5.7
10. タブレット解像度
代表的な解像度
デバイスCSSピクセル
(ブラウザピクセル)
デバイス
ピクセル比
1-1. 解像度
解像度インチ
iPad Air 768 ✕ 1024 2 1536 ✕ 2048 9.7
iPad 3 768 ✕ 1024 2 1536 ✕ 2048 9.7
iPad 768 ✕ 1024 1 768 ✕ 1024 9.7
iPad mini 768 ✕ 1024 1 768 ✕ 1024 7.9
Nexus 10 800 ✕ 1280 2 1600 ✕ 2560 10
Nexus 7 (2013) 600 ✕ 960 2 1200 ✕ 1920 7
iPad Air 768 ✕ 1024 2 1536 ✕ 2048 9.7
iPad 3 768 ✕ 1024 2 1536 ✕ 2048 9.7
14. iPhone 5S、iPhone 5の場合
• デザインカンプは短辺横640pxで作成
• 短辺横320pxのリキッドレイアウトでマーク
アップ(※)
• デザインの最小単位(最も細い罫線など)を
2pxでデザイン
(※) 次項で説明
1-2. Retinaディスプレイ
15. iPhone 6 Plus(予想)の場合
• デザインカンプは短辺横1080px(または
1242px)で作成
• 短辺横414px(予想)のリキッドレイアウトで
マークアップ(※)
• デザインの最小単位(最も細い罫線など)を
3px(予想)でデザイン
※ iPhone 6 Plus発売後、徐々に3倍psdに移行することが予想される
(※) 次項で説明
1-2. Retinaディスプレイ
17. 1-3. スマートフォン・ブラウザ
browser 最新ver vendor engine browser
iOS Mobile Safari 7 Apple WebKit iOS Mobile Safari
iOS Chrome
iOS Chrome
(ネイティブアプリ
36 Google WebKit
(ネイティブアプリ
UIWebView)
UIWebView)
Android Mobile Safari
(標準ブラウザ) 4 Apple WebKit Android Mobile Safari
(標準ブラウザ)
Android Mobile Safari -
Chrome
(新標準ブラウザ)
1
Google WebKit Android Mobile Safari -
(Chrome 18) Chrome(新標準ブラウザ)
Android Chrome 36 Google Blink Android Chrome
21. 2-1. マークアップ実践
1. viewport
2. format-detection
3. 画像表示 1 img要素の場合
4. 画像表示 2 背景画像の場合
5. スマートフォン最適化CSS
6. 画像最適化
7. ホームアイコン
8. 画像遅延読み込み
22. 2-1. マークアップ実践
1. viewport
2. format-detection
3. 画像表示 1 img要素の場合
4. 画像表示 2 背景画像の場合
5. スマートフォン最適化CSS
6. 画像最適化
7. ホームアイコン
8. 画像遅延読み込み
23. viewport
2-1-1. viewport
!
<meta name="viewport" content=“width=device-width,
initial-scale=1.0,maximum-scale=1.0,user-scalable=
no">
• width=device-width
• initial-scale=1.0
• maximum-scale=1.0
• user-scalable=no
24. width
2-1-1. viewport
• ウィンドウの横幅を設定
• device-widthにして端末毎のCSSピクセルの
デフォルトの横幅に設定
initial-scale
• デフォルト表示時の拡大率
• 1.0に設定して拡縮をさせない
26. 2-1-1. viewport
※ デバイスのorientation
• ユーザーがスマートフォンを持っている時の位置
• ポートレート(縦位置)とランドスケープ(横位置)
• ユーザーの設定によりオリエンテーション変更は止めることがで
きる
• スマホブラウザではコンテンツ側からオリエンテーション変更を
止めることはできない
Portrait Landscape
27. 2-1. マークアップ実践
1. viewport
2. format-detection
3. 画像表示 1 img要素の場合
4. 画像表示 2 背景画像の場合
5. スマートフォン最適化CSS
6. 画像最適化
7. ホームアイコン
8. 画像遅延読み込み
29. 2-1. マークアップ実践
1. viewport
2. format-detection
3. 画像表示 1 img要素の場合
4. 画像表示 2 背景画像の場合
5. スマートフォン最適化CSS
6. 画像最適化
7. ホームアイコン
8. 画像遅延読み込み
30. 2-1-3. 画像表示 1 img要素の場合
画像表示 1 img要素の場合
短辺横640px(デバイスピクセル比2)のデザインカンプにお
いて、画像の横幅値が200pxの画像の場合
!
■ HTML
<img src="sample.png" class="sample-image">
!
■ CSS
.sample-image {
width: 100px;
}
• CSSによって横幅値をデザインカンプの半分に表示される
よう設定する
31. 2-1. マークアップ実践
1. viewport
2. format-detection
3. 画像表示 1 img要素の場合
4. 画像表示 2 背景画像の場合
5. スマートフォン最適化CSS
6. 画像最適化
7. ホームアイコン
8. 画像遅延読み込み
32. 2-1-4. 画像表示 2 背景画像の場合
画像表示 2 背景画像の場合
短辺横640px(デバイスピクセル比2)のデザインカンプにお
いて、画像の縦・横幅値が200pxの正方形画像の場合
■ HTML
<div class="sample-block"></div>
!
■ CSS
.sample-block {
width: 100px;
height: 100px;
background-image: url(sample.png);
background-repeat: no-repeat;
background-size: 100px 100px;
}
• CSSによって縦・横幅値をデザインカンプの半分に表示さ
れるよう設定する
33. 2-1. マークアップ実践
1. viewport
2. format-detection
3. 画像表示 1 img要素の場合
4. 画像表示 2 背景画像の場合
5. スマートフォン最適化CSS
6. 画像最適化
7. ホームアイコン
8. 画像遅延読み込み
34. 2-1-5. スマートフォン最適化CSS
font
!
html {
font-family: Helvetica, Roboto, 'Droid Sans', 'Hiragino
Kaku Gothic Pro', sans-serif;
}
• font-familyの一例
38. 2-1. マークアップ実践
1. viewport
2. format-detection
3. 画像表示 1 img要素の場合
4. 画像表示 2 背景画像の場合
5. スマートフォン最適化CSS
6. 画像最適化
7. ホームアイコン
8. 画像遅延読み込み
39. 2-1-6. 画像最適化
減色・圧縮
ImageAlpha (Mac)
『ImageAlpha ̶ image minifier』
http://pngmini.com/
Pngyu (Win、Mac)
『 Pngyu』
http://nukesaq88.github.io/Pngyu/
40. 適正化
2-1-6. 画像最適化
ImageOptim (Mac)
『ImageOptim ̶ better Save For Web』
http://imageoptim.com/
• 余分な情報をクリーンアップして軽量化
• gruntに組み込むことも可能
41. 2-1. マークアップ実践
1. viewport
2. format-detection
3. 画像表示 1 img要素の場合
4. 画像表示 2 背景画像の場合
5. スマートフォン最適化CSS
6. 画像最適化
7. ホームアイコン
8. 画像遅延読み込み
42. 2-1-7. ホームアイコン
ジェネレータ
『Makeappicon - Generate app
icons of all sizes in a click!』
http://makeappicon.com/
• 1024✕1024で出力した画像(jpg, png,
psd)をドラッグドロップ
43. 2-1-7. ホームアイコン
ホームアイコンデザインの注意点
• アイコンの角を丸めなくてもiOS側で角は丸
められる
• ただしAndroidでは直角のまま出力される
• 角を丸めてデザインする場合はテンプレート
を利用する
『App Icon Template』
http://appicontemplate.com/
http://appicontemplate.com/ios7
44. 2-1-7. ホームアイコン
ホームアイコンの設置
!
<link rel="apple-touch-icon" sizes="152x152" href="/icon/Icon-76@2x.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icon/Icon-72@2x.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icon/Icon-60@2x.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icon/Icon@2x.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icon/Icon-76.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icon/Icon-72.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icon/Icon-60.png">
<link rel="apple-touch-icon" sizes="57x57" href="/icon/Icon.png">
<link rel="shortcut icon" href="/icon/favicon.ico">
※ 「favicon.ico」自作
16✕16pxのpngを出力し拡張子を.icoに変更
45. 2-1-7. ホームアイコン
iOS6までの記述
「-precomposed」がiOS7で不要に
!
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/icon/
Icon-76@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icon/
Icon-72@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/icon/
Icon-60@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/icon/Icon@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/icon/Icon-76.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/icon/Icon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="/icon/Icon-60.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/icon/Icon.png">
<link rel="shortcut icon" href="/icon/favicon.ico">
46. 2-1-7. ホームアイコン
iOS6までの記述
「-precomposed」がiOS7で不要に
• iOS6までは rel="apple-touch-icon-precomposed" のよう
に「-precomposed」接尾辞をつけて、アイコンに自動でかけ
られてしまう反射効果を明示的にかからないように設定していた
• iOS7からのフラットデザインにより効果は付与されなくなった
ため、「-precomposed」は不要になる
• Android OSのアイコン選択にも影響があった「-
precomposed」が不要になるのは歓迎できる
47. 2-1. マークアップ実践
1. viewport
2. format-detection
3. 画像表示 1 img要素の場合
4. 画像表示 2 背景画像の場合
5. スマートフォン最適化CSS
6. 画像最適化
7. ホームアイコン
8. 画像遅延読み込み
48. 2-1-8. 画像遅延読み込み
画像遅延読み込み
• ファーストビューから外れる画像は初期レンダリン
グ時にロードしないでおく
• スクロール、タップなどのユーザーアクションに応
じて残りを読み込む
• リクエスト数削減に効果大
『Lazy Load Plugin for jQuery』
http://www.appelsiini.net/projects/lazyload
http://www.appelsiini.net/projects/lazyload/
enabled_timeout.html
50. 2-1. マークアップ実践
【TOPIC】スマートフォンとSEO
• SPサイトにおいても基本はPCと同じ、重要なSEO要素はtitle要
素、description、keywords、h1、etc…
• レスポンシブそのもののSEO効果は特別に高くはない
• レスポンシブにおいてPCとSPが同構造であるためキーワード運用
効率は高いと言える
• PCとSPが同URL構造であることも評価される
• SPサイトにおけるSEO重要項目は、"スマートフォン適正化サイト
が存在すること"
(2014年9月現在)
52. シミュレーター
2-2. 検証環境
iOS : iOSシミュレーター (Mac)
『Xcode』
https://developer.apple.com/jp/xcode/
※ iOSシミュレーターを一発起動
『iWebInspector』
http://www.iwebinspector.com/
53. シミュレーター
2-2. 検証環境
Android : Genymotion
(Win、Mac、Linux)
『Genymotion』
http://www.genymotion.com/
54. Browser
2-2. 検証環境
『Chrome Developer Tools』
https://developer.chrome.com/
devtools
55. リンクツール
2-2. 検証環境
Chrome to Mobile 拡張機能
(Chrome Mobile)
『Chrome to Mobile 拡張機能』
https://support.google.com/chrome/
answer/2451559?
p=ib_chrome_to_mobile&rd=1
56. リンクツール
2-2. 検証環境
Chrome to Phone 拡張機能
(Android)
『Google Chrome to Phone 拡張機能』
https://chrome.google.com/webstore/
detail/google-chrome-to-phone-ex/
oadboiipflhobonjjffjbfekfjcgkhco
58. 3. フロントエンドパフォーマンス
目標にすべき表示速度
• 0.1 秒
• 1 秒
• 10 秒
: 即応を実感
: 遅延を感じる
: 関心の限界
Jakob Nielse
http://www.nngroup.com/articles/response-times-3-important-limits/
より引用
『フロントエンドエンジニア養成読本』
http://www.amazon.co.jp/gp/product/4774165786
佐藤 歩氏(http://twitter.com/ahomu)記
61. 3-1. リソース記述位置
✕ worst case
JS → HTML → CSS
http://test0001.s-ej.com/54/s01.html
http://www.webpagetest.org/result/
140911_Y0_6AK/
• Start Render遅延
62. 3-1. リソース記述位置
△ bad case
HTML → JS → CSS
http://test0001.s-ej.com/54/s02.html
http://www.webpagetest.org/result/
140911_GD_6B1/
• FOUC(Flash of Unstyled Content)発症
63. 3-1. リソース記述位置
◯ good case
CSS → HTML → JS
http://test0001.s-ej.com/54/s03.html
http://www.webpagetest.org/result/
140911_01_6BS/
65. 3-2. リクエスト数
✕ bad case
10 requests each
style1~10.css
img1~10.jpg
script1~10.js
http://test0001.s-ej.com/54/s11.html
http://www.webpagetest.org/result/140911_M5_74P/
• Speed Index遅延
66. 3-2. リクエスト数
◯ good case
concated 1 request each
style.all.css
img.all.jpg
script.all.js
http://test0001.s-ej.com/54/s12.html
http://www.webpagetest.org/result/140911_3M_753/
68. 3-3. minify、画像最適化
✕ bad case
concated 1 request each
style.all.css
img.all.jpg
script.all.js
http://test0001.s-ej.com/54/s12.html
http://www.webpagetest.org/result/140911_3M_753/
• Speed Index遅延
69. 3-3. minify、画像最適化
◯ good case
concated and minified 1 request each
style.all.min.css
img.all.comp.jpg
script.all.min.js
http://test0001.s-ej.com/54/s13.html
http://www.webpagetest.org/result/140911_84_7F5/
72. 4-1. PC
HTMLテンプレート・サンプル
https://github.com/sekiyaeiji/
html_template/blob/master/pc.html
フロントエンド・コーディング・
レギュレーション
http://qiita.com/sekiyaeiji/items/
a0bb846a8e87efc8d406
73. 4-2. SP
HTMLテンプレート・サンプル
https://github.com/sekiyaeiji/
html_template/blob/master/sp.html
フロントエンド・コーディング・
レギュレーション
http://qiita.com/sekiyaeiji/items/
2f43a4f8683492d6df9b