現在では、ホームページへのアクセスは6割〜7割がスマホサイトからというほどスマートフォンへの対応が必須になっており、サイト作成者としては、自分のホームページをスマートフォンからチェックすることは必須作業となっております。しかし、普段、サイトの作成にはパソコンを使用している事が多く、スマートフォンから自分のホームページをチェックする方法を知りたいということは多々あると思います。そこで今回は、パソコンからスマートフォンでどのように見えるのかをチェックする方法をご紹介します

レスポンシブデザインとは

弊社のTCDテーマではスマホサイトに対応するために、レスポンシブデザインを採用しています。レスポンシブデザインとは、ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じURLで、画面サイズに応じて表示を変えるデザインとgoogleで定義されています。レスポンシブデザインを採用する理由は、運営上の管理のしやすさや、デバイスによる表示エラーがしにくい事、SEO効果が高い事などがあります。それではパソコンからスマホサイトを確認する方法を紹介いたします。

Firefoxを使用する場合

スマホサイトを確認する方法は、ブラウザによって変わってきます。FireFoxではアドオンを導入する必要があります。様々なアドオンがありますが、弊社では、user-agent-switcherを使用しています。

user-agent-switcherのインストール

下記のボタンからFirefox Add-onsへ行き、Add to Firefoxでアドオンを追加すれば使用することができます。
user-agent-switcher

下記のような表示がされ、「インストール」をクリックすると、完了です。
uas01

user-agent-switcherの使い方

「ツール」→「Default User Agent」から変更したいUAを選択し、サイトを更新してください。
uas02

またUAを追加したい場合には下記のGitHubよりダウンロードし、「ツール」→「Default User Agent」→「User Agent Switcher」→「Options」でOptionを開きImportからXMLをアップロードしてください。
user-agent-switcher追加UA

GoogleChromeを使用する場合

Chromeではアドオンの追加が無くスマホサイトを確認できます。右上の設定アイコン→ 「ツール」 → 「デベロッパーツール」をクリックしてください。
uas03
下記のような画面が表示されますので、スマホのアイコンを選択し、表示したい画面を確認ください。その後、「更新」をする事でスマホサイトに変更されます。
uas04

Screenfly

スマホサイトの表示はブラウザでの確認だけでなく、オンラインサービスも多くあります。おすすめは、「Screenfly」です。操作も簡単で、様々な機種毎に見え方を確認する事ができます。
uas05
http://quirktools.com/screenfly/

Screenflyの使い方

上記リンクより、Screenflyにアクセスし、フォームの入力欄に表示したいページのURLを入力し、「GO」ボタンをクリックします。下記の画像のように、タブレットやスマホのアイコンをクリックし、確認したい機種を選択すると表示が切り替わります。

usa07

また、一般公開していないサイトを見るときなどは、「Use proxy server」のチェックをオンにして利用してください。第三者に確認してもらいたい時には、シェアを押し、表示されるリンクを送ると、スマホサイトでの表示をみせることができます。

Responsive Design Testing

TCDテーマのような、レスポンシブデザインのサイトをいっきにチェックするためにはこちらの「Responsive Design Testing」がおすすめです。
uas08
http://mattkersley.com/responsive/

Responsive Design Testingの使い方

Screenflyと同じように、フォームの入力欄に表示したいページのURLを入力し「enter」押すと、下記のように、各デバイスにおける表示の仕方を一画面で確認することができます。
usa06

まとめ

以上でパソコンよりスマホサイトを確認する方法の紹介を終了します。TCDのテーマではほとんどのテーマがレスポンシブ対応されており、スマホからのアクセスにも対応しております。今回紹介しました方法を参考に、スマホでの表示の仕方等も工夫くださいませ。ただ、やはり実機での確認が一番確実です。iphoneやipadなどは使用されている方も多くいらっしゃいますので、できれば一度は実機での確認をおすすめします。