スマートフォン実機検証のコツ 基本編
DESCRIPTION
スマートフォンサイト制作の際、実機検証を行う上でのポイントをまとめてみました。 テスト項目は案件に寄って様々だと思いますので、端末のセレクト基準や、ちょっとした気遣いどころを挙げています。TRANSCRIPT
© 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
スマートフォンサイト実機検証のコツ ~基本編~
目次
© 2013 enomotoS. All Rights Reserved.
はじめに
Step1:端末を選ぶ
Step2:チェックポイント
3
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved. 4
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
検証していますか?
5
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
どんなデバイスで検証していますか?
6
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
シミュレータでの検証は
じつはあまり意味がないです。
7
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
iOSはともかく、
Androidは
機種依存/OSバージョン依存が激しいです
8
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
iOSであっても油断はなりません。
OSのバージョンによって
環境依存が発生します。
9
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
実機検証では、
なるべく多くの実機で
なるべく多くのOSバージョンと
なるべく多くの画面解像度の端末と
iOSとAndroidの両方を
チェックすることが肝要です。
10
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
とはいえ、
予算と時間によって
検証できる端末数は限られます。
11
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
事前に、得意先と
検証する「OSの種類」と「OSのバージョン」
を取り決めておきましょう。
12
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
余談ですが
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
「シミュレータって何?」
という方・・・
14
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
PCのブラウザ上などで
擬似的にスマートフォンサイトを見られる
ツールが世の中にはたくさんあります。
15
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
例えば、
Firefoxのアドオン
「FireMobileSimulator」など。
16
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
各種ブラウザのアドオンは
検証に役立つものもたくさんあるので
活用しましょう!
17
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
余談:私が使っているアドオン(Firefox編)
18
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
ついでに
QRコード生成ツールを入れておくと
超便利
19
スマートフォンサイト実機検証のコツ ~基本編~
はじめに
© 2013 enomotoS. All Rights Reserved.
許されるのであれば、
BASIC認証のIDは「短め(半角英字のみが望ましい)」に
パスワードは「半角英数のみ or 半角英字のみ」
に設定してもらいましょう。
※スマートフォン実機での入力負荷がハンパないため※
※最低限のラインは、各種セキュリティ規則に準じてください※
20
スマートフォンサイト実機検証のコツ ~基本編~
Step1:端末を選ぶ
© 2013 enomotoS. All Rights Reserved. 21
スマートフォンサイト実機検証のコツ ~基本編~
Step1:端末を選ぶ
© 2013 enomotoS. All Rights Reserved.
端末は、案件の仕様に応じて
都度選びましょう。
・画面解像度のバリエーション
・OSのバリエーション
・OSバージョンのバリエーション
・DB連携がおかしい系(富士通東芝系)
・癖がある系(HTC、LG、Xperiaなど)
…etc
22
スマートフォンサイト実機検証のコツ ~基本編~
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
スマートフォンサイト実機検証のコツ ~基本編~
Step2:チェックポイント
© 2013 enomotoS. All Rights Reserved. 24
スマートフォンサイト実機検証のコツ ~基本編~
Step2:チェックポイント
© 2013 enomotoS. All Rights Reserved.
1. ランドスケープ時の表示崩れがないこと
2. マージン、フォント、フォントサイズがデザインと相違ないこと
3. ファビコン/ウェブクリップアイコンがセットされていること
(AndroidではBASIC環境下での表示ができない。iPhoneで確認可能。)
4. リンクの遷移が仕様通りであること
5. JSの挙動が正しいこと(JS周りは念入りに!)
6. リンクをタップした際、有効選択範囲が狭すぎないこと
7. SNSの投稿文言、画像などが仕様通りであること
8. 入力フォームの挙動が正しいこと(とくにiPhoneの数字入力系)
25
チェックポイント(最低限)