いつか誰かのお役に立ちたい。もちっと解決。わんど

Adobe XDを使ってみよう!

Adobe XDの基本的な使い方メモを書いていこうと思います。

Adobe XDとは

Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。XDに使用することで、デザイナーはより早く、正確に、高い品質で作業できます。インタラクティブなプロトタイプをシームレスに反映し、Windows、Mac、iOS、Androidなどの様々なデバイスやプラットフォーム上でチームのメンバーやレビュー担当者と共有できるようになります。
引用:Adobe XDについて

XDさえあれば大体なんでもできる……!ってことだと思います。

デザイン画面の基本的な操作方法


他のAdobeソフトを使ったことある方ならすんなり使えると思います。ツールも他のソフトより少ないので初心者の方でもサクッと覚えられると思います!

「ポップコーンの専門店イメージサイト」をXDで作っていこうと思いますー!
(※ただの動きや操作方法の確認用なのでデザインや実装云々の深い意味は考えなでください)

XDを立ち上げてアートボードを選択します。
今回はテンプレ内にあるweb1280px×800pxで作ります。

画面はこんな感じです。
ざっくり画面内説明という名の最低これだけ覚えておけば、あとは何も怖くない説明(画像)

へ〜〜という感じに流してみてくれても簡単なので大丈夫!!!!
デザインをするときは左上の「デザイン」を選択した状態にしてください。

早速ファーストビューを作っていきます。

長方形ツールに持ち替えて3つ長方形を作ります。イラレやフォトショ同様オブジェクトを選択した状態でoption+shiftを押したままドラッグでコピーし同じ大きさのものを左右に2つ。真ん中に白い帯を1つで合計3つ作ります。レイヤーパネルに「長方形1 長方形2 長方形3」と並んでいればOKです。

位置の調整大きさの調整・色の調整をする場合は選択ツールに持ち変えまます。
選択ツールでは拡大縮小・角丸の他にダイレクト選択ツールのような機能もあります。
オブジェクトをダブルクリックすると、アンカーポイントの選択ができます。

 

作った長方形に色をつけます。塗り項目には「べた塗り」「線形グラデーション」「円形グラデーション」の3つがります。今回は「べた塗り」を選択します。左から「#74CBEB」「#ffffff」「#FFE553」で色をつけていきます。境界線はなしです、チェックを外しておいてください。

 

 


 

次にメニュー部分を書き込みます。
文字ツールを選択後「メニュー1」と入力します。文字入力は「ポイントテキスト」と「エリア内入力」の二つがあります。クリックでポイントテキスト、クリックドラッグでエリア内入力になります。テキスト入力切り替えはいつでも変更できます。右のパネル内の項目があります。


右側のパネルから「リピートグリッド」を選択します。選択した後、オブジェクトに戻り画像のように引っ張ります。引っ張ると項目が文字の大きさ、種類、間隔などの設定が同じ状態で繰り返し表示されます。

 

次に画像を入れます。
画像が入っているフォルダからそのまま図形の上に持っていくと画像がただ貼られるだけではなくクリッピングマスクがかかった状態で配置されます。
(※色味は画質の問題です、気にしないでください)

上で紹介した方法を利用して先ほどの水色と黄色の四角に画像をそれぞれ入れます。

クリッピングされた画像の位置・大きさ・角度などは画像をダブルクリックすると編集が可能になります。

こんな感じになっていれば大丈夫です。(画像)

ここまでで、これさえ覚えとけば大丈夫なツール・機能はすべて使ってみました!ツールも少なく、ほとんどぽんぽん配置するだけでできるかと思います…!次はページ移動の時の動きのつけ方について説明します。

プロトタイプ画面の基本的な操作方法

プロトタイプ画面では「トップページのある商品をクリックして商品詳細ページ移動」する動きをやっていこうと思います。(※サンプルなので内容や載せるものなどなどはスルーしてください。)

 

左上の「デザイン」を「プロトタイプ」に変更します。
変更したら商品詳細ページへ飛ばしたい商品を選択します。選択された場所は青色で囲まれます。囲まれているところをクリックすれば商品詳細ページへ飛ぶということです。画像のみクリックできるようにさせたい、文字のみにしたい場合は文字のみを選択、画像のみを選択します。

 

選択したものの横に青地に白の矢印マークがあると思います。マークをクリックしたまま移動させたいページのデザインがあるアートボードへ持って行き、離します。そうすると、青い線で結ばれるようになります。

 

