XD

【Adobe XD】プロトタイプのできることや使い方を初心者向けに徹底解説!

xdのプロトタイプの作り方

 

プロトタイプとは

デザインの段階で実際の操作感を確認することができる機能です。

 

プロトタイプでできることは主に、Webページのボタンに「どんな動きで」「どのページに」遷移させるかを設定し、「プレビュー画面」を通してチームやクライアントの方との完成イメージの共有です。

また、「ハンバーガーアイコン」を押した時に「メニュー」をスライド表示させたり、「トップに戻る」ボタンやヘッダーを上部に固定するような実際に近い操作を再現することができます。

プロトタイプは、adobeXDでデザインを作成する際には欠かすことのできないツールです。

是非この記事を読んで使いこなせるようになって下さいね。

 

この記事では

デザイン済みのページに、ボタンの「遷移先」「動き」を設定する方法や、ハンバーガーメニュー・ヘッダー・トップに戻るボタンの設定について初心者向けに解説します。

 

adobe xdの全体像を知りたい方は、コチラの記事をご覧下さい!

目次

プロトタイプの準備プロトタイプモードの切り替えホーム画面の設定リンクの設定リンクの設定をコピー
共有部分のリンクの設定ハンバーガーメニューの設定ヘッダーを固定するtopに戻るの設定



 📖目次に戻る

プロトタイプの準備

まずは、プロトタイプを使うための準備について説明するよ

 📖目次に戻る

プロトタイプモードの切り替え

プロトタイプを作成するには、サイトのデザインを作成した後に画面左上のタブの「プロトタイプ」をクリックして行います。adobe XDでプロトタイプタブへ切り替える方法

プロトタイプができないとお悩みの方は…

  • まずはタブの切り替えを忘れてないか
  • ボタンが反応しない場合は、次の項で紹介する リンクの設定 ができているか

チェックしてみてね!

 📖目次に戻る

ホーム画面の設定

ホーム画面とは、プレビュー画面で最初に表示される画面のことです。

デフォルトでは最初に作成したアートボードがホーム画面に設定されています。

表示する画面を変える場合は、以下の手順に沿って設定を変更しておきましょう。

❶ ホーム画面として設定するアートボードを「クリック」

❷ 左上に表示されるアイコンを「クリック」

注意ポイント

他のアートボードを選択した状態でプレビュー画面を開くと、選択中のアートボードが優先されて表示されます。

 

アイコンが「青色」に変われば設定は完了だよ

 📖目次に戻る

リンクの設定

プレビュー画面でボタンをタップ(クリック)したときに、「どのページに」「どんな動きで」遷移するかを設定します。

 

step
1
ボタンを選択

リンクを設定する任意のボタンを選択し、青色のハンドル( プロトタイプモードでボタンをクリックした時に出るアイコン )を出現させます。

グループ化されたオブジェクト内にボタンがある場合は、何度かクリックして選択してね

 

step
2
リンク先を指定

ハンドル( プロトタイプモードでボタンをクリックした時に出るアイコン )をリンク先のページまでドラッグし、「青い枠が出た段階でマウスを離します。

step
3
動きを設定

リンク先を設定した後は、画面右のサイドバー(インタラクションパネル)で、ページ遷移の「きっかけ」と遷移する時の「動き」等を設定します。

※図は、トリガー「タップ」を選択した状態です。

今回は、ボタンを「タップ」(クリック)して画面を遷移させるので、以下の内容で設定します。

トリガー タップ
種類 トランジション
移動先 (アートボード名が表示される) 任意のページを指定 ※
アニメーション ディゾルブ
イージング イーズアウト
デュレーション 0.3秒

ポイント

ドラッグせずにリンクを設定する場合は、直接右サイドバーから「移動先」のプルダウンメニューから任意のページを選択して下さい。

 

step
4
プレビューで確認

プレビュー画面は、画面右上の「▶︎」マークをクリックして開きます。

adobeXDでプレビューモードに切り替える方法

設定した内容が反映されているか「プレビュー」画面を見て確認します。

 

他にも音声や特定の「キー」をトリガーにしたり、スライドしてページ遷移させたりできるよ!

 📖目次に戻る

リンクの設定をコピーする

ボタンに設定したリンクの内容を「他のボタン」にもコピーして使用することができます。

❶「リンクを設定したボタン」をクリックした状態でコピーします。

