Adobe XDでアプリのデザイン〜プロトタイプを作ってみよう!【機能と使い方】

Adobe XDを始めよう!

Adobe XDは、WebサイトやアプリのUI/ワイヤーフレームを作成したり、その作成したファイルで画面遷移を設定し、実機などで動作のプレビューができるUI/UXデザイン・プロトタイピングツールです。

簡単に言うと、「ページ間の移動ができる、動くワイヤーフレーム」という感じです。最近では機能が充実してきて、デザインもかなりできるようになっています。

この記事では、このAdobe XDを使用して、ユーザーがレシピを投稿する「みんなのレシピ」という架空のアプのTOPページとレシピ一覧ページを作成し、そのページを元にプロトタイプを作成してみます。ベータ版XDのリリース時に執筆したので、多少機能は変わっているところもありますが、ソフトの特徴と制作の流れは分かるかと思います。

  • Adobe XDってどんなことができるの?
  • デザインからプロトタイプを制作する流れが知りたい
  • 主要な機能をサラッと知りたい

という人の参考になると嬉しいです。

今回作る架空のレシピアプリ

recipe

TOPページを作成する

まずは、TOPページを作成します。XDを立ち上げて、デバイスに合わせたアートボードを作成するところから始めます。

スタート画面でアートボードのサイズを決める

Adobe XDスタート画面

スタート画面では、あらかじめスマートフォン、タブレット、デスクトップのサイズが用意されていますが、カスタムでサイズを指定することもできます。今回はスマートフォンのiPhone6/7で作成します。(デバイス名の右横にある矢印をクリックすると、他のサイズが表示されます。)

要素(オブジェクト)を作成して配置する

xd_top01画像1

スタート画面の「iPhone6/7」をクリックすると、横375×縦667のアートボードが作成されます。このアートボード上でワイヤーフレームやデザインを作成していきます。

まず画面左上のメニューで「デザイン」が選択されていることを確認します。(赤枠①)

TOPページの要素は、「テキスト・アイコン・テキストフィールド」です。PhotoshopやIllustratorを使っている方なら直感的に分かると思いますが、左側のツールパレット(赤枠②)を使い、要素を作っていきます。

矩形ツールで背景とテキストフィールドを作成する

左側のツールパレットの上から2番目にある「矩形ツール」を使い、ページの背景やテキストフィールドを作成します。

背景色を変えるには、ツールパレットの一番上にある「移動ツール」でオブジェクトを選択して、右パネルの「アピアランス > 塗り」で色を選びます。色はスウォッチに登録できるので便利です。(赤枠③)

角丸にする方法

xd_top02画像2

矩形を角丸にするのも簡単です。角の内側にカーソルを近づけると●ポチが現れ、ドラッグで角丸のサイズを変更できます。もちろん右パネルで数値による変更や個別にサイズを変更することも可能です。

今回は、Illustratorで開いたアイコンをコピペして貼り付けましたが、「ファイル > 読み込み」でaiデータを読み込んでもOKです。読み込み後のサイズや色の変更もできます。(アイコンはこちらでお借りしました。)

テキストを入力する

テキストは左側のツールパネルの下から3番目にある「テキストツール」で入力し、カーニングや行間は右パネルで設定できます。

オブジェクト間の距離計測

xd_top04

アートボード上のオブジェクトの位置や、オブジェクトとオブジェクトの間のサイズをリアルタイムで表示することができます。オブジェクトが移動している間も数値が変化します。

オブジェクト間の距離を表示させたい場合は、元となるオブジェクトを選択した状態で、option(alt)を押しながら別のオブジェクト上にカーソルを動かすと、距離が表示されます。option(alt)を押しながら要素をクリックすると、アートボードに対する位置などが表示されます。

レイヤーパネルとコンポーネント(旧シンボル)

左パネル下部に「アセット・レイヤー・プラグイン」のアイコンがあります。「レイヤーパネル」をクリックすると、アートボードのレイヤー構造が表示されます。photoshopなどのレイヤーと同じ感じですね。

「アセット」をクリックすると、色・文字スタイル・オブジェクトを管理できるアセットパネルが表示されます。作成したボタンやアイコンなどのオブジェクトをコンポーネントとして登録しておくと、再利用可能なオブジェクトになり、このオブジェクト(マスターコンポーネント)に変更を加えると、マスターコンポーネントからコピーされた全てのオブジェクト(インスタンス)に変更が適用されます。個別のインスタンスの変更(オーバーライド)も可能です。

Adobe XDのアセットでオブジェクトをコンポーネント化する

Adobe XDのアセットでオブジェクトをコンポーネント化する

Adobe XDのアセットでオブジェクトをコンポーネント化する

xd_top03

TOPページは、これでひとまず終了とします。

レシピ一覧ページを作成する

TOPページの隣に、レシピ一覧ページを作成します。

アートボードを増やす

xd_lists01

