コンテンツを揃え、デバイスサイズに合わせてデザインを簡単に変換するために、プロジェクトでレイアウトグリッドを設定する方法について説明します。

必要な情報

このサンプルファイルは、このチュートリアルの学習内容の練習に使用できるAdobe Stock素材です。このチュートリアル以外でサンプルファイルを使用する場合には、Adobe Stockのライセンスを購入してください。このサンプルファイルの使用に適用される利用条件については、フォルダー内のReadMeファイルを参照してください。

学習した内容:アートボード間でのレイアウトグリッドの適用および編集

Adobe XD CCのレイアウトグリッドは、デザインコンテンツを揃えたり、様々なデバイスサイズのデザインをおこなうときに役立つ列グリッドです。レイアウトグリッドは、必要に応じてすばやく簡単に調整できます。

レイアウトグリッドの適用

  • 1つまたは複数のアートボードを選択し、プロパティインスペクターの「グリッド」セクションで、メニューから「レイアウト」を選択し、オプションを有効にします。デフォルトのレイアウトグリッドが適用されます。

レイアウトグリッドの編集オプション

アートボードにレイアウトグリッドを適用したら、プロパティインスペクターの「グリッド」セクションで設定を調整できます。

列数:webデザインでは通常、12列または16列のグリッドを使用します。必要に応じて列数を変更できます。

カラー:カラーオプションをクリックすると、レイアウトグリッド列のカラーを調整できます。不透明度を0に設定すると、列の塗りのカラーが除去され、アウトラインになります。

段間幅:段間幅は、列の間の距離です。デフォルトでは、列数、マージン、アートボード全体の幅にもとづいて値が計算されます。

マージン:マージンは、レイアウトグリッドと、アートボードの4つの辺との間の距離です。デフォルトでは、それらを一括して編集できます。プロパティインスペクターの「グリッド」セクションで「各辺に異なるマージンを使用」アイコンをクリックすると個別に編集できます。

ヒント:プロパティインスペクターの「グリッド」セクションで、「初期設定に戻す」ボタンをクリックすると、レイアウトグリッドのオプションをデフォルトの設定にリセットできます。

カスタムレイアウトグリッドの保存と適用

  • 今後作成するアートボードに適用できるように、現在のレイアウトグリッドを新しいデフォルトとして保存するには、プロパティインスペクターの「グリッド」セクションで「初期設定にする」ボタンをクリックします。選択したアートボードのレイアウトグリッドオプションが、デフォルトの設定として保存されます。
  • プロパティインスペクターの「グリッド」セクションで「初期設定に戻す」ボタンをクリックすると、選択した(レイアウトグリッドを適用した)アートボードに新しいデフォルト設定を適用できます。
このページは役に立ちましたか。