ferret編集部：2014年10月9日に公開された記事を再編集しています。

スマートフォンからのアクセスが伸びていませんか？
今後もますます広がると見られるスマートフォン。その見え方をあなたはチェックしたことがありますか？制作業者まかせになっていませんでしょうか。
本記事では、パソコンからスマートフォンでの見え方をチェックする方法やツールを紹介します。ぜひ、自分にあったものを見つけて、定期的にチェックしてください。

＜目次＞
・MacならSafariでチェックできる
・WindowsであればChromeで簡単！擬似スマホチェック
・開発環境を持っている人はシミュレーターも
・ショートカットを作っておくと便利！
・クラウドで実機テスト！
・実際の端末を手にしてテスト

1. Safari開発メニュー

ふだんMacを使っている人ならば、Safariの標準機能でスマホでのデザインチェックが簡単にできます。iPhoneやiPadなどと詐称してアクセスすることで、デザインを確認します。

Firefox、IEのさまざまなバージョン、iPhoneやiPad……でどのように表示されるかを確認することができます。

参考：Safariメニューバーに開発メニューを表示する方法 - PC設定のカルマ

2. Chromeデベロッパー・ツール

Safari以外では、Google提供のクロームというブラウザを使いますと、スマートフォンと詐称してアクセスできます。オーバーライド設定を使うことで、パソコンではなくスマートフォンからのアクセスのように詐称でき、デザインチェックができます。

ブラウザーごとに振る舞いを変えているサイトや、モバイルデバイスでは異なる見た目になるように作っているサイトのテストを、Chromeだけでできるようにする機能があります。

参考：Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider

3. iOS Dev Center - Apple Developer

iPhoneアプリやAndroidアプリを開発できる環境をもっている人ならば、それらで提供されていますスマートフォンシミュレーターを使うことで、実際のアクセスの様子をチェックできます。開発環境がないと使えませんが、実機と同じような操作感も確認できますので便利です。

参考：XcodeでiPhoneアプリのシミュレーターを使う方法【初心者向け】

4. ショートカットを作っておくと便利！

ブラウザを切り替えたり、開発ツールを選んだりするのは面倒！という人にはおすすめの方法です。デスクトップショートカット（通常とは異なるプログラムの起動方法）を作成し、スマートフォンの見た目チェックをしたいときだけ、そのアイコンを使う、というものです。

一度作ってしまえば次からはダブルクリックですぐにチェックできますので、とても便利です。

最近ではスマートフォン、タブレット、PCとデザインをわけずにサイズによって、流動的にレイアウトが変わるデザインが流行っていますよね。

そんなレスポンシブデザインをいっきにチェックしてくれるホームページがこちらです。複数のサイズを同時にチェックできますので便利です。

Responsive Design Testing

5. ケータイラボ

よりシビアな動作を要求されるときには、やはりホンモノの実機チェックが一番です。コストはそれなりにかかりますが、より厳密な対応や動作を確認するためには不可避の場合もあることでしょう。一度試して費用感を掴んでおくのも良いかもしれません。

スマートフォン・ケータイ実機検証のケータイラボ

まとめ

・ブラウザで簡単にできる。
・ショートカットでスマートフォン詐称するのが便利。
・有料サービスも検討してみよう。

スマートフォンでみ見え方をチェックする方法には、いろいろな方法があります。自分にあったチェック方法を見つけたら、自社だけでなくぜひ、競合のスマートフォンでの見え方を確認しましょう。参考になることも多いはずです。

このようにパソコンからチェックできますと、とても便利ですよ。