Adobe XDの使い方 - アド・イースト　名古屋市東区のデザイン事務所

OZです。
Adobe XDを使うとどれくらい開発が便利になるのかを
簡単にまとめました。

XDでプロトタイプ

XDでつくるとプロトタイプの
URLがつくれます。

その仮URLを、クライアントとデザイナー、コーダー、ディレクターが共有してみることで
おなじものをみて制作がすすんでいきます。

仮URLのページには
ピンをつけることができて
そのピンには、メッセージを書くことができます。

それをみんなで共有できるということです。

いままでは、イラストレーターやPhotoshopで1ページずつつくっていて
メールなどでPDFを確認してもらい
やりとりしていた肯定が大きく省かれるということです。

XDで共有の方法

共有をクリックしてリンクを作成する。
これだけです。

XDでプロトタイプができたからといって、
このプロトタイプがそのままサイトになるわけではありません。

ここにCSSやHTMLをプログラミングして
ホームページにしていきます。
ここを勘違いする人が多いみたいです。

でもXDの中ではコーディングに必要なプロパティ情報がはいっています。
これをコーディングに活かせます。
これがXDをつかう大きなメリットです。

パスワードを設定して共有できることもできるので
パスワードを設定すると安心した共有環境で制作をすすめることができると感じました。

XDを使った実践レスポンシブサイト

サイト完成までの行程

1.XDでワイヤーフレーム作成

2.Photoshopで写真や画像を準備
3.イラストレーターを使ってイラストやボタンを準備

4.XDでモックアップを完成させる。（リンクなども作成）
　スマホ→タブレット→PCのモックアップをつくる。

5.コーディング
　HTMLとCSS3でコーディングする。

上記赤色の工程がadobeXDの行程です。
XDで、イラレやPhotoshopでするような細かいデザインはあまり適していません。パーツはイラレなどでつくったほうが早いです。
コーディングもできませんが、XDでつくることで、幅やサイズなどコーディングに必要な要素が表記されるので
コーディングスピードは速くなります。

XDの操作方法について

アートボード

XD立ち上げて
カスタムアートボードを選びます

左のアートボードアイコンをクリックすると、
右側にいろいろなアートボードがでます。
右側のアートボード選択にいいのがなければ
自分で画面に四角をつくりアートボードを作成

コマンドやオプションを押しながらマウスカーソル

レイヤー

レイヤーは左下にあるアイコンをクリックすると
レイヤーが左に一覧ででます。
レイヤーは、なれると見やすく
グループ化しているものはまとまります。
グループ化からだしてあげると
そのオブジェクトもグループ化からはずれます。
位置の上下関係もここでかえたりできるので便利。

ショートカット

キーボードでVを押すと選択ツールになります
コマンド＋L　でロック
コマンド＋]やコマンド＋[で　上下関係を変えられる。

グループ化

複数のオブジェクトを
コマンド+G

グループ解除
コマンド+シフト+G

このへんはイラレとショートカットは同じです。

左のアートボードにオブジェクトの詳細がでています。

使ってみた感想まとめ

つかってみた感想は
イラストレーターをWEB用にカスタマイズした感じでした。
イラレになれているデザイナーでしたら
ショートカットなどよくにている部分が多いので使いやすいかとおもいます。
ツールが1画面でおさまってる感じがつかいやすい。

このXDでサンプルページをつくってみて
おもったことは
イラストレーターやPhotoshopだと
デザインを作ってからのコーディングが
そこから数値などをCSSに落とし込むために
計画をたてたり考えないといけない行程が
省かれるのではないかと感じました。

隙間などのサイズが
option押しながらカーソルオーバーすると
表示されるので
CSSの設計図をデザインしながら作っている
ようなものです。
一つ一つの行程を、理にかなったものにしていっているような感覚でしょうか。