現在では、ホームページへのアクセスは6割〜7割がスマホサイトからというほどスマートフォンへの対応が必須になっており、サイト作成者としては、自分のホームページをスマートフォンからチェックすることは必須作業となっております。しかし、普段、サイトの作成にはパソコンを使用している事が多く、スマートフォンから自分のホームページをチェックする方法を知りたいということは多々あると思います。そこで今回は、パソコンからスマートフォンでどのように見えるのかをチェックする方法をご紹介します
レスポンシブデザインとは
弊社のTCDテーマではスマホサイトに対応するために、レスポンシブデザインを採用しています。レスポンシブデザインとは、ユーザーのデバイス（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じURLで、画面サイズに応じて表示を変えるデザインとgoogleで定義されています。レスポンシブデザインを採用する理由は、運営上の管理のしやすさや、デバイスによる表示エラーがしにくい事、SEO効果が高い事などがあります。それではパソコンからスマホサイトを確認する方法を紹介いたします。
Firefoxを使用する場合
スマホサイトを確認する方法は、ブラウザによって変わってきます。FireFoxではアドオンを導入する必要があります。様々なアドオンがありますが、弊社では、user-agent-switcherを使用しています。
user-agent-switcherのインストール
下記のボタンからFirefox Add-onsへ行き、Add to Firefoxでアドオンを追加すれば使用することができます。
user-agent-switcher
下記のような表示がされ、「インストール」をクリックすると、完了です。
user-agent-switcherの使い方
「ツール」→「Default User Agent」から変更したいUAを選択し、サイトを更新してください。
またUAを追加したい場合には下記のGitHubよりダウンロードし、「ツール」→「Default User Agent」→「User Agent Switcher」→「Options」でOptionを開きImportからXMLをアップロードしてください。
user-agent-switcher追加UA
GoogleChromeを使用する場合
Chromeではアドオンの追加が無くスマホサイトを確認できます。右上の設定アイコン→ 「ツール」 → 「デベロッパーツール」をクリックしてください。
下記のような画面が表示されますので、スマホのアイコンを選択し、表示したい画面を確認ください。その後、「更新」をする事でスマホサイトに変更されます。
Screenfly
スマホサイトの表示はブラウザでの確認だけでなく、オンラインサービスも多くあります。おすすめは、「Screenfly」です。操作も簡単で、様々な機種毎に見え方を確認する事ができます。
http://quirktools.com/screenfly/
Screenflyの使い方
上記リンクより、Screenflyにアクセスし、フォームの入力欄に表示したいページのURLを入力し、「GO」ボタンをクリックします。下記の画像のように、タブレットやスマホのアイコンをクリックし、確認したい機種を選択すると表示が切り替わります。
また、一般公開していないサイトを見るときなどは、「Use proxy server」のチェックをオンにして利用してください。第三者に確認してもらいたい時には、シェアを押し、表示されるリンクを送ると、スマホサイトでの表示をみせることができます。
Responsive Design Testing
TCDテーマのような、レスポンシブデザインのサイトをいっきにチェックするためにはこちらの「Responsive Design Testing」がおすすめです。
http://mattkersley.com/responsive/
Responsive Design Testingの使い方
Screenflyと同じように、フォームの入力欄に表示したいページのURLを入力し「enter」押すと、下記のように、各デバイスにおける表示の仕方を一画面で確認することができます。
まとめ
以上でパソコンよりスマホサイトを確認する方法の紹介を終了します。TCDのテーマではほとんどのテーマがレスポンシブ対応されており、スマホからのアクセスにも対応しております。今回紹介しました方法を参考に、スマホでの表示の仕方等も工夫くださいませ。ただ、やはり実機での確認が一番確実です。iphoneやipadなどは使用されている方も多くいらっしゃいますので、できれば一度は実機での確認をおすすめします。
