もう試した?無料で使えるUIデザインツールAdobe XDにアドビの本気度を見た!

2016/08/16

Daniel Schwarz

37

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

モバイルアプリのUIデザインといえばSketchを使っているデザイナーが多いようですが、アドビがこの春リリースした「Adobe XD」もすごい勢いで追いつこうとしています。特に効率化のための機能は必見です。

アドビがようやくユーザーインターフェイス専用のデザインツール(Adobe Experience Design:Adobe XD)を作り、Sketchに対抗すると決めたものの、多くのデザイナーは両者が同じ土俵に上がって競い合うまでにどれくらいかかるか、疑問に感じています。

それには、ドラッグ&ドロップで画像やテキストを配置する、Adobe XDのアセットインポート機能を自身の目で見て確かめるのがよいでしょう。Adobe XDは現時点ではMacにのみ対応していますが、近いうちにWindowsでも利用可能になります。

以下がアセットインポートの典型的な方法です。

  • 「Save As」→「File」 →「 Import」 または
  • 「Ctrl / Command」+「C」 →「 Ctrl / Command」+「V」

記憶にある限りでは、「ドラッグ&ドロップ」でアセットを取り込む機能は、どのデザインアプリケーションにも機能として備わっています。しかし、再利用可能なコンポーネントとして「ドラッグ&ドロップ」を自動化する方法はなく、同じようなコンポーネントそれぞれに、ユニークなコンテンツを変更する必要があります。

リピートグリッドで記事 カードのグリッドをデザインする

Adobe XDを起動し、スプラッシュスクリーンから新規Webドキュメントを開きます。白いキャンバスであればどのサイズでも構いません。「R」を押して、長方形を描きます。面積が400×300pxになるようにしてください。

そして、別の長方形を作り(400×100px)、その縁を削除し、「Fill(塗り色)」を不透明度80%の黒(#000000)に設定して塗ります。次に「Color Sliders」を「RGB Sliders」にします。

Building a base for the card

黒で塗った400×100pxの長方形に、記事カテゴリー、見出し、日付けからなる一連のテキストレイヤーを作り、記事カードをデザインします。「T」を押して「Text(テキスト)」ツールを選び、以下のオプションスタイルを使います:

  • Fill(塗り色):#F39C12
  • Text(テキスト):Helvetica Neue、15、Bold
  • Height(高さ):18 (行間隔と同じ)

Creating text layers

さらに以下のように続けます。

  • Text(テキスト):Helvetica Neue、21、Condensed Bold
  • Fill(塗り色):#FFFFFF
  • Height(高さ):26

最後に、次のようにします。

  • Text(テキスト):Helvetica Neue、14、Regular
  • Fill(塗り色):#FFFFFF
  • Height(高さ):16
  • Align(配置):Right(右)

Styling text layers

リピートグリッドツールでコンポーネントを再利用する

マウスカーソルをドラッグして同時にすべてのレイヤーを選び、サイドバーから「Repeat Grid(リピートグリッド)」を選びます。そうするとコンポーネントに引っ張れるサイドハンドルが表示されます。必要に応じて何度でもコンポーネントのサイドハンドルを引いてタイル表示にできます。1つのタイルになにかしら変更を加えると、すべてのタイルに影響が表れます(内容でなく、スタイルをそろえる点においては便利です)。

Defining a Repeat Grid

Tip:グリッドのコラムまたは中間の列にあるスペースをドラッグすることで簡単にガターの幅を調整できます。

Adjusting the gutter width

ドラッグ&ドロップで一連の画像を置き換える

ここから「魔法」がかかったかのようになります。始める前に、Red Calla MinimalismCalla Fashion MinimalBlue Roses on a Crimson BackgroundRed Tulip Bouquetがスクリーンショット内で使用しているEvgeniya Porechenskayaの4つの画像をコンピューターに保存してください(サンプルでも可能です)。

画像の1つを長方形の1つにドラッグすると、画像が自動的に切り取られて配置されます。そして4つすべての画像を選ぶと、画像1つ1つがそれぞれのタイルに配置されます。まさに、画像アセットをAdobe XDにインポートするときの時間を短縮できるわけです。いままでのところ、SketchまたはPhotoshopに比べると、Adobe XDのアセットインポートが一番早い方法になります。

なぜ、一番早い?

  1. 画像を合わせるためにマスク、切り取り、サイズの変更をする必要がない
  2. ステップを何度も繰り返す必要がない
  3. (Sketchで)オーバーライドを使う必要がない

Automating image imports

テキストファイルを使ってテキストレイヤーを追加する

テキストでも同じようなことができます。たとえばlorem ipsumのタイトルのそれぞれのインスタンスを、ユニークなタイトルに置き換えたいとします。テキスト編集ソフトを開き(またはシンプルなテキストファイルが作れるアプリ)、新しい行にそれぞれタイトルを書き、画像と同様にファイルをレイヤーにドラッグします。

Adobe XDは自動的にそれぞれの新しい行を抽出し、反復レイヤーのそれぞれのインスタンスに対し分配します。

Dragging files into the canvas

注意:テキスト編集はデフォルトでリッチテキストフォーマットになっていますが、「File」 →「 Preferences」で「プレーンテキスト」を選択すると変更できます。

最後に

画像を選んだり、テキストを決めたりするのが、Adobe XDによって必ずしもデザイナーではなくてもよくなります。誰でもテキストファイルや画像のアセットフォルダーを作れるようになるのです。デザイナーは作られた要素を直接デザインファイルにドラッグすれば、そのまま使えるのです。このとてもエネルギッシュなワークフローは、簡単で膨大な時間の短縮になります。

Adobe XDはまだプレビュー版のため、いまなら無料で試せます。

(原文:Adobe XD Tutorial: A Pain-free Way to Import Assets

[翻訳:Nayu Kinjo]
[編集:Livit

Copyright © 2016, Daniel Schwarz All Rights Reserved.

Daniel Schwarz

Daniel Schwarz

フルタイムのデザインライター、デジタルノマドです。デザインやコードに関する執筆以外には、自身が立ち上げたクリエイティブスタジオ「Airwalk Studios」で作業することもあります。ロンドン出身の24歳。

Loading...