【Adobe XD】Singari×ショートカットで効率化!

カンマンのデザイナーのKurimotoです。AdobeXDを使ってwebデザインをもっと速く作成する方法について昨年から試していた事を記事にしました。

「Singari」プラグイン×ショートカットの組み合わせでデザインの時短化をする方法を紹介します。

AdobeXDの基本操作が理解できて「もっと速くデザインできるようになりたい！」と思っている中級者向けの記事です。

Adobe XDにはIllustratorの整列・分布と同じような機能の「Singari」プラグインがあります。
Singariと検索するとダウンロード可能です。https://sttk3.com/blog/tips/xd/singari.html

開発元サイトのプラグイン名前の由来の説明です。

ちなみに殿（しんがり）とは，軍事用語で後退する部隊の中で最後尾の箇所を担当する部隊をさし，転じて隊列や順番の最後尾を意味します。
https://sttk3.c om/blog/tips/xd/singari.html

AdobeXDには下記のように整列ショートカットが用意されています

webデザインの場合だと記事のテキストと画像のオブジェクトを均等に20px余白を開けたいという時があると思います。

（１）オブジェクトを選択します。

（２）Offsetに20と入力します。（左右上下の余白）

（３）「…」ボタンをクリックして「Distribute Vertical Space」をクリックします。

すると縦20pxの余白が均等に空きました。
これがSingariプラグインの使い方の一例です。
ちなみに横に均等に整列させるには上記の（１）〜（２）の操作をした後に最後に「Distribute Horizontal Space」をクリックします。

AdobeXDプラグインとショートカットを連携させるためにMacのショートカットの設定方法を紹介します。

（１）Macのシステム環境設定の「キーボード」を開いて「アプリケーション」を選びます。

（２）「＋」をクリックします。

（３）singariの「Distribute Vertical Space」（縦に均等に余白を空けて整列する）を入れたい場合だとプラグインのコマンド名「Distribute Vertical Space」と入力します。

他のプラグインでも同様にメニューコマンド名を入力して好みのショートカットを入力して設定が可能です。
ただし、他のショートカットと被って競合しないように気をつけます

（４）設置したショートカットがパネルに表示されたら設定完了です。
私は「Show Panel」に「control＋P」のショートカットを設定して素早くsingariプラグインのパネルが表示できるようにしています。

クライアントワークとしてお客様と認識のズレが発生するのを防ぐにはデザイン制作は素早く行う必要があります。
デザインフィードバックのサイクルが遅いと

全体のweb制作が遅くなる＝お客様の商品を売る機会を逃す

と考えているためデザイン品質も重要ですが速さも重要と思っています。
デザインの前工程が遅いとコーディング構築の後工程にも差し支えますからね。

PhotoshopでLPやバナーの写真画像を加工する以外はAdobeXDでwebデザインした方が効率が良いです。

XDでデザインが早くなると2案くらい別のデザイン案も提出することも可能になってきます。

AdobeXDはプラグイン×ショートカットの組み合わせによりデザインの時短化ができるということでした。

（１）ショートカットを覚える

（２）ショートカットをカスタマイズしていつでも機能を呼び出せるようにする

IllustratorやPhotoshopなど他のデザインソフトでもそうですが作業を速くするには上記の2点が大事になってきます。

お知らせ