デザイナーのための50の役立つレスポンシブWebデザインツール
ここ数日間、私たちはあなたがダウンロードしてあなたのサイトで使うことができる最高のWordPressとJoomlaの敏感なテーマのいくつかをあなたに示しました。今日、私たちはあなたにあげるつもりです 道具. レスポンシブWeb開発に関しては、フレームワーク、サービス、ダウンロード可能なスクリプトで構成されているので、それらは大きな助けになると思います。.
ツールの一覧全体を見やすくするために、次のセクションに分類しました。
- グリッドとフレームワーク
- スケッチシートとワイヤフレーム
- JavaScriptとjQueryプラグイン
- テストとプレビュー
- スライダー
- その他
グリッドとフレームワーク
[トップに戻る]
円柱
ColumnalはPulp + Pixelsプロジェクトで、960.gsからいくつかのコードインスピレーションが得られていますが、cssgrid.netから借用しています。 Columnalは、ブラウザウィンドウのサイズが変更されたときにグリッドを柔軟に動的に変更できるようにすることで、レスポンシブWebデザインに非常に役立ちます。.
スケルトン
スケルトンはシンプルで強力なCSSフレームワークであり、そのシンプルさと効率のために開発者とデザイナーによって主に好まれています。ここではJavascriptを使って煩わしさはありません。きれいなドキュメントを備えた優れた純粋なCSSのみ.
LessFramework 4
少ないフレームワークは、その作成者の名の通り、多かれ少なかれフレームワークです。これは、インラインCSSメディアクエリーを使用したアダプティブCSSグリッドシステムであり、レスポンシブWebサイトの開発をはるかに容易にします。.
セマンティックグリッドシステム
Semantic Grid Systemはレスポンシブグリッドレイアウトを設計するために使用されます。それは最大の効率を提供するためにLESS、SCSSまたはStylusのような前処理されたCSS拡張を使います。列幅と溝幅の選択、列数の選択、ピクセルとパーセントの切り替えができます。.
ゴールデングリッドシステム
ゴールデングリッドシステムは、レスポンシブWebデザインの出発点として機能する流体グリッドシステムです。それはウェブサイトが240から2560pxまで及ぶ見栄えの良いページを提供することを可能にします.
320以上
320 and UpはCSSメディアクエリーの定型文で、レスポンシブデザインの出発点となるテンプレートです。それは利用可能な他のいくつかのボイラープレートより完全に逆のアプローチに従います.
Inuit.css
Inuit.cssはCSSフレームワークで、初心者でも非常に使いやすいです。それは最小限のアプローチを持っているので、あなたは必要なものだけを扱う必要がありますが、必要ならば、利用可能な一握りのプラグインで拡張することもできます。.
グリッドレス
Gridlessは、美しいタイポグラフィを使用してレスポンシブでクロスブラウザのWebサイトを作成するための定型文です。このツールはプロジェクトの漸進的開発に焦点を合わせており、あらゆる設計の出発点として機能します。.
1140 CSSグリッド
1140 CSS Gridは、メルボルンのデザイナー、Andy Taylorによって設計された優れたCSSグリッドシステムです。大型モニター向けに1140pxでデザインを完璧にフィットさせることができます。.
1KBCSSGrid
Tyler Tateによって設計された1KB CSSグリッドは、シンプルで軽量なCSSグリッドジェネレータです。それはあなたが列の数、列幅と溝幅を設定することを可能にします、そしてあなたはあなたのウェブサイトグリッドのためのダウンロード可能なCSSを得ることができます.
ブートストラップ
TwitterのMark Otto氏とJacob Thornton氏によって作成および管理されているブートストラップは、優れたユーザインタフェース要素、レイアウト、およびJavaScriptツールのセットで、ダウンロードしてWebデザインプロジェクトで使用することができます。.
流体グリッド計算機
このシンプルなツールは、あなたがすぐにあなたの流体グリッドウェブサイトデザインのCSSをつかむのを助けます.
流体グリッド
Fluid Gridは、6、7、8、9、10、12、または16列に基づいてレスポンシブレイアウトを作成する、シンプルでありながら便利なFluid Gridフレームワークです。.
フルード
Fluridは、最大16列のシンプルで非常に便利なクロスブラウザCSSグリッドフレームワークです。さらに、ピクセルを余白に隠しません。.
グリッドセット
Gridsetは、柱状、非対称、固定、比率、複合、応答など、あらゆるタイプのグリッドを作成するためのツールです。 Mark Boultonによるこのツールはまだベータ版ですが、有望であることが証明されています。そして私が言及しました、それを使うことはリンクを埋め込むのと同じくらい簡単です.
Gridpak
Gridpakはオンラインレスポンシブグリッドジェネレータで、列数、パディング、ガターを変更したり、カスタムブレークポイントを追加したりできます。 CSSはツールによって生成され、ダウンロードの準備ができています。また、Photoshopでデザイン目的に使用できるPNGグリッドテンプレートも提供します。.
SimpleGrid
Michael Kuhnによって開発されたSimpleGridは、無限グリッドベースのレイアウトを作成するための非常に単純で直接的なCSSフレームワークです。デフォルトでは、SimpleGridは4つの異なる画面サイズ範囲に対応しています。.
スージー
OddbirdによるSusyは、Semantic Grid Systemと動作が似ています。追加のマークアップやその他の特別なクラスは使用しませんが、Saasおよびその拡張機能Compassのユーザーのみを対象としています。.
小さな流体グリッド
Tiny Fluid Gridは素晴らしいWebアプリです。インタラクティブな方法でWebサイトのグリッドシステムを決定するのに役立ちます。あなたはあなたのウェブサイトのレイアウトの列数、溝のパーセンテージ、最小と最大の幅を設定することができ、それのためのダウンロード可能なCSSを得ることができます.
可変グリッドシステム
Variable Grid SystemはSprySoftによって設計および開発されており、960 Grid Systemに基づいています。それは開発者とデザイナーがカスタムグリッドを生成してからそのグリッドに基づいて付随するCSSファイルをダウンロードすることを可能にします.
スケッチシートとワイヤフレーム
[トップに戻る]
レスポンシブWebデザインスケッチシート
このツールは、さまざまなデバイスにわたるWebサイトのレイアウト内のさまざまな要素の配置をマッピングするのに役立ちます。このデバイスの助けを借りて、あなたはさまざまな画面サイズや解像度に合わせてWebサイトの必要な要素を配置する場所のアイデアを形成することができます。.
レスポンシブワイヤフレーム
Responsive Wireframesは、AdobeのJames Mellersによって作成された実験的なツールです。それはあなたのレスポンシブデザインが様々なデスクトップやモバイル機器の実際のブラウザでどのように見えるかを視覚化するのに使用できるHTMLとCSS（画像やJSは使用されていない）のみで構築されています.
StyleTiles
スタイルタイルを使用すると、複雑になったスタイルとは無関係に、Webサイトがどのように見えるかについてのアイデアを開発することができます。それはあなたに完璧なレスポンシブデザインワークフローとクライアントのフィードバックを統合する能力のための機会を与えます.
JavaScriptとjQueryプラグイン
[トップに戻る]
Adapt.Js
Adapt.jsはJavascriptソリューションで、CSSメディアクエリーの優れた代替手段です。 @mediaアプローチを使用するのは良い習慣ですが、これはすべてのブラウザには機能しません。 960 Grid Systemの開発者であるNathan Smithは、この問題を解決するための非常に軽量なJavaScriptライブラリAdapt.jsをリリースしました。.
同位体
Isotopeは素晴らしいjQueryプラグインで、レスポンシブデザインを設計する際に非常に便利です。ブラウザウィンドウのサイズが変更されたときや画面サイズが小さいときにページの要素を並べ替えるのに役立つだけでなく、それらの要素をフィルタ処理するのにも役立ちます。.
石積み
Masonryは、動的で適応的なレイアウトを作成するために使用される優れたjQueryプラグインです。このプラグインは、レスポンシブデザインの要素を並べ替えるのに役立ちます。そのため、グリッド上の空きスペースにうまく収まるようになります。.
Respond.js
Respond.jsは、高速で軽量（3 Kb縮小および1 Kb gzip）スクリプトであり、その主な目的は、IEブラウザのようにCSS 3 Media QueriesをサポートしないWeb応答設計を可能にすることです。.
TinyNav.js
TinyNav.jsは、わずか362バイトの小型軽量のjQueryプラグインで、大きなナビゲーションリストを小さな画面用の小さなドロップダウンメニューに変換します。.
Wookmark jQuery Plugin
Wookmarkは、ブラウザウィンドウのサイズを検出し、ページの要素を自動的に列に配置するjQueryプラグインです。また、ページの下部にライブプレビューを表示することもできます。.
テストとプレビュー
[トップに戻る]
プロトフルイド
ProtoFluidは、Webベースのプロトタイプをさまざまな画面サイズと解像度でテストできるWebベースのプロトタイピングツールです。 URLを入力し、デバイス（または任意のカスタムディメンション）を選択して起動を押すだけです。 Webベースのツールなので、FireBugなどの他の拡張機能も使用できます。.
レスポンシブ
Responsive.Isは、TypeCastという別のブラウザエミュレータツールによって作成されます。このツールを使用して、レスポンシブデザインをテストできます。 URLを入力するだけで、選択したデバイスに応じて自動的にサイズが変わります。.
Responsivepx.Com
ResponsivePxはあなたのレスポンシブウェブサイトのデザインをテストするための素晴らしいツールです。他と区別する主な機能は、Webサイトをピクセル単位でサイズ変更する機能です。この素晴らしい機能により、ブレークポイントを特定し、CSSメディアクエリがサイトでどのように機能しているかをテストできます。.
レスポンシブWebデザインテストツール
あなたがそれらを構築または設計しながら、それはあなたがあなたのレスポンシブウェブサイトをさまざまなスクリーンサイズで同時に単一のスクリーンで見ることを可能にすることができる素晴らしいテストツールです。私は主にそれがデバッグを容易にするすべての画面解像度を並べて表示するのでこのツールが好きです.
ReView.Js
ReViewは、純粋なJavaScriptで開発された動的ビューポートシステムで、レスポンシブWebデザインのための素晴らしい表示体験を提供します。.
Screenfly
QuirkToolsのScreenflyは、デスクトップ、タブレット、モバイル、テレビなど、さまざまなデバイスでレスポンシブWebサイトを表示できるようにする素晴らしいツールです。スクロールを有効または無効にしたり、ディスプレイを回転させたりするオプションもあります。.
Screenqueri.es
Screenqueriesは、ピクセルに最適なレスポンシブデザインテストツールです。確認したいWebサイトアドレスを入力するだけで、このツールが実行して、デバイスに応じてさまざまな画面サイズでWebサイトが表示されます。ピクセル単位でサイズを手動で変更して、ブレークポイントを特定することもできます。.
責任者
あなたのサイトをiPhoneやiPadからKindleまで、そしてResponsinator上のAndroid上でさまざまなデバイスでテストしましょう。また、サイトを縦向きと横向きの両方のモードで表示します。私はこのツールがページに表示されているデバイスのアウトラインのためにずっと好きで、それは全体のプロセスにより多くの意味をもたらします.
スライダー
[トップに戻る]
ブルーベリー
Blueberryは、流動的なレイアウトやレスポンシブなレイアウトのために特別に機能するように書かれた、素晴らしいオープンソースのjQueryイメージスライダーです。.
エラスチリド
ブラウザウィンドウのサイズが変更されたとき、または画面が小さいときに自動的に画面サイズに調整されるカルーセルが必要ですか。 Elastislideはあなたのニーズに最も適したjQueryプラグインです。.
レスポンシブCSS3スライダー
これは純粋にレスポンシブなCSS3スライダーで、あらゆる画面サイズや画面解像度に簡単に適応できます。このスライダーのいいところは、デバイスの画面サイズが十分に小さいときに矢印がボックスの中に入ることです。 JavaScriptは必要ありません.
ResponsiveSlides.Js
ResponsiveSlides.Jsは、番号なしリストを使用してレスポンシブスライダーを作成する、非常にシンプルで非常に軽量な（1Kbのみ）jQueryプラグインです。Ie6以上のブラウザでも動作します。.
その他
[トップに戻る]
適応イメージ
Adaptive Imagesは、レスポンシブWebデザインのためのオンラインツールです。このツールは、訪問者の画面サイズを検出し、画面サイズと解像度に基づいて再スケーリングされた画像を作成、キャッシュ、および配信します。.
FitText.Js
FitText.jsは小さなJavaScriptツールで、ブラウザウィンドウのサイズを変更したときにテキストと見出しのサイズを自動的に変更できます。ボード上のこのツールとのテキストサイズの不一致の心配はもうありません.
FitVid.Js
ブラウザウィンドウのサイズが変更されたとき、またはデバイスの解像度が小さいときに、埋め込みビデオのサイズを変更しますか？ FitVid.Jsはあなたがこれを達成するのを助けることができます。これは、流動的な埋め込みビデオを実現するために使用される軽量でシンプルで使いやすいjQueryプラグインです。.
網膜の画像
Retina Imagesは素晴らしいJavascriptソリューションで、Retinaディスプレイで表示したときに自動的に@ 2Xの高解像度画像を提供します。あなたがする必要があるのは一つ一つの画像すべての高解像度版を置くことです、そしてそれは残りを管理します.
シームレスなレスポンシブフォトグリッド
Seamless Responsive Photo Gridは、画像を画像の間に隙間がないようにブラウザ上で端から端まで表示します。写真は並べて表示され、ページ全体に左から右へと縦に流れます。ブラウザウィンドウのサイズが変更されると、それに応じて列数が調整されます。.
スラブテキスト
SlabTextは、slabTextアルゴリズムに基づくBrian McAllisterによるjQueryプラグインまたはツールで、各行のサイズを変更して使用可能なスペースを埋める前に、見出しを行に分割します。実際にはFitText.Jsプラグインとよく似ています。.
Zurb - ResponsiveTables
レスポンシブデザインでビッグデータテーブルを処理する方法について疑問に思ったことはありますか？ Zurb、CSS / JSコンボがあなたに答えを与えます。それはデータテーブルを受け取り、それらがより小さなスクリーンデバイス上のレスポンシブレイアウトを壊さないようにそれらを修正します.
分類子
Categorizrは非常に小さなPHPスクリプトで、よりターゲットを絞ったWebエクスペリエンスを訪問者に提供します。それはあなたがタブレット、テレビ、モバイルまたはデスクトップのためのデバイス特有のデザインを届けるのを助けます.
メディアクエリブックマークレット
メディアクエリブックマークレットは、現在のビューポートのサイズと、そのメディアクエリに対して実行されたメディアクエリを表示します。.
レスポンシブ電卓
レスポンシブ電卓はあなたのレスポンシブWebサイトを設計しながら、あなたがピクセルをパーセンテージに変えるのを助けることができる非常に単純なオンラインツールです。.
来週
このシリーズの第2週では、レスポンシブWebデザイン（RWD）を実際に紹介するチュートリアルを紹介します。.
お見逃しなく.
