レスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースのまとめ
Post on:2012年6月19日
レスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061905.png)
※キャプチャはLess Framework
[ad#ad-2]
Responsiveデザインの設計
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-01.png)
A Simple Device Diagram for Responsive Design Planning
和訳:スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか
各デバイスのサイズ一覧を踏まえ、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのがよいか。PSD素材付き。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-02.png)
スマートフォンとデスクトップでのレイアウトの切替のパターン。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-16.png)
デバイスごとにどのようにレイアウトを変更するか代表的な5パターン。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-03.png)
Responsiveデザインを採用しているウェブサイトのギャラリー。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-15.png)
Responsive Navigation Patterns
Responsiveデザインに人気の高いナビゲーションの7つのパターンの利点と欠点。
[ad#ad-2]
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-04.png)
Responsiveデザイン用のグリッドを設計できるオンラインサービス。
全体のサイズ、カラム数、カラムのパディング、溝のサイズ、ブレイクポイントを設定できます。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-18.png)
カラム数、溝、ブレイクポイントを決めて、さくっとグリッドを生成。
可変グリッドの設計
可変タイプのグリッドを設計ツールです。
- Fluid Grids
可変用のグリッドを数値入力でぱっぱっを作成します。 - Tiny Fluid Grid
可変用のグリッドを出来栄えを確認しながら作成します。
Responsiveデザインの実装
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-05.png)
Techniques For Gracefully Degrading Media Queries
和訳:スマートフォン・デスクトップなど要件に合わせたMedia Queriesの実装方法のまとめ
モバイルファーストなのか、レガシーブラウザも考慮するのか、といった要件に合わせた実装方法のまとめ。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-06.png)
Responsive Design with CSS3 Media Queries
和訳:スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
シンプルなレイアウトをベースに、Media Queriesを使った実装を解説。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-07.png)
5 Useful CSS Tricks for Responsive Design
和訳:Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック
max-width, min-width, overflow:hidden; を使ったテクニックやテキストの処理など、Responsiveデザイン用の小技集。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-08.png)
ブレイクポイントを320px, 768px, 1280pxに設定したResponsiveデザイン用のフレームワーク。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-09.png)
グリッドをはじめ、ボタンやタブなどのUIエレメントも豊富に用意されているResponsiveデザイン用のCSSとJavaScriptのセット。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-10.png)
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デザインの確認
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-11.png)
デスクトップ、タブレット、スマートフォン、テレビの各デバイスでの表示を確認。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-12.png)
タブレット、スマートフォンの各デバイスでの表示をまとめて全部表示します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-17.png)
グリッドベースに表示サイズを変更可能で、localhostにも対応。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-13.png)
Media Queriesのデバッグ。
![サイトのキャプチャ](/wp-content/uploads-2012/2012061904-14.png)
Adobe Shadow
ツールを使ってる動画:Adobe Shadow
Chromeからスマートフォンやタブレットを連動させるデバッグツール。
sponsors