複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

レスポンシブデザインが一般的になってきた昨今。
多様化するデバイスでのレスポンシブデザインのレイアウト確認はとても骨が折れます。

出来たら一度に一瞬で確認できればいいのに

なんてのはレスポンシブデザインのコーディングを行う全ての人が思っていることかと思います。
Sizzyを使えばそんな悩みは一瞬で解決されます。

今回は主要スマホ、タブレットのレイアウトの表示確認が一瞬でできるツールSizzyの使い方を解説していきます。

▶スポンサードリンク

Sizzyとは

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。
▶Sizzy

Sizzyのデモをみていただくと一目瞭然。
レスポンシブデザインを様々なデバイスサイズで表示してくれるツールです。

  • iPhone4
  • iPhone5
  • iPhone6
  • iPhone7 Plus
  • iPad Air
  • Nexus 6P
  • Galaxy S4
  • Nexus 7

計8つのモバイルレイアウトを一気に表示確認することができます。
しかも縦横どちらも。

SizzyのGithubレポジトリ

Github上にコードも公開されています。
▶kitze/sizzy
Reactで書かれているようですので、Reactを勉強されている方やSPAを作成する方などは見てみると面白いのではないでしょうか。

Sizzyの使い方

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。
▶Sizzy

まずSizzyのサイトにアクセスします。

Enter an URL

というボックスがありますので、こちらにモバイルレイアウトの確認をしたいサイトURLを入力します。

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

するとこのように様々なデバイスサイズで表示されます。
各デバイス毎、クリックしたりフリックしたりスクロールしたりも可能です。
隅々まで色々と見回してみましょう。

Sizzyの色々な機能を使ってみる

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

Sizzyのサイドバーから様々な機能を利用することができます。

横向き表示

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

意外とチェックし忘れがちな横向きの表示はSwitch to landscapeをクリックすることで確認することができます。

また、下記画像の矢印の部分にあるスマホアイコンをクリックすると

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

このように、横向きにしたいデバイスだけを、横向きにすることができます。

ソート機能

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

再度のリンゴやドロイド君やスマホ、タブレットのアイコンをクリックすると、それに該当するデバイスのみを表示してくれます。
Android端末だけ確認したい時などに便利ですね。

特定のサイズだけ拡大表示する

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

「◎」のアイコンをクリックすると、拡大表示することが出来ます。

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

このように、ひとつのサイズだけを表示し、再度のタブから他のデバイスサイズを選択するというUIに変更できます。
一気に表示する必要はないけど、それぞれのサイズを確認したい。時には重宝しそうですね。

Zoom

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

左下のZoomと書かれたバーを移動させると縮小拡大が可能です。
デフォルトでは100%になっているため、8つ全てを一気に表示したい時などは縮小しましょう。

テーマ変更

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

Switch themeをクリックすると、色が変わります。
シックな色が好きな方はこちらの色がおすすめです。

Chrome 拡張も提供されています。

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。
▶Sizzy – Chromeウェブストア

SizzyはChrome拡張プラグインも同時に提供されており、Chromeを使っている方ですと、更に便利に利用することができます。
レスポンシブデザインを確認したいサイト上でSizzyのアイコンをクリックするだけで、Sizzyのページに直接飛ぶようになっています。
普段Chromeを使ってる方は是非インストールしておきましょう。

Sizzyを使ってモバイルレイアウトを一瞬で確認しちゃおう!

複数スマホのレイアウトの確認が一度にできるSizzyが便利すぎる。

Sizzyを使う事で、今までよりも遥かに早く、簡単にレイアウトを確認することが可能になります。
是非Bliskとは違いPC用のレイアウトを同時に確認はできませんが、動作の軽さやChrome上で動作することなどから、個人的にはSizzyのほうがオススメです。

レスポンシブデザインでモバイルレイアウトを組む時などに、是非活用してみて下さいね。

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →