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