記事の詳細

想像した通りエッライスピードでAdobeXDが進化しています。
正直Illustratorでワイヤーきっていた時がそろそろ思い出せない……。

AdobeXDの基本的な使い方はこちら

Adobe XDを使ってワイヤーフレームを作る その1【ファイルの作成とアートボードの設置、パネルの見方】
Adobe Experience Designの正式版リリースソフトであるAdobe XDは、Adobeから提供されるWEBサイトやモバイルアプリのデザイン、プロトタイプの作成が、これ一つでできる...

これ去年の今頃の記事ですが、Adobeのアップデートのすさまじさを痛感します。

 

AdobeXDのAdd-onとは

Add-onとは読んで字のごとく「追加して(スイッチ)オンする」機能たちのことですが、2018年12月3日現在、その機能は大きく分けて3つになります。

  • UIキット
  • プラグイン
  • アプリケーションの連携

AdobeXD-Add-on

 

そのうち数が多くなってきたらカテゴリ分けでソートできるようになるんだろうなぁ……。
今回は「add-on」をクリックしたときに出てくる「エディタのおすすめ」UIキットとプラグインを全部紹介してみようと思います。

AdobeXDのUIキット

UIキットとは「User Interface Kit」早い話が「ユーザーインターフェイス=システムやPCがユーザーとやりとりするための方法やその操作をする画面表示」といった一連の仕組みを作成する道具一式です。
もっと単純に言うと「必要パーツ集めといたからこれでデザインしてみてね」セット。
アイコンやフォームだけでなく、各画像やテキストのレイアウトまでそろっています。

最初に提示しておくと、2018年12月3日現在、日本で有効活用できそうなのは「日本語ワイヤーフレームキット、Wires jp」一択です。その他のキットは場合に応じて使い分けをしていく必要があります。

詳細はこちらでも。

以下、基本的なUIセット。

Apple Design

Apple製品であるApple iOS(iPhone、iPod touch、iPadなど)やMacOS向けに作成されたキットです。
XDだけでなくSketchもあります。これからXDもいろいろ仲間入りしていくことでしょう。

 

Apple Design

 

Microsoft UWP design

MicrosoftのUWP(ユニバーサルWindowsプラットフォーム)のUIに関する設計ツールキットです。
Windows PCを使っている場合よく見られるデザインのコンポーネントが詰まっています。

Microsoft UWP design

 

Material Design

グーグル推奨のデザインガイドラインに利用されているUIデザインフレームワークです。
CSSフレームワークにマテリアルデザインを使うなら必須でしょう。

 

Amazon Alexa

人工知能(AI)音声認識サービスのAmazon Alexa専用のUIキット。
あまり日本に普及している心地はしませんが、Amazon Echo Spot、Echo Show、Fire TV向けのエクスペリエンスの作成に必要なものがそろっています。

AdobeXD-Add-on

 

Design for Good

営利団体のためのUIキット。NPO法人的なサイトを作るときに非常に便利なコンポーネントが詰まっています。

 

Vido

ビデオを中心に扱うWEBサイトの構築に便利なUIキット。

 

クラウドファンディング企業

読んで字のごとく、クラウドファンディング用のサイトを作るためのキット。あまりベースを崩さずに使ったほうがよさげ。

 

日本語ワイヤーフレームキット、Wires jp

日本国内でのワイヤーを作成するならとりあえずこれを入れておけばいいでしょう!

 

Dashboard

WordPressなどを利用している場合はおなじみの「ダッシュボード」ですが、意味合い的には「計器盤」であり、複数のデータを持ち寄って、見やすく表示するものです。よく分析結果などを表示するのに利用されます。
クラウドサービスとしてデータ計測後の画面を提示するようなサイトを作るのであれば、非常にこちらが便利。

 

Tractiv

フィットネス、自己啓発に関するWEBサイト作りに特化したキット。
特徴的なものとして、ガイドツアーやチュートリアルに応用できるオンボーディングフロー(on-boarding:新人研修、のような意味合い)があること。

 

Smartwatch

スマートウォッチアプリのデザインのためのキット。AppleWatchに準拠しています。

 

Navigo

路線案内、ライドシェア(相乗り)といったナビゲーションに関するキット。マップを利用するサイトにはとても有効。

 

Cooin

デジタル通貨を売買および照会するためのiOSアプリやwebサイトを作成できます。デジタル通貨の取引でペイパルなどを頻繁に利用するようなサイトを構築する際に便利。

 

Designer Marketplace

