こんにちは、きたむんです。
現在コロナをうまく避けながら、食欲の秋を満喫しています。最近はたんぱく質を重視して栄養を摂取しています。
今年の6月頃「Adobe XD」を使えるよう勉強をはじめた、ずぼらインドアデザイナーの現在はどうなったのか、ご紹介いたします。

「Adobe XD」を知ってからの私は、Photoshopで作業をしていたサイトデザインをほぼAdobe XDで行うようになりました。
まだまだ使いこなせていない機能もあるし、どんどん新しい機能も登場しておりますが、日々の業務になくてはならないツールになりつつあります。
もっと使えるようになりたい…！ 今回はそんな私きたむんの、「Adobe XDライフを楽しむためのおススメしたいこと」をご紹介いたします！！

「Adobe XD」は、現在ユーザーが急増中の人気ツールです。
理由は使いやすさなどはもちろん、「学べる場所・方法が多い」ことではないかなと思っています。
書籍を購入したり、スクールというところから始めなくても、まずは自宅で学習できるのはありがたいです。
何より、その学習ツールをAdobeが無償で提供しているうえ、体験版も無償でダウンロードできるので これからWeb制作に携わりたい！という人や、いいプレゼンツールを探している人などにもおすすめです。

基本中の基本を学ぶなら「Adobe XDチュートリアル」

むいている人：とにかく基本を把握したい人、他にもいろいろ勉強中の人
これからやってみよう！と思っている人はまずこちら。
動画なども5～30分くらいでちょうどよい長さなので、集中して土日に丸一日やってみるもよし、毎日コツコツやるもよし！

Adobe XDチュートリアル

もっと使いこなしたいなら「Adobe XD Trail」！

むいている人：とにかく手を動かしてみたい人、各機能をくわしく知りたい人、Adobe XDをきわめたい人
チュートリアルをさらに細かくした「Adobe XD Trail」もおススメです！自分の学習スタイルに合わせた動画が用意されているので実際に手を動かせば身につくのではないでしょうか…！

Adobe XD Trail

自分の学習の成果をチェック！「Adobe XD 検定」

色々学習を進めてみたものの、どこまで理解できたのだろう…と思った人はぜひ「Adobe XD 検定」！
上記の「Adobe XD Trail」は、各コンテンツに「Adobe XD 検定」のどのカテゴリを学んでいるのかがわかるので自分の苦手なカテゴリだけ復習するといった使い方をするとさらにきわめられるかも！

Adobe XD 検定

Web関連の勉強会は探せばたくさんありますが、もちろん「Adobe XD」もユーザー会が各地で開催されています！
2020年はコロナの影響もあり、各地でオフライン開催していたものがオンラインになっているので各地の「Adobe XD」大好きユーザーさんに出会えますよ。仕事にすぐ役立つことから、「そんなこともできるの？」という使い方をする人まで、いろいろいらっしゃるのでたのしいですよ。

ちなみに「今年1番知ってよかったネタ」

それは「多角形ツールのコーナーカウントで”＜3”と入力するとどうなる…？？」でした！
こちらは実際にやってみてくださいね！
それまではIllustratorで作ったものを貼り付けていたのでめちゃくちゃ愛用しています、お気に入りボタンとかにも使えるのでぜひ！

「Adobe XD」を使いこなすなら、プラグインもうまく活用するとさらに便利です！
最近見つけて感動したプラグインを5つ紹介します！
（ちなみに「Adobe XD」の公式で探せるものをおすすめします！それ以外は自己責任での使用になるのでご注意ください）

アクセシビリティのカラーチェックなら「Stark」

こちらはPhotoshopでもある機能ですが、デザインをおこなう上ですべての人にとって使いやすいものを作りたいですよね。
この「Stark」なら、色覚異常のシミュレーションや、アクセシビリティチェックができるので、とても勉強になります！きれいに作っても、使いにくいなんて 残念なデザインにならないようきっちりチェックしちゃいましょう！有料版だとさらにシミュレーションできるタイプが増えるようです。 ちなみにアクセシビリティとは…？という方はこちらの記事をどうぞ！

