【徹底解説】XDでアニメーション付きプロトタイプを作ってみよう！

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

そんなお悩みがある方は必読です！

「XDのアニメーション作成」と聞くと難しそうに感じるかと思いますが、頻出の動きは実はそこまで難しくありません。

まずはプロトタイプとは？という疑問を解決した上で、実際にアニメーション付きのプロトタイプを作ってみましょう。

デザインから作るのはちょっと…という方も大丈夫！

PENGIN BLOGでコーディング課題として配布している、デザインカンプをもとにアニメーションを付けていきます。

ぜひ一緒に手を動かしてみてくださいね！苦手意識がなくなればXDの活用方法が広がりますよ！

XDデビューはこちらから！

プロトタイプとは

広い意味では「試作品」などという意味合い。

XDではデザインカンプにアニメーションを付加する機能があり、この機能を使用して作ったいわば「試作Webサイト（もしくはアプリ）」のことをプロトタイプと呼びます。

これにより実際のブラウザと近い動きを作ることができます。

デザインの段階で操作性や、動きによる印象を確認することができるのが最大のメリット。

また、XDではドキュメントの共有が簡単にできるので、制作チーム（とくにコーダー）やクライアントにプロトタイプを確認してもらうことも可能です。

ハンバーガーメニューやページ内スクロールなど、口頭で伝えづらい動きのある部分もデザインカンプ内に当てはめて見れたらイメージが沸きやすいのではないでしょうか？

デザインはこちらの記事から

プロトタイプを作成するにあたり、画面上部のタブはプロトタイプに切り替えておきましょう。

まずは基本の画面遷移の設定をします。

ここにトリガー・アクションという2つの要素を指定することで、より実際の動作に近いアニメーションを作ることができます。

頻出の動きとして基本的なページ移動から、ハンバーガーメニューの表示やモーダルの表示なども作成可能。

作り方は後ほど解説しますね！

まずはアニメーションを発動させる際に起点となるオブジェクトを選択します。

すると青い矢印が表示されるので、

遷移先のアートボードまで引っ張ってリンクを繋げます。この青い線をインタラクションといいます。

キャプチャの例では、起点となるオブジェクトをヘッダーのcontactボタンにし、contactページにリンクをつなげています。

これだけの作業で、プレビューを見てる時に「contactボタンをクリック→contactページに遷移」という動きが実現します！

トリガーとアクションを設定して、色々なアニメーションを作ることができます。

まずはそれぞれの役割と、指定できることを見てみましょう。

アクションが発動する操作を指定します。

トリガーにより、何が起こるかを指定します。

「移動先」「アニメーション」の部分は選択した種類によって異なります。

後ほど作り方の解説をする時に簡単にご紹介しますね。

トランジション	基本的な画面遷移
自動アニメーション	アニメーション付きの画面遷移
オーバーレイ	現在のアートボードに指定のアートボードが重なって表示されるディゾルブかスライドを選択できる
スクロール先	指定したオブジェクトまでスクロールされる
ひとつ前のアートボード	遷移前のアートボードに戻る
オーディオを再生	ファイルを読み込んでおくとオーディオを再生できる
音声を再生	テキストを入力しておくと、機械音声で読み上げられる
スクロール時に位置を固定	スクロールした際に指定したオブジェクトが固定されるヘッダーによく使われる