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

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

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

1. Safari開発メニュー

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

Thumb 01
Safariメニューバーに開発メニューを表示する方法 - PC設定のカルマ
URL:http://pc-karuma.net/safari-menu-development/
Firefox、IEのさまざまなバージョン、iPhoneやiPad……でどのように表示されるかを確認することができます。

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

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

Thumb 02
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider
URL:http://www.buildinsider.net/web/chromedevtools/01
[Overrides］設定。ブラウザーごとに振る舞いを変えているサイトや、モバイルデバイスでは異なる見た目になるように作っているサイトのテストを、Chromeだけでできるようにする機能がある。

3. Mobilizer

ブラウザ版クロスデバイステスト・ツール。デザインチェックしたいURLを入力して数分待ちますと、ギャラクシーやiPhoneなど複数のデバイスでの見え方をチェックできます。ユーザー登録無しでも簡易的にはチェック可能です。

Thumb 03
Mobilizer
URL:https://app.getmobilizer.com/#/onScreen
Galaxy,iPad,iPhone・・・。

4. iOS Dev Center - Apple Developer

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

Thumb 04
【EC】スマートフォンサイトをコーディングするときにPCで表示を確認する方法6つ : DeNA Creator(クリエイター) Blog
URL:http://creator.dena.jp/archives/15532575.html
はじめまして、こんにちは！小久保です。EC事業本部 企画編集グループというところで、マークアップエンジニア(HTMLコーダー)をしています。

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

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

Thumb 05
UA偽装のためにグーグルクロームでショートカットのリンク先を変更して... - Yahoo!知恵袋
URL:http://detail.chiebukuro.yahoo.co.jp/qa/question_detail...
UA偽装のためにグーグルクロームでショートカットのリンク先を変更しているのですが"C:\Documents and Settings\ユーザー名\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"の部分が無効となって、パスとファイルを正し...

6. Responsive Design Testing

最近ではスマートフォン、タブレット、PCとデザインをわけずにサイズによって、流動的にレイアウトが変わるデザインが流行っていますよね。そんなレスポンシブデザインをいっきにチェックしてくれるホームページがこちらです。複数のサイズを同時にチェックできますので便利です。

さらに、Nexus7など機種を指定してブラウザチェックをしたいときは、こちらも便利。
＞＞Screenfly / Test Your Website at Different Screen Resolutions

Thumb 06
Responsive Design Testing
URL:http://mattkersley.com/responsive/
Responsive design testing for the masses

7. Scirocco Cloud

クラウドを使って複数の端末で動作チェックできるサービスがにわかに注目されています。シビアな動作環境を要求される場合にはしっかりと複数の端末で調べたいものです。2端末ながらフリー版もありますので、試してみてはいかがでしょうか。

Thumb 08
料金プラン｜Scirocco Cloud
URL:http://www.scirocco-cloud.com/ja/price.html
Scirocco Cloud（シロッコクラウド）は株式会社ソニックスが提供しているクラウドベースによるandroid端末のUIテスト自動化サービスです（有料）。端末のリモートコントロールや自動テスティングサービスを提供しています。

8. ケータイラボ

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

Thumb 09
スマートフォン・ケータイ実機検証のケータイラボ
URL:http://www.ktai-labo.com/
ご予算・納期・内容に応じ、最適なプラン・サービスをご提案いたします！

まとめ

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

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

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