レスポンシブデザインのチェックツールまとめ

娘がついに幼稚園に入園してしまい、まだ子離れが出来ないお嫁さんの悲しみツイートが可愛くてしょうがない春麗らかな日々ですが、皆さんにおかれましては如何お過ごしでしょうか、むゆう（[tw_link name=”anticyborg”]）です宜しくお願いします。

今回はレスポンシブWebデザインに関するお話

ここんとこレスポンシブデザインって流行ってますか？この「1ソースマルチデバイス」についてはずーっと昔から言われてましたが、ここにきてやっと実現できそうになってきたなぁという印象なのですが正しい？

でも1ソースとはいえ、デザイン調整、CSS構築と、結構工数がバカにならないですよね。そこんとこをクライアントとしっかりお金のお話ができないとダメなんだろうなぁと思いつつそういう話をする機会が自分の作りたい物でしか起こってないので今は楽しく作ってるだけの僕です。

さて本題ですが、レスポンシブデザインでマークアップする場合、チェックが面倒だったりしませんか？僕はすごく面倒です。なので面倒くさがりな僕は少しでも楽ができるよう、簡単にチェックできるツールがないものか探してみました。ま、つまりはメモですよ。備忘録ですよ。なのでその程度だと思って読んでくださいね。

ブラウザツール

resizeMyBrowser

いろんなサイズのボタンが並んでいて、確認したいサイズのボタンをクリックするとそのサイズの別ウィンドウが立ち上がります。あとは好きにURLを打てばいいじゃない。シンプルですね、非常にシンプル。

自分の好きなサイズも「create a new present」から作れるから便利です。

ただ、当たり前のようにMacでフルスクリーンモードにしてる場合は使えないですね。。。

resizeMyBrowser

responsivepx

URLを入力して、サイズを選んで「Open」をクリックすれば指定サイズでサイトを表示してくれます。

Photoshop的な背景が素敵ですね。

自在にサイズを入力できたりスライダーで調節できるのも便利です。

ただ、テキストエリアでのサイズ入力にバグがありませんか？ぼくはある感じっぽかったです

responsivepx – find that tricky breakpoint

DemonstratingResponsiveDesign

チェックできるデバイスは iPhone と iPad と PC くらいなんですかね。見た目が可愛いので良いなと思うんですが選べるサイズがもう少しほしいですね。

でもかわいい。。。

Demonstrating Responsive Design

The Responsinator

これもデザインが可愛い。対応しているデバイスはちょっと大目で5端末の縦と横の10種類。

少々便利さでは劣ったとして(サイズを自由に設定できる、とかね)もデザインが気に入ればそれでいいかなと思えるところがデザインの奥深さだと思うんだ、僕。

The Responsinator

Responsive Design Testing

こちらは横1列に各種サイズが並びます。種類は5種類。

横スクロールがしづらい環境じゃないなら良いかもです。

Responsive Design Testing

ブラウザ拡張

Window Resizer (Chrome)

Chrome の拡張です。ボタン一つでウィンドウを色んなサイズに変更できますよ。

ポップアップを出すタイプじゃなくて今のウィンドウの幅を変えるタイプ。

変更するサイズも自分で登録できるから便利だと思います。

あと、これはフルスクリーンで見てる状態で起動したら自動的にフルスクリーンも解除してくれて楽チンだと思いました。今のウィンドウのサイズを変えるものだからかな？

Window Resizer (Chrome)

Web Developer Tool

言わずと知れたツールですかね。Firefox版もあります。

サイズの調整とかはできないの？ゴメンナサイ良く分かんないです。

Web Developer Tool

responsiView (Chrome)

手入力でサイズを入力できるのは良いとおもいます。

新たにサイズを登録できそうにないのが残念かなぁ。

responsiView

ブックマークレット

Simple Responsive Design Test Page

最初にデバイスサイズを登録して、「Generate！」ボタンでブックマークレットファイルを生成していつも通りブックマークバーにドロップ！ハイデキアガリ(/’□’)/

見た目は横一列に書くデバイス毎のiframeが並ぶ感じです。

デバイスサイズを増やしたい場合はもっかい1から作れ！って感じなので、何度もデバイスサイズを変更したい場合はちょっと面倒かも。。。

BenjaminKeen.com

Resizer

こちらは最初からデバイス固定。大体5タイプ。そのウィンドウ内で完結してて動作も速くて使いやすいよ。

ブックマークレットをクリックして、見たいサイズを選べば良い。

Codebomber // Resizer

Mac Apps

Aptus

これはMacのアプリです。[tw_link name=”cipher”]さんがご紹介頂いていたのを拾わせてもらいました。

アプリだけあって、そして今回紹介した物の中で唯一有料ということもあって、かなり便利です。これあれば他のいらね（多分ね）。

ここがステキ

• 好きなサイズを自分で設定できる
• ボタン一つで切り替えられる
• 固定幅だけじゃなく XXpx〜YYpx の指定が出来るので、よりレスポンシブWebdesignらしい

新しいサイズを登録するときは左下の Preference をクリックして ＋ ボタンで追加します。

登録する際、横幅は可変に出来ます。そうだよね、言われてみればレスポンシブWebデザインって「321px〜759pxの時」みたいな指定になるんですよね，大抵。だとするとこのアプローチはステキですよね。

あとキャプチャも撮れるらしい，良いね。

Aptus
カテゴリ: 開発ツール
価格: ￥250

おまけ

レスポンシブデザインを頑張ろうと思ったら最初にぶち当たる壁が「横幅は何を基準にすれば良いの？」ですよね。たいていの場合はiPhoneとiPadが基準になるんでしょうけど、案件の規模によっては何種類も設定しなければなりません。じゃあ MediaQueries の設定はどうすれば？となりますよね。そういう時の基準を調べたので、「これで良いんじゃね？」と思ったものをメモしておきます。

詳しくは「A Simple Device Diagram for Responsive Design Planning | Metal Toad Media」で紹介されてます。一覧表もあってステキです。