【Adobe XD】プラグインとは?導入方法や使い方を解説|おすすめも紹介

「【Adobe XD】プラグインとは?導入方法や使い方を解説|おすすめも紹介」のアイキャッチ画像

Adobe XDは、2017年に公式リリースされた、WebサイトやアプリのUIUXの作成に強みを持つデザインツール。本記事では、XDの『プラグイン』について、初心者の人でもわかりやすいように、詳しく解説していきます。


想定読者想定読者
・XDのプラグインの特徴や使い方を知りたい
・XDのおすすめプラグインを知りたい


Adobe XDの役割や特徴について知りたい方は「Adobe XDとは?特徴から活用イメージまで詳しく解説」をご覧ください。



XDの利用プランについては次の記事で解説しています。




Adobe XDの『プラグイン』とは?



プラグインとは、アプリケーションの機能を拡張するために追加するプログラムのこと。

英語の「Plug-in(挿し込む)」が由来となっている言葉です。


プラグインを利用することで、XDに必要な機能を追加したり、作業環境にオリジナリティを出すことができます。


プラグインを使うメリット

  • 無駄を省き作業効率が上がる
  • 作業の精度向上に繋がる

XDには、無料で利用できるプラグインが多く揃っています。

自分好みのプラグインを見つけて、XDの快適な作業環境を作っていきましょう。


XDのプラグインを使う手順



それではプラグインの使い方をくわしく見ていきます。

プラグインのインストール


XDの画面左側メニュー内から「プラグインアイコン」を選択。

プラグイン一覧が表示されたら、右上の「プラスボタン」をクリックします。



プラグイン検索画面に移動します。

使いたいプラグイン名を検索バーに入力し、該当プラグインの「インストール」ボタンをクリックして完了です。



プラグインの実行


次にプラグインを実行する方法を見ていきます。


ただし操作方法はとてもシンプル。

XDのプラグイン一覧画面から、使いたいプラグインを選択するだけです。



不要なプラグインの管理


プラグインを導入していくと、不必要なものも出てくるでしょう。

そこでプラグインのアンインストール方法もご紹介します。

プラグインのアンインストール


プラグインのインストール時と同様、XD画面内の「プラスボタン」をクリック。

その後に表示される画面内で、該当のプラグインを検索して表示します。


プラグインのボックス内「•••」アイコン、「アンインストール」の順にクリックすると、アンインストールを実行できます。



XDの便利なプラグイン紹介


本記事では、おすすめのプラグインも紹介します。

簡単な使い方も解説していますので、プラグイン選びの参考にしてみてください。

Icons 4 Design|数多くのアイコンが使える


Icons 4 Design

5,000種類以上のアイコンが無料で使えるプラグイン。

Font AwesomeやFeatherなど、複数のサービスと連携しています。


対応フォント

Font Awesome、Feather、Ionic、Map、Material、Metro、Open、Payment、Simple、Weather、Zocial

参照:Icons 4 Design – Plugin Details


検索には英語入力が必要ですが、数多くのアイコンが用意されているため、効率的にデザイン作業を進めることができます。


使い方

  1. プラグイン『Icon 4 Design』をクリック
  2. 検索ボックスに使いたいアイコン名を入力
  3. 好みのアイコンを選択
  4. XD画面にアイコンが追加される

UI Faces|ダミーの顔写真を自動で挿入


UI Faces

任意のオブジェクトにダミーの顔写真を自動で挿入するプラグイン。

プロフィール画像など、デザインイメージを具現化することができます。


使い方

  1. ダミーの顔写真を挿入したいオブジェクトを選択
  2. プラグイン『UI Faces』をクリック
  3. 挿入したい顔写真を選択し「Apply」をクリック
  4. オブジェクトに3で選択した顔写真が挿入される

Unsplash Random Image|ダミー画像を自動で挿入


Unsplash Random Image

