目次
現役デザイナーはもう使ってる！
Adobe XDってどんなソフト？
「これ、作って。週末アップね。」
「えっ！？ホームページ？私、デザイナーでもエンジニアでもないんですけど！？」
日々進化するデジタル環境、新たな取り組みが求められる現代社会、そして叫ばれるDX。
予想もしなかった業務を突然任されかねないのが昨今の職場事情です。
そう、Aさんは普段からトレンドに敏感でネットショップも良く利用しているところを見込まれ、
ある日突然自社サイトのリニューアル担当に抜擢されたのです。
DXってよく聞くけど、何？そう思われたらこちらの記事が参考になります。
そもそも事の起こりはひょんな一言から。
「うちのサイトって使いづらくないですか？スマホで見るとボタンが小さいし、写真ももっとア○ゾンみたいにこう…」
周りがなんとかしてくれると思ってAさんが呟いた内容がたちまち社内を駆け巡り、気付いた時にはAさん自身がWeb担当者の席に座ることになってしまったのです。
「よし、がんばってみよう！」そう思ったAさん。色々なサイトを見たり本を読んだりしてイメージやアイディアは浮かんできたのですが、知識もスキルもないため、それを伝えるすべを知りません。
かといって、デザインを一から学ぶ時間も予算もありません…
そんな時におすすめしたいのがアイデアを「さくっと」カタチにできるUIデザインツール、Adobe XDです！
シンプルかつ軽量な使用感が売りのAdobe XD。2016年に登場して以来、様々な制作の現場で確実にシェアを伸ばしています。正式名称は「Adobe Experience Design CC」。Experienceは日本語で経験、経験と言えばユーザーエクスペリエンス！つまりAdobe XDは、UI/UXデザインの為に登場したアプリケーションと言えます。
Aさんが感じた「使いづらい」「わかりにくい」といった疑問、これがまさにWebサイトのUI/UXデザインの考え方に繋がります。Adobe XDはユーザーの目に触れる部分（UI）と、ユーザーの体験（UX）両方をデザインすることが可能なアプリケーションです。そして作ったアイデアをリアルに表現する機能が備わっています。
Webサイトやアプリケーションの「見た目のデザイン」と「動きのデザイン」両方ができるツールと言えばイメージしやすいでしょうか？
Adobe XD を学習すべき理由
他のデザイン系ソフトにはない3つの機能！
おススメ機能① 難しい知識も操作も不要！インタラクティブな動きを表現できる
[自動アニメーション]
Adobe XDを使用すれば下の画像のようなラインアニメーションが簡単に作成できます。
難しいCSSを書く必要もなければ、AfterEffectsのような本格的な動画アプリも使用しません。
しかもクリックやスクロールに反応してアニメーションをスタートさせるなどのインタラクティブな動きも簡単に設定できるので、あなたのアイデアをすぐさま形にして伝えることが可能です！
おススメ機能② 時短に嬉しい！繰り返し要素をあっという間に作成
[リピートグリッド]
Webサイト上のボタンや画像など、一定のルールで繰り返し配置されているものを良くみかけます。Adobe XDのリピートグリッド機能を使用すれば、様々なデザインの繰り返し要素をあっという間に作成できます。しかも修正・変更も自在に可能なので作業の効率がぐんとアップすること間違いなし！
おススメ機能③ HTMLもCSSも必要なし！瞬時にブラウザの表示を再現
[プロトタイプモード]
デザインが完成した後、HTMLやCSS、JavaScriptなどのコーディングからサーバーアップロードを経てようやくブラウザでの動作を確認できることになります。そこに至るまでには相応の時間や予算、人手が必要になる訳ですが、Adobe XDならプロトタイプモードを使用してデザインと動きが同時進行で確認できるので、サイト内のページ遷移やボタンが反応するタイミングなど、細かな修正の手戻りを減らすことができます。プロトタイプはほぼ完成に近い形を素早く公開できるので、今後のWeb制作のワークフローには欠かせない要素になるでしょう。
こんな方におすすめ、Adobe XD講座！
現役のWebデザイナーの方にはもちろんですが、制作に関わっているすべての方やWeb業界以外の方にもAdobe XDはおすすめです。これまでExcelやPowerPointで資料やサイトマップを作成してデザイナーに渡していた方など、思わぬ時間短縮やコストカットが実現するかもしれません！