作業効率化!Adobe XDに関する作り方まとめ

eyecatch_adobexd

assistant すいみん

こちらのCGメソッドのカテゴリーでは「作業効率化!Adobe XDに関する作り方まとめ」を紹介しています!
この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

Adobe XDについて

2016年に登場して、まだベータ版のAdobe XD。

まだ機能は十分ではないのですが、今後はSketchを抜いて、プロトタイピングの定番ソフトになるのではと思います。

Adobe XDのアップデート情報

こちらをチェック、ほぼ毎月更新されています。

参考
Adobe XD アップデート

Adobe XDの良いところ

公式サイトみたり、触ればすぐに特徴が分かるので簡潔に。

参考
Adobe XD体験版ダウンロードadobe.com

遷移設定が簡単

パーツ単位で遷移を引けるのが○。

画面全体を調整できる

全UIを並べることができるので、全体のパーツ管理がしやすいです。
なによりも1万以上のpixelを表示しているのに動作が軽い!

リピートグリッド

同じパーツを複数生成するのが便利です。 もちろん複製したものの画像とテキスト入れ替えもできます。

Adobe XD 作業時のヒント

アートボードの設定

あとでの大きさ変更は大変。レイアウトし易い基準にしておくことが重要. Retina対応できる書き出しも可能

アートボード同士の配置

どのような並びで、どんな間隔で、どのような命名規則で配置していくか。 大きく構想を考えておくと良いです。

UI Kitの準備

汎用素材を作成して、それをベースにレイアウトすると楽。 プロトタイピングするまえに、どのようなパーツで構成するかイメージしたり、決めておくことが重要。

パーツの管理

基本シンボルでパーツを配置。パーツの命名を種類が増えた時におかしくないように想定。 これも余白とか構成とかある程度イメージがある前提でレイアウト組まないと、あとあと整理・仕上げるときに大変。

階層のデータ整理

階層をルールを定めて、きれいにしていれば、わざわざ仕様書を起こさなくともあらかたキャプチャで済む場合も

遷移を保ったままコピー

インタラクションを保持したコピー機能が付きました。
遷移をつなぎ直すのは地味に大変なので、便利です。

参考
Adobe XDベータ版5月リリース! インタラクションを保持したコピー&ペースト、Windows版にはレイヤーパネルも搭載 | Adobe BlogAdobe Blog

パーツの書き出し

命名と画像を工夫することで、どこに使うパーツなのか、ひと目でわかるのが理想。

将来的に試すかもしれないこと

まとめました。

仕様書の作成

レイアウトだけでなく、UI仕様書、遷移図、画面設計書、パーツ仕様書など、最新の状態に連動して変化できるドキュメントを作成してみたい。

ページ全体に対応したシンボルの機能の進化(全体をシンボル化するとパーツ単位での画面遷移ができなくなるので)やsketch measureのようなサイズ表示機能があると、かなり効率がよさそう。

パーツの作り込みを除いて、UIの仕様書もすべてXDで完結できると、UI作成において必須のソフトになると思います。

AdobeXD

UI画面リスト UI画面リスト作成に使えるXDのURL活用方法
PSD書き出し 作成したデータをPSDデータに書き出す方法

AdobeXDトラブルシューティング

ドラッグ&ドロップできない 画像をドラッグ&ドロップできない問題の解決方法

クリエイティブクラウド・その他

共有リンク アップロード・ダウンロード・共有リンクについて
共有方法 クリエイティブクラウドでの共有方法について
8の倍数表 【UX/UI】8の倍数表

Adobe XDに関する参考記事・ツール・書籍のまとめ

Adobe XDに関する記事を下記にまとめました。



adobe-xd-summary-article


作業効率化!Adobe XDに関する作り方まとめ

Adobe XDのソフトウェア購入


eyecatch-buy-adobe-creative-cloud
【Adobe Creative Cloud】最安!アドビ認定スクールから購入する方法(+講座付き)

Adobe XDの参考書籍