Adobe(アドビ)製品の選び方や価格のご相談など、分かりやすくお答えします。

大塚商会 インサイドビジネスセンター

0120-434-466(平日 9:00~17:30)

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

コンテンツプロトタイプの作成が直感的に、簡単に、効率的に!

UX(ユーザーエクスペリエンス)がどんどん重要視されるようになりました。「Adobe XD」というプロトタイプ作成用アプリケーションのさまざまな使い方、ポイントを解説します。

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

この動画は音声が含まれます。再生時は音量がオフになっています。再生中に動画プレーヤーの音量を調節してください。[動画再生時間:55分49秒]

この動画の内容をテキストでご紹介

高まるユーザーニーズとデザインの重要性

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

「Adobe XD」とは

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

XDの画面構成:「デザインビュー」「プロトタイプビュー」

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

XDの基本操作1:直感的に描画作成

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

XDの基本操作2:ドラッグ&ドロップで描画内に画像配置

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

XDの基本操作3:地図にあるようなアイコンの作成

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

「リピートグリッド」はXD最大の魅力

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

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

ファイル名の一括変換ができる「Adobe Bridge」

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

画面遷移イメージを「プロトタイプビュー」で作成

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

動作確認:デスクトッププレビュー

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

動作確認:デバイスプレビュー

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

一緒に使うと作業効率が約10倍!「Adobe Stock」

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

Adobe(アドビ)製品 導入事例をご紹介

ナビゲーションメニュー