Adobe XDって便利だな。

ポコロンダンジョンズ デザイナーのスギです。

今回はAdobe XDについて書いてみます。

ゲームやwebサイトの「画面遷移」や「動き」

UXを確認するためにプロトタイプを製作するソフトです。

プロトタイプを作るソフトはいろいろと出ていますが

XDは、Adobe製品ということだけあって

他のAdobe製品との連携が取れ、使いやすいと思っていたのですが

今、提供されている製品はベータ版なので

そこまで互換性が優れているといった事や独自の機能は少ないです。

先に独自機能を書いてしまうと

・Photoshopなどのライブラリを読み込む事が出来る。

・XD独自機能「リピートグリッド」で

　同一デザインのオブジェクトの複製や画像の配置、編集が出来る。

今後に期待です。

ただ、直感的な操作感で説明を受けなくても操作する事ができます。

ココをこうしたら出来るのかな？が想像通りに出来るのです。

これはスゴイです。

「デザイン」と「プロトタイプ」がタブ状に分かれていて

行ったり来たりしながら同一の画面で作業を行えるのが良かったです。

Windows版もβ版が公開されて毎月アップデートして行くと

Adobeが言っているので今後に期待大です。

どれくらい簡単か説明を受けなくても良いとまで書きましたが

あまりに簡単なので操作方法を少し説明します。

「そんなの要らないよ」という方はここまででスルーでいいと思います。

見なくても出来ます。ほんと。

今回は、Adobe製品を触った事のない人でも分かるように書いています。

画像が多いので大分長いですが

書いてある事は簡単です。

普段、photoshopやillustratorを使っている人は

さらに、簡単に使う事が出来るでしょう。

それでは使い方です。

①作りたいサイズのアートボードを開く。

周りについている「○」を動かして好きな大きさに調整できます。

②背景を置く。

使いたい画像をドラッグ＆ドロップ。画像を置くことができます。

アートボードと同様に

画像の周りについている「○」を動かして画像の大きさを調整。

③ボタン、テキストを置く。

これまたドラッグ＆ドロップで画像を配置。

画像の周りについている「○」を動かして画像の大きさを調整。

左側のツールバーからテキストボタン「T」を選択しテキストを入力。

④XD独自機能「リピートグリッド」で複製。

「ボタン画像」と「テキスト」を選択。

「右クリック」→「グループ化」を選択。

右側ツールバーで「リピートグリッド」を選択。

ボタン画像の周りに横長の「○」が現われます。

上下左右にドラッグする事が出来るのですが

今回は下にドラッグ。すると・・・。

ボタンが複製されます。

先ほど選択した「リピートグリッド」をも一度押すと

下のようにモードが解除され、各ボタンが１つのオブジェクトになります。

これで1ページ製作完了。

⑥遷移先のページも用意する。

元のアートボードをコピー＆ペーストして使わない部分を削除。

先ほどと同じように「画像」や「テキスト」を配置。

左側のツールバーの「◻︎」や「○」からオブシェクトを作ってもOKです。

⑦遷移を紐づける

左上部にある「デザイン」「プロトタイプ」で

「プロトタイプ」を選択。モードを切り替える。

「遷移元」を選択すると「青い矢印のポッチ」が表示されます。

この「青い矢印のポッチ」を遷移させたいページにドラッグ＆ドロップします。

これで遷移の紐付けは終了。そして完成です。

遷移のさせ方もダイアログで指定する事も出来ます。

あまり種類はないですが、設定するとイメージを伝えやすいです。

⑧プレビュー

左上の「再生ボタン」を押すと

プレビューが表示され動作チェックが行えます。

⑨他の開発セクションに共有。

一番右上のiconをクリックすると

ご覧のようにダイアログが表示され

「リンクを作成」を押すと「URL」が発行され

他セクションに連携して、「iphone」「Android」様々なデバイスで

プレビューをチームで共有する事が出来ます。

修正があっても、同じURLをで更新、同期が出来ます。

以上です。

長々とありがとうございました。

また新機能が公開されたら試してご紹介しようと思います。

それではまた。