マークアップ講座 03 スマートフォン・デバイス最適化

マークアップ講座

デバイス最適化

1. スマートフォン端末

2. スマートフォン・マークアップ

3. フロントエンドパフォーマンス

4. コーディングレギュレーション

1. スマートフォン端末

2. スマートフォン・マークアップ

3. フロントエンドパフォーマンス

4. コーディングレギュレーション

1. 解像度

2. Retinaディスプレイ

3. スマートフォン・ブラウザ

1. スマートフォン端末

1. 解像度

2. Retinaディスプレイ

3. スマートフォン・ブラウザ

1. スマートフォン端末

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

1-1. 解像度

スマートフォン解像度 iPhone 6 Plusの解像度の仕組み

『PaintCode』 http://www.paintcodeapp.com/news/iphone-6-screens-demystified

スマートフォン解像度 代表的な解像度

デバイス 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

1-1. 解像度

タブレット解像度 代表的な解像度

デバイス CSSピクセル （ブラウザピクセル）

デバイス ピクセル比

解像度 インチ

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

1-1. 解像度

1. 解像度

2. Retinaディスプレイ

3. スマートフォン・ブラウザ

1. スマートフォン端末

Retinaディスプレイ（高精細ディスプレイ）

“Retinaディスプレイ”はApple社の高精細ディスプレイ 高精細ディスプレイはデバイスピクセル比が１より大きいディスプレイのこと

1-2. Retinaディスプレイ

Retinaディスプレイ向けデザイン

2014年現在、制作上おもに重要とされる高精細ディスプレイはスマートフォン、タブレット搭載のもの

※ PCの高精細ディスプレイへのデザイン対応はまだ一般的とは言えない

1-2. Retinaディスプレイ

iPhone 5S、iPhone 5の場合• デザインカンプは短辺横640pxで作成 • 短辺横320pxのリキッドレイアウトでマークアップ(※)

• デザインの最小単位（最も細い罫線など）を2pxでデザイン

(※) 次項で説明

1-2. Retinaディスプレイ

iPhone 6 Plus（予想）の場合

※ iPhone 6 Plus発売後、徐々に3倍psdに移行することが予想される

• デザインカンプは短辺横1080px（または1242px）で作成

• 短辺横414px（予想）のリキッドレイアウトでマークアップ(※)

• デザインの最小単位（最も細い罫線など）を3px（予想）でデザイン

(※) 次項で説明

1-2. Retinaディスプレイ

1. 解像度

2. Retinaディスプレイ

3. スマートフォン・ブラウザ

1. スマートフォン端末

browser 最新ver vendor engine browser

iOS Mobile Safari 7 Apple WebKit iOS Mobile Safari

iOS Chrome（ネイティブアプリ UIWebView）

36 Google WebKitiOS Chrome（ネイティブアプリ UIWebView）

Android Mobile Safari（標準ブラウザ）

4 Apple WebKit Android Mobile Safari（標準ブラウザ）

Android Mobile Safari - Chrome（新標準ブラウザ）

1（Chrome 18）

Google WebKit Android Mobile Safari - Chrome（新標準ブラウザ）

Android Chrome 36 Google Blink Android Chrome

1-3. スマートフォン・ブラウザ

1. スマートフォン端末

2. スマートフォン・マークアップ

3. フロントエンドパフォーマンス

4. コーディングレギュレーション

1. マークアップ実践

2. 検証環境

2. スマートフォン・マークアップ

1. マークアップ実践

2. 検証環境

2. スマートフォン・マークアップ

2-1. マークアップ実践

1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み

2-1. マークアップ実践

1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み

viewport2-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

width2-1-1. viewport

• ウィンドウの横幅を設定 • device-widthにして端末毎のCSSピクセルのデフォルトの横幅に設定

initial-scale• デフォルト表示時の拡大率 • 1.0に設定して拡縮をさせない

maximum-scale2-1-1. viewport

• 表示拡大率の最大値 • 1.0に設定して拡大表示を抑止

user-scalable• ピンチ動作の可否を設定 • noに設定してピンチ動作を抑止

2-1-1. viewport※ デバイスのorientation• ユーザーがスマートフォンを持っている時の位置 • ポートレート（縦位置）とランドスケープ（横位置） • ユーザーの設定によりオリエンテーション変更は止めることがで

きる • スマホブラウザではコンテンツ側からオリエンテーション変更を

止めることはできない

Portrait Landscape

2-1. マークアップ実践

1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み

format-detection2-1-2. format-detection

!<meta name="format-detection" content="telephone=no,address=no,email=no">

• 自動的にリンクを生成する機能

