あやね
グリッドレイアウトは、行と列に基づいた2次元のレイアウトシステムを提供します。構造化されたグリッド内でコンテンツを配置・整理できるため、レスポンシブなレイアウトが可能になり、デザインの柔軟性と一貫性が向上します。
I. イントロダクション
グリッドレイアウトの概要
グリッドレイアウトは、Pixsoにおけるオートレイアウトの新しいタイプであり、構造化されたデザインを構築するための、行と列を含む2次元的なレイアウト制御を提供します。
フレームにグリッドレイアウトを適用すると、コンテンツを水平方向と垂直方向の両方に同時に配置できます。
これにより、単一方向のオートレイアウトフレームを何重にもネストすることなく、レスポンシブなレイアウトをより簡単に作成できます。
モダンなレイアウトコンセプトを取り入れており、マズナリーレイアウトやレスポンシブデザインなどに最適です。
直感的なコントロールにより、要素の整列、拡張、配置を素早く行い、操作のハードルを下げます。
1. グリッドレイアウトは、他のレイアウトタイプと並んで3番目のオプションとして表示されます。なお、従来の「ラップ」レイアウトは、水平レイアウトの中に統合されました。
2. 複雑なオートレイアウトのネスト設定を繰り返すことなく、レスポンシブなレイアウトの作成と編集が可能になります。
3. グリッドレイアウトにはマイクロとマクロの両方の用途があります。コンポーネントの作成だけでなく、より大きなレイアウトフレームの構築にも使用できます。
4. また、グリッドレイアウトは既存のオートレイアウトの知識をベースにしており、フレームの「Fill」、パディング、スペーシングなどのコントロールも含まれています。
グリッドレイアウトの使用タイミング
グリッドレイアウトを使用することで、デザインにおける「柔軟性」と「構造」のバランスを最適化できます。
グリッドはレイアウトに対するより高度なコントロールを提供し、プロダクトデザインからマーケティングアセットまで幅広くサポートし、UIとデザインコンポジションを向上させます。
コンポーネントの設計・構築に使用できるだけでなく、要素を配置するためのフレームとしても機能します。
グリッドは新しいオートレイアウトのオプションであり、代替ではありません。単一方向へのスタッキングやコンテンツの折り返しを処理する場合は、通常のオートレイアウトを使用してください。
オートレイアウトフレームをグリッド内にネストしたり、グリッドフレームをオートレイアウトでスタックしたりすることが可能です。デザインのニーズに合わせて、両方のオプションを選択できます。
1. グリッドレイアウトは他のレイアウトタイプと並んで3番目のオプションとして表示され、従来の「ラップ」レイアウトは水平レイアウトに統合されました。
2. 複雑なオートレイアウトのネスト構造を構築することなく、レスポンシブなレイアウトを直感的に作成・編集できるようになります。
レイアウトパネルでのグリッドの使用
プロパティパネルの「レイアウト」タブでフレームを選択すると、新しいグリッドのオプションが表示されます。グリッドは標準的なオートレイアウトオプションの隣に表示されます。フレームを選択し、オートレイアウトの方向、または新しいグリッドレイアウトのいずれかを選択してください。
注意：水平方向のオートレイアウトを選択した後、オートレイアウトのオプションとして「ラップ」が利用可能になります。
II. セル設定
Pixsoでグリッドのフレームワークを構築する方法を学びましょう。
グリッドの設定
すべてのグリッドはフレームから始まります。空のフレーム、またはすでにネストされたアイテムが含まれているフレームにグリッドを追加できます。
まず、キャンバスにフレームを追加します。このフレームのサイズを 320 × 320 に設定します。
フレームを選択した状態で、デザインパネルの「オートレイアウト」セクションに移動し、グリッドアイコンをクリックします。
カラムとロウを追加します。デフォルトでは、セル間のスペーシングが10ピクセル、パディングが10ピクセルの2×2グリッドが作成されます。デザインのニーズに応じて、カラムとロウの数を増やすことができます。
1. ショートカット F / A を使用するか、上部ツールバーからフレームツールを選択して、新しいフレームを作成します。
2. フレームにグリッドを適用するには、右側パネルの「オートレイアウト」セクションにあるグリッドアイコンをクリックします。
3. 「セル設定」エリアで、フレームに必要な行数と列数をクリックして選択するか、入力フィールドに直接数値を入力します。
グリッドスペーシングの調整
フレームにグリッドレイアウトが適用されている場合、右側パネルでそのグリッドプロパティを調整できます。
グリッドはオートレイアウトと同様に「ギャップ」と「パディング」を使用し、グリッドセル間の間隔およびグリッドフレーム内の余白を定義します。
レイアウトパネルのスペーシングコントロールを使用して、グリッドアイテム間の水平方向および垂直方向のギャップを設定します。
1. グリッドフレームを選択して、垂直・水平方向のスペーシング、およびパディングを編集します。
2. スペーシングはレイアウトパネルで編集可能であり、キャンバス上で直接調整することはできません。フレームパディングを持つグリッドセル内にネストされた要素は、スペーシングの変更に動的に反応します。
3. パディングはいつでも調整可能で、グリッドの端に沿ったスペースを制御できます。グリッドレイアウトフレームの各辺のパディングは、個別に設定することが可能です。
III. グリッドの基本
グリッドの基本構造と、要素の配置や並べ替え方法について学びましょう。
グリッドセルへのコンテンツ追加
整列と明確な構造を維持しながら、グリッドセルにコンテンツを追加します。
シェイプ、フレーム、テキストなどの要素をグリッドレイアウト内のセルにドラッグします。各セルに保持できる要素は1つだけですが、1つの要素が複数のセルにまたがることは可能です。
要素は自動的にセル内に配置され、左から右、上から下へと空いているスペースを埋めるように並べられます。
セル間で要素をドラッグすることで、順序を入れ替えることができます。
⚠注意： 要素を水平または垂直方向にドラッグして並べ替えると、空きスペースを埋めるように再配置されます。これにより、並べ替え中に他のセルが不必要に押し出されるのを防ぎます。
1. アイテムをグリッドにドラッグすると、対象のセルがハイライト表示されます。また、セルを直接選択して、コピーしたアイテムをそのセル内に直接ペーストすることも可能です。
2. 複数の要素を一度にグリッドへドラッグした場合、それらは空いているセルを埋めるように配置されます。
3. 1つまたは複数のアイテムを目的の位置にドラッグするだけで、グリッド内の順序を簡単に変更できます。再配置のための十分なスペースを確保するため、要素の並べ替えは「左から右」「下から上」の順で行うのが最適です。
要素のリサイズとセルのスパン
要素をより大きなスペースに配置したい場合、グリッドは柔軟なリサイズをサポートします。
グリッド内の要素を選択し、キャンバス上のハンドルを使用して手動でリサイズするか、デザインパネルに目的の数値を入力します。
要素を複数の行や列にまたがるようにリサイズします。サイズを調整するためにドラッグし、セルの端に近づくと、セルを埋めるようにスナップします。要素は水平・垂直の両方向に広げることができます。
動的なスケーリングにはパディングを活用してください。リサイズ時に要素の端をグリッドセルに合わせることで、指定したセル全体にスパンさせることができます。
1. グリッド内の要素を選択すると周囲にコントロールポイントが表示され、右側のパネルで詳細なプロパティを調整できるようになります。
2. グリッド内の要素をリサイズするには、ハンドルをクリックしてドラッグするだけです。要素を垂直方向と水平方向の両方に引き伸ばすことができます。
3. 要素をセルの端に合わせて配置し、リサイズ設定を「Fill Frame」に設定します。「Fill」に設定された要素は、セルサイズの変更に合わせて動的に反応します。
要素のオーバーラップと配置
異なるセル間で要素を重ね合わせ、その重なり順を定義します。
1. 要素を調整する際、現在のセルを超えて他のセルと重なる場合があります。
2. レイヤー配置のショートカットを使用して、要素の重なり順を変更します：
前面へ移動
背面へ移動
最前面へ移動 / 最背面へ移動
3. オーバーラップした要素のレイヤーパネル上の重なり順は、グリッドの構造に影響を与えることなく自由に調整可能です。
IV. セルのネストと整列
グリッドレイアウト内で、フレーム、コンポーネント、および他のグリッドフレームを効果的にネストし、整列させる方法を学びましょう。
グリッドセル内への要素のネスト
Pixsoのオブジェクトをグリッドセル内にネストします。各セルに配置できるオブジェクトは1つだけです。
フレームやコンポーネントのインスタンスをグリッドセル内にネストできます。これらは通常のオブジェクトと同様に振る舞い、セルを「Fill」する際には、子要素が制約やオートレイアウトのリサイズ設定に従って反応します。
ネストされたフレーム内のより深い階層にレイヤーを配置するために使用します。これは、深くネストされたフレームで精密な位置決めを行う際に特に有効です。
1. グリッドを使用して、アイコン、テキスト、シェイプ、画像、グループなどの要素を整理します。各セルには1つのアイテムのみ保持できます。
2. グリッド内には、フレーム、オートレイアウト、および他のグリッドをネストできます。リサイズ時、フレームやコンポーネントはネストされたオブジェクトの制約に従います。
3. 要素をネストされたフレーム内に配置するには、Cmd（または Ctrl）をホールドしながらドラッグして挿入します。
グリッドセル内での要素の整列
「Fill」設定になっていないセル（要素がセルより小さい、または大きい場合）において、要素の整列を変更します。
デフォルトでは、固定サイズのアイテムはセルの左上に整列されます。
パネル内の整列ツールを使用して、オブジェクトをセル内でどのように配置するか調整します。
要素上のコントロールポイントは、セル内の整列状態に基づいて変化します。たとえば、左下に整列されたアイテムは、リサイズ用に上端と右端にハンドルが表示されます。
1. 「Fill」に設定されていない固定サイズの要素は、セル内でリサイズされる際、デフォルトで左上に整列されます。その後、下方向や右方向へ拡張して他のセルとオーバーラップさせるようにリサイズできます。
2. 配置パネルの整列ツールを使用して、アイテムをセル内でどのように整列させるかを変更します。上記で選択された要素は、セルの中央に配置されます。
3. UIのリサイズは要素の整列状態を反映し、セル内での調整方法に影響を与えます。左下に整列された要素は、上端と右端のハンドルからリサイズ可能です。
V. リサイズと配置
グリッドを使用して、単純なものから複雑なものまで、さまざまなレイアウトを作成する方法を確認しましょう。
オートレイアウトを無視 / 絶対配置
グリッドのルールを解除したい場合は、絶対配置を使用することで、グリッド内で要素を自由に配置できます。
絶対配置が設定された要素はグリッドレイアウトのルールに従わないため、カスタム配置のためのクリエイティブな自由が得られます。
デザインパネルで制約を設定し、親のグリッドフレームをリサイズした際のオブジェクトの挙動を制御します。
1. 絶対配置の要素は、フレーム内の任意の場所に自由に配置できます。
2. オブジェクトが「オートレイアウトを無視」するように設定されると、アイコンがハイライトされます。また、左側のレイヤーパネルのアイコンには、四隅に境界線が表示されます。
3. 「オートレイアウトを無視」に設定した要素の制約を定義することで、親のグリッドフレームをリサイズした際に要素がどのように適応するかを決定します。
VI. 開発モードでのグリッドレイアウト
日常のワークフローにグリッドを組み込むための、さまざまな活用方法を確認しましょう。
グリッドと開発モード
PixsoのグリッドはCSS Gridの設計に基づいているため、デザイナーが画面上で見ているものは、エンジニアがそのまま実装できるものと完全に一致します。これは視覚的なメリットだけでなく、コードの実装が開発者にとって極めてスムーズであることを保証します。
CSS Grid用語の継承： 「grid-column」「grid-gap」「grid-row」といった用語がそのまま開発モードの要素に対応しています。これらはエンジニアが実際のコーディングで使用する用語と一致しています。
値の直接利用： 開発者はレイアウトパネルから数値を直接コピーしたり、CSSを記述する際の参照として活用したりできます。
ハンドオフの効率化： この統一された設計により、ハンドオフプロセスが簡素化されます。設計フェーズから本番実装まで、グリッドレイアウトは意図した通りに一貫性を保ち、デバッグや実装が容易になります。
CSS Gridの確認 開発モードでグリッドフレームワークとその子要素をインスペクトすることで、エンジニアはグリッドがどのようにCSSでレンダリングされるかを正確に理解できます。
グリッドフレームを選択し、開発モードを有効にします。
グリッドフレームが選択されている間、行・列のギャップやパディングなどのプロパティが表示されます。
グリッドセルを占有している要素を選択すると、スパンやアスペクト比などのプロパティが表示されます。
1. 開発モードでグリッドフレームを選択すると、カラム数、ロウ数、ギャップ、パディングを確認できるほか、レイアウトのスパンや整列状態もチェック可能です。
2. グリッドフレームのコードブロックには、グリッド設定に対応するプロパティと値が表示されます。
3. グリッドセル内の各要素には、グリッドフレーム内でどのようにレイアウトされているかを示すプロパティと値が表示されます。
VII. 活用事例
グリッドがどのような強力なレイアウトの可能性を切り拓くか、以下の例で確認してみましょう。
Webサイトのレイアウト
複雑なセクション配置やレスポンシブなコンテンツの配列に最適です。
グリッドカレンダー
正確な日付の整列や、予定に合わせたセルのスパン管理が容易になります。
