Anatomy

ANATOMY BLOG

マクロ視点のアクセス解析と品質管理ツール「ANATOMY(アナトミー)」のブログです

2015年9月11日金曜日

マルチデバイスでWebページのデザイン崩れをチェックする方法

Webサイト開発の現場では、PCのみならず、スマートフォンやタブレットを含めたマルチデバイスでの動作確認を行っています。そして、マルチデバイスでテストを行ったときに発生する不具合は「デザイン崩れ」がダントツの1位。なので、単体テストではさまざまなブラウザ・機種でのUIテストを中心に実施することになります。

しかし、該当ページに遷移するために、ログインが必要だったり、フォームで多数の項目を入力する必要があったりすると、画面に辿り着くだけでも時間がかかってしまうことも。重複ログインを許可しないサイトの場合は、ブラウザや機種ごとに異なるアカウントを作成する、といった準備作業も必要になってきます。

サイトクローンではクローンしたWebページをクラウドにアップロードすることで、マルチデバイスでの単体テストを迅速に行えます。


対象Webページのクローンとアップロード

まず、サイトクローンの設定画面でUser-AgentをiPhone(iOS8)に設定します。
クローニングモードでテスト対象のページにアクセスすると、Webページがクローンされます。



これをアップロードボタンをクリックすると、Webページがクラウドにアップロードされます。

実機での閲覧

MYページにアクセスし、クローンされたWebページにアクセスするためのQRコードを表示します。




QRコードからアクセスすると、次のようにサイトクローンのツールでアクセスしたときと同じ画面が表示されます。
JavaScriptも動作するので、スライドメニューやアコーディオンなどの動作検証もできます。

今回はTOPページを使いましたが、ショッピングフローの途中の画面やログインが必要な画面など、どんなページであっても直接当該ページにアクセスが可能です。アクセスが困難なページであればあるほど、メリットがある機能ですね。
Related Posts Plugin for WordPress, Blogger...