Web担当者なら知っておきたい、スマホ画面チェックツール8選

2015年8月6日

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

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

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

1. Safari開発メニュー

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

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

URL :http://pc-karuma.net/safari-menu-development/

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

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

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

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

URL :http://www.buildinsider.net/web/chromedevtools/01

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

3. Mobilizer

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

Mobilizer

URL :https://app.getmobilizer.com/#/onScreen

Galaxy,iPad,iPhone・・・。

4. iOS Dev Center - Apple Developer

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

【EC】スマートフォンサイトをコーディングするときにPCで表示を確認する方法6つ : DeNA Creator(クリエイター) Blog

URL :http://creator.dena.jp/archives/15532575.html

はじめまして、こんにちは！小久保です。 EC 事業本部企画編集グループというところで、マークアップエンジニア( HTML コーダー)をしています。

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

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

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

Responsive Design Testing

URL :http://mattkersley.com/responsive/

Responsive design testing for the masses

7. Scirocco Cloud

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

料金プラン｜Scirocco Cloud

URL :http://www.scirocco-cloud.com/ja/price.html

Scirocco Cloud（シロッコクラウド）は株式会社ソニックスが提供しているクラウドベースによるandroid端末の UI テスト自動化サービスです（有料）。端末のリモートコントロールや自動テスティングサービスを提供しています。

8. ケータイラボ

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

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

URL :http://www.ktai-labo.com/

ご予算・納期・内容に応じ、最適なプラン・サービスをご提案いたします！

まとめ

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

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

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