レスポンシブデザインのウェブサイトが主流になってきて、7割を超えるホームページがスマートフォン対応を実施しているようです。

閲覧者も7割以上がスマホからという中で、自身のホームページがスマホではどう見えているかを気にする必要があります。

もちろんご自身のスマートフォンで確認するのは手っ取り早い手段ですね。

 

ただ、iphoneでもバージョンによってビュー(見映え)が変わりますし、アクオスフォンやandroidでも各機種もちろん違いがあります。

これら全ての実機を保持することは携帯業者でもない限りほぼ不可能です。

こんな時に一括(もしくは機種ごとに)チェックできる便利なツールを2つ紹介させて頂きます！便利ですので、是非ブックマークしておいてください。

それではご覧下さい。

 

★★★googleのディベロッパーツールを使用する★★★

最も簡易にチェックができる方法です。

【STEP1】まずgoogle chromeであなたの確認したいサイトのURLにアクセスしてください。

【STEP2】右上の三本線のメニュー(バーガーアイコンていいます)からその他ツール＞ディベロッパーズツールにアクセスしてください。

【STEP3】実際にスマホの機種を選択でき、その機種での見映え(ビュー)が確認できます。

この方法のメリット→操作が簡易であり、面倒なログイン等がない。リンクが実際にクリックできる。

この方法のデメリット→Jsでモバイル対応の振り分けしているサイトのスマホビューは正しく表示されない。

※この確認はブラウザ画面の横幅をスマホサイズに縮めた際にレイアウトが変わるかどうかでも確認できます。

 

★★★モビライザーを使用する★★★

【STEP1】https://app.mobile1st.com/mobilizerにアクセスする。

【STEP2】ログイン画面に自動遷移するので、初めての方はSIGN UPをクリックする。

【STEP3】メールアドレスとパスワードを入力する。

※現時点でメールアドレス人しょうがないので、存在しない適当なアドレスでも使用可能です。

このサービスは無料で使えるのは5回まで(2017年3月現在)なので、適当まアドレスで都度アカウントを作成した方がいいかもしれません。

できれば以降は購入して使ってください。

【STEP5】入力窓に確認したいサイトのURLを入力します。

【STEP6】タブレット含め、様々なデバイスの見映えが一括出力されます。

この方法のメリット→Jsを使用してのスマホ対応も正しく表示される。一括でほとんどのデバイスをチェックできる。

この方法のデメリット→リンクがクリックできないので複数ページのチェックが面倒。無料版は回数制限がある。

 

以上でレスポンシブデザインの確認方法の説明を終わりにします。用途に応じて使い分けてください。

★☆★☆★☆この記事のプレゼント★☆★☆★☆

◆XXXXXXXXX