レスポンシブの確認ツール、後発だけに便利!スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy

iPhone, iPad, Nexus, Galaxyなど、主要なスマホ・タブレットの表示確認が同時にできる、レスポンシブ用の確認ツールを紹介します。

最近リリースされたばかりで、現在の対応デバイスにあった便利なツールです。

Sizzyのキャプチャ

Sizzy
Sizzy -GitHub

Sizzyの特徴

Sizzyはオンラインツールとして利用でき、Chromeの機能拡張にも対応しています。動作は非常に軽快で、スマホ・タブレットの複数のデバイスで同時に確認ができます。

Sizzyの動作デモ

現在用意されているデバイスは、8種類。

  • iPhone 4: 320x480
  • iPhone 5: 320x568
  • iPhone 6: 375x667
  • iPhone 7 Plus: 414x736
  • iPad Air: 768x1024
  • Nexus 6P: 411x731
  • Galaxy S4: 360x640
  • Nexus 7: 600x960

デフォルトでは縦長のポートレートモードで表示され、横長のランドスケープモードに変更したり、デバイスやOSでフィルタリングすることも可能です。

サイトのキャプチャ

Sizzyのデフォルト画面

Sizzyの使い方

使い方は、簡単です。

Sizzyの使い方: その1

まずは、オンラインツールとして利用してみましょう。
下記ページにアクセスします。

サイトのキャプチャ

Sizzy

「Enter an URL」に確認したいページのURLを入力し、「Go」ボタンをクリックします。
当ブログのURLを入力してみました。

サイトのキャプチャ

Sizzyで、http://coliss.com/を表示

表示デバイスの設定は、サイドバーでいろいろ変更できます。
横長のランドスケープモードに変更にしてみました。

サイトのキャプチャ

Sizzyで、http://coliss.com/を表示

表示されているページはリンクも有効で、ページ遷移も可能です。

サイトのキャプチャ

Sizzyで、http://coliss.com/を表示

Sizzyの使い方: その2

いちいちサイトにアクセスするのが面倒だ、という人にはChromeの機能拡張がオススメです。
下記ページからインストールできます。

サイトのキャプチャ

Sizzy -Chromeウェブストア

使い方は簡単で、Chromeでページを表示している時に、ツールバーからSizzyのボタンをクリックするだけで利用できます。

top of page

©2018 coliss