スマートフォン実機検証のコツ 基本編
DESCRIPTION
スマートフォンサイト制作の際、実機検証を行う上でのポイントをまとめてみました。 テスト項目は案件に寄って様々だと思いますので、端末のセレクト基準や、ちょっとした気遣いどころを挙げています。TRANSCRIPT
![Page 1: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/1.jpg)
© 2013 enomotoS. All Rights Reserved.
スマートフォン実機検証のコツ基本編
2013年9月27日
ver,2.00
榎本 里美
スマデバ塾:3限目
![Page 2: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/2.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
自己紹介
氏名 榎本 里美(ENOMOTO Satomi)
職種 Webディレクター
経歴
2005年4月に大手印刷会社に新卒入社。
各種銀行の帳票設計や製造工程設計のディレクション、及び
キャラクター版権管理ビジネス、キャラクター開発分野での
企画・プロデュースを担当していました。
2011年7月より、Web制作会社にて
スマートデバイス専門のテクニカルディレクターとして
大手企業サイトや商品紹介サイト、キャンペーンサイト
などのスマートフォン最適化をディレクションしています。
趣味 写真旅行/世界遺産巡り
Satomi Enomoto
Facebookページはじめました。 → → → Webディレクター視点
@enos_tw
© 2013 enomotoS. All Rights Reserved. 2
![Page 3: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/3.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
目次
© 2013 enomotoS. All Rights Reserved.
はじめに
Step1:端末を選ぶ
Step2:チェックポイント
3
![Page 4: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/4.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved. 4
![Page 5: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/5.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
検証していますか?
5
![Page 6: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/6.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
どんなデバイスで検証していますか?
6
![Page 7: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/7.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
シミュレータでの検証は
じつはあまり意味がないです。
7
![Page 8: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/8.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
iOSはともかく、
Androidは
機種依存/OSバージョン依存が激しいです
8
![Page 9: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/9.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
iOSであっても油断はなりません。
OSのバージョンによって
環境依存が発生します。
9
![Page 10: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/10.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
実機検証では、
なるべく多くの実機で
なるべく多くのOSバージョンと
なるべく多くの画面解像度の端末と
iOSとAndroidの両方を
チェックすることが肝要です。
10
![Page 11: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/11.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
とはいえ、
予算と時間によって
検証できる端末数は限られます。
11
![Page 12: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/12.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
事前に、得意先と
検証する「OSの種類」と「OSのバージョン」
を取り決めておきましょう。
12
![Page 13: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/13.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
余談ですが
![Page 14: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/14.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
「シミュレータって何?」
という方・・・
14
![Page 15: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/15.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
PCのブラウザ上などで
擬似的にスマートフォンサイトを見られる
ツールが世の中にはたくさんあります。
15
![Page 16: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/16.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
例えば、
Firefoxのアドオン
「FireMobileSimulator」など。
16
![Page 17: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/17.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
各種ブラウザのアドオンは
検証に役立つものもたくさんあるので
活用しましょう!
17
![Page 18: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/18.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
余談:私が使っているアドオン(Firefox編)
18
![Page 19: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/19.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
ついでに
QRコード生成ツールを入れておくと
超便利
19
![Page 20: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/20.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
許されるのであれば、
BASIC認証のIDは「短め(半角英字のみが望ましい)」に
パスワードは「半角英数のみ or 半角英字のみ」
に設定してもらいましょう。
※スマートフォン実機での入力負荷がハンパないため※
※最低限のラインは、各種セキュリティ規則に準じてください※
20
![Page 21: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/21.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
Step1:端末を選ぶ
© 2013 enomotoS. All Rights Reserved. 21
![Page 22: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/22.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
Step1:端末を選ぶ
© 2013 enomotoS. All Rights Reserved.
端末は、案件の仕様に応じて
都度選びましょう。
・画面解像度のバリエーション
・OSのバリエーション
・OSバージョンのバリエーション
・DB連携がおかしい系(富士通東芝系)
・癖がある系(HTC、LG、Xperiaなど)
…etc
22
![Page 23: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/23.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
Step1:端末を選ぶ
© 2013 enomotoS. All Rights Reserved.
2013年9月時点で
押さえておきたいOSとバージョン
・Android 4.1・Android 2.3・iOS6 (iPhone5)・iOS7 (iPhone5s)・Android 4.2・Android 4.0・iOS7 (iPhone5c)・iOS5 (iPhone4s)
※優先順
※iOSのバージョンと、端末の組み合わせは任意可です。なるべく散らすのがオススメ。
※上記に該当する、自社検証機をセレクトして下さい。
23
![Page 24: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/24.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
Step2:チェックポイント
© 2013 enomotoS. All Rights Reserved. 24
![Page 25: スマートフォン実機検証のコツ 基本編](https://reader031.vdocuments.net/reader031/viewer/2022012405/556a746ad8b42a7c758b45f9/html5/thumbnails/25.jpg)
スマートフォンサイト実機検証のコツ ~基本編~
Step2:チェックポイント
© 2013 enomotoS. All Rights Reserved.
1. ランドスケープ時の表示崩れがないこと
2. マージン、フォント、フォントサイズがデザインと相違ないこと
3. ファビコン/ウェブクリップアイコンがセットされていること
(AndroidではBASIC環境下での表示ができない。iPhoneで確認可能。)
4. リンクの遷移が仕様通りであること
5. JSの挙動が正しいこと(JS周りは念入りに!)
6. リンクをタップした際、有効選択範囲が狭すぎないこと
7. SNSの投稿文言、画像などが仕様通りであること
8. 入力フォームの挙動が正しいこと(とくにiPhoneの数字入力系)
25
チェックポイント(最低限)