• 不要な動作を防ぎたい場合はオフにしておく

2-1. マークアップ実践

1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み

画像表示 1 img要素の場合2-1-3. 画像表示 1 img要素の場合

!■ HTML <img src="sample.png" class="sample-image"> !■ CSS .sample-image { width: 100px; }

短辺横640px（デバイスピクセル比2）のデザインカンプにおいて、画像の横幅値が200pxの画像の場合

• CSSによって横幅値をデザインカンプの半分に表示されるよう設定する

2-1. マークアップ実践

1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み

画像表示 2 背景画像の場合2-1-4. 画像表示 2 背景画像の場合

■ 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; }

短辺横640px（デバイスピクセル比2）のデザインカンプにおいて、画像の縦・横幅値が200pxの正方形画像の場合

• CSSによって縦・横幅値をデザインカンプの半分に表示されるよう設定する

2-1. マークアップ実践

1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み

font2-1-5. スマートフォン最適化CSS

!html { font-family: Helvetica, Roboto, 'Droid Sans', 'Hiragino Kaku Gothic Pro', sans-serif; }

• font-familyの一例

text-size-adjust2-1-5. スマートフォン最適化CSS

!html { -webkit-text-size-adjust: 100%; }

• ランドスケープ表示時にフォントが拡大されるのを抑止

tap-highlight-color2-1-5. スマートフォン最適化CSS

!a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

• Androidにおいてタップ時に表示される枠を解消

break-all2-1-5. スマートフォン最適化CSS

!* { word-break: break-all; }

• 横幅表現に限りがあるスマートフォンにおける英文の表示トラブルを防止

2-1. マークアップ実践

1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み

減色・圧縮2-1-6. 画像最適化

ImageAlpha （Mac）

『ImageAlpha ̶ image minifier』 http://pngmini.com/

Pngyu （Win、Mac）『 Pngyu』 http://nukesaq88.github.io/Pngyu/

適正化2-1-6. 画像最適化

ImageOptim （Mac）

『ImageOptim ̶ better Save For Web』 http://imageoptim.com/

• 余分な情報をクリーンアップして軽量化 • gruntに組み込むことも可能

2-1. マークアップ実践

1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み

ジェネレータ2-1-7. ホームアイコン

『Makeappicon - Generate app icons of all sizes in a click!』 http://makeappicon.com/

• 1024✕1024で出力した画像（jpg, png, psd）をドラッグドロップ

ホームアイコンデザインの注意点2-1-7. ホームアイコン

• アイコンの角を丸めなくてもiOS側で角は丸められる

• ただしAndroidでは直角のまま出力される • 角を丸めてデザインする場合はテンプレートを利用する

『App Icon Template』 http://appicontemplate.com/ http://appicontemplate.com/ios7

ホームアイコンの設置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に変更

iOS6までの記述 「-precomposed」がiOS7で不要に

2-1-7. ホームアイコン

!<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">

iOS6までの記述 「-precomposed」がiOS7で不要に

2-1-7. ホームアイコン

• iOS6までは rel="apple-touch-icon-precomposed" のよう

に「-precomposed」接尾辞をつけて、アイコンに自動でかけ

られてしまう反射効果を明示的にかからないように設定していた • iOS7からのフラットデザインにより効果は付与されなくなった

ため、「-precomposed」は不要になる • Android OSのアイコン選択にも影響があった「-

precomposed」が不要になるのは歓迎できる

2-1. マークアップ実践

1. viewport 2. format-detection 3. 画像表示 1 img要素の場合 4. 画像表示 2 背景画像の場合 5. スマートフォン最適化CSS 6. 画像最適化 7. ホームアイコン 8. 画像遅延読み込み

画像遅延読み込み2-1-8. 画像遅延読み込み

• ファーストビューから外れる画像は初期レンダリング時にロードしないでおく

• スクロール、タップなどのユーザーアクションに応じて残りを読み込む

• リクエスト数削減に効果大

『Lazy Load Plugin for jQuery』 http://www.appelsiini.net/projects/lazyload http://www.appelsiini.net/projects/lazyload/enabled_timeout.html

画像遅延読み込み2-1-8. 画像遅延読み込み【補足】

!

<script src="[ファイルパス]/jquery-2.1.1.min.js”></script>

※ jQueryバージョン

• スマートフォンにはver.2が利用可能

【TOPIC】スマートフォンとSEO2-1. マークアップ実践

• SPサイトにおいても基本はPCと同じ、重要なSEO要素はtitle要

素、description、keywords、h1、etc… • レスポンシブそのもののSEO効果は特別に高くはない • レスポンシブにおいてPCとSPが同構造であるためキーワード運用