ファッションやプロダクト製品の背う名や、それに関するブログ記事デザインなどが一括されたキット。アクセサリやアパレル系向き。

 

MentorMe

キャリアメンタリング(就職活動、転職活動など、キャリアのための支援)やSNSのモバイル画面を作成するためのUI。ユーザーが積極的にアプリにかかわることでコンバージョンに至ることが前提のWEBサイトにかかわるキットです。

 

Pawtastic

ECサイトデザインのキット。

 

Sky

旅行にまつわる飛行機、ホテルなどの予約などに関するサイトのためのキット。

 

AdobeXDのプラグイン

Trello

弊社でも使っている無料タスク管理ツールTrello。こちらの添付ファイルに選択したオブジェクトを指定の形式でアップロードすることが出来るようになります。メンバーと情報をシェアするのに非常に便利。

AdobeXD-Add-on AdobeXD-Add-on

 

Trelloについてはこちらも。

Trello公式サイトはこちら

Airtable

Airtableとはクラウド型WEBデータベースアプリの一つで、さまざまなデータをみんなでシェア・管理できるようになるツール。ExcelとAccessのあいのこ……みたいなものなんでしょうか。海外は本当にいろんな便利ツールを駆使していて、それがデフォルトになっているようですごいですね……。

Airtable公式サイトはこちら

画像や長文テキストもスプレットシード管理ができるようで、ビジュアルもグリッド・カレンダー・ギャラリーなど多彩。つまり、ここでシェアしたデータは、AirtableのAPIキーを通すことで、全てAdobeXDにインポートできてしまうってことですね。

 

UserTesting

被験者に謝礼を払ってWEBをお試ししてもらうことが出来るサイト。XDと連携しているのは海外サイトなので、あまり使用用途はない感じです。

User Testingの公式サイトはこちら
ちなみに日本でユーザーテストをしたい場合はこんなサイトがあ1るようです。

Usertest Express(ベータ版)

 

dribbble

アメリカ発のデザイナーのためのSNS「dribbble」でドリブルと読みます。招待制SNSなので自分みたいな底辺デザイナーは投稿できません……次元が違う……。

dribbbleはこちら

 

見るだけならタダ、登録するとお気に入りなどができますので、眺めている分には非常に楽しい。
XDとの連携は、おそらくdribbbleにポストできるのでしょうが、あいにくと実際どう機能するのかは不明です。

 

Overflow

サイト制作時に画面遷移を示すあれこれを記載できるツール「OverFlow」。プラグインをインストールすることで、AdobeXDで作成したオブジェクトをOverflowにインポートすることができます。
ただこれ今の段階ではMac専用なんですよねぇ……。Windowsがきたら即入れてサイトマップはこれで作りたいものです。

Overflowの公式サイトはこちら。

 

Stark

コントラストチェッカー&カラーブライドシミュレーションのアプリ。アートボードごとにさまざまなカラーバリエーションが確認できるうえに、色盲のシミュレートもできる優れもの。

Starkのサイトはこちら

 

Cloud App

スクリーンショット+スクリーンムービー(Gifアニメ)をブラウザページで共有できるアプリ「CloudApp」に、AdobeXDのオブジェクト及びアートボードを共有することが出来ます。Cloudストレージ的な役割です。

Cloud Appのサイトはこちら

Rename it

もともとはSketchのプラグインで、レイヤーやアートボードをネーミングできるプラグイン。シーケンスをつけたりアルファベットを入れていったり、いろいろ面倒くさいことが一括でできます。書き出しが格段に楽になること間違いなし。

Rename itのサイトはこちら

Google sheet

Airtableに似ていますが、こちらのGoogleSheetはGoogleのスプレットシートをインポートできます。
GoogleSheetを利用したインポートにはある程度のテンプレートが必要で、特に画像を含めたデータインポートには一工夫が必要。いずれもシート形式でのデータインポートには、それぞれきちんと対応している状態が好ましいです。
以下のサイトで十分注意しましょう。

Google sheet for Adobe XDのプラグインはこちら

UI Faces

年齢や性別からUI設計に使える顔写真データを提供するWebサービス。

UI Faces-Avatars for design mockups

現在アップデートされているプラグインは全部で76、次々に増えています!

追いつけるかーい!

大半が当然英語のプラグインなので、「これはどんなプラグインかな?」というのは入れてみないとわからないことが多く、一つ一つ丁寧に確かめていくほかないようです。
ゆるゆると沢山試して見ながら有効なプラグインを探していく作業を片手間に、どんどん効率よくワイヤー切っていきたいですね!

 

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る