スマートフォン実機検証のコツ基本編

© 2013 enomotoS. All Rights Reserved.

スマートフォン実機検証のコツ基本編

2013年9月27日

ver,2.00

榎本里美

スマデバ塾：3限目

スマートフォンサイト実機検証のコツ～基本編～

自己紹介

氏名榎本里美（ENOMOTO Satomi）

職種 Webディレクター

経歴

2005年4月に大手印刷会社に新卒入社。

各種銀行の帳票設計や製造工程設計のディレクション、及び

キャラクター版権管理ビジネス、キャラクター開発分野での

企画・プロデュースを担当していました。

2011年7月より、Web制作会社にて

スマートデバイス専門のテクニカルディレクターとして

大手企業サイトや商品紹介サイト、キャンペーンサイト

などのスマートフォン最適化をディレクションしています。

趣味写真旅行／世界遺産巡り

Satomi Enomoto

Facebookページはじめました。 → → → Webディレクター視点

@enos_tw

© 2013 enomotoS. All Rights Reserved. 2


目次


はじめに

Step1：端末を選ぶ

Step2：チェックポイント

3


はじめに



はじめに


検証していますか？

5


はじめに


どんなデバイスで検証していますか？

6


はじめに


シミュレータでの検証は

じつはあまり意味がないです。

7


はじめに


iOSはともかく、

Androidは

機種依存／OSバージョン依存が激しいです

8


はじめに


iOSであっても油断はなりません。

OSのバージョンによって

環境依存が発生します。

9


はじめに


実機検証では、

なるべく多くの実機で

なるべく多くのOSバージョンと

なるべく多くの画面解像度の端末と

iOSとAndroidの両方を

チェックすることが肝要です。

10


はじめに


とはいえ、

予算と時間によって

検証できる端末数は限られます。

11


はじめに


事前に、得意先と

検証する「OSの種類」と「OSのバージョン」

を取り決めておきましょう。

12


はじめに


余談ですが


はじめに


「シミュレータって何？」

という方・・・

14


はじめに


PCのブラウザ上などで

擬似的にスマートフォンサイトを見られる

ツールが世の中にはたくさんあります。

15


はじめに


例えば、

Firefoxのアドオン

「FireMobileSimulator」など。

16


はじめに


各種ブラウザのアドオンは

検証に役立つものもたくさんあるので

活用しましょう！

17


はじめに


余談：私が使っているアドオン（Firefox編）

18


はじめに


ついでに

QRコード生成ツールを入れておくと

超便利

19


はじめに


許されるのであれば、

BASIC認証のIDは「短め（半角英字のみが望ましい）」に

パスワードは「半角英数のみ or 半角英字のみ」

に設定してもらいましょう。

※スマートフォン実機での入力負荷がハンパないため※

※最低限のラインは、各種セキュリティ規則に準じてください※

20


Step1：端末を選ぶ



Step1:端末を選ぶ


端末は、案件の仕様に応じて

都度選びましょう。

・画面解像度のバリエーション

・OSのバリエーション

・OSバージョンのバリエーション

・DB連携がおかしい系（富士通東芝系）

・癖がある系（HTC、LG、Xperiaなど）

…etc

22


Step1:端末を選ぶ


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


Step2：チェックポイント



Step2:チェックポイント


1. ランドスケープ時の表示崩れがないこと

2. マージン、フォント、フォントサイズがデザインと相違ないこと

3. ファビコン／ウェブクリップアイコンがセットされていること

（AndroidではBASIC環境下での表示ができない。iPhoneで確認可能。）

4. リンクの遷移が仕様通りであること

5. JSの挙動が正しいこと（JS周りは念入りに！）

6. リンクをタップした際、有効選択範囲が狭すぎないこと

7. SNSの投稿文言、画像などが仕様通りであること

8. 入力フォームの挙動が正しいこと（とくにiPhoneの数字入力系）

25

チェックポイント（最低限）

スマートフォン実機検証のコツ 基本編

Documents

スマートフォン実機検証のコツ基本編