2018年11月8日
デザイン
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の機能です。
繰り返されるデザインの型を1つ作ったら、あとはrepeat grid
をオンにし、繰り返したい方向にドラッグするだけ。
また、それぞれのデザインの間のスペースも一つ変えれば、全て変わるので、いちいちマージンを手で調整する必要もありません!
プロトタイプ
auto-animate (自動アニメーション)
同じレイヤー名のオブジェクトが複数のアートボードにある場合、そのレイヤーのサイズ、位置、回転などの変更の間のトランジションを自動で作成してくれるアニメーションです。
また、この自動アニメーションと同時にドラッグジェスチャーが追加されたので、例えばスマホでの横ドラッグ
などにも対応できるようになりました。
▼ 3:17 くらいに自動アニメーションのエフェクトが見れる ▼
プレビューがリアルタイムで反映される
Adobe XDのプレビューはとにかく軽く、また変更した点がすぐに反映され、プレビューで確認できるので、プロトタイプのアニメーションのタイミングを少しずらしたり、ホットスポットをつなげる時にすぐに確認ができるので、ストレスがかかりません。
とにかくリアルタイム
なのがありがたいです!
共有
プロトタイプの共有にパスワードをつけられる
プロトタイプにはコメントやホットスポットのヒントなどがつけられる他、パスワードを設定することができます。
これにより、外部の方に間違って開けられてしまう!という事態を防ぐことができます。
プロトタイプの撮影がツールに内蔵されている
また、XDにはプロトタイプの撮影がツール内でできます。わざわざスクリーンキャプチャができるアプリなどを入れずとも、ボタン一つでプロトタイプの撮影ができます。
後ほど実際に撮影したものをお見せします。
値段
最後に、XDの値段について。
XDにはスタータープランという無料のプランがあります。
アクティブな共有プロトタイプとデザインスペックを1つまで作れて、クラウドストレージも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】
XDのお仕事に関するご相談
Bageleeの運営会社、palanではXDに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
1
0
関連記事

2018年12月24日
スクリーンサイズとリアルタイムビュー【これからはじめるXD】

2018年11月8日
Adobe XDとは?XDの便利機能を勉強しよう!【これからはじめるXD】

2018年5月1日
まだ間に合う、XDのおさらい【これからはじめるXD】
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

かっきー

まりな

suzuki
miyagi

ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと
デザイナーをしています。 好きな食べ物はラーメンです。

taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。

kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya

aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto
asama
ando
iwasawa ayane

oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!