スマートフォンサイト制作の際、実機検証を行う上でのポイントをまとめてみました。 テスト項目は案件に寄って様々だと思いますので、端末のセレクト基準や、ちょっとした気遣いどころを挙げています。

1. © 2013 enomotoS. All Rights Reserved.
スマートフォン実機検証のコツ
基本編
2013年9月27日
ver,2.00
榎本 里美
スマデバ塾：3限目

2. スマートフォンサイト実機検証のコツ ～基本編～
自己紹介
氏名 榎本 里美（ENOMOTO Satomi）
職種 Webディレクター
経歴
2005年4月に大手印刷会社に新卒入社。
各種銀行の帳票設計や製造工程設計のディレクション、及び
キャラクター版権管理ビジネス、キャラクター開発分野での
企画・プロデュースを担当していました。
2011年7月より、Web制作会社にて
スマートデバイス専門のテクニカルディレクターとして
大手企業サイトや商品紹介サイト、キャンペーンサイト
などのスマートフォン最適化をディレクションしています。
趣味 写真旅行／世界遺産巡り
Satomi Enomoto
Facebookページはじめました。 → → → Webディレクター視点
@enos_tw
© 2013 enomotoS. All Rights Reserved. 2

3. スマートフォンサイト実機検証のコツ ～基本編～
目次
© 2013 enomotoS. All Rights Reserved.
 はじめに
 Step1：端末を選ぶ
 Step2：チェックポイント
3

4. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved. 4

5. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
検証していますか？
5

6. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
どんなデバイスで検証していますか？
6

7. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
シミュレータでの検証は
じつはあまり意味がないです。
7

8. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
iOSはともかく、
Androidは
機種依存／OSバージョン依存が激しいです
8

9. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
iOSであっても油断はなりません。
OSのバージョンによって
環境依存が発生します。
9

10. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
実機検証では、
なるべく多くの実機で
なるべく多くのOSバージョンと
なるべく多くの画面解像度の端末と
iOSとAndroidの両方を
チェックすることが肝要です。
10

11. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
とはいえ、
予算と時間によって
検証できる端末数は限られます。
11

12. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
事前に、得意先と
検証する「OSの種類」と「OSのバージョン」
を取り決めておきましょう。
12

13. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
余談ですが

14. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
「シミュレータって何？」
という方・・・
14

15. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
PCのブラウザ上などで
擬似的にスマートフォンサイトを見られる
ツールが世の中にはたくさんあります。
15

16. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
例えば、
Firefoxのアドオン
「FireMobileSimulator」など。
16

17. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
各種ブラウザのアドオンは
検証に役立つものもたくさんあるので
活用しましょう！
17

18. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
余談：私が使っているアドオン（Firefox編）
18

19. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
ついでに
QRコード生成ツールを入れておくと
超便利
19

20. スマートフォンサイト実機検証のコツ ～基本編～
はじめに
© 2013 enomotoS. All Rights Reserved.
許されるのであれば、
BASIC認証のIDは「短め（半角英字のみが望ましい）」に
パスワードは「半角英数のみ or 半角英字のみ」
に設定してもらいましょう。
※スマートフォン実機での入力負荷がハンパないため※
※最低限のラインは、各種セキュリティ規則に準じてください※
20

21. スマートフォンサイト実機検証のコツ ～基本編～
Step1：端末を選ぶ
© 2013 enomotoS. All Rights Reserved. 21

22. スマートフォンサイト実機検証のコツ ～基本編～
Step1:端末を選ぶ
© 2013 enomotoS. All Rights Reserved.
端末は、案件の仕様に応じて
都度選びましょう。
・画面解像度のバリエーション
・OSのバリエーション
・OSバージョンのバリエーション
・DB連携がおかしい系（富士通東芝系）
・癖がある系（HTC、LG、Xperiaなど）
…etc
22

23. スマートフォンサイト実機検証のコツ ～基本編～
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

24. スマートフォンサイト実機検証のコツ ～基本編～
Step2：チェックポイント
© 2013 enomotoS. All Rights Reserved. 24

25. スマートフォンサイト実機検証のコツ ～基本編～
Step2:チェックポイント
© 2013 enomotoS. All Rights Reserved.
1. ランドスケープ時の表示崩れがないこと
2. マージン、フォント、フォントサイズがデザインと相違ないこと
3. ファビコン／ウェブクリップアイコンがセットされていること
（AndroidではBASIC環境下での表示ができない。iPhoneで確認可能。）
4. リンクの遷移が仕様通りであること
5. JSの挙動が正しいこと（JS周りは念入りに！）
6. リンクをタップした際、有効選択範囲が狭すぎないこと
7. SNSの投稿文言、画像などが仕様通りであること
8. 入力フォームの挙動が正しいこと（とくにiPhoneの数字入力系）
25
チェックポイント（最低限）