Adobe XDのプロトタイプ機能を徹底解説！ボタンが動くだけでこんなに伝わる！【初心者向け】

「見た目のデザインはできたけど、実際にどう動くのかは伝えにくい…」
そんなWeb制作の悩みを解決してくれるのが、Adobe XDのプロトタイプ機能です。

コーディング不要でボタンを押す・ページを遷移する・モーダルを開くといった実際のWebサイトに近い動きを再現できます。この記事では、プロトタイプ機能の基本から活用のコツ、応用までを初心者にもわかりやすく解説していきます。

この記事がオススメな方

Webデザインを学び始めた初心者の方
　見た目だけでなく「動き」も加えたデザインを学びたい方に最適です。
クライアントにデザインの動きを伝えるのが難しいと感じている方
　静止画では伝わりづらいUI/UXを、プロトタイプで直感的に伝える方法を知りたい方。
社内でWebデザインを担当することになったWeb担当者
　コーディングせずに簡単に動作確認できる方法を探している方にぴったりです。
チームでのデザイン共有やレビューを効率化したい方
　コメント機能付きで共有できるXDのプロトタイプ機能は、非デザイナーとのやりとりにも役立ちます。
将来UI/UXデザイナーを目指す学生や転職希望者
　「ただのデザイン」ではなく、ユーザー体験を考えた動くデザインをポートフォリオに加えたい方におすすめです。

INDEX

プロトタイプとは？XDでできること

「プロトタイプ」とは、完成前の動作確認や共有のために作る動くデザインの見本です。
Adobe XDでは、デザインしたアートボードにリンクやアニメーションを加えることで、実際にホームページを見ているような感覚を実現することができます。

ボタンをクリックすると次のページにジャンプするなど、Webサイトやアプリのナビゲーションの実動作を確認することができます。

マウスを重ねたときの色変化や動きも設定することが可能です。リアルなUI設計に役立ちます。

スライド・フェード・オートアニメーションなどを使って、柔らかな動きのある画面切り替えが実現することができます。

モーダルウィンドウやドロップダウンメニューのような「一部だけ上にかぶせるUI」の実動作も可能です。

画面内スクロールや、スクロールしても固定表示される要素も設定できます。

例えば、

まずはアートボードで、遷移させたい複数の画面を作成します。たとえば、トップページ・サービス紹介ページ・お問い合わせページなど。

画面上部の「プロトタイプ」タブをクリックすると、リンク設定用の画面に切り替わります。

ボタンや画像を選択し、矢印（ハンドル）をドラッグして遷移先のアートボードへ接続します。

遷移の効果（なし / スライド / フェード / オートアニメーション）と、イージング（イーズイン / イーズアウトなど）、遷移時間を選べます。

画面右上の「再生マーク ▶️」を押すと、そのままプレビューが可能。実際にクリックして動作確認できます。

注意点	内容
遷移ミス	リンクの接続忘れがないかプレビューで確認しましょう
画面サイズの統一	各アートボードのサイズがバラバラだと表示がズレる可能性あり
ホバー動作はPC前提	モバイルではホバーが機能しないため適用場面に注意
遷移スピード設定	アニメーションが速すぎる or 遅すぎると体験が悪化します

XDのプロトタイプは、URLを発行することで簡単に共有できます。

ブラウザ上で誰でも確認可能で、フィードバックも受け取れるため、オンラインでのやりとりにも最適です。

XDのプロトタイプはスマホでも見られますか？: はい、XDのモバイルアプリ（iOS / Android）で確認することができます。また、共有リンクはスマホのブラウザでも開けます。

プロトタイプは保存できますか？: XDファイル自体に保存されます。XDファイルもクラウドに保存かローカルに保存かを選択することができます。また、プレビューのリンク共有はクラウドに保存されます。自分で削除しない限りは保存された状態のままになっています。クラウドも容量がありますので、ご確認ください。