こんにちは、新人クリエイターのTです。
今回は、以前投稿した【Adobe XD】便利機能を駆使してデザイン制作をスピードアップ【Tips 3選】に続いて、ツール＆プラグインの機能を組み合わせた時短テクニックを２つご紹介したいと思います。
ツールやプラグインそれぞれの使い方は知っているけどもっと便利な使い方を探しているという方、一緒に効率化していきましょう！
ちなみに、テクニックなんてかっこつけてはおりますが２つとも小技なので、今日からすぐに使えると思います。
縦方向の余白、こっちを変えるとそっちが崩れる…というループから解放される組み合わせ技
デザイン要素をすべて配置した後、余白やサイズなどの調整を行ったり、フィードバック後に修正をしているときに便利な小技です。
画像と文章の間の余白、見出しと本文の間の余白、セクション同士の余白…
これらは一つ変更すると決まって他の部分も調整が必要になってくるかと思います。
制作ごとに決めたルールを頭に入れた上で作業してはいるものの、何度か調整する内に「あれ？ココとココのセクション間は何px空けたっけ？」とか「あれ？今どこ直してた？」となってしまうことって結構ありますよね。（私だけかも知れませんが…）
また、フッターの位置も大体変わっているので、アートボードの長さを手動で毎回直すのはすごく面倒です。
そんな時は下記①～③の方法でそのあたりのストレスが少し軽減できるかと思います！
①調整したいアートボードの要素をすべて選択→⌘(Ctrl)+Gでページ全体をグループ化
②グループへのスタック機能をON
…この設定だけで要素同士の縦の余白が今の状態で固定されます。
あとはスタック機能の数値入力を入力モードにすれば、余白部分がすべてピンク色のボックスで表示されるので、調整したい余白を見つけてその部分をドラッグするか、数値入力で調整していきます。
すべて調整したら、
③プラグイン「Resize Artboard to Fit Content」を使う
…プラグインを入れて、設定の「現在のアートボード幅を維持する」にチェックを入れた状態で「アートボードをコンテンツ幅に合わせる」ボタン（ショートカットキーはCtrl+F）を１クリック。
これだけで、アートボードの一番下にある要素の終わり位置でアートボードの長さを調整することができるプラグインです。
はみ出ていても余分が出ていても、１動作だけで調整が完了できるので、制作中かなり重宝しています。
ちなみに、位置固定のヘッダーや追従ボタンなどの要素はグループ化されてしまうと固定機能が無効になってしまうので、調整し終わった後は再びページ全体のグループ化を解除、もしくは固定機能を使った要素をグループの外に出しておくと良いです。
ページ毎に繰り返し使う要素を一度に作ってしまいたい…というときに使える組み合わせ技
例えばヘッダーやコンテンツヘッダーなど、どのページでも同じ要素を配置することは多々あると思います。
そんな時は下記①～④で一気に作っていくことができます。
①必要ページ分のアートボードを用意し、繰り返す要素を配置（ここではヘッダーとコンテンツヘッダー）
②用意したアートボードをすべて選択→プラグイン「Artboard Plus」を使ってアートボード同士の間隔を調整
③コンポーネント化した要素をリピートグリッド⌘(Ctrl)+Rで複製→余白をアートボード間の余白に合わせる
④⌘(Ctrl)+Shift+Gでリピートグリッド解除
…はい、それぞれのアートボードの同じ位置に複製した要素がすべて配置されました！
ちなみにリピートグリッドの余白の初期値が20pxのようなので、プラグインの設定でアートボード間も20px間隔にしてしまえば、余白調整の手間も省くことができます。
また、コンテンツヘッダーの画像を最初に用意しておけば、リピートグリッドの段階で画像の流し込み機能を使ってそれぞれの画像を一気に設定することが可能です。
まとめ
いかがでしたでしょうか？
もちろん今回ご紹介した方法は、自由なデザイン表現を必要とされる際には邪魔になることもあるかと思いますので、適宜使える時短テクを使っていくのがベストかと思います！
これからも色々なやり方を見つけて都度、試していきたいと思います。
最後までお読みいただきありがとうございました！
