まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

AdobeXDを使ってアプリのプロトタイプを作成してみよう

f:id:s_kadota:20161116114645p:plain

こんにちは、まちいろの門田です。

昨年の6月に日本版がリリースされた「AdobeXD」。
お手軽にワイヤーフレームモックアップを作成し、共有することができるため
今後デザイナーのプレゼンやコーダーとのやり取りに用いられるケースが増えてくるのではないでしょうか。

なによりプロトタイプ機能を使えば作成したオブジェクトからお手軽に画面遷移を行うことができ、
オンラインでの公開もワンアクションでできるため動きのあるモックを作成後すぐにレビューできるのが強みです。

まだまだベータ版であるため今後もアップデートが繰り返されることと思いますが
現時点でも業務で実際に運用するには十分な機能を備えております。

そんなAdobeXDでの基本的な操作と、実際に簡単な
アプリのプロトタイプを作成した流れをこちらにまとめました。

作成するもの

  • まちいろのキャラクター「だいこん丸」たちの紹介アプリ
  • トップ画面、リスト画面、各キャラクターの詳細画面を作成する。

アートボード

それではまず、AdobeXDを起動します。
ベースとなるアートボードを選択することができるので、今回は「iPhone6/7」を選択します。


f:id:s_kadota:20161116124548p:plain

アートボードが一つだけワークスペース上に作成されます。
次に、必要な画面の数だけアートボードを増やしましょう。
今回作成するページは

  • トップページ
  • キャラクター一覧ページ
  • 各キャラクターの紹介ページ(4キャラクター)

ですので全部で6ページになります。
画面左のサイドバーの「アートボード」の項目を選択します。


f:id:s_kadota:20161116124907p:plain

すると画面右のサイドバーに様々なデバイスやウインドウ幅の項目が出てきますので、増やしたいアートボードのサイズを選択しましょう。
今回は「iPhone6/7」サイズを6画面使うので、新たに5つ追加します。

また、一度選択した後にワークスペース上でアートボードを出したい位置でクリックすれば、
その場所にアートボードを出すことができます。

アートボードはボード上に何もオブジェクトが乗っていない場合のみ、
サイズや位置を画面左サイドバーの一番上の「選択範囲」を使用して自由に変形、
移動することができるのでまずはアートボードの位置を整理しましょう。

f:id:s_kadota:20161116125153p:plain

レイヤー

次に各アートボードに分かりやすく名前を設定しましょう。
画面左サイドバーの一番下にある「レイヤー」を開いてください。
現在展開されているアートボードの一覧が表示されます。
そこで各アートボードの名前を変更します。


f:id:s_kadota:20161116131449p:plain

これで下準備が完了しましたので、実際にモックアップを作成していきます。

オブジェクト

まずは共通となるヘッダーバーとメニューを作成しましょう。

画面左のサイドバーより「長方形」を選択してください。
四角形型のオブジェクトを自由に作成できるようになります。


f:id:s_kadota:20161116132532p:plain

これでヘッダー部分を作成します。
作成した長方形オブジェクトは画面右のサイドバーで線や色の設定をすることができます。


f:id:s_kadota:20161116132550p:plain

テキスト

次にトップページへリンクするためのオブジェクトを作成します。
また長方形オブジェクトを作成したり、インポートした画像を使うことももちろんできますが
今回は「テキスト」で簡易なリンクテキストを作成いたします。


f:id:s_kadota:20161116133153p:plain

「テキスト」で作成したTOPテキストをヘッダーオブジェクト内に配置します。
さらに「テキスト」で現在のページを表す見出しを作成します。
f:id:s_kadota:20161116133429p:plain

これでヘッダーは完成です。
このヘッダーを全てのアートワークにも配置していきます。
作成したヘッダーオブジェクトを丸ごとコピー&ペーストして他のアートボードにも載せていきましょう。 AdobeXDのコピー&ペーストはアートボードの設置位置も記憶されているので
貼りたいアートボード上のどこにカーソルを合わせてペーストしてもちゃんとヘッダー位置に貼り付けてくれます。

ここで、コピー&ペースト以外にAdobeXDには作成したオブジェクトを
テンプレート(シンボル)として保存できる機能がありますのでそちらの機能についても触れておきます。

シンボル

画面左のサイドバーの「レイヤー」の上にある「シンボルライブラリ」を選択してください。
このライブラリ内に作成して保存したいオブジェクトをストックしておくことができ、
いつでもシンボルとして引き出して使うことができます。


f:id:s_kadota:20161116135800p:plain

