プログラミングで人生を豊かに楽しく

【Adobe XD】プロトタイプ機能の使い方を解説する【初心者向き】

みやしも WEB制作

人気のデザインツールであるAdobe XDの『プロトタイプ機能』の使い方について、くわしく解説してゆきます。

プロトタイプ機能を使いこなしてWEBサイト・アプリ開発の作業をスムーズに進めよう!

▼この記事を書いた人

Twitter|miyashimo_eng

フリーランスエンジニアのみやしもです。システム開発・WEB制作などの経験を活かして、初心者に役立つIT知識を発信してゆきます。

Adobe XDの「プロトタイプ機能」とは?

Adobe XDのプロトタイプ機能について
Adobe XDのプロトタイプ機能

Adobe XDには、作成したデザインを実際のWEBサイト・アプリの様に動かすことが出来る『プロトタイプ』という機能があります。



プロトタイプとは『試作モデル』という意味合いの言葉ですが、このプロトタイプを利用すれば、WEBサイトやアプリの制作時に次のようなメリットを得ることが出来ます。



▼プロトタイプ利用のメリット

  • デザイン段階から動作検証が可能になる
  • デザインや操作性のイメージが共有しやすくな
  • コミュニケーションや修正作業にかかるコストが減る



制作全体に影響する多くのメリットがありますが、とくにコミュニケーションに関するメリットが多くあります。このことからもプロトタイプは、複数人での作業時に最大限効果を発揮する機能といった事がいえます。

WEBサイト・アプリの制作にフォーカスされた、XDならではの機能です!

複数人での利用には有料版がおススメ

Adobe XDが無料で利用できる「XDスタータープラン」では、共有できるリンクの数が1つまでとなっています。



このためにも、プロトタイプなどの複数人での利用が前提となった機能では、有料版が必要になるケースも考えられます。



▼有料版が必要になるケース

  • XDを使用した複数の案件が並行して進む場合
  • 企業や組織・チームなどの複数人でXDを利用する
  • プロトタイプを2パターン以上作成して比較をする



学習目的ならスタータープランでも十分に利用出来ますが、とはいえ実務では進行に差し支えることも多くあります。利用状況に合わせて有料プランへの切り替えも検討してみましょう。

これから本格的にWEBサイトやアプリの制作を行おうと考えている方は、基本的には有料版を利用するのがおススメです。

プロトタイプの基本的な使い方

プロトタイプの基本的な使い方

プロトタイプ機能の基本的な使い方について解説をしてゆきます。

プロトタイプモードを開く

ワークスペース上部の「プロトタイプ」メニューを選択することで、作成したデザインをプロトタイプモードで編集できる様になります。

XDでプロトタイプの編集画面を開く方法

画面をつなぐ「インタラクション」

XDのプロトタイプモードでは「インタラクション」と呼ばれるものを使用して、画面遷移の設定を行います。

インタラクションとは

プロトタイプモードで使用する画面遷移を表すために使う、青色のコネクタのことを『インタラクション』と呼びます。

XDのインタラクションについて
Adobe XDのインタラクションについて

上記のインタラクションの場合だと、WEBページ①の『BUTTON』と書かれたボタンを押すと『WEBページ②』に移動する、といった意味になります。

プロトタイプでは『インタラクション』という仕組みを使って、WEBサイト・アプリにおける画面遷移を表現してゆきます。

インタラクションの設定方法

オブジェクトやアートボードをクリックした時に表示される、青色の矢印を移動先のアートボードにくっつけることで設定できます。

XDのインタラクションを設定する方法
インタラクションの設定方法

オブジェクトとアートボードが青色のコネクタでつながった状態になれば、インタラクションの設定は完了です。この作業をデザインに対して一通り行うと、次のような状態になります。

インタラクションの設定を行った状態
オブジェクトやアートボードのリンクの関係が視覚的に分かりやすく表現されていますね!
基本的にインタラクションを使ったリンクの設定方法さえ分かれば、WEBサイトの制作を始めとするほとんどのプロトタイプ作業に対応が可能です。

一方では、インタラクションを構成するトリガー・アクションという2つの要素を理解すると、単純なリンク以外の、より多彩な表現も可能となります。(※トリガー・アクションの使い方も、後ほど解説してゆきます)

プロトタイプを実行する

インタラクションの設定が終わったら、ここでプロトタイプを実行してみましょう。プロトタイプを実行するには、XDのプレビュー機能を利用します。



プレビューを行うにはワークスペース右上の「プレビュー」ボタンを押すか、次のショートカットキーで行います。

▼ショートカットキー
【Mac】Command+Enter
【Windows】Ctrl+Enter
XDでプレビューを行う方法

プレビューを実行すると、XDのワークスペースとは別にウィンドウが開き、WEBブラウザの様な形でデザインが閲覧できる様になります。

プレビュー表示が行われた状態

先ほど設定したインタラクションも、ここでは実際のリンクとして機能します。実際にボタンを押して、画面遷移も確認してみましょう。

この様に「プロトタイプ」「プレビュー」を組み合わせて利用することで、デザインを実際のWEBサイト・アプリの様に動作させ、確認するといった一連の作業が可能となります。

以上でプロトタイプ機能の基本的な使い方の解説は終わりです。

