レスポンシブデザインが一般的になってきた昨今。
多様化するデバイスでのレスポンシブデザインのレイアウト確認はとても骨が折れます。
出来たら一度に一瞬で確認できればいいのに
なんてのはレスポンシブデザインのコーディングを行う全ての人が思っていることかと思います。
Sizzyを使えばそんな悩みは一瞬で解決されます。
今回は主要スマホ、タブレットのレイアウトの表示確認が一瞬でできるツールSizzyの使い方を解説していきます。
[ad]
目次
Sizzyとは
Sizzyのデモをみていただくと一目瞭然。
レスポンシブデザインを様々なデバイスサイズで表示してくれるツールです。
- iPhone4
- iPhone5
- iPhone6
- iPhone7 Plus
- iPad Air
- Nexus 6P
- Galaxy S4
- Nexus 7
計８つのモバイルレイアウトを一気に表示確認することができます。
しかも縦横どちらも。
SizzyのGithubレポジトリ
Github上にコードも公開されています。
▶kitze/sizzy
Reactで書かれているようですので、Reactを勉強されている方やSPAを作成する方などは見てみると面白いのではないでしょうか。
Sizzyの使い方
まずSizzyのサイトにアクセスします。
Enter an URL
というボックスがありますので、こちらにモバイルレイアウトの確認をしたいサイトURLを入力します。
するとこのように様々なデバイスサイズで表示されます。
各デバイス毎、クリックしたりフリックしたりスクロールしたりも可能です。
隅々まで色々と見回してみましょう。
Sizzyの色々な機能を使ってみる
Sizzyのサイドバーから様々な機能を利用することができます。
横向き表示
意外とチェックし忘れがちな横向きの表示はSwitch to landscapeをクリックすることで確認することができます。
また、下記画像の矢印の部分にあるスマホアイコンをクリックすると
このように、横向きにしたいデバイスだけを、横向きにすることができます。
ソート機能
再度のリンゴやドロイド君やスマホ、タブレットのアイコンをクリックすると、それに該当するデバイスのみを表示してくれます。
Android端末だけ確認したい時などに便利ですね。
特定のサイズだけ拡大表示する
「◎」のアイコンをクリックすると、拡大表示することが出来ます。
このように、ひとつのサイズだけを表示し、再度のタブから他のデバイスサイズを選択するというUIに変更できます。
一気に表示する必要はないけど、それぞれのサイズを確認したい。時には重宝しそうですね。
Zoom
左下のZoomと書かれたバーを移動させると縮小拡大が可能です。
デフォルトでは１００％になっているため、８つ全てを一気に表示したい時などは縮小しましょう。
テーマ変更
Switch themeをクリックすると、色が変わります。
シックな色が好きな方はこちらの色がおすすめです。
Chrome 拡張も提供されています。
SizzyはChrome拡張プラグインも同時に提供されており、Chromeを使っている方ですと、更に便利に利用することができます。
レスポンシブデザインを確認したいサイト上でSizzyのアイコンをクリックするだけで、Sizzyのページに直接飛ぶようになっています。
普段Chromeを使ってる方は是非インストールしておきましょう。
Sizzyを使ってモバイルレイアウトを一瞬で確認しちゃおう！
Sizzyを使う事で、今までよりも遥かに早く、簡単にレイアウトを確認することが可能になります。
是非Bliskとは違いPC用のレイアウトを同時に確認はできませんが、動作の軽さやChrome上で動作することなどから、個人的にはSizzyのほうがオススメです。
レスポンシブデザインでモバイルレイアウトを組む時などに、是非活用してみて下さいね。