左パネルの「アートボード」アイコンをクリックすると、右パネルに作成したいデバイスのサイズ一覧が出現します。今回はiPhone6/7で作成しているので、iPhone6/7を選択すると、TOPページの右側にアートボードが現れます。

Repeat Gird(リピートグリッド)

XDの目玉機能とも言えるのが「Repeat Gird」です。同じ要素を繰り返し表示させる場合に、簡単に複製、サイズ変更ができます。

xd_lists02

リピートしたい要素をクリックして右パネルの「リピートグリッド」をクリックすると、要素の枠線が緑色に変わります。この枠を下に引っ張れば同じ要素が同じ間隔で複製されていきます!便利〜。

xd_lists03

リピートグリッドでのドラッグ&ドロップも秀逸で、複数の写真や改行区切りのテキストファイル(.txt)をドラッグ&ドロップすると、個々の要素にファイルが反映されるのです!

あらかじめ作成した図形の中に写真をドラッグ&ドロップすると、クリッピングマスクのように図形の形に沿って画像が表示されます。

かゆいところに手が届く機能がたくさんありますね〜。

スクロールの設定

xd_lists04

スクロールをさせたいアートボードをダブルクリックし、右パネルの「スクロール」が「垂直方向」に設定されているのを確認してから、アートボードのハンドルを下に伸ばしていくとビューポートの高さを変更することができます。

xd_lists04_2

右上の「プレビュー」(▶︎)ボタンでスクロールを確認します。画面で見える範囲が点線で区切られ、点線より下のコンテンツはスクロールしないと見えません。

プロトタイプを作成する

最後に、作成したTOPページとレシピ一覧ページを繋げて、リンクで自由に移動できるプロトタイプを作成します。ページの作成までは他のソフトでも作成可能ですが、動的に画面遷移ができるのは、Adobe XDならではの機能ですね。共有も簡単にできるので、間違いなく作業効率が上がります。

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

xd_prot01

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

ページ同士をつなげる

xd_prot02

ボタンなどのオブジェクトを選択すると青い矢印が現れます。この青い矢印を移動先のページ(アートボード)に繋げて、動きなどの効果を設定します。

画像では、ログインボタンを選択してレシピ一覧ページに繋げています。この画像は初期のXDの画面なので、動きの設定がポップアップで表示されていますが、現在は右側のパネルで動作やアニメーションの設定を行います。

プレビューする

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

書き出し機能

アートボードを様々なファイル形式(PNG/JPG/SVG/PDF)で書き出すことができます。アートボードを選択してから「ファイル > 書き出し」を選択します。

共有する

XD画面の上部にある「共有」をクリックすると、作成したデザインやプロトタイプを様々な形で共有することができます。共有したプロトタイプにコメントを残すことも可能で(Adobe IDに要ログイン)、デザイナーや開発者と共同作業がしやすくなっています。

この記事で作成したプロトタイプのサンプルは、以下のリンクでご覧になれます。戻るボタンを作り忘れてしまったので、操作性が悪くて申し訳ないのですが、TOPページのログインボタンをクリックすると、レシピ一覧ページに飛ぶようになっています。

このようにWebリンクを作成してチームやクライアントと確認できると、イメージがつかみやすくなり、認識の違いも防げますね。

XDの主要機能を試せるスターターキットもあるよ!

XDの主要機能を試せるスターターキット

Adobe XDでは、主要な機能を学べるスターターキットが用意されています。この記事でご紹介した機能が1つのファイルまとまっているので、これから初めて使う人にも、機能をおさらいしたい人にもオススメです。

ファイルはAdobe XDの最後の方にあるダウンロードボタンからダウンロードしてください。

Adobe XDの料金

気になるAdobe XDの料金ですが、1つのアクティブな共有プロトタイプと共有デザインスペックなら、無料で使えます。

業務に取り入れるとなると、無料プランの内容ではなかなか厳しいので、まずは無料で試してみて、本格的に導入することが決まったら、プランを上げるという方法がオススメです。

プラン名 料金 内容
XDスタータープラン 無料
  • アクティブな共有プロトタイプ数:1
  • アクティブな共有デザインスペック数:1
  • Adobe Fonts無料プラン(一部のフォントセットのみ)
  • 2GBのクラウドストレージ
XDプランの購入はこちら >
XD 1,180円/月(1ユーザー)(税別)
  • プロトタイプ数:無制限
  • デザインスペック数:無制限
  • Adobe Fontsポートフォリオプラン(全フォントライブラリ)
  • 100GBのクラウドストレージ
XDグループ版 1,980円/月(1ユーザー)(税別)
  • プロトタイプ数:無制限
  • デザインスペック数:無制限
  • Adobe Fontsポートフォリオプラン(全フォントライブラリ)
  • 100GBのクラウドストレージ
グループ版限定のビジネス向けの機能
  • 導入のオンラインセミナー
  • デザインスペック数:無制限
  • webベースのAdmin Console
  • 高度なテクニカルサポート
XDグループ版の購入はこちら