インタラクションを使いこなそう

インタラクションを使いこなそう

ここからは、先にも登場したインタラクションの「トリガー」「アクション」について、詳しく解説してゆきます。

トリガー・アクションについて

インタラクションでは、トリガーとアクションという2つの要素を組み合わせることで、先にも紹介した画面遷移といったデザイン上の動きが実現できます。



トリガーは『何をしたら』、アクションは『何が起こるか』をそれぞれ定義できる項目となっており、XDの右側のパネルを通して、各インタラクションごとに設定ができます。(※プロトタイプモードを選択している時のみ設定可能です)

Adobe XDのトリガー・アクションについて
トリガーは『何をしたら』を、アクションは『何が起こるか』をそれぞれ定義するインタラクションの項目。この2つを組み合わせることで、プロトタイプに動きを加える事ができます。

トリガーで設定できること

トリガーの項目では次の内容が設定できます。



  • タップ:タップ(クリック)操作された時実行する
  • ドラッグ:ドラッグ操作された時に実行する
  • ホバー:ホバーされた時に実行する
  • キーとゲームパッド:対応したキー(ボタン)が押された時に実行する
  • 音声:対応した音声が入力された時に実行する

アクションで設定できること

アクションの項目では次の内容が設定できます。



  • トランジション:画面を移動する
  • 自動アニメーション:アニメーションで変化する
  • オーバーレイ:指定したアートボードが現在のアートボードに重なる
  • スクロール:指定したオブジェクト位置にスクロールする
  • ひとつ前のアートボード:ひとつ前のアートボードに戻る
  • オーディオを再生:指定した音声ファイルを再生する
  • 音声を再生:指定したテキストを自動音声で読み上げる
選択したアクションによっては移動先・アニメーション・音声といった追加項目も表示されますので、複合的に組みあわせて調整してゆきます。

インタラクションの使用例

インタラクションの「トリガー」「アクション」について解説してきましたが、これらを組み合わせると実際にどの様が事ができるのか、いくつか例を紹介してゆきます。

例①:画面遷移

先ほどにも登場した、ボタンを押したときに他の画面に移動する、単純な「画面遷移」の例です。



この値はインタラクションの初期値となっているため、プロトタイプモードで単純に青色のコネクタを繋ぐだけで実現できる様になっています。

トリガー:タップ
アクション:トランジション(遷移先)

例②:モーダルウィンドウ

WEBページの画像などをクリックした時に表示される、モーダルウィンドウを表現した例。



モーダルウィンドウを別のアートボードに作っておき、一方ではボタンのアクションに『オーバーレイ』を指定する、といった方法で実現します。

XDでモーダルウィンドウを表現する①

こうするとボタン押下時にアートボードが重なり、結果として、画面遷移することなくモーダルが表示されるといった表現ができます。

XDでモーダルウィンドウを表現する②
トリガー:タップ
アクション:オーバーレイ

プロトタイプを共有する方法

作成したプロトタイプの共有リンクを発行すれば、他の作業者やクライアントに対して共有することも出来ます。

共有リンクを作成する

プロトタイプを共有するためにも、次の手順で共有リンクを作成してゆきましょう。



▼共有リンクの作成方法

  1. ワークスペースの左上にある「共有」をクリックする
  2. 右側パネルの表示設定で「ユーザーテスト」を選択する
  3. 「リンクを作成」をクリックする
URL共有する方法
プロトタイプの共有リンクを作成する方法①
共有を行う際の表示方法はいくつかありますが、ここではプロトタイプの表示に最適な『ユーザーテスト』を選択しましょう。

リンクの作成が完了すると次のような状態になります。続けてURLをクリックすれば、WEBブラウザでその内容が確認できます。

WEBブラウザで開く方法
プロトタイプの共有リンクを作成する方法②

WEBブラウザに表示させる

プロトタイプの共有URLを開けば、実際の内容がWEBブラウザ上で確認できます。

WEBブラウザで見ている状態
作成した共有リンクを開いた状態

あとは作成した共有リンクを、メール・チャットで送るなどすれば、他の作業者やクライアントにかんたんに共有できます。

WEBブラウザさえあれば、誰でもプロトタイプを見ることが出来るのでとても便利です!

この記事のまとめ

今回はAdobe XDの『プロトタイプ』機能について、基本的な使い方から、WEBサイトの制作でも役立つ利用方法まで、詳しく解説してきました。

Adobe XDを使ってみよう

XDは無料から使えて、かつ初心者にも扱いやすい人気のデザインツールです。多くのWEBデザイナー・UI/UXデザイナーから支持を集めており、今やWEBサイト・アプリ開発の現場では欠かせないツールになります。



▼Adobe公式サイトはこちら

AdobeXDを今すぐ使う

※クリックすると別ウィンドウで開きます

デザインやUI/UXなどを学習するなら、ぜひ優先的に習得しておきたいツールですね!

基礎から学びたい方に向けて

Adobe XDの使い方を基礎から学びたい方に向けて、画像付きで分かりやすく解説する記事を書きました。



▼XDの使い方が知りたい方はこちら


WEB初心者の方や、これからクリエイターになりたい方は必見の内容です!

関連記事

最新記事