PCひとつで他のデバイス表示をチェック!レスポンシブ検証ツール4選

Pocket


こんにちは。ジーニアスウェブの藤井です。
暑いですね。台風や大雨も頻繁に起き、異常気象が続いています。
お体には十分お気をつけください。

さて、今回はレスポンシブを確認するときに便利なツールをご紹介します。
実機テストができないときでも、PCひとつでios、Android、imacなど、多様なデバイスを確認できます。

サイトチェック時の効率化や、お客様に「レスポンシブってこういうのです」とお伝えするときにも便利ですね!

 

sizzy

https://sizzy.co/

ios iPhone(4〜7)、iPad Air
Android Nexus、銀河

シンプルながらもデザインが洗練されており、お気に入りです。
下にスライドすると、デバイスを横向きにした状態も確認できます。
また、キーボードが表示された時も確認できるのでとても便利です。
 
サイトを開くのは面倒くさい!とういう人には、Sizzyの拡張機能もあります。
確認するサイトを開いた状態で、アイコンをクリックすればすぐに確認できます。
sizzy – Chrome Web Store

 

responsiv

http://responsiv.eu/

ios iPhone(4~6)、iPad Pro、iPad Air、iPad mini、
MacBook Air(11〜Retina15)、iMac
Android 対応なし

Androidの対応はありませんが、Apple製品の殆どに対応しています。
デバイスのデザインがリアルなので、実機で見るように確認ができます。
デザインもすっきりして見やすく、操作性が良いです。

 

Responsive Checker

http://html5-lab.jp/checker/

ios iPhone(5)、iPad mini
Android Galaxy、Xperia、HTC Aria

こちらはiPhoneのデバイスが5のみと少ないですが、GalaxyやXperiaなど、Androidのデバイスに強いです(少し古いタイプだと思いますが…)。
また、デバイスカラーを白か黒か選べるので、サイトが全体的に黒色だけどデバイスも黒ならどうなんだろう…など、コンセプトに合わせて試せます。

 

deviceponsive.com

http://deviceponsive.com/

ios MacBook、iPad、iPhone(5)
Android 銀河、Kindle

こちらもデバイスデザインがリアルで、実機で確認しているような感覚です。
唯一Kindleでの表示が確認できるツールです(需要は少ないかもしれませんが…)。

 

まとめ

サイトの制作時は必ず、iPhoneとAndroidの実機テストを行います。
今回のツールは簡易的なものとしてお伝えしましたが、いざという時、外にいるときなど、さっと確認できるのでおすすめです。

Androidでのチェックをもっと詳しく、また、検証画面を見ながら行いたい技術者向けは以下の記事をご覧ください。
PCでAndroid端末のブラウザチェックをして、検証までやってしまおう!

それでは。