Web担当者なら知っておきたい、スマホ画面チェックツール8選
- 2015年8月6日
- 159,034
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. ケータイラボ
よりシビアな動作を要求されるときには、やはりホンモノの実機チェックが一番です。コストはそれなりにかかりますが、より厳密な対応や動作を確認するためには不可避の場合もあることでしょう。一度試して費用感を掴んでおくのも良いかもしれません。
まとめ
・
ブラウザ
で簡単にできる。
・ショートカットでスマートフォン詐称するのが便利。
・有料サービスも検討してみよう。
スマートフォンでみ見え方をチェックする方法には、いろいろな方法があります。自分にあったチェック方法を見つけたら、自社だけでなくぜひ、競合のスマートフォンでの見え方を確認しましょう。参考になることも多いはずです。
このようにパソコンからチェックできますと、とても便利ですよ。