効率は高いと言える • PCとSPが同URL構造であることも評価される • SPサイトにおけるSEO重要項目は、"スマートフォン適正化サイト

が存在すること"

（2014年9月現在）

1. マークアップ実践

2. 検証環境

2. スマートフォン・マークアップ

シミュレーター2-2. 検証環境

iOS ： iOSシミュレーター （Mac）

『Xcode』 https://developer.apple.com/jp/xcode/

※ iOSシミュレーターを一発起動

『iWebInspector』 http://www.iwebinspector.com/

シミュレーター2-2. 検証環境

Android ： Genymotion（Win、Mac、Linux）

『Genymotion』 http://www.genymotion.com/

Browser2-2. 検証環境

『Chrome Developer Tools』 https://developer.chrome.com/devtools

リンクツール2-2. 検証環境

Chrome to Mobile 拡張機能 （Chrome Mobile）

『Chrome to Mobile 拡張機能』 https://support.google.com/chrome/answer/2451559?p=ib_chrome_to_mobile&rd=1

リンクツール2-2. 検証環境

Chrome to Phone 拡張機能 （Android）

『Google Chrome to Phone 拡張機能』 https://chrome.google.com/webstore/detail/google-chrome-to-phone-ex/oadboiipflhobonjjffjbfekfjcgkhco

1. スマートフォン端末

2. スマートフォン・マークアップ

3. フロントエンドパフォーマンス

4. コーディングレギュレーション

3. フロントエンドパフォーマンス

目標にすべき表示速度• 0.1 秒

• 1 秒

• 10 秒

『フロントエンドエンジニア養成読本』 http://www.amazon.co.jp/gp/product/4774165786 佐藤 歩氏（http://twitter.com/ahomu）記

：　即応を実感

：　遅延を感じる

：　関心の限界Jakob Nielse

http://www.nngroup.com/articles/response-times-3-important-limits/ より引用

1. リソース記述位置

2. リクエスト数

3. minify、画像最適化

3. フロントエンドパフォーマンス

1. リソース記述位置

2. リクエスト数

3. minify、画像最適化

3. フロントエンドパフォーマンス

✕ worst case3-1. リソース記述位置

JS → HTML → CSS

http://test0001.s-ej.com/54/s01.html http://www.webpagetest.org/result/140911_Y0_6AK/

• Start Render遅延

△ bad case3-1. リソース記述位置

HTML → JS → CSS

http://test0001.s-ej.com/54/s02.html http://www.webpagetest.org/result/140911_GD_6B1/

• FOUC(Flash of Unstyled Content)発症

◯ good case3-1. リソース記述位置

CSS → HTML → JS

http://test0001.s-ej.com/54/s03.html http://www.webpagetest.org/result/140911_01_6BS/

1. リソース記述位置

2. リクエスト数

3. minify、画像最適化

3. フロントエンドパフォーマンス

✕ bad case3-2. リクエスト数

10 requests each

http://test0001.s-ej.com/54/s11.html http://www.webpagetest.org/result/140911_M5_74P/

• Speed Index遅延

style1～10.css img1～10.jpg script1～10.js

3-2. リクエスト数

concated 1 request each

http://test0001.s-ej.com/54/s12.html http://www.webpagetest.org/result/140911_3M_753/

style.all.css img.all.jpg script.all.js

◯ good case

1. リソース記述位置

2. リクエスト数

3. minify、画像最適化

3. フロントエンドパフォーマンス

✕ bad case3-3. minify、画像最適化

concated 1 request each

http://test0001.s-ej.com/54/s12.html http://www.webpagetest.org/result/140911_3M_753/

• Speed Index遅延

style.all.css img.all.jpg script.all.js

concated and minified 1 request each

http://test0001.s-ej.com/54/s13.html http://www.webpagetest.org/result/140911_84_7F5/

style.all.min.css img.all.comp.jpg script.all.min.js

◯ good case3-3. minify、画像最適化

1. スマートフォン端末

2. スマートフォン・マークアップ

3. フロントエンドパフォーマンス

4. コーディングレギュレーション

1. PC

2. SP

4. コーディングレギュレーション

HTMLテンプレート・サンプル4-1. PC

https://github.com/sekiyaeiji/html_template/blob/master/pc.html

フロントエンド・コーディング・レギュレーション

http://qiita.com/sekiyaeiji/items/a0bb846a8e87efc8d406

HTMLテンプレート・サンプル4-2. SP

https://github.com/sekiyaeiji/html_template/blob/master/sp.html

フロントエンド・コーディング・レギュレーション

http://qiita.com/sekiyaeiji/items/2f43a4f8683492d6df9b