年明けちゃいましたけど、年末に引き続き大掃除ネタです。
特に目新しいものはないですし、今年も便利なフレームワークやツールなど沢山出てくるだろうとは思いますが、レスポンシブWebデザインに関する情報が結構溜まっていたので、ざっくりとですが自分用の整理兼ねてまとめました。

フレームワーク

普段からフレームワーク自体ほとんど使うことがないのですが、便利なのは十分知っているし、いざ使うとき選択肢が少しでも多くあったほうが良いのでメモしてたものです。
ここで紹介しているもの以外にも沢山出回っていますが、個人的に使いやすいなとか覚えておきたいなと思うものだけに絞っています。

CSSHórus

CSSHórus

Kube CSS-framework

Kube CSS-framework

Bootstrap

Bootstrap

Skeleton

Skeleton

IVORY Framework

IVORY Framework

Wirefy

Wirefy

Responsive Grid System

Responsive Grid System

 

その他で気になったものや覚えておきたいものは以下。

Tipsやチュートリアル

基本とかど忘れしたときに見る用の参考サイトなど。

jQuey - グリッドレイアウト

レスポンシブなグリッドレイアウトを実装する際に役立つjQueryプラグイン。

jQuey - スライダー・カルーセル

レスポンシブに対応してるスライダーやカルーセルのjQueryプラグイン。

上記以外を探している場合は、以下のエントリーで沢山まとめられています。

ブレークポイントについて

基本は480pxと768pxみたいなのをよく見かけるんですが、Androidタブレットの普及だったり、デザインとか対応機種によってもブレークポイントは変わってくるので、その際に参考になるエントリー。

レスポンシブデザインのウインドウサイズの切替えについてまとめてみました | アシアルブログ

レスポンシブデザインのウインドウサイズの切替えについてまとめてみました | アシアルブログ

2012年7月時点の情報で各デバイスの画面サイズと切替えサイズがまとめられており、また各キャリアの機種のサイズも100機種分まとめられています。
わかりやすくビジュアル化されていたりして見やすい :)

レスポンシブWebデザインのブレークポイント調査 | Design Spice

レスポンシブWebデザインのブレークポイント調査 | Design Spice

100サイト分のブレークポイントを調査し、まとめたエントリー。
上記エントリーでも言われていますが、今まで多いのは基本をiPhoneで考えた480pxと基本をiPadで考えた768pxでしたが、Androidタブレットは800pxとかなので今後はタブレットに関しては800pxが無難かなと思います。

便利ツール

レスポンシブWebデザインは様々なデバイスに対応させるし確認も何かと面倒なので、こういう便利なものをどんどん使って少しでも作業時間を短く・楽にしたいですね。
他にも沢山ありますけどよく使うものだけに絞りました。

Responsivator

Responsivator

かなりの頻度で使っている表示確認ツールで、個人的にかなりオススメです。
URLを入れればそのサイトの表示にできるし、幅や高さのカスタマイズも簡単にできます。
また、OSSなので自分なりに使いやすくカスタマイズしたりもできます。

Screenfly by QuirkTools

Screenfly by QuirkTools

同じく表示確認ツールで、見たいURLを指定すれば「Desktop」「Tablet」「Mobile」「Television」の4タイプでのデバイスの見栄えを簡単に確認できます。

Viewport Resizer

Viewport Resizer

ブックマークレットタイプの確認ツールで、見たいサイトでブックマークレットを使用すれば上にツールバーが表示され、それぞれのデバイス表示を確認できます。
また、横向きの状態で見たい場合は、そのデバイスを再度選択すれば横向き表示になります。

resizeMyBrowser

resizeMyBrowser

ブラウザサイズを簡単に確認できるツールで、それぞれのサイズが書かれているボタンをクリックするだけで、そのサイズにブラウザがリサイズされます。
数値部分にはiPhone、iPad、Google Nexus one、MacBook Proなどのようなデバイス名も入っているのでわかりやすいです。
また、ページ下部の「Inner」でブラウザの内側が指定した大きさになり、「Outer」でブラウザの外枠を含んだ大きさになるように調整することもできます。

デザイン参考サイト

デザイン参考としてますが、組み方だったりコンテンツの見せ方だったり、デザイン以外の部分でも何かと参考になります。

  • Media Queries
    Media Queriesを使用したサイトのギャラリー。
  • Responsive Web Design JP
    日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト。
    国内だけのギャラリーというのも良いですが、デザインギャラリーだけでなくレスポンシブWebデザインに関しての情報もまとめています。
  • 40+ Great Responsive HTML Website Templates | tripwire magazine
    こちらはギャラリーではないですがレスポンシブなテンプレートのまとめエントリーで、デザインの参考だけでなく良いと思ったものがあればダウンロードして制作の手間を省いたりできますね。