2018年11月8日

デザイン

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

目次

  1. はじめに
  2. XDとは
  3. XDでできること
  4. これからはじめるXDシリーズについて
  5. まとめ

はじめに

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

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

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

1.png (1.0 MB)

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

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

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

Adobe XDとは

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

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

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

デザイン

アセット機能

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

2.png (738.6 kB)

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

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

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

repeat-grid

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

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

3.gif (4.1 MB)

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

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

プロトタイプ

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

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

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

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

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

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

4.gif (8.9 MB)

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

共有

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

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

5.png (34.2 kB)

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

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

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

値段

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

6.png (263.8 kB)

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

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

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

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

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

7.gif (2.2 MB)

記事の作成に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

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP