Experience Design CC(Adobe XD)を使ってみたよ

先日公開されたAdobe Experience Design CC(以降Adobe XD)を使ってみたので感想とか!リリース直後でほとんど使い方も何も出回っていないのですが、普段からPhotoshopやIllustrator使っている人は、ほとんど学習コストなしで使えると思いますよ!

Preview4のバージョンが公開されたので、追加機能を使ってみました。
Adobe XdのPreview4が公開されたので触った感想

全体の所感

・プロトタイピングツールだけあって、細かな作り込みとかはできる感じではない。
・ざっくり画面構成作ったりページ間の遷移を確認するには工数少なく作れていい感じ!
・prott的な機能もついてる!利用制限なくシェアできる!(たぶん)
・デザイナー以外でもどんどん使っていけそう。操作も難しくないっす。
こんなところでしょうか。
ノンデザイナーの方でも簡単にプロトを作ったり、プレビューできるのでざっくりとしたイメージを共有するには良さそうかなと思います。
pptとかでワイヤー引っ張ってこんな感じです!って全体図作るよりは体感的にわかりやすいツールになっているんじゃないでしょうか。(全体図はこれとは別の観点から必要だとは思いますが)

Adobe XDの使い方

tool-xd-01
起動するとこんな画面が出てきます。
今回は「Start a New Design」から「iPhone 6」を選択します。

tool-xd-02
はい。
iPhone 6の画角でパレットができました!楽ちんですね。
ちなみにツール全体像はこれで全部で、PhotoshopやIllustratorのように細々したウィンドウとかはほとんどないです。
ここにあるのがほぼ全部なのでとりあえず学習コストは低そうかなと思っています!
デザイナーの方は、各機能のアイコンがPhotoshopやIllustratorで見たことあるような内容だと思うので、わかりやすいですよね。

画面の作り方

tool-xd-03
headerを作ってみます。
左側のツールバーから四角いアイコンをクリックして、必要な大きさに設置します。
右側のFillのところの丸をクリックするとColorsが開くので色を設定します。16進数などで設定できないのでざっくり適当に設定します。
この辺りの色はそれっぽく、みたいなところに慣れてくると雰囲気重視でサクサクものを作れるのかなと思います。いいですね。

tool-xd-04
それっぽい要素を入れてみました。
パレットの左上の文言はダブルクリックで変更できます。
プロトを作っているとどの画面が何か、わからないと大変なことになるので変更しておきましょう。

tool-xd-05
画像を設置するには、他のツールで画像をコピーしてきて配置することもできます。
が、オブジェクトをドラッグアンドドロップすることでも配置できます。
さらに、画面上のオブジェクト(今回はパレット上の丸いオブジェクト)めがけてファイルをドラッグアンドドロップすると

tool-xd-06
オブジェクトの形にマスクがかけられた状態で画像が配置できました。

tool-xd-07
複製したいオブジェクトを選択した状態で、ツール右上の「Repeat Grid」をクリックすると緑色の枠で囲まれます。

tool-xd-08
はい。現れました。
この右と下にあるツマミを広げると…

tool-xd-09
選択していたオブジェクトが複製されます。
なんだこれ楽すぎる。。

tool-xd-10
ちなみにこの状態で複数の画像をドラッグアンドドロップすると

tool-xd-11
リストの同じ要素の部分にそれぞれ画像が適用されます。

tool-xd-12
左のツールバーの下、角が折れた四角いアイコンをクリックします。
すると端末リストが出てきます。Apple押し。

tool-xd-13
iPhone 6をクリックするとツール上にパレットがもう一つ作成されました。

tool-xd-14
作成されたパレットにざくざく要素を突っ込んで2画面目を作成しました。

プレビュー方法

tool-xd-15
画面上のPrototypeをクリックします。
パレットの左上にホームアイコンが出ました。
これが設定されているところが、プレビューする際のindexのとなります。

tool-xd-16
クリックさせる要素を設定すると青く囲まれるため、右側のツマミをリンク先のパレットに接続します。

tool-xd-18
画面右上の再生ボタンを押すとプレビューできます。
ちなみにプレビュー画面では、右上のRecordをクリックすると動きを動画で保存することができます。

再生ボタンの右側をクリックすると、作った環境をネット上で確認できるようになります。

こんな感じ!
できることは少ないけれど、少ない中でサクサク作れるのがいいところですね。
今後はモバイル端末向けのアプリとかもでてくるらしいので、アップデートに期待しましょう。

今のところはこんなアップデートを予定しているようですよ。

  • デザイン機能の強化
    グラデーション、テキスト機能の強化、エフェクト、ブレンドモードの対応など
  • カラーピッカーの改善
  • レイヤーのサポート
  • リンク共有方法の改善
  • スクロール可能なコンテンツ
  • マイクロインタラクション
    (例:ボタンをロールオーバーした時のちょっとしたアニメ効果、など)
  • iOS、Android向けモバイルアプリ
    デザインのリアルタイムプレビューとプロトタイプの検証
  • Creative Cloud ライブラリ連携
    デザインアセットとスタイルの再利用と共有
  • Adobe Stock連携
    5,000万点以上のストック画像やベクター素材などの利用
  • プラグイン向け拡張レイヤー/APIレイヤー
    Javascriptを使った拡張
  • Microsoft Windows 10対応
    2016年中にプレビュー版提供開始予定

これらの更新が今から楽しみです!
iOS、Android向けモバイルアプリ早く来て欲しいですね!

わんちゃんの画像はネット上の以下のサイトからお借りしました。ありがとうございました。
http://shushu3212.com/
http://peco-japan.com/

気に入ったらシェアをお願いします!