レスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースのまとめ
Post on:2012年6月19日
sponsors
レスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースを紹介します。
※キャプチャはLess Framework
[ad#ad-2]
Responsiveデザインの設計
A Simple Device Diagram for Responsive Design Planning
和訳：スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか
各デバイスのサイズ一覧を踏まえ、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのがよいか。PSD素材付き。
スマートフォンとデスクトップでのレイアウトの切替のパターン。
デバイスごとにどのようにレイアウトを変更するか代表的な5パターン。
Responsiveデザインを採用しているウェブサイトのギャラリー。
Responsive Navigation Patterns
Responsiveデザインに人気の高いナビゲーションの7つのパターンの利点と欠点。
[ad#ad-2]
Responsiveデザイン用のグリッドを設計できるオンラインサービス。
全体のサイズ、カラム数、カラムのパディング、溝のサイズ、ブレイクポイントを設定できます。
カラム数、溝、ブレイクポイントを決めて、さくっとグリッドを生成。
可変グリッドの設計
可変タイプのグリッドを設計ツールです。
- Fluid Grids
可変用のグリッドを数値入力でぱっぱっを作成します。 - Tiny Fluid Grid
可変用のグリッドを出来栄えを確認しながら作成します。
Responsiveデザインの実装
Techniques For Gracefully Degrading Media Queries
和訳：スマートフォン・デスクトップなど要件に合わせたMedia Queriesの実装方法のまとめ
モバイルファーストなのか、レガシーブラウザも考慮するのか、といった要件に合わせた実装方法のまとめ。
Responsive Design with CSS3 Media Queries
和訳：スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
シンプルなレイアウトをベースに、Media Queriesを使った実装を解説。
5 Useful CSS Tricks for Responsive Design
和訳：Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック
max-width, min-width, overflow:hidden; を使ったテクニックやテキストの処理など、Responsiveデザイン用の小技集。
ブレイクポイントを320px, 768px, 1280pxに設定したResponsiveデザイン用のフレームワーク。
グリッドをはじめ、ボタンやタブなどのUIエレメントも豊富に用意されているResponsiveデザイン用のCSSとJavaScriptのセット。
Rubber Layouts
和訳：スマフォから大きいサイズのデスクトップまで考慮したレイアウト -Rubber Layout
StaticとFluidのいいとこ取りをしたスタイルシートのレイアウト。
Media Queries非対応ブラウザへの対応
IE6/7/8をはじめとする古いブラウザでもMedia Queriesを利用できるようにするスクリプトです。
Retinaディスプレイへの対応
高解像度のRetinaディスプレイ用に高解像度の画像を表示するスクリプトです。
- jQuery Retina Plugin
RetinaディスプレイにはRetina用の高解像度の画像を表示するjQueryのプラグイン。 - Retina Images
こちらはスタンドアローンのスクリプト。 - Retina.js
スタンドアローンとLESS版があり、サーバー上に画像が用意されていたら自動で置き換え。
Responsiveデザインの確認
デスクトップ、タブレット、スマートフォン、テレビの各デバイスでの表示を確認。
タブレット、スマートフォンの各デバイスでの表示をまとめて全部表示します。
グリッドベースに表示サイズを変更可能で、localhostにも対応。
Media Queriesのデバッグ。
Adobe Shadow
ツールを使ってる動画：Adobe Shadow
Chromeからスマートフォンやタブレットを連動させるデバッグツール。
sponsors
