KOBITブログ

Adobe XDを知る

この記事は約 4分 で読めます。


はじめに

最近海外のデザイン関連の学生さんたちと話す機会がいくつかあったのですが、その際に何のアプリケーションをメインに使用しているかと質問をしたところ、全員がAdobe IlllustratorやPhotoshopはもちろんですが、Adobe XDの名前もあげました。
私自身がふわっとは知ってはいるものの、今までしっかりと使い込まずに乗り越えてきてしまっていたため、これが世代というものかと戦慄しつつこのままでは時代に置いて行かれそうなので今回からは数回にわたってXDとは何か、どう使うかなどを今更ですが、みていこうと思います。

1.Adobe XDとは

Adobeの説明では、Webデザインやモバイルアプリなどのデザインに特化したUX/UIソリューションとあります。
また、デザイン、プロトタイプ、共有の全てをこのXDで完結できるとのこと。
制作時には、デザインモードとプロトタイプモードの画面切り替えができ、デザインモードではデザインの構築、プロトタイプモードでは画面遷移の設定ができます。
また制作したものをチームでレビューができるので迅速な共有、反映が可能です。

2.AdobeXDのモードについて

1.デザインモー/ド

画面デザインの構成です。
フレームの作成から細かなデザインの落とし込みまで用途に合わせて様々な「デザイン」が可能です。
Adobeのチュートリアル動画からもexperienceデザインと言っていることから、絵的なものの構築というよりもUX/UIに特化した利便性の高いものを作るということを目的としていることが伺えます。
また、各デバイスのプリセットが用意されているので、必要なプリセットを選択して、素早くデザインの構築をすることが出来ます。

2.プロトタイプモード

プロトタイプモードでは、デザインしたボタンがどこに繋がっているかなどの動きのフローをつけることが出来ます。
サイトが複雑化すればするほど、説明しにくくわかりにくかったページ移動のフローが全てのページを一画面で確認しつつ、矢印での指示で構成が可能なので感覚的にわかりやすいものとなっています。

3.共有

Adobe Creative Cloud内のストレージに保存され、リンクを共有することでチーム内でのレビューが可能になります。
シームレスで情報の共有が可能になることで、より迅速に多くのメンバーにシェアすることが出来ます。
また、PW設定など、閲覧者に制限もかけることができるのでその点も安心です。

まとめ

機能を知れば知るほど必須のアプリケーションであることがひしひしと伝わってきました。
今まではワイヤーフレームからデザイン、画面遷移を別々で作成していたり、流れのままざっと叩き台を作って共有したりと、今思えばかなり非効率なやり方をしていたと反省、、。
次回実際に使ってみてAdobeXDの触りやすさを知っていきたいと思います。

著者:MainYard Design(メーンヤードデザイン) 北野敦子

kitano

1987年大阪出身。
生活する上で必ず目にするデザインされたものたち。 街を歩くだけでも無限の魅力があふれています。 ある日ふとそれらに魅了され別業界からデザイナーへ転身。 関西を中心にグラフィックデザインからブランド戦略提案などを展開中。
2012年タイポグラフィ作品展「OKU-2」出展。第31回読売広告大賞協賛社賞受賞。

※KOBITブログでは、定期的に北野敦子さんに記事を寄稿していただいております。
デザインに関するものを中心に、役立つ記事を数多く提供していただいておりますので、ぜひ他の記事もご覧ください。
北野敦子さんによる寄稿記事を読む


まずは無料ユーザー登録。
すぐに始められます。