【Adobe XD】モバイル版アプリでスマホからプロトタイプを確認する方法

みなさんこんにちは。しゅん（@shun_webdesign）です。

Adobe XDというとパソコンを使ってデザインを作成し、プロトタイプを確認することができます。

実はお手持ちのスマホからプロトタイプを確認できるのをご存知でしょうか？

今回はXDモバイル版アプリを使ってプレビューを確認する方法を紹介します。

難しい設定は一切ないのでスマホ、パソコン、接続用のケーブルを用意しましょう。

スマホから実機に近い形でプロトタイプを確認

スマホにAdobe XDモバイル専用アプリを使うとスマホの画面からプロトタイプが確認できます。

XDのプレビューボタンを押すことでプロトタイプの確認が可能です。

スマホのサイズに合わせたデザインも同様にXD上で確認できますよね。

しかし、、

スマホはカーソルで操作しないし、イメージしにくい…

…と思っている方も少なくないはずです。

Web制作ではレスポンシブの対応が当たり前になっており、パソコンよりスマホからのアクセスが多いのが現状です。

モバイルアプリではタッチ操作が可能になり、より実機に近い形でプロトタイプを確認できます。

アプリはiOS,Androidどちらも対応しています

合わせて読みたい

2022年1月16日 【Adobe XD】ドラッグトリガーでスライダーを作ってヌルヌル動かす

2022年3月7日 【Adobe XD】スワイプ操作で液状に動くプロトタイプを作るテクニック

アプリのインストール方法

Adobe XDモバイル版アプリをインストール

お手持ちのスマホにモバイル専用アプリをインストールします。

下記ボタンからデバイスに合わせてインストールしてください。

iOS版をインストール

Android版をインストール

ライブプレビュー

パソコンとスマホをUSBケーブルで接続し、リアルタイムで作成中のプロトタイプを確認できます。

スマホアプリ画面下からPCとスマホのアイコンを選ぶとXD上で選択したプロトタイプが表示されます。

クラウドドキュメント

クラウドドキュメント上に保存したXDファイルを確認できます。

先程紹介したライブプレビューのようにケーブルは必要ありません。

アプリ画面下の雲のアイコンをタップし、XDファイルを選択するとプレビューされます。

オススメのXDの記事

2022年4月2日 【Adobe XD】保存版これだけ見とけば大丈夫！今から使えるTipsまとめ

まとめ

今回はXDモバイル版アプリについて以下を紹介しました。

最後まで見ていただきありがとうございます！

参考になりましたら是非SNSのフォローと記事の共有をよろしくお願いします。