設定ができたら、プレビューで確認します。
プレビューは画面右端の再生ボタンマークがそうです。ボタンを押すと、ウィンドウが開かれます。
先ほど設定した場所にマウスポインターを持って行きクリックすると……。

こんな感じでページ移動設定ができます。
(一部カットしているためかなり早送り見えます、実際はもっとふわあっと変わります。)

設定が「ディゾブル」なのでふわっとページ切り替えされます。
他の設定も見てみます。


設定項目の上から

ターゲットが移動させる場所設定
トランジションが動き設定
イージングが加減速の効果設定みたいなものです。

継続時間を変更するとまた違った演出に見えるのでここの設定を少し変えてみるのも面白いです。

 


XDに含まれている動き紹介

XDの動き設定には
・なし
・ディゾルブ
・プッシュ(4方向)
・スライド(4方向)
の4つがあります。

なしはそのままの通り何の動きもないです。
ディゾルブはふあっと切り替え
プッシュは押し上げ切り替え
スライドは滑りながら切り替えです。

まずは、スライド4方向について
前ページを覆うように表示されるのがスライドです。

左にスライド:左から移動先のページが被さるように移動してくる動きです。

 

右にスライド:左の逆バージョンです。アプリで前のページに戻る時に見る気がします。

 

上にスライド:上に向かって次のページが表示されます。

下にスライド:上の逆バージョンです。
上から次のページが下へ向かって落ちて表示されます。

 


 

プッシュ
スライドとどう違うの?となりそうですがよく見ると違います。
移動先のページが前のページを押し出すように表示されるのがプッシュです。

左にプッシュ:右から左へ押し出すように表示。

右にプッシュ:左バージョンの逆。
左から右へ押し出して表示

上にプッシュ:下から上へ押し上げて表示

下にプッシュ:上から下へ押し下げて表示

 

わかりやすいたとえかはわかりませんが、ざっくりいうとスライドが紙芝居をするみたいな動き、プッシュが連なって並べたものを横に流す動きです。

 


イージング設定:イーズイン/イーズアウト/イーズインアウト

・イーズイン
スタートで急発進し、ゆっくりと止まる

・イーズアウト、イーズインの逆でゆっくりと動き出し、徐々に加速する

・イーズインアウト
スタートとストップの緩急が同じ動き

それぞれ設定してみてみるとわかると思います。またはイージングでググるとくわあしく書かれているのでここは割愛します!!!

 

XDで他にもできること

基本的な操作の他にXDには様々なことができます!

・イラレで⌘C(コピー)したオブジェクトを⌘V(貼り付け)
配置した画像もコピーされます。パターン類は貼り付けはしますが、表示がされません。黒色として貼り付けられます。またパス上文字ツールで作成したものは崩れて表示されます。1文字1文字回転設定すればなんとかなりますが…アウトラインしたものを貼り付けた方が早いので貼り付ける際はアウトラインしたものにしましょう。

・共有
プロトタイプで作成したものを共有することができます。
右上のプレビューボタンの右隣で共有設定ができます。

・コメント入力
共有したプロトタイプにコメント入力が出来ます。(クライアントさんとのやり取りの時に役立ちそうです!)

・グリッドの表示・設定方法
グリッドの数や幅の設定・表示が可能です。グリッドデザインをする時に役に立ちます。

・アートボードの列を揃える
複数のアートボードの列を整えてくれます。それぞれのアートボードの幅や高さまで揃えまあす。(アートボードの大きさを揃えるのではなくアートボードの位置を揃えてくれます。)

・ファーストビューの高さ調整

ファーストビューで表示される高さをアートボード上の左端の青い点せんのところをクリックしながら上下に引っ張ると高さが変えられます。

・プレビュー画面の録画ができる
リアルタイムプレビューの画面では録画ができます。quicktimer開いて選択範囲して録画という作業をしなくていいのは助かりますね。
実際操作して動きをみたときと、操作した動きの録画を見たとき、遅い早いの印象が結構変わる気がするのでとてもありがたい機能です。

 

まとめ

XD使ってみた結果、細かなデザインはイラレで位置や間隔や一括設定・配置、ある程度のデザインの共有用にはとても便利なソフトだと思います!
またデザインしてみるとわかりますが、リピート機能・間隔・一括設定が優秀なのでかなり時間短縮になると思います。

by
今日もマウスポインターが行方不明。
SNSでフォローする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)