webサイトのデザインをレイアウトするために、Adobe XD CCでアートボードにグリッドを追加します。
setup-web-design-grid_1000x560

ファイルを開いてアートボードを選択するか、アートボードツールを使用して新しいアートボードを作成します。プロパティインスペクターの「グリッド」セクションで「レイアウト」を選択します。練習用のサンプルファイルにはすでに設定されていますので、ご参考ください。

setup-web-design-grid_step-1

デザインに最適なグリッドを作成するために、列の数とカラー、列幅と段間幅、マージンの設定をいろいろと試します。グリッドはいつでも変更できます。

setup-web-design-grid_step-2

ここでは12列のグリッドを選択し、テキストとグラフィックを追加しました。自動でグリッドにスナップする機能とスマートガイドにより、デザイン要素を簡単に配置できます。グリッドができたら、レイヤーパネルでアートボードを選択し、プロパティインスペクターで「初期設定にする」をクリックします。

setup-web-design-grid_step-3

これで、似たサイズの他のアートボードにこのカスタムグリッドを適用できるようになります。また、他の画面サイズ用に手動でカスタマイズすることもできます。

setup-web-design-grid_step-4

このように、グリッドを定義することでwebサイトのシャープなデザインを維持できます。

11/12/2018

Adobe Stock提供元:luckybusiness

このページは役に立ちましたか。