記事の詳細
AdobeXDが進化中!Add-onから追加できるUIキット・プラグイン
想像した通りエッライスピードでAdobeXDが進化しています。
正直Illustratorでワイヤーきっていた時がそろそろ思い出せない……。
AdobeXDの基本的な使い方はこちら
これ去年の今頃の記事ですが、Adobeのアップデートのすさまじさを痛感します。
今回のブログの見出しはコチラです!
AdobeXDのAdd-onとは
Add-onとは読んで字のごとく「追加して(スイッチ)オンする」機能たちのことですが、2018年12月3日現在、その機能は大きく分けて3つになります。
- UIキット
- プラグイン
- アプリケーションの連携
そのうち数が多くなってきたらカテゴリ分けでソートできるようになるんだろうなぁ……。
今回は「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もいろいろ仲間入りしていくことでしょう。
Microsoft UWP design
MicrosoftのUWP(ユニバーサルWindowsプラットフォーム)のUIに関する設計ツールキットです。
Windows PCを使っている場合よく見られるデザインのコンポーネントが詰まっています。
Material Design
グーグル推奨のデザインガイドラインに利用されているUIデザインフレームワークです。
CSSフレームワークにマテリアルデザインを使うなら必須でしょう。
Amazon Alexa
人工知能(AI)音声認識サービスのAmazon Alexa専用のUIキット。
あまり日本に普及している心地はしませんが、Amazon Echo Spot、Echo Show、Fire TV向けのエクスペリエンスの作成に必要なものがそろっています。
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。こちらの添付ファイルに選択したオブジェクトを指定の形式でアップロードすることが出来るようになります。メンバーと情報をシェアするのに非常に便利。
Trelloについてはこちらも。
Airtable
Airtableとはクラウド型WEBデータベースアプリの一つで、さまざまなデータをみんなでシェア・管理できるようになるツール。ExcelとAccessのあいのこ……みたいなものなんでしょうか。海外は本当にいろんな便利ツールを駆使していて、それがデフォルトになっているようですごいですね……。
画像や長文テキストもスプレットシード管理ができるようで、ビジュアルもグリッド・カレンダー・ギャラリーなど多彩。つまり、ここでシェアしたデータは、AirtableのAPIキーを通すことで、全てAdobeXDにインポートできてしまうってことですね。
UserTesting
被験者に謝礼を払ってWEBをお試ししてもらうことが出来るサイト。XDと連携しているのは海外サイトなので、あまり使用用途はない感じです。
User Testingの公式サイトはこちら
ちなみに日本でユーザーテストをしたい場合はこんなサイトがあ1るようです。
dribbble
アメリカ発のデザイナーのためのSNS「dribbble」でドリブルと読みます。招待制SNSなので自分みたいな底辺デザイナーは投稿できません……次元が違う……。
見るだけならタダ、登録するとお気に入りなどができますので、眺めている分には非常に楽しい。
XDとの連携は、おそらくdribbbleにポストできるのでしょうが、あいにくと実際どう機能するのかは不明です。
Overflow
サイト制作時に画面遷移を示すあれこれを記載できるツール「OverFlow」。プラグインをインストールすることで、AdobeXDで作成したオブジェクトをOverflowにインポートすることができます。
ただこれ今の段階ではMac専用なんですよねぇ……。Windowsがきたら即入れてサイトマップはこれで作りたいものです。
Stark
コントラストチェッカー&カラーブライドシミュレーションのアプリ。アートボードごとにさまざまなカラーバリエーションが確認できるうえに、色盲のシミュレートもできる優れもの。
Cloud App
スクリーンショット+スクリーンムービー(Gifアニメ)をブラウザページで共有できるアプリ「CloudApp」に、AdobeXDのオブジェクト及びアートボードを共有することが出来ます。Cloudストレージ的な役割です。
Rename it
もともとはSketchのプラグインで、レイヤーやアートボードをネーミングできるプラグイン。シーケンスをつけたりアルファベットを入れていったり、いろいろ面倒くさいことが一括でできます。書き出しが格段に楽になること間違いなし。
Google sheet
Airtableに似ていますが、こちらのGoogleSheetはGoogleのスプレットシートをインポートできます。
GoogleSheetを利用したインポートにはある程度のテンプレートが必要で、特に画像を含めたデータインポートには一工夫が必要。いずれもシート形式でのデータインポートには、それぞれきちんと対応している状態が好ましいです。
以下のサイトで十分注意しましょう。
Google sheet for Adobe XDのプラグインはこちら
UI Faces
年齢や性別からUI設計に使える顔写真データを提供するWebサービス。
UI Faces-Avatars for design mockups
現在アップデートされているプラグインは全部で76、次々に増えています!
追いつけるかーい!
大半が当然英語のプラグインなので、「これはどんなプラグインかな?」というのは入れてみないとわからないことが多く、一つ一つ丁寧に確かめていくほかないようです。
ゆるゆると沢山試して見ながら有効なプラグインを探していく作業を片手間に、どんどん効率よくワイヤー切っていきたいですね!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。