ローディング中

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

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

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

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

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

[ad]

Sizzyとは

FireShot Capture 052 Sizzy https sizzy co
▶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の使い方

FireShot Capture 052 Sizzy https sizzy co
▶Sizzy

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

Enter an URL

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

FireShot Capture 054 Sizzy https sizzy co url=https 3A 2F 2Fawe some net 2F

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

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

Thema

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

横向き表示

FireShot Capture 051 Sizzy https sizzy co url=https 3A 2F 2Fawe some net 2F

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

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

FireShot Capture 055 Sizzy https sizzy co url=https 3A 2F 2Fawe some net 2F のコピー 2

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

ソート機能

FireShot Capture 055 Sizzy https sizzy co url=https 3A 2F 2Fawe some net 2F

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

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

FireShot Capture 055 Sizzy https sizzy co url=https 3A 2F 2Fawe some net 2F のコピー

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

FireShot Capture 057 Sizzy https sizzy co url=https 3A 2F 2Fawe some net 2F

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

Zoom

FireShot Capture 050 Sizzy https sizzy co url=https 3A 2F 2Fawe some net 2F

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

テーマ変更

FireShot Capture 053 Sizzy https sizzy co url=https 3A 2F 2Fawe some net 2F

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

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

スクリーンショット 2017 05 10 午後8 09 36
▶Sizzy – Chromeウェブストア

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

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

スクリーンショット 2017 05 10 午後8 49 30

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

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.