無料のプロトタイプ作成ツールでUI/UXデザインを高速化
世界をリードするクリエイティブテクノロジーから誕生したAdobe XDは、アプリ向けのUI/UXデザインとプロトタイプ作成をおこなう強力なツールです。ワイヤーフレームやモックアップから、静的なUIデザイン、インタラクティブなプロトタイプへとすみやかに移行でき、ユーザーエクスペリエンスの向上につながります。XDを使用すれば、デザインプロセス全体がひとつのツールだけで完了します。アートボード間のワイヤーをつなげると、タップ、ドラッグ、音声コマンド、キーボードショートカットといった、あらゆるタイプのユーザー入力に対してユーザーフローやトランシジョン、アニメーション、マイクロインタラクションなどをワンクリックで作成、追加できるため、デザインプロセスが効率化されます。既存のデザインシステムのUI要素を使用してプロトタイプを作成することもできます。
アイデアをもとにインタラクティブなプロトタイプを作成し、開発プロセスを短縮
XDをプロトタイプ作成ツールとして使用すると、ユーザビリティとユーザーフローを検証できます。また、高忠実度のデザインにモーションとアニメーションを追加したり、本物に近い操作性を確認したりできます。すべて、コードを記述する必要はありません。
静的なデザインとワイヤーフレームをインタラクティブなプロトタイプに変換
XDのプロトタイプ作成ツールでは、ワイヤーフレーム、モックアップ、UIデザインを、インタラクティブなユーザーエクスペリエンスにリアルタイムで変換できるため、ユーザーフローのシミュレーションやフィードバックの確認、開発サイクルの迅速化が可能になります。作業をおこなっているのがモックアップでも高忠実度のデザインでも、機能性は変わりません。アートボード間のワイヤーをドラッグしてマイクロインタラクションを追加し、ユーザーのアクションによってエクスペリエンスがどのように変化するかをシミュレーションできます。トランシジョンやオーバーレイを設定すると、ユーザーの操作に応じた滑らかなアニメーションが作成できます。
様々なタイプのユーザーエクスペリエンスに対応した、高忠実度のインタラクティブプロトタイプを作成
XDは、webサイト、モバイルアプリ、音声UI、ゲームといった、あらゆるタイプのエクスペリエンスを対象に、モックアップ、ワイヤーフレーム、UIデザインなどのプロトタイプ作成ツールとして使用できます。XDでは、ユーザー入力にもとづく各インタラクションに対してトリガーを設定できます。タップ、ドラッグ、音声コマンド、キーボードショートカット、ゲームコントローラー入力などのトリガーに対応します。また、オンボーディングフローや読み込み画面など、一定の時間を利用したトランシジョンをトリガーすることもできます。
モーション、マイクロインタラクション、アニメーションを追加
基本的なトランシジョンやオーバーレイだけでなく、イマーシブアニメーションを追加したプロトタイプも簡単に作成できます。自動アニメーション機能では、オブジェクトのアートボード間の移動に応じて、マイクロインタラクション、ドラッグ効果、スムーズなトランジションなどの作成などが可能になります。この機能は、洗練されたメニュー、ナビゲーション、トグルボタンのプロトタイプ、スクロールとスライドのインタラクション、魅力的なモーショングラフィックなどを作成するのに便利です。パララックススクロール効果を使用した演出にも適しています。
プレビュー、録画、公開、共有
XDでは、クリック可能でインタラクティブなプレビューを再生できます。コンパニオンアプリを搭載したiOSおよびGoogle Android、またはAmazon Alexa対応デバイスを使用したプロトタイプで有効な機能で、本物に近い体験をシミュレーションできます。プロトタイプを録画すれば、ステークホルダーやクライアントとも共有できます。XDでは共同作業がおこなえるため、プロトタイプをwebに公開し、フィードバックを得てデザインに反映させるまでのプロセスが迅速化されます。デザインが完成したら、CSSでデザインスペックを作成し、ダウンロード可能なアセットをデベロッパーにハンドオフします。
UIデザインをインタラクティブなプロトタイプに変えるプロトタイプ作成ツール
XDのプロトタイプ作成ツールでは、様々な機能を提供しており、新しい機能や強化点も毎月追加されます。
インタラクション
複数のアートボード間をつないで、webサイトやモバイルアプリなどのエクスペリエンスのユーザーフローや印象を伝えることができます。様々なトリガーとアクションを使い、意図したとおりにユーザーエクスペリエンスを定義して共有しましょう。
トリガー
XDは、モバイルやタブレットデバイスでよく使うタッチジェスチャーをはじめ、キーボード入力、時限式トランジション、音声コマンド、ゲームコントローラー入力などに対応。webサイト、モバイルアプリ、デスクトップアプリ、音声インターフェイス、ゲームといった、あらゆるエクスペリエンスのプロトタイプをリアルに作成できます。
自動アニメーション
アートボード間のアニメーションを作成できます。要素を複製してプロパティ（サイズ、位置、カラーなど）を変更すると、前後の変化が自動的に補間され、アニメーションが生成されます。
プレビュー
デスクトップ、iOSおよびAndroidのコンパニオンアプリを搭載したモバイルデバイス、またはAmazon Alexa対応デバイスでエクスペリエンスをプレビューして、本物に近い体験をシミュレーションできます。MP4ファイルを録画して共有することもできます。
After Effectsへの書き出し
デザインを書き出し、業界を代表するアニメーションツールであるAdobe After Effectsを使用して、アニメーションをさらに追加することができます。
レビュー用に共有
共有可能なリンクを生成してデザインに対するフィードバックを取得したり、それらのリンクをBehanceやwebページに埋め込んだりすることができます。レビューアーはwebまたはモバイルデバイスから、プロトタイプやデザインの特定の部分にコメントを直接書き込むことができます。
MacまたはWindowsに対応する
プロトタイプ作成ツール
好みのプラットフォームでプロタイプを作成できます。XDでは、MacとWindowsの両方に対応するネイティブアプリケーションを提供しています。デザインファイルはいずれのアプリケーションでも完全な互換性があります。