無料ワイヤーフレームツールでUIとUXのデザインを高速化

世界をリードするクリエイティブテクノロジーから誕生したAdobe XDは、UI/UXデザイナー向けの強力な無料ワイヤーフレームツールです。XDでは、モックアップとワイヤーフレームをすばやく作成できるほか、UI要素の作成や、ユーザーフローチャート、ナビゲーションの構造、情報アーキテクチャの定義もすべてひとつのデザインツールでおこなえます。準備ができたら、クリック可能でインタラクティブなワイヤーフレームへのリンクをチーム全員と共有すれば、デザインプロセスの初期段階から共通認識を得ることができます。ワイヤーフレームツールとしてXDを使用すると、webサイト、webアプリケーション、モバイルアプリ、デスクトップアプリ、スマートウォッチアプリなどの様々な環境向けに、低忠実度のモックアップや高忠実度のユーザーインターフェイスデザインとワイヤーフレームを作成できます。

無料ワイヤーフレームツールでUIとUXのデザインを高速化

デザインのアイデアをワイヤーフレームにして、チーム全員と共有

XDなら、webサイト、モバイルアプリ、タブレットアプリ、スマートウォッチアプリなど、あらゆるエクスペリエンスのワイヤーフレームを作成できます。直感的なデザインツールをはじめ、ネイティブのプロトタイプ作成ツール、UIキットやアイコンライブラリといった無料のリソースを使用すれば、アイデアをすばやく視覚化して、外部のチームと共有できます。そのため、デザインプロセスの初期段階から、構造とコンテンツに関して共通認識を得ることができます。

ワイヤーフレームツールでデザインのアイデアを視覚化
ワイヤーフレームツールでデザインのアイデアを視覚化
 

簡単なスケッチやアイデアから、低忠実度のワイヤーフレーム、高忠実度のデザインを完成させるまでのプロセスを短縮化します。XDでは、共通の画面サイズとデバイス向けのテンプレートやUI要素を提供しているので、グリッド、ガイド、ベクター描画ツール、テキストツールといった機能を使用して、レイアウトとUIデザインのモックアップをすばやく作成できます。カンバスで数百のアートボードを開いていても、ズームイン/アウトに瞬時に反応します。

プロトタイプ作成ツールでユーザーフローとインタラクティブワイヤーフレームを作成
プロトタイプ作成ツールでユーザーフローとインタラクティブワイヤーフレームを作成
 

ワイヤーをドラッグしてクリック可能なフローチャートとインタラクティブプロトタイプを作成し、ユーザー操作性を検証できます。UIデザインツールとプロトタイプ作成ツールの両方の機能を併せ持つXDなら、静的なワイヤーフレームをインタラクティブなワイヤーフレームとユーザーフローに変換できます。また、タップやドラッグといった一般的なタッチジェスチャーをはじめ、キーボード、ゲームコントローラー、ボイスコマンドなど、様々なタイプのユーザー入力に対応しています。

共同作業機能でデザインプロセスを短縮
共同作業機能でデザインプロセスを短縮
 

XD内の簡単な操作で、ワイヤーフレームを別のデザイナーやプロダクトマネージャー、デベロッパー、クライアント、その他のステークホルダーと共有できます。ワイヤーフレームの作成は、他のデザイナーとリアルタイムでおこなえます。XDでワイヤーフレームを作成することで、ユーザーインターフェイスのコアの構造やコンセプトに注力できるため、このプロセスの期間を短縮できます。デザインへのリンクを作成、またはPDFやPNGを書き出したら、メールやSlackなどで共有します。

プレビュー、書き出し、ハンドオフの機能
プレビュー、書き出し、ハンドオフの機能
 

XDでは、デスクトップとモバイル環境の実際のデバイスでプロトタイプをプレビューできます。プレビューの録画、PDFまたはPNG形式でのデザインの書き出し、デベロッパーにデザインスペックをハンドオフ、といった作業が可能になるため、プロトタイプのコードを利用して早い段階でテストすることができます。

インタラクティブワイヤーフレームをすばやく作成できる機能

XDのワイヤーフレームツールでは、様々な機能を提供しており、習得までの時間が短く済むのが特長です。また、新しい機能や強化点が毎月追加されます。

ベクター描画ツール
 

描画とシェイプツール、形状モード、ベクター編集機能に特化し、ワイヤーフレーム、アイコン、その他のビジュアル要素のモックアップの作成に最適な環境で作業できます。

高精度なデザインツール
 

ワイヤーフレームとUIデザインのレイアウトと位置揃えには、アートボードガイド、レイアウトグリッド、位置の微調整やサイズ変更のショートカット、相対測定機能を活用しましょう。

リピートグリッド
 

モックアップのUI要素をひとつ選択し、一瞬でその複製を必要なだけ作成することができます。ひとつの要素を編集すればグリッド全体に変更が反映されます。要素間のパディングを調整したり、.txtファイルを使用してグリッドにデータを読み込むこともできます。

プロトタイプ作成
 

XDのプロトタイプ作成ツールを使用して、モックアップをクリック可能なインタラクティブワイヤーフレームに変換します。複数のアートボード間をつないで、ユーザーエクスペリエンスのフローや印象を伝えることができます。様々なトリガーとアクションを使い、意図したとおりにユーザーエクスペリエンスを定義して共有しましょう。XDではあらゆるエクスペリエンスのプロトタイプをリアルに作成できます。

レスポンシブサイズ変更
 

グループ化されたオブジェクトやコンポーネントのレスポンシブなサイズ変更が自動でおこなえるため、異なる画面サイズ対応の作業が効率化できます。webやiOSといった、異なる画面サイズやプラットフォームに対応したワイヤーフレームとモックアップを作成できます。 

コンポーネント
 

UI要素を作成すれば、ワイヤーフレーム、モックアップ、UIデザインに再利用できます。マスターコンポーネントを変更すると、すべてのインスタンスに反映されて、コンポーネントの個々のインスタンスのプロパティが上書きされます。

プラグイン
 

数百種類ものアドオンとアドオンを使って、デザインのルーチンタスクを自動化したり、外部ソースからアセットやリソースを読み込んだりできます。Slack、Jira、Justinmindといったツールとの連携に便利なプラグインも提供しています。

    
MacとWindows両方に対応するデザイン、プロトタイプ、ワイヤーフレームの作成ツール

MacとWindows両方に対応するデザイン、プロトタイプ、ワイヤーフレームの作成ツール

オペレーティングシステムを問わず、共同作業ができます。使いやすいプラットフォームで作業し、別のシステムを使っているチームのメンバーとワークフローを共有しましょう。XDはどちらのプラットフォームでもスムーズに動作し、ファイルは完全に互換性があります。

最適なプランをお選びください

無料のXDスタータープランを試すか、Creative Cloud有料プランで無制限の共有と共同作業をご利用ください。