ただし、全てのシンボルはグループ化されて、アクションなどがリンクされており文章などを削除すれば全てのシンボルに反映されます。
そのため、シンボル化するオブジェクトはボタンやアイコンなど全体で共通する外観のものが望ましいです。 (画像で追加されているヘッダーオブジェクトは見出し文章がアートボードごとに変更して使用するためシンボル化するには実際は不適切)
もしシンボルで個別に編集をしたいものがある場合は
右クリックでメニューを開き「シンボルをグループ解除」してから行う必要があるので注意が必要です。

ですので今回のケースの場合、コピー&ペーストするのが一番簡易な作業です。
しかしもっと大きなプロジェクトで、使い回すオブジェクトが増えてきた場合にはこのシンボル機能が
大きな効果を発揮すると思われますので、是非覚えておいてください。

デザイン作成

各アートボードにヘッダーを配置し、テキストも適した形に変更します。
f:id:s_kadota:20161116141442p:plain
さて、ここから個別にアートボード内で作業し、
作成したオブジェクトを用いたり画像をインポートしてデザインを作成していきます。


とりあえずトップページをざっくりこのような感じで作成し…

f:id:s_kadota:20161116141652p:plain

キャラ一覧ページもざっくりこのような感じで作成し…

f:id:s_kadota:20161116141758p:plain

各キャラ紹介ページもとりあえずこんな形で作成しました。


f:id:s_kadota:20161116141937p:plain

いったん、これらでアプリの各ページの準備が整いました。

プロトタイプ

次に、実際にボタンやリンクをクリックした際に
画面が切り替わる「プロトタイプ」を作成していきます。

ウインドウ左上にある「プロトタイプ」をクリックします。

f:id:s_kadota:20161116142657p:plain
そうするとワークスペースが「プロトタイプ」作成用に切り替わります。
「デザイン」をクリックするとデザイン制作画面に戻ります。

それでは早速、画面移動の設定をしていきましょう。
ここではまず、トップページからキャラ一覧ページへ移動するためのボタンオブジェクトを選択します。

f:id:s_kadota:20161116143057p:plain
すると青いタブのようなものが出てきます。
こちらをクリックするとこのオブジェクトクリック(タップ)した際に

  • どのアートボードに
  • どんな動作で
  • どんな速度で

移動するかを選択することができます。

ちなみにアートボードに対してホームアイコンのついたタブが表示されますがこちらは
青くなっているものが起動時に最初に表示されるホーム画面(index)扱いになります。
クリックすることで切り替えることができます。

まずはホーム画面のボタンから
「listページ」のアートボードに「左にスライド」で「イーズアウト」を0.4秒で移動に設定します。

ここでいったん、ウインドウ右上の再生ボタン「デスクトップレビュー」を
クリックして実際に動くか試してみましょう。

f:id:s_kadota:20161116143513p:plain
こちらが実際のレビュー動画になります。




成功ですね。
この要領で他のアートボード間をどんどんひも付けていきます。
基本的に動作は進む場合は「左にスライド」、戻る場合は「右にスライド」で作成していきます。


最終的にこのような形になりました。
かなりごちゃごちゃしてしまっておりますね。


f:id:s_kadota:20161116144522p:plain

今回は想定している全てのリンクにアクションをつけましたが
実際に作成されるモックアップでは最低限のリンクにのみアクションを設定するだけで良いでしょう。
今回は規模が小さいものなので、せっかくなので全てに設定いたしました。

それでは実際にこちらも「デスクトップレビュー」で動作を確認してみましょう。




問題なく想定した通りの動作をしています。
単純な操作で、ここまでできてしまうのはかなりの強みではないでしょうか。

また、スマートフォン側にAdobeXDのプレビュー用アプリを
インストールしておけばUSB経由で実機でのプレビューも行うことができます。


f:id:s_kadota:20161116144829p:plain

共有

さて、最後に共有の設定をしていきます。
「デスクトップレビュー」の右にある「オンラインで共有」をクリックします。


f:id:s_kadota:20161116144938p:plain

オンラインで公開する際のタイトルと、アクセスするためのリンクや埋め込みコードを生成することができます。
生成したリンクにアクセスすれば、プレビュー画面で実際に動作を試していただくことができます。
今回作成したモックアップのレビューはこちら

▶︎ まちいろテストアプリ


リンクを共有さえすれば、作成したプロトタイプを
すぐにプロジェクトメンバーやクライアント先に見てもらうことが可能です。






いかがでしょうか。
モックに動きをつけるツールやサービスは色々とありますが、
AdobeXDはかなり簡易に利用できるツールだと思います。

アプリにとどまらずWEBサイト制作にも、プレゼン用の資料などにも活用することができるため
今後も活躍の場が増えていく、期待できるツールになると思われます。