アドビのUXデザインツール「Adobe Xd」を使ってみた
こんちわ、E-さんです。
今回は今年アドビからリリースされたAdobe Experience Design、通称「Adobe Xd」について。
Webサイトの制作において、避けては通れないワイヤーフレーム
ワイヤーフレームは、これからつくるものが必要要件を満たし、要素の抜けや漏れ、ユーザーの使い勝手など、構造上の問題がないかを検討するための基礎設計とも言える重要な画面設計図です。
このワーヤーフレームを制作する上で幾つか方法（使用アプリケーション）がありますが、今まではそれぞれ異なるアプリケーションを使用してワイヤーフレームを制作したりしていました。（時には手書きで！）
しかし、修正、再構築などの作業時にはやはりみんなで共通した専用のアプリケーションを使っていた方が効率的で無駄がありません。
制作、運用段階に入った時点で他の制作者に引き継ぐとなった場合でも共通のアプリケーションで作成されたワイヤーフレームを元に話をすれば認識のズレなくスムーズに作業を進行することができます。
現在、巷にはたくさんのワイヤーフレームを制作するのに便利なアプリケーションがあります。それらの中から「Adobe Xd」をデザイン作業はPhotoshop、アイコン等の複雑なものはIllustratorとアドビの製品を通常、メインに使っているという理由で選んでみました。
「Adobe Xd」のメリット
さすがワイヤーフレーム制作に特化したアプリケーションなので、優れた点が幾つかあります。
- とっても軽い！いくつものアートボードを同時に並べて作成でき、アートボードの数が増えてもサクサク動きます。重要ですね。
- いつもadobeの製品を使っているので共通したショートカットや操作性でとても直感的にワイヤーフレーム作成ができます。やる気が削がれませんね。
- シンプルなUIとあらかじめ用意された少なめなアイコン類。
- レイヤーの観念がないフラットな平面でのデザイン。
- ページの推移を簡単に表示できる。これ便利。
- 擬似htmlを共有することによりローカル環境に依存することなくワイヤーフレームを確認できる。
などがありますね。
一方、一部では「Adobe Xd」はデザインモードで使用できるツールがまだ少ない（グラデーションがかけられない、複雑な形状の図形は作れない、PsファイルやAiファイルとの互換性に課題が残る）などの意見もあります。が、ここはワイヤーフレーム、画面設計図とはどのようなものか、どのように使い、利用するか考え方によるものでしょう。
あまり詳細に、具体的にワイヤーフレームを作り込んでイメージをクライアントに提示してしまうと本デザイン制作時に、固定されてしまったイメージにデザイナーが縛り付けられてしまうことにもなりかねません。クライントサイド、制作サイド共にワイヤーフレーム制作段階で必要以上にイメージの先入観を持たせると結果的にプロジェクトにとってマイナスになると考えます。
しっかりしたサイトの骨組みを提示しつつ、全体のストーリーの流れを見せる。これでしょう。
実際に「Adobe Xd」を使ってみる
それでは「Adobe Xd」を実際に起動してワイーヤーフレームを作ってみましょう。
デザイン作成
最初に起動した画面ではアートボード（画面）の一覧が表示されます。
この画面は「デザインモード」です。やや簡素な印象ですが、レイアウトの制作や画像やテキストの挿入を行うことができます。
まずは表示された一覧の中から希望のアートボード（サイズ）を選びます。左上のテキストをクリックし、アートボード名を変更できます。
左のツールボックスからテキストツールを選択し、文字を入力します。色やサイズなどの装飾は右のパネルから。自動的にガイドラインも表示されるので、配置もとても楽。
それぞれツールボックスの中には上から移動、四角、丸、線、ペン、タイポ、そしてカンバス作成のツールが7個あります。四角形ツール、円ツール、線ツールなどを使って描画した後、線や塗り、テキストは右側のパネルの中で編集します。使い勝手はPhotoshopやIllustratorと同じですね。
また、作成したページと同じ構造を持つページの複製も超〜簡単。各パーツ、テキストが乗っかったアートボードのアートボード名をクリックし、alt キーを押しながらドラッグすると、アートボードを複製できます。
この直感的な操作性がアドビですね！
続いてリストを作ってみます。リスト作成には「Adobe Xd」の特徴的な便利機能「Repeat Grid」機能を使います。
まず、円や線、テキストツールを使って必要な要素を作ります。画像が必要な場合もあらかじめ描画したオブジェクト上に画像をドロップするだけで簡単につくれます。
さて、リストの基本になる要素が出来たところで繰り返したい要素を全て選択します。選択できたら右パネルの「Repeat Grid」ボタンをクリック。
すると、緑のラインが表示されるので、そのハンドルをつかんで下にドラッグすれば下に、横にドラッグすれば作成することができます。
また、繰り返し作成された要素の画像は一度に変更することもできます。適応させたい画像を複数選択し、画像の部分にドロップ！
各要素の位置の調整もとても簡単です。移動したい要素をつかんで移動すると、センターや中央位置などをガイドが現れて正確な位置を指示してくれます。
各要素間のスペースの大きさもそれぞれ表示してくれるのでレイアウトがとても楽！
プロトタイプ作成
次に「Adobe Xd」のもう一つの機能、プロトタイプを使ってみましょう。
プロトタイプは画面の推移を表現することができる便利な機能です。
まず、画面の上部にある「プロトタイプ」タグをクリックしてプロトタイプモードに入ります。デザインモードで制作したアートボード（ページ）のリンク元にする要素をクリックします。
要素が選択され、矢印のついた「ベロ」が飛び出します。その「ベロ」をつかんで希望するアートボードまで引っ張ってゆきつなぎこみます。この時、推移時のアニメーションや時間を設定することもできます。これだけ！
全ての要素とページをつなぎ合わせます。
最後に作成したワイヤーフレームを公開しましょう。
プレビューとシェア
プレビューするには画面右上の再生ボタン（▶︎）をクリックします。別窓でプレビュー表示ができます。
作成したものを公開するには画面右上の「Share Online」（上矢印）ボタンをクリックします。「リンクを作成」ボタンをクリックするとURLが生成されます。
作成されたURLをブラウザで開くとローカル環境に関係なく、制作したデザインが確認できます。
使用感のまとめ
やはり何と言ってもPhotoshop、Illustratorと共通の操作性です。新しいアプリケーションと全く感じることなく素早く楽にワイーヤーフレームを作成することができました。
上記の他にも「UIキット（ユーザーインターフェースアイコン）」やiPhoneやSurfaceなどのアートボードがあらかじめ用意されていてとても便利です！
まだ未体験の方は億劫がらずに是非一度この便利なツールを触ってみることをオススメします！
E-さん
最新記事 by E-さん (全て見る)
- WEBインフォグラフィックスの有効性 - 2017.01.16
- SVGの特徴とメリット・デメリット - 2016.12.24
- デザインの基本、ジャンプ率についての考察 - 2016.12.10
