Anatomy

ANATOMY BLOG

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

2015年12月22日火曜日

レスポンシブデザインのBreakPointチェックを簡単に行う方法


「PCだと1000px前後・スマホだと360px以下でこの端末では○○px、あれでは△△pxで・・・」

画面幅のBreakPointによってレスポンシブデザインが崩れていないか、確認するのは面倒ですよね。

サイトクローンを使うと、デザインチェックのたびに画面幅を変更する必要がありません。各端末の画面幅にあったデザインキャプチャを自動で保存し、いつでも確認することができます。


<User-Agent設定なしで取得したクローンコンテンツ>

<User-Agent iphone iOS8のクローンコンテンツ>

デザインをチェックすべきページ数は、レスポンシブ対応が必要な端末の数と比例して増えていきます。各々チェックしては画面幅を変えて・・・という作業を繰り返すのは非効率です。

ダウンロードしたサイトクローンのフォルダには、全てのコンテンツにおいてキャプチャが自動で保存されます。後でキャプチャだけをまとめて確認することができます。


<キャプチャ一覧が保存されているフォルダ>


以前、User-Agentを切り替えて表示を確認する機能を紹介しました。
http://blog.site-clone.com/2015/09/user-agent.html

この機能を実用した例が今回の記事です。是非お試しください。



ちなみに、クローンをとる前にUser-Agentを全体設定で切り替え忘れていても心配は無用です。User-Agentを切り替えられるのはツールの全体設定だけではありません。「オートパイロット機能」を使用する際に切り替えることもできるのです!

まずオートパイロットアイコンをクリックします。「使用するUser-Agent」箇所の「デフォルト」チェックを外すと、スマホなどのUser-Agentを選択できます。

例えば「SmartPhone」を選択すると、すぐ下のセレクトボックスでは数多くの端末OSを選択できます。こちらも併せてお試しください。


<オートパイロット設定画面 スマホの端末OS一覧が並んでいる>







0 件のコメント:

コメントを投稿