ファビコンも「Adobe XD」で作っちゃいましょ！「Favicon Export」

ファビコン、作っていますか？ブラウザのタブで表示される画像のことです。
今まではデザインカンプとは別で作って、ジェネレーターで変換させて…なんてしていましたが「Adobe XD」でもできちゃいます！
作り方はかんたんで、正方形のアートボードを作成し、ファビコン用素材を配置してプラグインで生成するだけ！ボタン一つで10サイズのファビコン用pngを作成してくれますよ。あとは.ico拡張子に変更すればOKです！

ディレクターさん必見！情報共有のためのプラグイン「Whiteboard」

2020年は同じオフィスで仕事するのも難しくなってしまいました。でも、チームでいろいろ意見出しや情報共有をしたいときにこのプラグインがおすすめです。マインドマップやフローチャートから看板ボードまでいろいろなテンプレートを配置するだけで使えるので便利です。 また共同編集の機能を使えば、同時に編集したり共有ができるのがありがたいですね！また、各テンプレートの使い方が記載されているのでそれをみてもらうことで使い方も共有可能！ 個人的に思考やアイデアをまとめるのにも使えそう！と思っています。

サイトの模写などに最適！サイト情報抽出プラグイン「Mimic」

こちらは日々スキルアップのためにサイトの模写をしたり、既存サイトのリニューアルをする際に色などを調べていくのはすこしだけ大変ですよね。このプラグインがあれば、該当のサイトからフォント・サイトで使われているカラーから画像まで抽出してくれてアートボードに配置してくれます！画像は当然ながらすべてを取ってきてはくれず…少し惜しいのですがかなり便利なプラグインです！（画像の著作権等は各自で確認くださいね）

全員集合！させてくれるアートボード整列プラグイン「Art board plus」

アートボード系のプラグインはたくさんありますが、まるでドラゴンボールのように散らばったアートボードたちも選択してクリックするだけでピシっと整列しちゃいます！名前順にも出来るようなのでぜひ使ってみてくださいね。

このブログを書いている2020年12月現在も、どんどん進化している「Adobe XD」。
さらっと今年の新機能で気になるものをご紹介します！

3D機能で奥行きのあるデザインが可能！

こちらはまだ業務などで使う出番はなさそう…と思っていますが、奥行きのあるデザインができるようになったことでまた可能性が広がりそうな気がしています！この「Adobe XD」シリーズでご紹介できるようチャレンジしたい機能としてメモしておきます！

Flexboxっぽい！「スタック」機能

こちらもまだ試せていませんが、間隔を維持したままレイアウト変更が可能だったり、横配置を縦配置に変えられたりとかなり便利な機能のようです。もちろん間隔の調整もできるので、きれいなレイアウトをササっと作れてしまうから、デザイン自体に費やす時間が増やしたいデザイナーさんは積極的に使用したいですね！

まさかの「Visual Studio Code」との連携

あれ、DreamWeaverじゃないの…？と思いましたが、まさかの「Visual Studio Code」と連携しちゃった「Adobe XD」。
デザイントークンを作成し、ライブラリを公開したのちCC LIBRARY LINKに入力＆インポートすると「Visual Studio Code」に取りこめてしまうそう。
正直、実際に使うにはどうなの…？レベルですが「Visual Studio Code」もユーザが多いのでよりサイト制作が捗りますね！

日々デザインをしていると、限られた時間の中でいいものを作るためにデザインの細かい調整などに時間がかかってしまいますね。 今回ご紹介した「Adobe XD」だけでなく、ツールをうまく使いこなすことでより見やすく使いやすいデザインにブラッシュアップする時間が確保できると思いますのでぜひぜひいろいろ試してみてほしいです！