COLUMN コラム

DOLではサイトのワイヤーフレームやデザインを「Adobe XD」で作成しています。動作が軽くて標準機能だけでも十分便利なXDですが、「プラグイン」を活用することで、さらに作業効率を上げることができます。

今回は「XDのプラグインはまだ使ったことがない」「数が多くてどのプラグインを使えばいいのかわからない…」といったビギナーの方向けに、プラグインの追加方法とWebデザイナーに必須の便利なプラグインを５つ紹介いたします。

1. プラグインの追加方法

XDのプラグインの追加方法はとても簡単です。
 
まず、XDを起動したら画面左下にあるプラグインアイコンをクリックして、プラグインパネルを開きます。続いてプラグインパネルの右上にある「＋」アイコンをクリックします。
 

 
 
すると、以下のようなCreative Cloudアプリのマーケットプレイスの画面が表示されます。 検索窓に追加したいプラグイン名を入力して、検索結果に出てきたプラグインの「インストール」ボタンをクリックしたら追加完了となります。
 

2. XDのおすすめプラグイン

プラグインの追加方法がわかった所で、日頃の業務で使用しているおすすめプラグインを紹介します。
 

2-1. Adjust Size by Shortcut

 
キーボードの矢印キーでオブジェクトのサイズ調整ができるプラグインです。
 
これまではオブジェクトのサイズ調整をするのに、毎回、画面右側のプロパティインスペクターで、幅と高さの数値を打ち込んでいましたが、このプラグインを利用してからは手入力で調整することはほぼ無くなりました。
 
長方形や楕円形といったオブジェクトの他に、リピートグリッドやアートボードのサイズを調整することもできます。数値入力の手間が省けることで大幅に作業効率がアップするので、今回紹介するプラグインの中で一番おすすめしたいプラグインです。
 

2-2. Artboard Plus

 
バラバラに配置されているアートボードを自動でグリッド状に整列してくれるプラグインです。
 
ページ数の多い大規模サイトを作成していると、アートボードが乱雑になりがちですよね。このプラグインを使用すると、複数のアートボードを自動でグリッド状に整列してくれます。また、設定画面で整列時のアートボード間の余白を指定することも可能です。
 
ただ整列するだけでなく、アートボード外に置かれた要素からアートボードを作成したり、レイヤーパネルに表示されるアートボードの一覧をアルファベット順にソートするといった機能もあります。
 

2-3. Icons 4 Design

 
XD上でアイコン素材を検索して追加することができるプラグインです。
 
様々なサービスのフリーアイコン素材が5000種類以上も用意されています。これまではブラウザでブックマークしていた配布サイトから一つ一つアイコンをダウンロードしていましたが、このプラグインを追加することで、簡単にXD上に配置することができます。
 
アイコンはSVG画像のため、色の変更や線の太さも変更することができます。ただし、アイコンを検索する時は英語で入力する必要があるので、そこだけ注意です。
 
 

2-4. Ratio Changer

 
四角形や楕円形といったシェイプのアスペクト比を、黄金比（1.618：1）や白銀比（1.414：1）に変換してくれるプラグインです。
 
画像を配置する時、縦横比について迷うことってありますよね。デザインの意図に沿ってきちんと計算されたものであれば良いですが、もし感覚だけで決めていたのであれば、このプラグインを利用することをオススメします。規律に沿ったアスペクト比に自動でリサイズしてくれるので、キレイなレイアウトを作成することができます。
 
 

2-5. Resize Artboard to Fit Content

 
内包するオブジェクトに合わせて、アートボードをリサイズしてくれるプラグインです。
 
ワイヤーフレームやデザインを作成する時、作業しやすいようにアートボードのサイズを広めに用意しておくと、完成時にアートボードを一枚一枚リサイズするのが面倒ですよね。特にアートボードのサイズ調整は内包しているオブジェクトに対してスナップが効かないので、手動で合わせていくとかなり大変です。
 
このプラグインを使用すると内包するオブジェクトに合わせて、複数のアートボードをまとめてリサイズしてくれるので非常に便利なのでオススメです。
 

3. おわりに

今回はWebデザイナーに必須のAdobe XDプラグイン５選を紹介しました。
 
今までXDのプラグインを使ったことのない方の中には「これが自動でできるんだ！」と思うプラグインもあったのではないでしょうか。整列やリサイズといった手間のかかる作業は、誰しもが抱える共通課題なので「面倒な作業だな」と思った時は、一旦手を止めて対応方法を調べてみましょう。有志によって作成されたプラグインで、すでに解決されているかもしれません。
 
サイト制作は完成までの道のりが長いので、便利なプラグインはどんどん活用して作業の効率化を図っていきましょう！