XDでワイヤーを作る時の機能説明

2020年2月4日 17:52

UIデザインツールの概要

デザインツールとはここではUIを作成するのに使用するツールを指し、adobe製品を筆頭にその種類は無数に存在します。
しかしそれぞれ最低限の機能は持ち合わせているため「これさえあれば大丈夫！」みたいな万能ツールは存在せず、「必要な要素を持ったツールを必要な場所で、必要な時に使用する。」が今の基本です。

この記事ではその考えを是とし、現在使用しているデザインツールの応用的な使い方や特性を紹介していきたいと思います。

今回はXDのワイヤー作成です。
共有やプロトタイピングについては書いておらず、基本的にデザインモードの説明になりますのでお気を付けください。

XD概要

2017年にリリースされたUIツール。正式名称はExperience Designer。
fireworksが開発終了した後の初のadobe製UIツール。
日本でのイベントが活発でよくsketchから移行するデザイナーの方を見ます。
リリースされてからどんどん改良されていっていますが、adobeエコシステム使用前提感は否めません。
CCに加入すると使用可能。単体なら月々1080円。
```https://www.adobe.com/jp/products/xd.html```

強み

- adobeエコシステムの恩恵を最大限に受けながらUIをデザイン出来る
リンクを知っていればXDを持っていなくても成果物を見られる。
- プロトタイピング機能が豊富でアニメーションやインタラクションもある程度表現できる。
- アセット機能(sketchのシンボル機能)がsketchより単純でとっつきやすい。
- 軽い(今のところ)
- プラグインが徐々に増えてきてる
- 違うXDファイルにペーストしても連携が切れない親子関係を持ったアセット機能

弱み

- 全てのアセットがレイヤーパネル上で管理されておりアセットが大量に生まれた際に逆に作業効率が落ちる。
- 描画力が低い
- オブジェクト間の距離を測る機能の挙動が怪しい

使い所

XD自体の描画力は高いとは言えず、アセットもその仕様上沢山作ると探すのが大変になるので複雑なデザインを作るのには向いていないように感じます。
なのでWFを切るのに使うのが最適かと思われます。

コストは掛かりますがadobe CCに加入しているならアイコンはAi、写真はPsと分業しXDでドッキングという使い方をするならばXDでもデザインは可能です。

XD応用的な使い方

アセット機能の親子関係

デザインツールにはコンポーネント機能といって、登録したらパーツのデザインを覚えておいてくれる機能があります。
XDではそれを<b>アセット機能</b>と呼び、今回使用するアセット機能は形状、色、レイアウトを覚えておいてくれます。

一番左のウィンドウの下に３つアイコンがあると思いますが、その中の一番上にあるやつがアセットウィンドウアイコンです。
下の画像ではわかりやすいように四角で囲ってあります。
そこをクリックするとアセットを呼び出したり検索したりするモードに入ります。
ちなみに2番目がレイヤーウィンドウ
3番目がプラグインウィンドウです。

また、下の画像は既にコンポーネントを一つ登録してある状態です。何も作っていない場合はなにもないはずです。

今回はアセット機能の持つ親子関係を説明するため、適当なカードを作ってみました。
適当に作って⌘Kをするとコンポーネントになるので、これを読みながら手を動かしている人は試してみてください。

この⌘Kでコンポーネント化したものをマスターコンポーネントと呼び、
親子関係における親の立ち位置のオブジェクトになります。

登録されたアセットはアセットパネルからドラッグアンドドロップで好きな場所に持っていけます。

もってきました。右側のが子の立ち位置にあるコンポーネントです。

このままだと両方マスターコンポーネントに見えてしまうので、テキストを変えてみたいと思います。
コンポーネントのテキスト編集は変えたいテキストに狙いを定めダブルクリックを二回やるといけます。
（クリックの内容は```コンポーネント選択＞コンポーネント内オブジェクト選択＞ダブルクリックでテキスト編集```です）

子の方のテキストを書き換えてみました。

しかし、親の方のテキストは編集されていませんね。
クラスなどの親子関係について知っている方にとっては当たり前かもしれませんが、XDにおいても子の編集は不可逆です。
<b>親の変更は子に反映され、子の変更は親には反映されない</b>のが親子関係の原則です。
知らない方は覚えておくと少しだけ各デザインツールのコンポーネント機能の理解が楽になるでしょう。

ついでに親コンポーネントの画像のところの色を変えてみます。

親を変更したら、子の方の色も変わりましたね。
これで一通り親子関係について理解したと思います。

デザイナフェーズ以外はこの親子関係の恩恵は受けにくいかと思いますが、それを抜きにしても欲しいパーツが常に左側に控えているとわざわざアートボードを掻き分け探す手間が減るのでアセット化はオススメです。
ワイヤーに関しては二度以上使いそうなものはじゃんじゃん⌘Kをすると良いでしょう。

### その他のアセット
上では文字や幾何学系の組み合わせを覚えてくれるアセット機能について説明しました。
次はそれ以外の、色と文字、スタイルのアセットについて説明したいと思います。
勘のいい人は気付いたと思いますが、ここにそれらは保存されます。

登録の仕方は非常に簡単で、登録したい色や文字を選択して該当するパネルのプラスボタンを押すだけです。
色には色が、文字には色とサイズとフォントの太さが登録されます。

試しに色々登録してみます。

さっきのカードの画像カラーとタイトルとpを保存してみました。
このままではなんのスタイルなのかわからないので、アセットパネルの名前のところをダブルクリックして名前を変えます。

これでわかりやすくなりましたね。
ではこの登録したアセットを使ってみます。
三つのテキストとその下に角丸の四角を作ってみました。

一番上にH3
二番目にp
三番目をそのままにして
下の角丸四角に色アセットの色を適用します。

使い方も非常に簡単で、

終わりです。

実際やってみるとこうなります。

これのいいところは、タイトルやpといった表現をする時に一度アセットを登録しておけばいちいち文字サイズとかを弄る必要がないところです。
数字の覚え間違いでH2なのにH3みたいな見た目になることもありません。
最高ですね。僕はXDの機能で一番気に入っています。
文字を全部平文で書いて、適応させたいところを一括選択してスタイル適用した時ほど楽しいことはない。
皆さんもぜひお使いください。