❷「リンクを設定するボタン」をクリックした状態で、右クリック→「インタラクションをペースト」を選択します。

adobeXDでリンク先の設定をコピーする方法

ボタンごとコピーする場合は、そのままペーストすれば設定内容も保持されたボタンができるよ



 📖目次に戻る

共通部分のリンクの設定

「ヘッダー」や「フッター」などの各ページの共通部分にリンクを設定する場合は、マスターコンポーネントにリンクを設定します。

注意ポイント

共通部分は、あらかじめコンポーネント化して作成しておく必要があります。

⇒コンポーネントに関する記事はコチラ

adobeXDで共通部分に一斉にリンクを設定する方法

 

プレビューでリンクを確認するのが手間な場合は、「⌘ + A」macのショートカットキー の場合)または、「ctrl + A」windowsのショートカットキー の場合)を押して目視で確認してね

 📖目次に戻る

ハンバーガーメニューの設定

「ハンバーガーアイコン」をクリックすると半透明の「メニュー」が上に重なって表示される動きを設定をします。

注意ポイント

ハンバーガーアイコンは共通部分なので、「マスターコンポーネント」にリンクを設定します。

 

step
1
リンク先の指定

ハンバーガーアイコンを選択した状態で、「マスターコンポーネント」のハンバーガーアイコンから、リンク先のアートボードへ、ハンドルをドラッグ&ドロップします。

 

step
2
動きを設定

右サイドバーで、動きの設定をします。

今回はページが半透明なのでアクションを「オーバーレイ」に、タップ(クリック)するとメニューが右から左にスライドさせたいので、アニメーションは「左にスライド」に設定しています。

トリガー タップ
種類 オーバーレイ
移動先 (アートボード名が表示される) 任意のページを指定 ※
アニメーション 左にスライド
イージング イーズアウト
デュレーション 0.3秒

 

step
3
戻り先を指定

メニュー内の「戻る」ボタンにタップ(クリック)すると直前のページに戻る設定をします。

「閉じる」ボタンを選択した状態で、右サイドバーのアクションを「ひとつ前のアートボード」に設定しましょう。

ハンドルの先が戻るマーク( 戻るアイコン )に変化します。

 

step
4
プレビューで確認

ハンバーガーアイコンを押すと、左からメニューがスライドし、「戻る」ボタンを押すことで、メニューが右にスライドし、元のページに戻ります。

ご覧の通り、アクションに「ひとつ前のアートボード」を設定すると、アニメーションが自動的に設定されます。



 📖目次に戻る

ヘッダーを固定する

プレビューでスクロール時にヘッダーを固定することも可能です。

「デザインモード」

❶ ヘッダー全体をグループ化

❷ 右クリック→「最前面へ」をクリック

「プロトタイプモード」

❸ヘッダーを選択

❹左サイドバーで「スクロール時に位置を固定」にチェック

 

❷の「最前面へ」を設定し忘れると、他のオブジェクトの下に潜り込んじゃうことがあるから注意してね

 📖目次に戻る

トップに戻るボタンの設定

プレビュー画面に「トップに戻る」ボタンを設置することも可能です。

この機能を応用して、ページ内リンクを作成することもできます。

 

step
1
トップに戻るボタンの設置

「デザインモード」で、青い点線より上に「トップに戻る」ボタンを設置します。(青い点線内に設置しないとプレビューに表示されません。)

「プロトタイプモード」に切り換え、「トップに戻る」ボタンを選択した状態で、右クリック→「最前面へ」を選択。

右サイドバーで「スクロール時に位置を固定」をオンにします。

 

step
2
移動先を指定する

「プロトタイプモード」で、「トップに戻る」ボタンを選択し、ハンドルをヘッダーまでドラッグします。

プレビューで確認すると、スクロールしてもボタンは固定されたままで、ボタンを押すとページの最上部に移動することが確認できます。

 

同じ手順でページ内リンクも作ることができるよ!色々試してみてね!

 📖目次に戻る

最後に

いかがでしたでしょうか、今回は「プロトタイプ」の基本的な使い方について解説しました。

プロトタイプ以外の機能についても気になる方は、こちらから別の記事を見てみて下さいね。

Adobe XD

XDの基本的な使い方を、オリジナルのスマホサイトをもとに解説しているよ!!  

続きを見る

最後までお読みいただき、ありがとうございました!



-XD