レスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースのまとめ

レスポンシブWebデザインのサイト設計・実装・確認に役立つツールとリソースを紹介します。

サイトのキャプチャ

※キャプチャはLess Framework

Responsiveデザインの設計

サイトのキャプチャ

A Simple Device Diagram for Responsive Design Planning
和訳:スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか

各デバイスのサイズ一覧を踏まえ、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのがよいか。PSD素材付き。

サイトのキャプチャ

Responsively Wireframed

スマートフォンとデスクトップでのレイアウトの切替のパターン。

サイトのキャプチャ

Multi-Device Layout Patterns

デバイスごとにどのようにレイアウトを変更するか代表的な5パターン。

サイトのキャプチャ

Media Queries

Responsiveデザインを採用しているウェブサイトのギャラリー。

サイトのキャプチャ

Responsive Navigation Patterns

Responsiveデザインに人気の高いナビゲーションの7つのパターンの利点と欠点。

サイトのキャプチャ

Gridpak

Responsiveデザイン用のグリッドを設計できるオンラインサービス。
全体のサイズ、カラム数、カラムのパディング、溝のサイズ、ブレイクポイントを設定できます。

サイトのキャプチャ

Responsify

カラム数、溝、ブレイクポイントを決めて、さくっとグリッドを生成。

可変グリッドの設計

可変タイプのグリッドを設計ツールです。

  • 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デザイン用の小技集。

サイトのキャプチャ

Less Framework

ブレイクポイントを320px, 768px, 1280pxに設定したResponsiveデザイン用のフレームワーク。

サイトのキャプチャ

Skelton

グリッドをはじめ、ボタンやタブなどの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デザインの確認

サイトのキャプチャ

Screenfly

デスクトップ、タブレット、スマートフォン、テレビの各デバイスでの表示を確認。

サイトのキャプチャ

The Responsinator

タブレット、スマートフォンの各デバイスでの表示をまとめて全部表示します。

サイトのキャプチャ

Screenqueries

グリッドベースに表示サイズを変更可能で、localhostにも対応。

サイトのキャプチャ

Debugging CSS Media Queries

Media Queriesのデバッグ。

サイトのキャプチャ

Adobe Shadow
ツールを使ってる動画:Adobe Shadow

Chromeからスマートフォンやタブレットを連動させるデバッグツール。

top of page

©2017 coliss