新たなUXデザインツール「Adobe XD」登場！

仮想現実やマルチプラットフォーム利用前提のコンテンツが構築されるようになり、ユーザーニーズはどんどん高まっています。企業にとって「情報のパーソナライズ」や「デザイン」についての価値がどんどん見直されています。このような分野にいかに投資するか、それがビジネス成功と同意義になりつつあります。

「Adobe XD」の正式名称は「Adobe Experience Design CC」です。このアプリケーションは、プロトタイプを作る製品です。これまで、静止画を何枚も作って行ってきた、そしてデバイスにより別々に行ってきたプロトタイプの説明を効率化します。「UI（ユーザーインターフェイス）のデザイン」「仮想環境で動作確認」「作成したプロトタイプの共有」の3ステップを一つのアプリケーションで実現します。

デバイスや機種により画角の違うコンテンツのプロトタイプをサクサクと作ることができます。XDは「デザインビュー」「プロトタイプビュー」、二つのビューが用意されています。「デザインビュー」でコンテンツやモックアップを作り、最終的には画面遷移のシミュレーションは、「プロトタイプビュー」の方で行っていきます。

描画が直感的に作成できます。例えば、Illustrator CCの「ライブコーナー」がXDにも搭載され、角丸のオブジェクトは、長方形ツールから作成し、四つの角のうち一カ所だけ角丸にする、角丸半径を調整することも簡単です。「塗り」や「線」がPhotoshopやIllustratorと操作できるのも特長です。

画像配置は、モックアップの中では重要です。トリミングや配置するのかによって、印象が変わります。配置したい画像を選択し、ドラッグ＆ドロップで描画に放り込めば自動でトリミングもされて、画像配置が完了します。こちらも直感的に操作できます。

円を二つ作成し、オプションパネルから位置を整列させます。角の作成は、オブジェクトを伸ばして対応します。オブジェクトをダブルクリックするとアンカーポイントが表示されるので、そこをドラッグするだけで尖（とが）った部分が作成できます。非常に簡単にオブジェクトを作成できます。

同じ役割のオブジェクトを複数一気に作成することができます。オブジェクトを選択し、画面右側の「リピートグリッド」ボタンをします。小さなボックスが出てくるのでそれを下に引っ張ると、バラバラと元のオブジェクトがコピーされて、等間隔にオブジェクトが並んでいきます。

例えば、4行の情報が書かれたテキストファイルを準備し、テキストフレームにドラッグ＆ドロップして放り込むと、書いた情報が上から順番にオブジェクトに入り、テキスト情報が自動反映されます。リピートグリッドは、元のものに追従する形で他（ほか）のものにも自動反映します。画像も同様で、連番のファイル名の場合、上から下、または左から右の順で挿入します。

ファイル名を一括変換したい、クライアントに画像一式を送りたい場合は、「Adobe Bridge」で効率化が図れます。ツールメニューから「ファイルをバッチで変更」を選ぶと、ファイルを移動やコピーしながら、ファイル名の変更ができます。テキストを直接入力や、連番設定も可能です。

ある程度デザインができたら、クライアントに見せるために、画面遷移のイメージ作成を「プロトタイプビュー」で行います。クリックしたらどこへ遷移するのかをドラッグ＆ドロップで設定します。イメージは線で結ばれ表示されます。画面遷移にかかる時間などを細かくカスタマイズすることができます。

デスクトッププレビューで、画面の流れをそのままシミュレーションできます。実際にシミュレーションしてみると、リンクの設定漏れが確認できたり、見やすさを確認できたりします。右上の赤いボタンをクリックすると、シミュレーションを録画でき、movファイルとして保存できます。

デスクトップと他（ほか）のデバイス、両方でのプレビューが可能です。例えば、iPhoneに「Adobe XDアプリ」をインストールします。デスクトップのXD内で操作するものが、iPhoneの「XDアプリ」でシミュレーションできます。クライアントに提案するプロトタイプとしても使えるし、クライアントと打ち合わせをしながらすぐに実機確認することも可能です。

2015年6月から、ロイヤリティフリーの画像を提供するサービスとして「Adobe Stock」を開始しました。XDと一緒に使うと、従来の画像検索から配置までの作業が、約10倍の作業効率があるというアンケート結果が出ました。2016年11月のアップデートから素材点数や取り扱いコンテンツなど、大きく様変わりしました。