レスポンシブデザインのチェックツールまとめ
2012年04月11日

娘がついに幼稚園に入園してしまい、まだ子離れが出来ないお嫁さんの悲しみツイートが可愛くてしょうがない春麗らかな日々ですが、皆さんにおかれましては如何お過ごしでしょうか、むゆう([tw_link name=”anticyborg”])です宜しくお願いします。
今回はレスポンシブWebデザインに関するお話
ここんとこレスポンシブデザインって流行ってますか?この「1ソースマルチデバイス」についてはずーっと昔から言われてましたが、ここにきてやっと実現できそうになってきたなぁという印象なのですが正しい?
でも1ソースとはいえ、デザイン調整、CSS構築と、結構工数がバカにならないですよね。そこんとこをクライアントとしっかりお金のお話ができないとダメなんだろうなぁと思いつつそういう話をする機会が自分の作りたい物でしか起こってないので今は楽しく作ってるだけの僕です。
さて本題ですが、レスポンシブデザインでマークアップする場合、チェックが面倒だったりしませんか?僕はすごく面倒です。なので面倒くさがりな僕は少しでも楽ができるよう、簡単にチェックできるツールがないものか探してみました。ま、つまりはメモですよ。備忘録ですよ。なのでその程度だと思って読んでくださいね。
ブラウザツール
resizeMyBrowser
いろんなサイズのボタンが並んでいて、確認したいサイズのボタンをクリックするとそのサイズの別ウィンドウが立ち上がります。あとは好きにURLを打てばいいじゃない。シンプルですね、非常にシンプル。
自分の好きなサイズも「create a new present」から作れるから便利です。
ただ、当たり前のようにMacでフルスクリーンモードにしてる場合は使えないですね。。。
responsivepx
URLを入力して、サイズを選んで「Open」をクリックすれば指定サイズでサイトを表示してくれます。
Photoshop的な背景が素敵ですね。
自在にサイズを入力できたりスライダーで調節できるのも便利です。
ただ、テキストエリアでのサイズ入力にバグがありませんか?ぼくはある感じっぽかったです
responsivepx – find that tricky breakpoint
DemonstratingResponsiveDesign
チェックできるデバイスは iPhone と iPad と PC くらいなんですかね。見た目が可愛いので良いなと思うんですが選べるサイズがもう少しほしいですね。
でもかわいい。。。
Demonstrating Responsive Design
The Responsinator
これもデザインが可愛い。対応しているデバイスはちょっと大目で5端末の縦と横の10種類。
少々便利さでは劣ったとして(サイズを自由に設定できる、とかね)もデザインが気に入ればそれでいいかなと思えるところがデザインの奥深さだと思うんだ、僕。
Responsive Design Testing
こちらは横1列に各種サイズが並びます。種類は5種類。
横スクロールがしづらい環境じゃないなら良いかもです。
ブラウザ拡張
Window Resizer (Chrome)
Chrome の拡張です。ボタン一つでウィンドウを色んなサイズに変更できますよ。
ポップアップを出すタイプじゃなくて今のウィンドウの幅を変えるタイプ。
変更するサイズも自分で登録できるから便利だと思います。
あと、これはフルスクリーンで見てる状態で起動したら自動的にフルスクリーンも解除してくれて楽チンだと思いました。今のウィンドウのサイズを変えるものだからかな?
Web Developer Tool
言わずと知れたツールですかね。Firefox版もあります。
サイズの調整とかはできないの?ゴメンナサイ良く分かんないです。
responsiView (Chrome)
手入力でサイズを入力できるのは良いとおもいます。
新たにサイズを登録できそうにないのが残念かなぁ。
ブックマークレット
Simple Responsive Design Test Page
最初にデバイスサイズを登録して、「Generate!」ボタンでブックマークレットファイルを生成していつも通りブックマークバーにドロップ!ハイデキアガリ(/’□’)/
見た目は横一列に書くデバイス毎のiframeが並ぶ感じです。
デバイスサイズを増やしたい場合はもっかい1から作れ!って感じなので、何度もデバイスサイズを変更したい場合はちょっと面倒かも。。。
Resizer
こちらは最初からデバイス固定。大体5タイプ。そのウィンドウ内で完結してて動作も速くて使いやすいよ。
ブックマークレットをクリックして、見たいサイズを選べば良い。
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」で紹介されてます。一覧表もあってステキです。
他にこんな事も書いてます
- ChromeのDeveloperTool、横に表示させられるんだってよ
- YEOMANで効率よくサイトを作る際のメモ
- CodeKitの隠れた秀才「Kit Language」で効率化を図る
- マウスホバーでリンク画像を不透明にする
- このブログをレスポンシブWebデザインに対応した時のお話あるいはメモ
- レスポンシブWebデザインでディスプレイサイズに合わせたGoogle AdSenseの広告を表示する方法
- htmlタグでオートコンプリートを無効にする方法
- そろそろHTMLとCSSとJSの役割分担について考えてみても良いんじゃないかなぁ
- [WordPress Advent Calendar 17日目] WordPressでスマートフォン対応をする際に何をどうすれば良いかを素人なりに考えたよ
- iPhoneのSafariでフォームにメールアドレスを入力する際にキーボードを変更する属性の指定方法
この記事の分類
種類: Web制作
ジャンル: design html responsive tool
FBでコメント
5個のコメント
書いた:レスポンシブデザインのチェックツールまとめ – http://t.co/OMZC6zAi
レスポンシブも勉強しなければ… SS | レスポンシブデザインのチェックツールまとめ http://t.co/9vgghQgD @STACKSTOCK_twさんから
トラックバック/ピンバックはありません。