Adobe XDを使ったプロトタイプのライブテスト

デザインのプロトタイプをリアルにテストする際、仮想環境だけでは不十分なことがよくあります。本物のデバイスからのフィードバックは、プロジェクトの成功にとって決定的である可能性があります。このチュートリアルでは、AdobeXDと、スマートフォンやタブレットの専用アプリを使用して、プロトタイプのライブプレビューを直接取得する方法をお見せします。これにより、設計したデバイス上でデザインを直接テストできます。

主なポイント

• USBまたはクラウドを介して、デバイス上で直接プロトタイプを表示できます。
• Adobe XDアプリは、App StoreおよびGoogle Play Storeで無料で入手できます。
• これにより、フィードバックを収集し、リアルタイムで調整をテストできます。

ステップ・バイ・ステップガイド

1. プロトタイプの呼び出し

Adobe XDでプロトタイプを表示するには、最初に上部のメニューバーで再生アイコンを使用します。このアイコンを使うことで、制作した解像度でプロトタイプをライブで見ながら操作できます。最適に体験するために、5秒のタイムスタンプを使用することをお勧めします。

2. Adobe XDアプリのインストール

スマートフォンやタブレットでのライブプレビューには、Adobe XDアプリが必要です。このアプリは、Google Play StoreおよびAppleのApp Storeで入手可能です。無料でダウンロードし、時にiTunesと言われる混乱に惑わされないでください – それはApp Storeです！インストールが完了していることを確認してください。

3. USB接続

アプリをインストールした後、スマートフォンまたはタブレットをUSBケーブルを介してコンピュータに接続します。接続が確立されると、Adobe XD内で変更を行うことができ、それが遅延なしにデバイスに表示されます。これは、リアルタイムでテストシナリオやデモを行いたい場合に特に興味深いです。ここでは、66秒からライブプレビューを活用できます。

4. クラウドの利用

USB接続に対する柔軟な代替として、プロトタイプをAdobe Cloudに保存することができます。「ファイル名を付けて保存」を選択してください。Adobe XDはデフォルトでクラウドに保存するため、後でどのデバイスからでもアクセスできます。アップロードには数秒かかる場合がありますが、上部バーで進行状況を確認し、130秒からライブプレビューに近づく速さを見てみてください。

5. デバイス上でのプロトタイプへのアクセス

プロトタイプがクラウドに保存されると、スマートフォンでAdobe XDアプリを開いてライブアクセスができます。アップロードしたプロトタイプにすぐにアクセスできます。それをクリックして、プロトタイプを読み込み、デバイス上でどのように見えるか確認してください。144秒でこのデモを見ることができます。

6. インタラクションとフィードバック

アプリでは、デザインをナビゲートし、各要素を最適に確認できます。フォントが欠けている場合は警告が表示されますが、それは無視することができますし、Adobe Fontsで再読み込みすることもできます。プロトタイプを操作し、異なるエリアをクリックしてユーザー体験をシミュレートしてください。186秒から特に良く見えます。

7. メニューへのアクセス

メニューを呼び出すには、画面を3本の指でタップしてください。これによって、画面を共有したり、設定を変更したりするための一連のオプションが開きます。226秒で説明されているように、プロトタイプのために作成した各アートボードを確認してください。

8. テストの完了

デバイス上でのライブプレビューを利用して、ユーザーにどのようにデザインが受け入れられるのか具体的に見ることができます。プロトタイプを誰かに提示する際、その人が自分で遊んでみることができると、彼らは感激します。そのため、デバイスは渡す前にきれいな状態であるべきです。そうすることで、あなたのプロトタイプが最も良い形で見えることが確保できます。その情報は273秒で見ることができます。

まとめ - Adobe XDでのプロトタイプのライブテスト: デザインを最終デバイスに持ち込む方法

このガイドでは、Adobe XDを使用してプロトタイプをスマートフォンやタブレットでライブテストするのがどれほど簡単かを学びました。ほんの数ステップで、現実的な環境でデザインを提示し、貴重なユーザーフィードバックを収集できます。