Adobe XDでアプリのUIを作成してみた!その3 [プロトタイプ編]

 2016.11.16  2017.10.13

前回ではレシピ一覧ページを作成しました。前々回作成したTOPページと合わせて、プロトタイプ画面で実際に動かしてみようと思います。前回TOP画面で「ログイン」ボタンを設置し忘れていたので、今回新たに追加しました(汗)。マージンなども少し調整しています。

画面を「プロトタイプ」に切り替える

画面左上メニューの「プロトタイプ」をクリックします。ショートカットは「control + tab」です。プロトタイプの画面ではUIの編集はできないので、ショートカットで切り替えできると早いですね。

xd_prot01

ページ同士をつなげる

クリックで動作を追加したいオブジェクトを選択すると青い矢印が現れます。この青い矢印を移動先のページ(アートボード)に繋げて、動きなどの効果を設定します。画像では、ログインボタンを選択してレシピ一覧ページにつなげています。Backボタンなどには「ひとつ前のアートボードに戻る」という設定もできます。

xd_prot02

プレビューする

右上のメニューにある「プレビュー」ボタン(▶︎)で、実際の動きやデザインの確認できます。iOSとAndroid用のアプリ(無料)を使用すれば、実機でリアルタイムプレビューが可能です。実機での確認はUSBでつなぐ必要があるので要注意です。

書き出し機能

アートボードを様々なファイル形式(png/svg/pdf)で書き出すことができます。アートボードを選択してから「ファイル>書き出し」を選択します。詳細はこちらのヘルプで確認できます。

共有する

Adobe XD オンライン共有機能を利用するには、前提条件として、AdobeアカウントでAdobe Creative Cloudアプリケーションやそれ以外のAdobe アプリケーションにログインする必要があるようです。試しに共有リンクを作成しましたが、見えるでしょうか?

UI kitもあるよ!

Adobe XDでは、あらかじめ「Apple iOS、Google Android、Microsoft Windows」のUIキットが用意されています。わざわざ素材を探したり作らなくてよいので助かりますね!

xd_kit_ui

どのワイヤーフレーム/UI作成ツールを使えばよいの?

スマートフォンやタブレットの進化に伴って、これらのツールもたくさん目にするようになりました。私も今色々と試しているところですが、XDが今後有料になるのかどうかが気になるところですね。また使いやすそうなツールを見つけたらこちらで紹介したいと思います。