Web担当者なら知っておきたい、スマホ画面チェックツール8選
- 2015年8月6日
- 129,396
ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！
>> 著者詳細はこちら
ferret編集部：2014年10月9日に公開された記事を再編集しています。
スマートフォンからのアクセスが伸びていませんか？
今後もますます広がると見られるスマートフォン。その見え方をあなたはチェックしたことがありますか？制作業者まかせになっていませんでしょうか。
本記事では、パソコンからスマートフォンでの見え方をチェックする方法やツールを紹介します。ぜひ、自分にあったものを見つけて、定期的にチェックしてください。
＜目次＞
・MacならSafariでチェックできる
・WindowsであればChromeで簡単！擬似スマホチェック
・URL入力で簡単クロスデバイスチェック
・開発環境を持っている人はシミュレーターも
・ショートカットを作っておくと便利！
・クラウドで実機テスト！
・実際の端末を手にしてテスト
1. Safari開発メニュー
ふだんMacを使っている人ならば、Safariの標準機能でスマホでのデザインチェックが簡単にできます。iPhoneやiPadなどと詐称してアクセスすることで、デザインを確認します。
2. Chromeデベロッパー・ツール
Safari以外では、Google提供のクロームというブラウザを使いますと、スマートフォンと詐称してアクセスできます。オーバーライド設定を使うことで、パソコンではなくスマートフォンからのアクセスのように詐称でき、デザインチェックができます。
3. Mobilizer
ブラウザ版クロスデバイステスト・ツール。デザインチェックしたいURLを入力して数分待ちますと、ギャラクシーやiPhoneなど複数のデバイスでの見え方をチェックできます。ユーザー登録無しでも簡易的にはチェック可能です。
4. iOS Dev Center - Apple Developer
iPhoneアプリやAndroidアプリを開発できる環境をもっている人ならば、それらで提供されていますスマートフォンシミュレーターを使うことで、実際のアクセスの様子をチェックできます。開発環境がないと使えませんが、実機と同じような操作感も確認できますので便利です。
5. ショートカットを作っておくと便利！
ブラウザを切り替えたり、開発ツールを選んだりするのは面倒！という人にはおすすめの方法です。デスクトップショートカット（通常とは異なるプログラムの起動方法）を作成し、スマートフォンの見た目チェックをしたいときだけ、そのアイコンを使う、というものです。一度作ってしまえば次からはダブルクリックですぐにチェックできますので、とても便利です。
6. Responsive Design Testing
最近ではスマートフォン、タブレット、PCとデザインをわけずにサイズによって、流動的にレイアウトが変わるデザインが流行っていますよね。そんなレスポンシブデザインをいっきにチェックしてくれるホームページがこちらです。複数のサイズを同時にチェックできますので便利です。
さらに、Nexus7など機種を指定してブラウザチェックをしたいときは、こちらも便利。
＞＞Screenfly / Test Your Website at Different Screen Resolutions
7. Scirocco Cloud
クラウドを使って複数の端末で動作チェックできるサービスがにわかに注目されています。シビアな動作環境を要求される場合にはしっかりと複数の端末で調べたいものです。2端末ながらフリー版もありますので、試してみてはいかがでしょうか。
8. ケータイラボ
よりシビアな動作を要求されるときには、やはりホンモノの実機チェックが一番です。コストはそれなりにかかりますが、より厳密な対応や動作を確認するためには不可避の場合もあることでしょう。一度試して費用感を掴んでおくのも良いかもしれません。
まとめ
・ブラウザで簡単にできる。
・ショートカットでスマートフォン詐称するのが便利。
・有料サービスも検討してみよう。
スマートフォンでみ見え方をチェックする方法には、いろいろな方法があります。自分にあったチェック方法を見つけたら、自社だけでなくぜひ、競合のスマートフォンでの見え方を確認しましょう。参考になることも多いはずです。
このようにパソコンからチェックできますと、とても便利ですよ。
