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

AdobeXDモバイルアプリでプレビューする方法

みなさんこんにちは。しゅん(@shun_webdesign)です。

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

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

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

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

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

出典元:https://images.unsplash.com/photo-1592890288564-76628a30a657?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80

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

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

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

しかし、、

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

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

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

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

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

合わせて読みたい

Adobe XD スライダー作成方法 【Adobe XD】ドラッグトリガーでスライダーを作ってヌルヌル動かす 【Adobe XD】スワイプ操作で液状に動くプロトタイプを作るテクニック

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

出典元:https://images.unsplash.com/photo-1547027072-332f09bd6bb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80
手順
  1. Adobe XDモバイル版アプリをインストール
  2. ライブプレビュー
  3. クラウドドキュメント
Adobe XDモバイル版アプリをインストール

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

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

iOS版をインストール

Android版をインストール

ライブプレビュー

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

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

アプリ画面下のアイコンをタップ
クラウドドキュメント

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

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

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

オススメのXDの記事

AdobeXD Tipsまとめ 【Adobe XD】保存版これだけ見とけば大丈夫!今から使えるTipsまとめ

まとめ

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

  • Adobe XDモバイル版アプリを使うことでスマホからもプロトタイプが確認できる
  • iOS,Androidに対応
  • USBケーブルでPCとスマホを接続し、リアルタイムでプレビュー可能
  • XDファイルをクラウドドキュメント上に保存すれば、ケーブルなしでプレビューできる

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

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA