webサイトのデザインを制作していく中でルールを決めて進めることは、視覚的な美しさだけでなく、作業の効率化にも繋がります。
webデザイン制作に特化したソフト「Adobe XD」には、作業を進めると、決められたルールの中で効率的に作業を進める手助けをしてくる機能が備わっています。
今回は作業効率を上げてくれるXDの機能をご紹介していきたいと思います。
普段PhotoshopやIllustratorでwebサイトのデザイン制作している方やこれから導入予定の方はぜひ参考にしてみてください。
この記事の内容
共通で使いたいアセットを一括管理
ルールを決めてそれを明確にして置く際には、何かにメモをしていいと思いますが、XDならメモの手間もいらず簡単に管理できる機能があります。
「ドキュメントアセット」という機能で、共通で使う色、文字、オブジェクトをこちらへ登録しておくことができます。
アセットの登録が簡単
キャンバス内に描いたオブジェクトやテキストを選択したうえで、ドキュメントアセットパネルの「カラー」「文字スタイル」「コンポーネント」の右側に表示されている「＋」ボタンをクリックすると各アセットが追加されます。
登録した各アセットの名前は自由に変更することができるので、自分がデザインしていくうえでわかりやすい名前にしておくと使いやすいです。
ワンクリックでオブジェクトや文字に適用
登録したアセットを適用したい場合は、オブジェクトや文字を選択して、ドキュメントアセットパネルの適用したいアセットの項目をクリックします。
「カラー」を適用する場合に、クリックだけだと塗りのみ適用されるので、線に色を適用したい場合は、アセットの項目を右クリックすると「線に適用」と出てきます。
編集もまとめて一括
ドキュメントアセットパネルの各アセットを右クリックすると編集の項目が出てきますので、そちらをクリックするとパネルが表示され編集を行えます。
登録した各アセットは編集することで、キャンバス内のオブジェクトや文字も自動で変更されます。
1つ1つのオブジェクトを変更しなくても、変更したい時に一括で簡単に変更できるので、とても手間が省けます。
アセットを使用したオブジェクトや文字を簡単に見つける
アセットを使用しているオブジェクトや文字をキャンバス内で探したい時にも、簡単に見つけることができます。
ドキュメントアセットパネル上の探したいアセットを右クリックして「キャンバスのハイライト」の項目をクリックします。
クリックすると、キャバンス内に先程の探したいアセットを使用しているオブジェクトや文字が青色の線で囲まれますので、パッと見でどこにあるか把握することができます。
もし、キャンバス内に探したいアセットが存在しない場合は、オブジェクトが存在しないというエラー文が表示されますので、必要のないアセットの削除をするときも便利です。
ドキュメントアセット内も検索できる
デザインを進めていくうえで、登録しているアセットの量が多くなってしまい見つけにくくなってしまっても、フィルターや検索の機能があるので、簡単に見つけられます。
マージンの設定も簡単に指定
オブジェクトとオブジェクトを配置するときに必要となるマージン（余白）ですが、こちらもルールを決めて進めていく中で、XDでは手間をかけずに簡単に指定をして作業を進められます。
スタック
メニューなど連続して続くようなオブジェクトを制作する際に便利なのが「スタック」という機能です。
制作したオブジェクトをグループ化して、右パネルの「スタック」を選ぶと適用されます。
グループ化されたスタック内では、順番の入れ変えができたり、各オブジェクトのマージンも一括で調整できたりします。
パディング
ボタンなど文字+背景オブジェクトを制作する際にマージンを数値で調整できます。
数値でマージンを固定できるので、中の文字を変更してもマージンが保持されたままなので、オブジェクトを触らなくても大丈夫です。
リピートグリッド
商品や記事などのリストのような、一覧で同じものが並ぶものは「リピートグリッド」を使うと簡単にリストを制作できます。
1つオブジェクト制作したら、右パネルの「リピートグリッド」を選択すると、先程のオブジェクトを横、縦に並べられます。
並べた後にマージンを一括調整できるので、1列1行ずつ調整する必要がありません。
時間をより短縮させて作業効率を上げてくれるXD
どこにどう時間を割くか考えた時に、面倒な作業はできるだけ省きたいと思います。
そんな面倒な作業を効率的に進めてくれる機能がXDにはいろいろと備わってます。
今回は決めたルールの中でどう効率的にデザインを進めていくか、という点で機能を紹介しましたが、また他の効率的な使い方があれば紹介できればと思います。