任意のオブジェクトにダミー画像を自動で挿入するプラグイン。

画像を含むデザインのイメージを、制作段階で効率的に確認することができます。


使い方

  1. ダミー画像を挿入したいオブジェクトを選択
  2. プラグイン『Unsplash Random Image』をクリック
  3. 挿入したい画像名(office、cafeなど)を入力し「Get Image」をクリック
  4. オブジェクトに3で入力した画像が挿入される

Lorem ipsum|ダミーテキストを自動で挿入


Lorem ipsum

指定エリアにダミーテキストを自動で挿入するプラグイン。

日本語未対応ですが、ダミーテキストを手作業で入力する手間が無くなるのは嬉しい点です。


使い方

  1. ダミーテキストを挿入したいオブジェクトを選択
  2. プラグイン『Lorem ipsum』をクリック(Quick Lorem Ipsum:1クリックで文章の挿入が可能)
  3. オブジェクトにダミーテキストが挿入される

テキスト校正くん|画面内の文章を手軽に校正


テキスト校正くん

任意のテキストの校正を行うプラグイン。

一般的な文章ルールに沿って、主に以下のような観点で校正が行われます。


文章のチェック観点

  • 「ですます」調と「である」調の混在
  • ら抜き言葉
  • 二重否定
  • 同じ助詞の連続使用
  • 同じ接続詞の連続使用
  • 逆接の接続助詞「が」の連続使用
  • 全角と半角アルファベットの混在
  • 弱い日本語表現の利用(〜かもしれない)
  • 読点の数(1文に3つまで)
  • ウェブの用語や名称の表記統一(Javascript → JavaScript、Gitghub → GitHub等)
  • 漢字の閉じ方、開き方(下さい → ください、出来る → できる等)

参照:「テキスト校正くん」でできること


使い方

  1. 校正を行いたいテキストを選択
  2. プラグイン『テキスト校正くん』をクリック
  3. テキスト校正結果がダイアログで表示される

Trimit|あらゆる要素のサイズを自動調整


Trimit

要素のサイズを自動調整するプラグイン。

Trimitでサイズの自動調整が可能な要素は次のとおりです。


対応要素

  • テキストエリア
  • アートボード
  • リピートグリッド

複数オブジェクトの一括調整も可能なため、作業効率の向上に大きく貢献するプラグインですね。


使い方

  1. サイズ調整を行いたい要素を選択
  2. プラグイン『Trimit』をクリック
  3. 要素のサイズが自動調整される

Sprit Rows|改行区切りのテキストを一行ずつに分解


Sprit Rows

改行区切りのテキストを一行(文章のグループ)ずつに分解するプラグイン。


活用方法の一例として、リスト作成時に(都度テキストボックスを作成するのではなく)一つのボックスに箇条書きでテキストを入力した後に「Sprit Rows」を使用し、効率的にリストを作成することなどが挙げられます。


使い方

  1. 分解したい改行区切りのテキストを選択
  2. プラグイン『Sprit Rows』をクリック
  3. 改行区切りのテキストグループ毎に分解される

Remove Decimal Numbers|オブジェクトの小数点を切り捨て


Remove Decimal Numbers

オブジェクトのサイズや座標の小数点を切り捨てるプラグイン。


小数点を省きたいデザインデータを作成する際には活躍するでしょう。

※小数点は四捨五入ではなく切り捨てです。


使い方

  1. 小数点を切り捨てたいオブジェクトを選択
  2. プラグイン『Remove Decimal Numbers』をクリック
  3. オブジェクトのサイズや座標の小数点が切り捨てられる

Select Menu|指定の条件に一致する要素を選択


Select Menu

指定の条件に一致する要素を選択するプラグイン。

同じコンポーネント、ロックされているオブジェクトなどを一括で選択可能です。


搭載機能は次のとおりです。


