コンテンツ
- 始めるためのツール
- 01.レスポンシブWebデザインのスケッチシート
- 02.レスポンシブデザインスケッチブック
- 03.レスポンシブワイヤーフレーム
- 04.マルチデバイスレイアウトパターン
- 05.スタイルタイル
- フレキシブル/流体グリッド用のツール
- 06.ゴールデングリッドシステム
- 07. Foldy960
- 08. SimpleGrid
- 09.1140pxのCSSグリッド
- 10.柱状CSSグリッドシステム
- 11.セマンティックグリッドシステム
- 12.スージー
- 13.グリッドパック
- 14.グリッドセット
- 15.RWD用のより優れたPhotoshopグリッド
- 16.流体グリッド
- 17.レスポンシブ計算機
- レスポンシブ画像（およびテキスト）用のツール
- 18.レスポンシブ画像
- 19.アダプティブイメージ
- 20. Sencha.io Src（以前のTinysrc）
- 21. FitText
- 22. slabText
- メディアクエリ用のツール
- 23. Respond.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. Categorizr
- レスポンシブデザイン（およびモバイル）ボイラープレート
- 27.320以上
- 28.グリッドレス
- 29.スケルトン
- 30.ブートストラップ
- プラグイン、シム、ポリフィル
- 31.レスポンシブプラグイン
- 32.転覆
- 33. MediaTable
- 「テスト、テスト：1-2-3 ...」
- 34. resizeMyBrowser
- 35. responsepx
- 36.レスポンシブデザインテスト
- 37.レスポンシネーター
- 38. Responsive.is
- 39. Screenqueri.es
- 40.アプタス
- 41.レスポンシブデザインのブックマークレット
- 42.レスポンシブデザインテストのブックマークレット
- 43.スクリーンフライ
- 44.メディアクエリインジケーター
- 45.シム
- 46.ドライブイン
- 47.アドビシャドウ
- 48. Opera Mobile Emulator +リモートデバッグ
- さらなるインスピレーション
- 49. MediaQueri.es
- 50. @RWD
- これが好きですか？これらを読んでください！
イーサン・マルコットが彼の記事「レスポンシブWebデザイン」とベストセラーの本の両方で紹介/造語したように、サイトをレスポンシブにするためには3つの要素が必要です。
- フレキシブル/流体グリッド
- レスポンシブ画像
- メディアクエリ
レスポンシブウェブデザインに関する動機、概念、テクニックをカバーするすばらしい記事は他にもたくさんあるので、責任を持ってレスポンシブになるのに役立ついくつかのトップツールにこの記事の焦点を当てていきます。
始めるためのツール
サイトの構築を開始する前に、ページ上の要素が、表示されるさまざまなデバイスのさまざまなブラウザサイズに合わせてどのように適応するかをスケッチし、主に考えることから生じることが多い切断を回避することをお勧めします。デスクトップのデザインと、後から付け加えたレスポンシブイテレーションの残りの部分（特にStephanie（Sullivan）Rewisのコメントを参照）。
01.レスポンシブWebデザインのスケッチシート
Jeremy P Alfordによるこのレスポンシブスケッチシートのセットは、ページセクションがさまざまな解像度でどのようにシフトするかをマッピングするための優れた出発点です。
02.レスポンシブデザインスケッチブック
すべてのスケッチを1か所に保管したい場合は、AppSketchbook社による50枚のレスポンシブスケッチシートのこのワイヤー製本を検討することをお勧めします。
03.レスポンシブワイヤーフレーム
レスポンシブウェブサイトを構築することの難しさの1つは、レスポンシブデザインがどのように機能するかを示すためにワイヤーフレームを使用することです。 AdobeのJamesMellersは、この実験的なツールをまとめて、複雑なレイアウトの応答性の高いワイヤーフレーミングがどのように機能するかを示しました。
04.マルチデバイスレイアウトパターン
レスポンシブデザインを計画するときは、他の人があなたの前でどのようにアプローチしたかを確認すると便利です。そのため、人気のあるパターンと例へのリンクを一覧表示するLukeWroblewskiのマルチデバイスレイアウトパターンから始めるのが最適です。
05.スタイルタイル
サマナサウォーレンのスタイルタイルは、レスポンシブ時代のデザインのための新しい技術を提案しています。固定幅のデザインモックアップではなく、これらは見本やムードボードのようなものであり、詳細に立ち入ることなく一般的なデザインアプローチを示しています。
フレキシブル/流体グリッド用のツール
先に述べたように、レスポンシブデザインに必要な最初のコンポーネントは、フレキシブル/流体グリッドです。以下はすでに構築済みです。ダウンロードするだけで、より応答性の高いサイトにすぐにアクセスできます。
06.ゴールデングリッドシステム
LessFrameworkも開発したJoniKorpiは、レスポンシブデザイン用の信頼性の高いグリッドシステムのこの新しいバージョンを最近リリースしました。ゴールデングリッドシステムは、16列、8列、4列に簡単に適応できるため、「折りたたみ」と見なされ、テスト用にページ上のグリッドを公開する小さなブラウザオーバーレイも備えています。
07. Foldy960
Paravel、Inc。の才能ある男性は、レスポンシブプロジェクトの基盤として使用する修正された960.gsグリッドをリリースしました。
08. SimpleGrid
Conor MuirheadによるSimpleGridは、レスポンシブネスを組み込んで構築されているため、レスポンシブWebサイトプロジェクトを簡単に立ち上げて実行できます。
09.1140pxのCSSグリッド
もう1つの優れたレスポンシブグリッドシステムは、メルボルンのデザイナーAndyTaylorによる1140pxCSSグリッドです。これは、広いデスクトップ解像度からモバイルにまで及びます。
10.柱状CSSグリッドシステム
Pulp + Pixels別名クリエイティブディレクターのNickGorslineによって作成されたColumnalグリッドシステムは、1140pxグリッドシステムに基づいていますが、スケッチシートとワイヤーフレーミングテンプレートを備えたデザインキット、CSSデバッグスタイルなどの追加機能があります。
11.セマンティックグリッドシステム
SassやLESSなどの前処理されたCSS拡張機能はますます人気が高まっており、Tyler Tateのセマンティックグリッドシステムは、不要なクラスや要素を使用しないと主張するこのグリッドシステムで最大限の効果を発揮します。詳細については、coding.smashingmagazine.com / 2011/08/23 / the-semantic-grid-system-page-layout-for-tomorrow /をご覧ください。
12.スージー
セマンティックグリッドシステムと同様に、OddbirdのSUSYは、追加のマークアップや特別なクラスを使用しないグリッドシステムを作成しましたが、SUSYはSass（およびその拡張機能であるCompass）のユーザーのみを対象としています。
13.グリッドパック
Erskine DesignによるGridpakは、最新のレスポンシブグリッドジェネレーターの1つです。これにより、列とガターをいくつかのブレークポイントに設定し、CSS、JavaScript、およびPNGファイルを出力して、チーム全体が同じ開始点から作業できるようにすることができます。
14.グリッドセット
私がこれを書いている時点では、実際にはまだリリースされていないので、Gridsetにはまだ少し謎の空気があります。しかし、Mark Boulton Designのツールは、特注の非規範的なグリッドシステムと、グリッドをオンラインで保存および管理する方法を約束します。
15.RWD用のより優れたPhotoshopグリッド
Elliot Jay Stocksは、古い960pxの事実上のグリッド標準を廃止し、代わりに1000pxのベースから作業することを提案し、すべてのパーセンテージ計算をより簡単に処理できるようにします。あなたが同意するなら、彼はあなたが働き始めるためのPSDを作りました。
16.流体グリッド
デザインが高度に専門化されており、独自のカスタムグリッドを作成する必要がある場合は、.netAwardsの優秀な新人候補者であるハリーロバーツの流体グリッド計算機を使用して作成できます。
17.レスポンシブ計算機
別のピクセルからパーセンテージへの計算機ですが、これはStu Robsonによるもので、すべてのCSSルールを生成することで、他のルールよりも一歩進んでいます。つまり、それらをコピーしてスタイルシートに貼り付けるだけです。
レスポンシブ画像（およびテキスト）用のツール
レスポンシブウェブデザインのもう1つの重要な要素は、流動的な画像です。流動的な画像を実現する手法は簡単ですが、さまざまなデバイスのパフォーマンスとページの読み込みを最適化することは、レスポンシブWebデザインにおける最大の課題の1つと思われます。この問題に取り組むためのいくつかのリソースがあります。
18.レスポンシブ画像
フィラメントグループは、画面の解像度に基づいて適切なサイズの画像を送信する方法を考案しました。レスポンシブかつレスポンシブに拡大縮小するモバイルファーストの画像を使用したこの実験では、参照するサイズの異なる2つの画像を用意する必要があります。
19.アダプティブイメージ
Matt Wilcoxは、レスポンシブ画像ツールからインスピレーションを得て、PHPと小さなJavaScriptを使用して、追加のマークアップを必要とせずにユーザーのデバイスに適切な画像を提供するアダプティブ画像を作成しました。
20. Sencha.io Src（以前のTinysrc）
Senchaは、ホストされている画像の最適化されたバージョンを、それらを要求するデバイスのサイズに合わせて送信するクラウドサービスを提供します。使用方法については、docs.sencha.com / io / src /を参照してください。
21. FitText
Paravel、Incのさらに別の宝石はFitText.jsです。これは、見出しのWebタイプをデザインとデバイスに対応させるjQueryプラグインです。詳細については、trentwalton.com / 2011/05/10 / fit-to-scale /を参照してください。
22. slabText
FitTextとSlabTypeアルゴリズムに触発されたBrianMcAllisterのslabTextは、定義された幅を維持しながらレスポンシブにサイズ変更される太字のテキストブロックを作成するjQueryプラグインです。
メディアクエリ用のツール
さまざまなデバイス、流動的なグリッド、流動的な画像でレイアウトがどのように変化するかがわかったので、ページの要素を応答性のある状態に移行するためのメディアクエリが必要です。
23. Respond.js
レスポンシブデザインの問題の1つは、メディアクエリを読み取れないブラウザが取り残されることです。これはターゲットオーディエンスにとって問題ではないかもしれませんが、それでも古いブラウザのユーザーに対応することは良い習慣です。 Scott JehlによるRespond.jsは、プロパティmin-widthとmax-widthのみをサポートします。
詳細については、filamentgroup.com / lab / Respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more /を参照してください。
24. CSS3-Mediaqueries.js
Wouter van der GraafによるCSS3-Mediaqueries.jsを使用すると、古いバージョンのIEやその他のブラウザで、あらゆる種類のメディアクエリを効果的にテストして適用できます。
25. Adapt.js
オリジナルの960.gsグリッドシステムの作成者であるNathanSmithは、Adapt.jsを作成しました。これは、ブラウザのサイズを検出し、必要なスタイルシートのみを提供するスクリプトです。メディアクエリと同様ですが、メディアクエリはありません。つまり、古いブラウザでも機能します。
26. Categorizr
これは、反対の角度からアプローチされたデバイス検出です。BrettJankordのCategorizrスクリプトは、デスクトップまたはタブレットとして検出されない限り、デバイスがモバイルであると想定し、同情的な方法でブラウザーにリソースを提供できるようにします。
レスポンシブデザイン（およびモバイル）ボイラープレート
効率的な応答性の高いワークフローの精神で、ボイラープレートは、デザインをブラウザーに遅かれ早かれ移動するプロセスを容易にします。これらの定型文のほとんどは、上記のツールの最高のものを1つのきちんとしたパッケージに組み合わせています。つまり、スクリプトで強化された柔軟なグリッドでありながら、モバイルファーストのコンテンツアウト哲学を実装しています。
27.320以上
Andy Clarkeの320以上は、LESSやBootstrapなどの他の多くの最新のWebデザインツールと統合するモバイルファーストのボイラープレートです（＃30を参照）。これは、サイトをすばやく稼働させるための軽量で機敏な方法です。また、Andyとのインタビューもチェックしてください。彼は、新しいバージョンについて詳しく説明しています。
28.グリッドレス
GridlessはHTML5とCSS3のボイラープレートであり、タイポグラフィと組み込みのクロスブラウザー互換性に重点を置いて、レスポンシブデザインの基盤として機能します。
29.スケルトン
開始点が最小の解像度である前の2つのボイラープレートとは異なり、Dave Gamacheによって作成されたSkeleton開発キットは、960.gsグリッドシステムに基づいており、モバイルにスケールダウンします。 Skeletonは、開発者がその上にスタイルを構築するための優れたスタイルフレームワークも誇っています。
30.ブートストラップ
Twitterによって構築され、現在はオープンソースになっているBootstrapは、サイトをすばやくオンラインにするためのフレームワークと一連のコンポーネントであり、バージョン2以降、そのコア部分はすべて応答性よく機能します。
プラグイン、シム、ポリフィル
最新のブラウザとソフトウェアはレスポンシブに対応する傾向がありますが、一貫したエクスペリエンスを提供するために追加のツールを使用しなければならない場合があります。
31.レスポンシブプラグイン
Marios Lublinskiは、現在のWPテーマをレスポンシブテーマに変えることを約束するWordPressプラグインを作成しました。これがどのように機能するかは、この記事の執筆時点ではリリースされていないため、まだわかりませんが、その約束を果たしている場合は、非常に役立つはずです。
32.転覆
コンテンツオーバーフロー処理はデスクトップブラウザでうまく機能しますが、古いモバイルブラウザは一貫性のない処理をします。勤勉なフィラメントグループのOverthrowポリフィルは、デバイス間で一貫した優雅な劣化を追加し、すべてのモバイルユーザーが可能な限り最高のエクスペリエンスを確実に得られるようにします。
33. MediaTable
Marco PegoraroのjQueryプラグインであるMediaTableは、Respond.jsと連携して、小さな画面のデバイスで大きなデータテーブルを表示する方法、レスポンシブ列を作成する方法、および必要に応じて表示/非表示の切り替えを追加する方法の問題を回避するのに役立ちます。
「テスト、テスト：1-2-3 ...」
レスポンシブワークフローのもう1つの側面は、ターゲットデバイスと解像度を把握してから、それらをテストすることです。
34. resizeMyBrowser
フロントエンド開発者のChenLuoによるresizeMyBrowserには、レスポンシブデザインのページをテストしたり、ニーズに合ったものが見つからない場合に新しいプリセットを作成したりするためのブラウザウィンドウ用のプリセットサイズがいくつかあります。
35. responsepx
Remy Sharpによって構築されたresizeMyBrowserと同様に、sensitivepxはウィンドウにページをロードし、幅と高さをテストして、メディアクエリがどの程度適切に実行されているか、およびブレークポイントがデザインのどこにあるかを判断できます。
36.レスポンシブデザインテスト
デザイナー兼開発者のMattKersleyによる非常に便利なツール：レスポンシブデザインテストにレスポンシブサイトのURLを入力するだけで、さまざまなブラウザーサイズでどのようにレンダリングされるかを確認できます。
37.レスポンシネーター
URLを入力すると、レスポンシネーターは、多くの一般的なデバイスサイズで、冷酷なロボット効率でどのように表示されるかを示します。 TamaPugsleyとAndyHoveyがこれを担当しています。
38. Responsive.is
別のページはめ込みデバイスエミュレーターであるResponsive.isを使用すると、URLを入力して、さまざまなプリセット間でURLのサイズをすばやく変更できます。これは、次のTypecastアプリの背後にあるチームによって作成されました。
39. Screenqueri.es
もう1つのブラウザ寸法ツールですが、Mandar ShirkeのScreenqueri.esは、モバイルとタブレットのプリセットの豊富なセットに加えて、細かい測定を非常に簡単にするグリッドと定規を備えていることで差別化を図っています。
40.アプタス
複数の定義されたサイズでサイトをテストするための別のアプリですが、AptusはMacネイティブです。 Mac App Storeで入手可能であり、ネイティブであることにより、簡単なスクリーンショットやオフラインサポートなどの追加機能が提供されます。
41.レスポンシブデザインのブックマークレット
Victor Coulonは、非常にシンプルで効果的なブックマークレットを作成しました。 Webページでアクティブにすると、ツールバーが追加され、4つの一般的な画面サイズを切り替えることができるため、サイトがさまざまなサイズでどのようにレンダリングされるかを確認できます。
42.レスポンシブデザインテストのブックマークレット
ベンジャミンキーンによるこのブックマークレットでは、独自のデバイスサイズを定義できるようにすることで、さらにカスタマイズすることができます。有効にすると、選択したすべてのサイズでサイトが表示され、簡単に比較できるように並べて表示されます。
43.スクリーンフライ
QuirkToolsのScreenflyを使用すると、デスクトップ、タブレット、モバイル、テレビでさまざまな解像度でサイトをテストできます。デスクトップテストは現在Safariに限定されていますが、タブレットとモバイルにはデバイスとブラウザー用のより多くのオプションがあります。テレビはOperaに限定されています。
44.メディアクエリインジケーター
Johan Brookは、メディアクエリがブラウザによってトリガーされたことをテストするための純粋なCSSの方法を提供します。メディアクエリインジケーターは、デザインの限界点をテストして試すためのもう1つの優れたツールです。
45.シム
RWDムーブメントのポスターボーイであるボストングローブの再設計に使用されたツールの1つであるShimは、同じWifiネットワーク上の複数のデバイス間でWebページを実行するNode.jsアプリであり、デバイス間のテストをはるかに簡単にします。 。
46.ドライブイン
Shimを実行するためのNode.jsサーバーがない場合、Scott JehlはDrive-Inと呼ばれるより単純なバージョンを作成しました。これは基本的に同じように機能しますが、PHP、Apache、および.htaccessファイルを使用します。
47.アドビシャドウ
アドビは、このリモートデバッグツールを使用してWebテクノロジーへの取り組みを続けています。 MacまたはWindowsにShadowとChrome拡張機能をインストールし、AndroidまたはiPhoneにShadowクライアントをインストールすると、さまざまなデバイス間でWebページを共有できます。
48. Opera Mobile Emulator +リモートデバッグ
モバイルページをデバッグする簡単な方法は、OperaとOpera Mobile Emulatorをインストールし、2つをリモートデバッグオプションで接続することです。セットアップがシンプルで高速であり、WebKit以上でテストできるという追加の利点があります。
さらなるインスピレーション
他の人がどのようにデザインをレスポンシブにしているのかを知りたいですか？
49. MediaQueri.es
まだご覧になっていない場合は、Mediaqueri.esサイトには、レスポンシブ側にクロスオーバーしたサイトの数が増え続けています。
50. @RWD
Ethan Marcotteは、RWDの世界からの最新ニュース、ツール、ショーケースを提供するTwitterアカウントを運営しています。
デニースジェイコブスはスピーカー、著者、ウェブデザイントレーナー、創造性の伝道者であることを愛し、ピーターガストンはThe Book of CSS3の著者であり、BrokenLinksでブログを書いているベテランのウェブ開発者です。
これが好きですか？これらを読んでください！
- モバイルウェブサイトを構築するためのプロのヒント
- トップCSSとJavaScriptのテクニック
- アプリの作り方
- デザイナーのための最高の無料のウェブフォント
- 拡張現実の次のステップを発見する
- 無料のテクスチャをダウンロード：高解像度で今すぐ使用可能
