レスポンシブデザインのグリッドに関連する最も一般的なトピックを収集して、用語を「シャープ」にし、実用的な知識を体系化します。デザインレイアウトでグリッドを設定する方法、計算するパラメーター、考慮すべき適応環境の機能、および支払うべき詳細注意。
グリッドのタスクは、美観を維持するだけでなく、開発プロセスの制御を維持し、設計者と開発者の両方にとってプロセスを柔軟にすることです。 ネットは、開発者がプロジェクトに対するあなたのビジョンの便利さと理解でそれを使用できるように、開発者に渡す十分に詰め込まれたバックパックのようなものです。
グリッドを作成する前に、「作業フィールドを調べる」必要があります。ドラフトページレイアウトを作成し、詳細設計の段階で確実に証明される制限と重要な領域を見つけます。 これは、タスクの抽象的な理解を特定の目標に減らすのに役立ちます。 その後、レイアウトで作業グリッドの設定を開始できます。 これを行うには、3種類のグリッド（ 基本 、 列 、 デザイン）の構造を作成する必要があります。
基本グリッド
基本的なグリッドの特性と目的は、グラフ用紙に近いものです。 考えずに、要素間のすべての距離が等しく、均一であることを心配せずに、レイアウトの細部を移動できる便利な環境を作成する必要があります。
グリッドピッチは、ラジオボタン、チェックボックス、基本フォント、行の高さなどの不可分なパーティクル、コンテンツの表示ブロック間の最小距離、たとえば、ギャラリーや製品カードの写真間の距離に依存します。
基本グリッドは列と組み合わせる必要があります。 Photoshopのデフォルト設定は、デザイナーに10ピクセルのステップのグリッドを提供します。これは、ホットシフトキーを使用したオブジェクトのシフトに対応しますが、フォントサイズまたは列とインデントを構築するロジックには対応しません。 10 pxは整数ですが、それ以上のものはありません。 モバイルプラットフォームのグリッド設定では、4または8ピクセルが適切なステップと見なすことができます。 ここで、グリッドステップは、メインテキストの行の高さに正確に適合し、小さすぎてはなりません。
列グリッド
着陸、カード構造、ポートフォリオ、およびギャラリーのあるサイトでは、ゴムの適応がうまく機能します。 多数のフォーム、入力フィールド、小さなコントロールを持つ大規模なアグリゲーターと分類の場合、ラバースケーリングは困難を生じます。 制御するのは難しく、多くの場合、要素を変形させ、構造を破壊します：最初のスクロール（たとえば、広告）からのキーデータが失われ、要素が次の行にクロールされ、テキストブロックの整合性が破壊され、フォームが過度に広くなり、ユーザーがスクロールしすぎます
レスポンシブデザインでは、すべての解像度のレイアウト構造と情報の精度を維持する必要があるため、すべてのコントロールポイントに対してレイアウトを行う必要があります。 同時に、グリッドの列は静的なままで、画面の幅が大きくなると追加され、要素は列のリズムと遷移ポイントであるブレークポイントに従って位置を変更します 。 そのためには、640、768、960、1024、1280、および1440を使用できます。また、画面の解像度ごとに、異なる数の列があります。
グリッドに選択する列数は？
列グリッドは水平リズムを担当します。これを行うには、列幅とインデントの比率を選択する必要があります。これにより、大きなブロックの位置を簡単に変更できます。 これは、複数の列が大きなブロック（3-4など）に配置されている場合に可能です。 この場合のインデントは、要素を配置すべきではない空気の場です。 これは、 インデントが要素を揃えることができる別のガイドラインではないという意味で重要です。
したがって、列の数を選択するときは、ページで使用される長方形モジュールの数に留意する必要があります。 たとえば、テキストの説明、2つの大きなグラフィック、3つのテキストの段落を含む6つの写真のギャラリーがあります。 列の数は、2、3、6の倍数である必要があります。12が適切です。10、12、16、15、20ピクセルのインデント幅で960ピクセルのワークスペースを12列で割ると、60、64、65、68の列幅が得られます。 、70ピクセル。 これにより、いくつかのグリッドオプションが作成されます。たとえば、列幅が64ピクセルでインデントが16ピクセルの12列のグリッドです。
なぜ12列の数が習慣的ですか？ 最新のモニターはすべて、1024×768以上の解像度で動作します。 960ピクセルの作業領域を12の列に分割するのが最適です。2の倍数の列とインデントにうまく分割されるためです。これに基づいて、他の解像度の列数-768ピクセルの10列、1280ピクセルの16列、および20列を選択できます1440ピクセル以上。 実際、列は解像度ごとに追加または削減されます。
バナー広告用のグリッドを作成するタスクから開始する場合、バナー幅の300および240ピクセルへの分割に基づいて、インデントと列の最適な幅を見つける必要があります。 分割のすべてのオプションのうち、適切な（一致する）サイズは10、12、15、20です。バナー広告は、ほとんどのサイトを通過します。ほとんど公共交通レーンのようで、ほとんど影響はありません。 ただし、列の計算方法を変えて、バナーが1つの列の制限をわずかに超えて右側に移動できるようにすることもできますが、グリッド自体は他のモジュール（製品カードやビデオクリップなど）で構築されます。 この場合、レイアウトの設計段階で、ページ上でバナーの固定位置がある場所、およびグリッドに従うモジュールを一緒に作成するためにこれらのバナーに付随する要素を考慮する必要があります。
デザイナーメッシュ
デザイナーは、バナー広告だけでなく、他の同様に重要な要素やコンテンツの種類を考慮したレイアウトを作成する必要があります：縦型映画のポスター、四角い音楽カバー、大きな写真、ビデオ、10個の連続した記事など。 レイアウトは、横にある2つの狭い列と中央にある1つの広い列で構成できます。 広いインデントを持つ同一の列で構成されている場合もあれば、「フローティング」列（2つ、5つの場合）で構成されている場合もありますが、マテリアルのレイアウトの繰り返しと「小さい方から大きい方へ」の埋め込みにより表示されます。
Artem Gorbunovのアンカーオブジェクトに関するアドバイスからの小さな引用
長方形-モジュラーレイアウトの基本図
優れた強力なメッシュが長方形のモジュール上に構築されています。 あなたが描いたものすべてがプロポーショナル長方形で輪郭を描かれ、それらが互いに重なり合うことなくページ上に配置され、水平および垂直のリズムに従えば、合成は成功しました。
これは実際にはどういう意味ですか？ 物理的な世界の例としては、壁にカーフ壁の穴があるモジュラーグリッドがあり、引き出しと棚を任意の順序で配置できます。 そのような壁に素晴らしいものを掛けることさえできます-主なことは、オブジェクトが互いに干渉しないことです。さもないと、オブジェクトは倒れます。 強力なメッシュで同じこと。
別途、ベースライングリッドについて
歴史的に、InDesignユーザーは垂直リズムの概念に精通しています。 設定では、水平グリッドの行の高さを設定して作業できます。 しかし、設計者にとって、垂直リズムは「光学的概念」であり、各テキストブロック、行、インデントの綿密な研究によって作成されるため、正確なパラメーターは計算されません。 Webデザインでは、これらの微妙な点をすべて実装するのは困難です。 すべてのフォントの先頭を同じ行の高さにするだけでは不十分です。これにより、大きな段落では行がくっつき、小さな段落では腐食します。
CSSを使用して垂直リズムを作成するために、開発者は、基本フォントの光学的に快適な行の高さと、この高さの倍数であるすべてのテキストの先頭を使用します。 このような垂直のリズムに従属するテキストは、1つの記事があるページでは見栄えがよく、空気が多く、大きなフォントサイズのテキスト行はそれほど目立ちません。
WebTuts +垂直リズムの例 ：
それどころか、さまざまなサイズのテキストが多数ある場合、ページ上のすべてのテキストに垂直リズムを適用するのは最善の方法ではありません。 典型的な例は、 Vertical Rhythm Calculatorツールです。
Artem Gorbunovは、異なるテキストサイズのブロック内の行間隔を操作する際のアドバイスで、ベースラインのグリッドはかなり有害であり、テキスト行とインデントの高さを手動で調整する方が良いと述べています。 テキストの先頭は、形式（モジュール、プレート、テキストブロック）に応じて選択する必要があります。 テキストブロックの行が短い場合、リードを小さくすることができます。 テキストブロックが十分に広く、その中の行が長い場合は、リードをさらに行う必要があります。そうしないと、テキストが読みにくくなります。
行の高さは、テキストの各段落内の比率に従って選択する必要があります：行の太さは行の長さに依存し、見出しのインデントは陰謀に依存し、すべてが外側の左マージンと右マージンに依存します。
多くのフレームワーク、CSSグリッドがあり、それらの多くはフォントサイズの約1.5倍の行の高さを作成し、他のすべてのテキスト行を結果の行に収めることを提供します。 たとえば、 UnitGridSystem 。 インターバル番号と、この番号の倍数のすべてのテキストの陰謀を決定することを提案する人もいます。 ただし、この場合、フォントの一部を破棄する必要があります。 妥協点として、 Griloverツールが適しています。 フォントのベースラインの高さを調整するだけでなく、Scale factorパラメーターで線の固着/クリープを補正するという点で他と異なります。
レイアウトをレイアウトに転送するときにグリッドを使用する
グリッドをレイアウト設計者に個別の仕様として渡すと便利です。 グリッド付きの追加のジープをメインジープに取り付けるだけでなく、その上にメインサイズ（ピッチ、インデント、列幅、フォントサイズなど）を指定することもできます。 その後、レイアウトとレイアウトの対応がより正確になり、開発と同期の制御が両側で増加します。 モバイルインターフェイスに独立したピクセル（dp）があるように、これらはWeb上のremユニットです。 ピクセル単位でマークアップを作成したり、重要な要素と距離をremで指定したりできます。 グリッドとremのピッチが同じ数の倍数である場合に便利です。 たとえば、グリッドステップが8ピクセル、ベースフォントが16ピクセル、remが16ピクセルの場合、要素のサイズと多重度4の距離はグリッド上にあり、remに整数値を持ちます。 これにより、グリッド上のステップで要素間の距離をすぐに確認できます。 Rem Calculatorを使用すると、長い計算のないこのような積分値を視覚的に取得できます。
便利なリンク：
Smash Magazineのテキスト認識パターンと垂直リズムについて
teehan + laxのグリッドの詳細
グリロバーとタイプキャスト
グリッドシステムに関する記事とグリッドの例
モジュールを使用してデザイナーグリッドの構成を見つける例は、 Gridfierです。