タップできるもくじ
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のソフトウェア購入
【Adobe Creative Cloud】最安！アドビ認定スクールから購入する方法（+講座付き）
