見出し画像

ノンデザイナーのためのAdobe XD Tips集【WF・IA・資料用の素材とプラグイン】

サオリ＠webstudyroom

この記事はAdobe XD アドベントカレンダー 2020の18日目の記事です。

👪想定する読者と背景

ディレクターさんを想定して書きました。
その他PMやUXデザイナーの方など、ドキュメント作成〜IA設計〜WFあたりで使う方向けです。

【この記事の背景】
デザイナーはツールの研究に力を入れても良いと思うのですが、他職種の方はデザインツールを使うのが本業ではないため、XDの学習に時間を取られては申し訳ない気がしまして。「デザインツールのことはデザイナーにサクッと聞いてください！喜んで答えます！（※喜び具合は人による）」と思ったのでまとめました。
弊社のディレクターさんに捧げます。
【凡例】プラグイン：○○（インストール用リンク）
○○に貼ってあるリンク→公式サイトかAdobeブログです。どんなプラグインか知りたい時に。
（インストール用リンク）に貼ってあるリンク→XDが起動され、すぐにプラグインをインストールできるリンクです。

🏃‍♀️まずは基本操作を覚えよう

公式スターターキットが最強におすすめです。
（追記：上記リンク先がリニューアルされ、少々見つけにくくなりました…、、⌘＋Fして「スターターキット」で検索すると早く辿り着けます）
アップデートにもすぐ対応され、最新機能もカバーできます。
初級・中級の2ファイルあり、基本だけなら初級だけでも十分。より深掘りしたい方は、中級編もチャレンジしてみてください！（といっても合わせて1〜2時間あれば終わります！難しくないです！）
※画像引用：https://www.adobe.com/jp/products/xd.html#starter-kit

画像1


🎨素材を使う〜WF編〜

既存の素材がたくさんあるので、ゼロから書かずに時短できます！
・Wires jp（日本語WF）
・baigieさんのBtoBサイトWF
・プラグイン：Quick Mockup（インストール用リンク）
↓はQuick Mockupのテンプレート。日本語で使いやすい。

画像9


・AppleとGoogle（Material Design）は、XDのメニューからファイル＞UIキットを取得で公式に飛べます。その他のUIキットも、ここからアクセスできます。画像2

🎨素材を使う〜フロー図〜

・プラグイン：Overflow（インストール用リンク）
・プラグイン：AutoFlow（インストール用リンク）
・プラグイン：Whiteboard（ドキュメント全般 インストール用リンク）
Whiteboardは使えるテンプレがり豊富にありおすすめです。ジャーニーマップやカンバン、付箋なども便利。↓画像はWhiteboardのテンプレートです。

画像5

画像5

🎨素材を使う〜アイコン・イラスト〜

スライドに華を添えたいときにどうぞ（注意：用途に応じて、著作権を確認してください）
・プラグイン：unDraw（イラスト インストール用リンク）
・プラグイン：Humaaans Illustration（イラスト インストール用リンク）
・プラグイン：Icons 4 design （アイコン インストール用リンク）

画像6

🗒テキスト・原稿関連

・テキスト校正くん（校正してくれる）
・Count Text（文字数を数えてくれる インストール用リンク）

🖨印刷したいとき

A4など印刷用サイズのアートボードを作るプラグイン
・プラグイン：Artboard Presets（インストール用リンク）
・プラグイン：Print Artboard（インストール用リンク）
・プラグイン：Artboard for PDF（インストール用リンク）
上記の3種の違いについて、詳しくはこちらの記事をご覧ください。

＝＝＝ここからちょっと上級向けです🏃‍♀️🏃‍♀️🏃‍♀️＝＝＝

📊グラフ作成

・プラグイン：Chart for XD（インストール用リンク）
・プラグイン：Odin Chart（インストール用リンク）
・プラグイン：VizzyCharts（インストール用リンク）
↓VizzyChartsのくわしい使い方

🗒ドキュメント（スプレッドシートやエクセル等）とXDデータを連動させる

原稿をXDに流し込んだり、修正反映したり…という作業を自動化できます。ブログや記事を扱う方におすすめ。詳細は、各リンク先の動画がわかりやすいです。
・Docs 2 Design（一部有料_インストール用リンク）
LIGさんで導入されてるそうで、Adobe MAX2020のセッションの22分頃からわかりやすく紹介されてます！エクセルやワードでも使えるのが特徴。
・Google Sheets（スプレッドシートがメインの方へ インストール用リンク）
・ContentSync（一部有料/エクセル とスプレッドシートに対応 インストール用リンク）

📈ヒートマップと分析

アドレス登録が必須＆一部有料です。 
・プラグイン：   VisualEyes（インストール用リンク）
・プラグイン： Attention Insight（インストール用リンク）
・プラグイン： Mupixa（インストール用リンク）
↓はVisualEyesを試したものです。

画像6

＝＝＝最後に＝＝＝

ℹ️困った時に検索＆質問する場所

・Adobe公式＞ラーニングとサポート（ヘルプ）
・Adobe公式＞ユーザーガイド
解決できなかったことは↓で聞いてみましょう！
・Adobe公式＞コミュニティフォーラム

🙌プラグインをもっと知りたい方へ

こちらの記事をどうぞ！（手前味噌ですみません！）

🙌さらに使いこなしたい方へ

公式のショートカットを覚えるのもおすすめ。もっとも手軽な時短テクです。自分好みにカスタマイズすると、より爆速になります！


🙌さらにさらに深掘りしたい方は、勉強会へ！

イチオシはXDユーザーグループ東京の勉強会（connpass）です。
ノンデザイナー向けの回もあるので、とりあえずconnpassで登録し、ご自分に合う回に参加してみてください！一部アーカイブはYouTubeで見られます！

ようこそXD沼へ！🙌 

サポートのご検討ありがとうございます！ 勉強代にいたします。 よければコメントや声をかけてください～TwitterのDMも開放しております～。