LOGzeudon

名古屋で働いているWebデザイナーのブログです

デザイン・プロトタイプ制作だけじゃない Adobe XD の魅力について

デザインツールという枠に収まらない Adobe XD の利点について

2017年10月19日にリリース版になった XD。その魅力について前の記事では “他のデザインツールを併用しつつ、圧倒的に軽快なXDが中心的な役割を担うことで、従来より円滑に制作を進められる” ことだと表現した。

今回は最近模索していることや興味のある手法をいくつか紹介する。

ちなみに私はデザイナーで、主に中小企業コーポレート・ECサイトの受託制作や更新案件に関わっている。XD上でのデザインが必要なページ数は20程度のことが多く、書き出しが必要な画像類は別途 .psd にまとめている。

1. 案件の情報をとにかく集約

プロトタイプ機能は、プロトタイプ以外の目的でも便利だ。

例えばデザインカンプの共有時にダッシュボード的な画面を挟むことで、確認専用のWebサイトを見ているかのような体験にできる。

当ブログをサンプルにした共有URLを発行した。(PCで見てください)

xd.adobe.com

制作中ページの進捗シート

f:id:rokuzeudon:20171220012246p:plain

ページをリストアップしてあり、クリックするとそのページの状況を確認できる。さらにクリックすると元の一覧ページに戻るようにしており、キーボードの左右キーで前後移動もできる。

f:id:rokuzeudon:20171220012312p:plain

ついでに、favicon や OGP 、NoImage画像 など忘れがちな要素もまとめている。

デザインの進捗がパッとわかるし、デザイン忘れなど初歩的なミスも減る。
何より、チームメンバーやお客様との状況共有がスムーズになって楽。

スタイルガイド

f:id:rokuzeudon:20171220022328p:plain

カラーコードやボタン、hover時の挙動といったコンポーネントのまとめをできるだけ先に作成する。
もしコーディング時に各ページのデザインで値にズレがあれば、大概ミスなのでガイドの情報を優先してもらう。

アセット機能がより便利になればそもそも不要になるかもしれないが、現状は併用している。
あと、11月にリリースされたデザインスペック(ベータ版)も役立ちそうだが、私はまだ活用できていない。

バージョン管理(擬似)

週1程度でミーティングを設け、都度デザインをアップデート(改善)していくタイプの案件では、都度ファイルを複製して変更前の状態を残すようにしていた。

XDは圧倒的に軽いので、前の状態のデザイン(アートボード)を複製し、データ内にまるごと残しておける。それがどの時点のデータなのかメモも残せるし、ダッシュボード画面と組み合わせても良い。

このような使い方は、Adobe MAXに参加した時に LIFULL 田中さんの発表で拝聴した。他の活用事例の話も参考になったので非常にオススメです。
※アクセスするとすぐ映像が再生されます

www.adobe.com

スターターキット化

よく使うコンポーネント、アイコンなどを、ペーストボード(アートボード外)にまとめている。そしてアートボードには社内のコーディングルールと揃えたグリッドを引いておく。

秘伝のタレのごとく要素を追加していくと、 .psd だとどんどん重くなってしまうところ、XDだとほとんど影響がないのが非常に良い。

その他

  • 大まかなスケジュールや互いの宿題の状況
  • コンセプト、ターゲットなどプロジェクトの概要
  • ビジュアルデザインの方向性(ムードボードなど)
  • ロゴや素材のガイドライン

こうした資料はこれまで散らばりがちで、探すのも面倒だった。これからはできるだけ XD (あるいは asana )にまとめ、デザインプロセスのオープン化・効率化を進めていきたい。

尚、それにあたって次の機能があると嬉しい。公式のユーザー投票サイトなので、是非皆さんもVOTEしてください。

2. 全く別の用途に使う

公式サイトでは“Webサイトモバイルアプリのデザイン、プロトタイプ作成、共有までを1つのアプリで実現する全く新しいUI/UXデザインツール”と表現されている。だが、この言葉に囚われる必要はない。

デザインシンキング

そのような考えに至ったのは、こちらの記事がきっかけ。

projectdd.jp

Webサイトやモバイルアプリのデザインなんて全くやっていなくてマジでびっくりした。しかしXDの機能をフルに活用されていてすごい。

XDはもっと自由なんだと気付かされた。

自分専用のノートとして

それをきっかけに、一時期、読み返したい記事やじっくり実践したい記事などの管理を試みた。

f:id:rokuzeudon:20171220012923p:plain

外部リンク設定ができないのが致命的すぎたが、軽快に分類やメモができること自体は良い感じだった。ちなみに今は Millanote に落ち着いている。

ここまでしなくても、例えば目標や家族の写真などをいつでも見れるようにする程度なら現実的。共有URLを発行し、ショートカットアイコンをスマホ上に置くと良い。

XDなら、見た目に好きなだけこだわることができる。オリジナルアプリっぽいものを簡単につくれるのだ。
(あ、でもアイコン機能は廃止されてしまったか…)

その他

など、工夫次第でいろいろ使えそう。

まとめ

プロトタイプを活かした制作フロー改善のイメージが強いXDだが、ポテンシャルはかなり広いと感じている。特に速さと軽さは正義。

まだまだ、デザインの運用とか実装との連携などの面でより良くなってほしいところがあるが、もっとおもしろい活用方法もあるだろう。気楽に使おう、XD。


この記事は Adobe XD Advent Calendar 2017 19日目の記事です