Adobe XDとは？XDの便利機能を勉強しよう！【これからはじめるXD】

はじめに

皆さんの中でXDはどういうツールですか？

• PhotoshopからSketchに変えて以来、いまいちAdobe製品に触れてない！
• XDはワイヤーを作るくらいの粒度なら使ったことはあるけど、本格的なデザインは別のツールでやる。
• 興味はあるけど、すでに現状のツールで事足りてるし、学び必要はないと思っている

そういう方は多いのではないでしょうか？
実際、私もそのように思っていました。

XDは発表された時こそ発展途上でしたが、もともとrepeat gridなどデザインにおいて効率化を追求できる強力なツールです。

そこに2018年10月のアップデート追加されたauto-animateやdragジェスチャーなどが加わり、高速プロトタイピングだけでなく、複雑なアニメーションを作れる幅が広がりました。
repeat grid, auto-animateなどについてはあとでもう少し補足します。

今回はそんな爆速プロトタイピング + だんだんと複雑なアニメーションが作れるようになった、XDとその基本をご紹介します！

Adobe XDとは

XDとは Adobe社が出しているデザイン、プロトタイプ、そして制作したものを共有するためのツールです。
かなりいろんなことができるにも関わらず、軽くて早いのでとても便利です！

また、基本操作などをおさらいしたい方はこちらの記事をご覧ください。
まだ間に合う、XDのおさらい【これからはじめるXD】

デザイン、プロトタイプ、共有のそれぞれのフェーズで私が個人的に便利だと思った機能をいくつかピックアップしてご紹介します。

デザイン

アセット機能

Adobe XDでは、ワイヤー、デザイン、プロトタイプで使う色、テキストスタイル、シンボルなどをアセットとして一括管理することができます。

デザインしながら色やテキストスタイルを決めていく方であれば、決まった時点でアセットとして登録しておけば自然とデザインのスタイルガイドが出来上がります。

最初に色やテキストスタイルを決めておく方であれば、一度決めたものをすぐに取り出せたり、デザインしている中でスタイルを変えたいと思った場合は、全体にその変更を加えることができるので、とにかく便利です！

シンボルの数がたくさん増えてしまった時もアセットを管理するパネルに検索バーがついているので、キーワードを入れるだけで、自分が探していたシンボルがパッと見つかります。

repeat-grid

ブログの記事やECサイトの商品など、Webやアプリのデザインで似たようなレイアウトがずっと並ぶデザインは珍しくありません。

repeat-gridはそんな時に使えるXDの機能です。

繰り返されるデザインの型を１つ作ったら、あとはrepeat gridをオンにし、繰り返したい方向にドラッグするだけ。

また、それぞれのデザインの間のスペースも一つ変えれば、全て変わるので、いちいちマージンを手で調整する必要もありません！

プロトタイプ

auto-animate (自動アニメーション)

同じレイヤー名のオブジェクトが複数のアートボードにある場合、そのレイヤーのサイズ、位置、回転などの変更の間のトランジションを自動で作成してくれるアニメーションです。

また、この自動アニメーションと同時にドラッグジェスチャーが追加されたので、例えばスマホでの横ドラッグなどにも対応できるようになりました。

▼ 3:17 くらいに自動アニメーションのエフェクトが見れる ▼

プレビューがリアルタイムで反映される

Adobe XDのプレビューはとにかく軽く、また変更した点がすぐに反映され、プレビューで確認できるので、プロトタイプのアニメーションのタイミングを少しずらしたり、ホットスポットをつなげる時にすぐに確認ができるので、ストレスがかかりません。

とにかくリアルタイムなのがありがたいです！

共有

プロトタイプの共有にパスワードをつけられる

プロトタイプにはコメントやホットスポットのヒントなどがつけられる他、パスワードを設定することができます。
これにより、外部の方に間違って開けられてしまう！という事態を防ぐことができます。

プロトタイプの撮影がツールに内蔵されている

また、XDにはプロトタイプの撮影がツール内でできます。わざわざスクリーンキャプチャができるアプリなどを入れずとも、ボタン一つでプロトタイプの撮影ができます。

後ほど実際に撮影したものをお見せします。

値段

最後に、XDの値段について。

XDにはスタータープランという無料のプランがあります。
アクティブな共有プロトタイプとデザインスペックを１つまで作れて、クラウドストレージも2GBまでは無料で使えます。

そのほか、個人向けには月1,180円の単体プランと月4,980円のCreative Cloud コンプリートプランがあります。

これからはじめるXDシリーズについて

【これからはじめるXD】シリーズではデザイナーさん向けに実践的にXDでのデザイン、プロトタイプの仕方をご紹介していきます。

このシリーズで作っていくものはこちらです。(また、これは実際にXD内で撮影したプロトタイプです)

記事の作成にrepeat-grid, ナビの切り替えはauto-animate, 関連記事ではdrag gestureなどを使っていきます。

その他、本シリーズでカバーするものは以下です。

• スクリーンサイズとリアルタイムビュー
• UI kit
• アセット
• グリッド
• 画面の遷移 (プロトタイピング)
• おすすめプラグイン

ただXDでデザインしたい！というだけではなく、スピーディに作れる、統一性があるデザインが作れるという視点でデザインをする際に必要な機能などを盛り込みました。

また、XDと付随して使うと便利なUI kit やおすすめのプラグインもご紹介します。

なお、次回から本格的にXDを触っていきますので、まだの方は最新のXDをダウンロード↓しておいてください。
XDをダウンロードする画面へ

まとめ

以上、今回はXDとその特徴についてご紹介しました。

XDは発表された時こそ発展途上でしたが、もともとrepeat gridなどデザインにおいて効率化を追求できる強力なツールです。
そこに2018年10月のアップデート追加されたauto-animateやdragジェスチャーなどが加わり、高速プロトタイピングだけでなく、複雑なアニメーションを作れる幅が広がりました。

repeat grid, auto-animateなど便利な機能がたくさんあります！

ベーグリーでは【これからはじめるXD】というシリーズでXDでプロトタイプを作っていきます。
その過程でデザインに便利な機能、プロトタイプを早く作れる機能などをご紹介していきますので、ご興味がある方はぜひ定期的にチェックしに来てみてください。

また、基本操作などをおさらいしたい方はこちらの記事をご覧ください。
まだ間に合う、XDのおさらい【これからはじめるXD】