共通選択
Same Name同じ名前のアイテムを選択
Same Name & Class同じ名前・属性(テキストや図形など)のアイテムを選択
Same Class同じ属性(テキストや図形など)のアイテムを選択
Same Components同じコンポーネントを選択
Same Position (Local)同じ相対位置(アートボード左上を基点)のアイテムを選択
Select Menuの機能一覧|共通選択

共通テキスト選択
Same Font Family同じフォント名(Meiryoや游ゴシックなど)のテキストを選択
Same Font Family & Style同じフォント名・スタイル(太字や斜体など)のテキストを選択
Same Font Family & Style & Size同じフォント名・スタイル・サイズのテキストを選択
Same Font Size同じフォントサイズのテキストを選択
Select Menuの機能一覧|共通テキスト選択

行列選択
Same Row同じ行(絶対座標のY値を基点)のアイテムを選択
Left of the Row同じ行・選択オブジェクトより左方向にあるアイテムを選択
Right of the Row同じ行・選択アイテムより右方向にあるアイテムを選択
Same Column同じ列(絶対座標のX値を基点)のアイテムを選択
Above of the Column同じ列・選択アイテムより上方向にあるアイテムを選択
Below of the Column同じ列・選択アイテムより下方向にあるアイテムを選択
Select Menuの機能一覧|行列選択

オブジェクト選択
All Artboardすべてのアートボードを選択
Locked itemsすべての非表示オブジェクトを選択
Hidden itemsすべての非表示オブジェクトを選択
Marked items書き出し対象にチェックされたすべてのオブジェクトを選択
Select Menuの機能一覧|オブジェクト選択

テキスト選択
All Textすべてのテキストを選択
Point Textsすべてのポイントテキスト(幅が自動調整)を選択
Auto Height TextすべてのAuto Height Text(高さが自動調整)を選択
Fixed Height TextすべてのFixed Height Text(高さが固定)を選択
Area Textsすべてのエリアテキストを選択
Select Menuの機能一覧|テキスト選択

使い方

  1. プラグイン『Select Menu』をクリック
  2. 任意の条件を選択
  3. 条件に一致する要素が選択される

Artboard Plus|複数のアートボードを自動で整列


Artboard Plus

複数のアートボードを自動で整列するプラグイン。

多くのアートボードを扱う際に重宝します。


搭載機能は次のとおりです。


Rearrange Artboards into Gridアートボードをグリッド上に整列
Create Artboard Around Selection選択中のオブジェクトを囲むアートボードを作成
Sort Artborads by Name A-Z(Z-A)アートボードを名前順に整列
Artboard Plusの機能一覧

使い方

  1. 整列させたいアートボード群を選択
  2. プラグイン『Artboard Plus』をクリック
  3. アートボードが自動で整列される

Adobe XDの関連記事


最後に、Adobe XDの関連記事のご紹介をします。

XDのツール概要


ツールの特徴や活用イメージについて確認できます。


XDの利用プラン


利用プランや料金について確認できます。


XDのインストール手順


インストール手順や導入後にやるべきことを確認できます。


XDのリピートグリッドの使い方


リピートグリッド機能の特徴や使い方について確認できます。

XDのコンポーネントの使い方


コンポーネント機能の特徴や使い方について確認できます。


Adobe CCのお得な購入方法(学生・教職員向け)


学生や教職員向けに、XDを含むAdobeアプリのお得な購入方法を確認できます。


Adobe CCのお得な購入方法(社会人向け)


社会人向けに、XDを含むAdobeアプリのお得な購入方法を確認できます。


おわりに


今回はAdobe XDの『リピートグリッド機能』について、特徴や使い方について解説しました。


XDはWEB制作に携わる人にとって欠かせないツールの一つです。興味のある方は、無料期間を活用して試してみるのも良いでしょう。



Web制作の流れやノウハウも発信していますので、ぜひ参照ください。




アップロードした画像munerin

最後までご覧いただき、ありがとうございました!