ノンデザイナーのためのAdobe XD Tips集【WF・IA・資料用の素材とプラグイン】
この記事は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
🎨素材を使う〜WF編〜
既存の素材がたくさんあるので、ゼロから書かずに時短できます！
・Wires jp（日本語WF）
・baigieさんのBtoBサイトWF
・プラグイン：Quick Mockup（インストール用リンク）
↓はQuick Mockupのテンプレート。日本語で使いやすい。
・AppleとGoogle（Material Design）は、XDのメニューからファイル＞UIキットを取得で公式に飛べます。その他のUIキットも、ここからアクセスできます。
🎨素材を使う〜フロー図〜
・プラグイン：Overflow（インストール用リンク）
・プラグイン：AutoFlow（インストール用リンク）
・プラグイン：Whiteboard（ドキュメント全般 インストール用リンク）
Whiteboardは使えるテンプレがり豊富にありおすすめです。ジャーニーマップやカンバン、付箋なども便利。↓画像はWhiteboardのテンプレートです。
🎨素材を使う〜アイコン・イラスト〜
スライドに華を添えたいときにどうぞ（注意：用途に応じて、著作権を確認してください）
・プラグイン：unDraw（イラスト インストール用リンク）
・プラグイン：Humaaans Illustration（イラスト インストール用リンク）
・プラグイン：Icons 4 design （アイコン インストール用リンク）
🗒テキスト・原稿関連
・テキスト校正くん（校正してくれる）
・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を試したものです。
＝＝＝最後に＝＝＝
ℹ️困った時に検索＆質問する場所
・Adobe公式＞ラーニングとサポート（ヘルプ）
・Adobe公式＞ユーザーガイド
解決できなかったことは↓で聞いてみましょう！
・Adobe公式＞コミュニティフォーラム
🙌プラグインをもっと知りたい方へ
こちらの記事をどうぞ！（手前味噌ですみません！）
🙌さらに使いこなしたい方へ
公式のショートカットを覚えるのもおすすめ。もっとも手軽な時短テクです。自分好みにカスタマイズすると、より爆速になります！
🙌さらにさらに深掘りしたい方は、勉強会へ！
イチオシはXDユーザーグループ東京の勉強会（connpass）です。
ノンデザイナー向けの回もあるので、とりあえずconnpassで登録し、ご自分に合う回に参加してみてください！一部アーカイブはYouTubeで見られます！
ようこそXD沼へ！🙌
いいなと思ったら応援しよう！
