見出し画像

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

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>と呼び、今回使用するアセット機能は形状、色、レイアウトを覚えておいてくれます。

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

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

画像1


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

画像2


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

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

画像3


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

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

画像4


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


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

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

画像5

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

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

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

画像6

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

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

画像7

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

画像8

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

画像9

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

使い方も非常に簡単で、

画像10


終わりです。

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

画像11

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

リピートグリッド

同じものを繰り返しコピペするのが面倒な時に、特定の条件下でのみ楽をする方法があります。
その条件に関しては機能を知れば分かると思うので紹介します。

画像12

先ほどのカードを使ってみます。
これをクリックして⌘Rを押します。

画像13

こういう表示になります。
これで、繰り返したい方向のバーをクリックしたままドラッグすると

画像14


増えます。

余白部分にカーソルを合わせてドラッグすると各コンポーネントの余白を制御出来ます。
解除したい場合は⌘shiftG。
中途半端に見切れてるやつは全部出ます。

カードや商品一覧など、同じデザインが繰り返し出てくるものに使うのがいいと思います。

ワイヤー作成に便利なもの

XDはワイヤー作成に適していると書きましたが、それを加速させるツールがあります。
プラグインウィンドウからパーツを呼び出せるものと、コピペでパーツを切り張りするものです。
どちらも一長一短ありますので、紹介してきます。

テンプレ

テンプレはadobeやその他のところから無数に出ていますが、今回はadobeのwires jp 2.0を使います。
リンクはこちら```https://www.behance.net/gallery/67284971/Wires-jp```


中身はこちら

画像15

アセットにはテンプレ内で使用されている色とテキスト、パーツたちが入っています。

アートボード内にはLPを想定した文字と画像の組み合わせやヘッダーフッター、フォームのパーツなどがPC版とモバイル版の二種に分けて入っています。

アセットが無数に入っており物怖じしてしまうかもしれませんが、このテンプレファイルを親とし、自分のワイヤー用のファイルを子として使う方法を行えば無数にあるアセットを触らずに済みます。やったね。

具体的な使い方を説明するため、テンプレファイルからボタンをコピペしてみます。

画像16

左上になにか鎖マークが付いてますね。
アセットパネルにも鎖マークの付いたアセットが追加されています。

画像17

この鎖マークは実は他ファイルのアセットである証明なのです。
アセットはファイルを飛び越えて繋がることができるのです。
まさにAiとPsで培ってきた相互接続の賜物でしょう。

ただ、このままでは自分好みにカスタマイズしたものをアセットパネルから呼び出したり、マスターコンポーネントを弄るのが難しいですね。

画像18

マスターコンポーネント弄りたい場合、右クリックでウィンドウを出せば元のテンプレファイルに飛んでマスターコンポーネントを編集出来ます。

もしくは、⌘shiftGでコンポーネントを解き、再びアセットにすればいいでしょう。

基本的にはこんな感じで使えばいいでしょう。


プラグイン

一番左の一番下のパネル。それがプラグインパネルになります。
これを選択すると今までアセットが出ていたところにプラグイン一覧が出るようになります。

画像19


今回使うのはQuick Mock up。
これもadobeから出たワイヤー用のプラグインで、最小単位のパーツが色々詰め込まれています。
内容は以下のような感じです。

画像20

テンプレと違いファイルを二個開かなくていいので、最小単位のパーツしかないけれど作業中ファイル迷子になりにくい利点があります。

使い方は至極単純、クリックするだけです。
欲しいものをクリックするとアートボードの左上(俗に言うx,yが0,0の初期地点)に現れます。
今回はボタンを呼び出してみました。

現れたパーツの場所を移動させず次々に呼び出すと0,0地点にパーツが無数に重なってしまうので気をつけましょう。

画像21

呼び出してすぐか、クリックした状態でボタンの詳しいスタイルを決めることが出来ます。
細かな形も変えることができるうえ、それをアセットにすることもできます。
なのでワイヤーを組んでいくうちに必要なものを呼び出し、二回以上使う場合はアセットにしてもいいでしょう。

テンプレとプラグインはどちらかを使うというよりは両方使うのを念頭に使ってみてください。そしていい使い方があったら記事を書いてくださると嬉しいです。

総括


こんな感じでXDでワイヤーを作るのいい感じです。
共有やプロトタイピング機能も良い機能があったり、気を付ける点があったりするのでまた書きます。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

3
見習いのUI/UXデザイナーです。自分の知ったこと、見たこと、思ったことを書いていきます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。