この記事は Adobe XD Advent Calendar 2017 19日目の記事です。2017年10月19日にリリース版になった XD。その魅力について前の記事では “他のデザインツールを併用しつつ、圧倒的に軽快なXDが中心的な役割を担うことで、従来より円滑に制作を進められる” ことだと表現した。今回は最近模索していることや興味のある手法について紹介する。ちなみに私はデザイナーで、主に中小企業コーポレート・ECサイトの受託制作や更新案件に関わっている。XD上でのデザインが必要なページ数は20程度のことが多く、書き出しが必要な画像類は別途 .psd にまとめている。1. 案件の情報をとにかく集約プロトタイプ機能は、プロトタイプ以外の目的でも活躍する。例えばデザインカンプの共有時にダッシュボード的な画面を挟むことで、確認専用のWebサイトを見ているかのような体験にできる。当ブログをサンプルにした共有URLを発行した。(PCで見てください)XD_sample制作中ページの進捗シート制作中のページをリスト化し、掲載しておく。完了したものは更新マークをつけ、必要に応じてメモも残す。ページ名の箇所は、対応するアートボードへのリンクも張っていて、すぐに確認できる。また、favicon や OGP 、NoImage画像 など忘れがちな要素もまとめておく。管理が手間だが、チームメンバーやお客様がデザインの進捗が視覚的にわかるし、デザイン忘れなど初歩的なミスも減る。スタイルガイドカラーコードやボタン、hover時の挙動といったコンポーネントのまとめをできるだけ早い段階で作成し、それをまとめておく。コーディングしてもらう際、各ページのデザインで値にズレや迷うことがあれば、大概ミスなのでガイドの情報を優先してもらう。この辺りは、アセット機能が便利になれば不要になるかもしれない。11月にリリースされたデザインスペック(ベータ版)も役立ちそうだが、私はまだ活用できていない。バージョン管理(擬似)週1程度でミーティングを設け、都度デザインをアップデート(改善)していくタイプの案件では、都度ファイルを複製して変更前の状態を残すようにしていた。XDは圧倒的に軽いので、前の状態のデザイン(アートボード)を複製し、データ内にまるごと残しておける。それがどの時点のデータなのかメモも残せるし、ダッシュボード画面と組み合わせても良い。このような使い方は、Adobe MAXに参加した時に LIFULL 田中さんの発表で拝聴した。他の活用事例の話も参考になったので非常にオススメです。Adobe MAX Japan 2017 ビデオアーカイブスターターキット化よく使うコンポーネント、アイコンなどを、ペーストボード(アートボード外)にまとめている。そしてアートボードには社内のコーディングルールと揃えたグリッドを引いておく。秘伝のタレのごとく要素を追加していくと、 .psd だとどんどん重くなってしまうところ、XDだとほとんど影響がないのが非常に良い。その他大まかなスケジュールや互いの宿題の状況コンセプト、ターゲットなどプロジェクトの概要ビジュアルデザインの方向性(ムードボードなど)ロゴや素材のガイドラインこうした資料はこれまで散らばりがちで、探すのも面倒だった。これからはできるだけ XD (あるいは asana )にまとめ、デザインプロセスのオープン化・効率化を進めていきたい。尚、それにあたって次の機能があると嬉しい。公式のユーザー投票サイトなので、是非皆さんもVOTEしてください。Password on shared prototypes – Adobe XD Feedback : Feature Requests & BugsLink to external URLs – Adobe XD Feedback : Feature Requests & Bugs2. 全く別の用途に使う公式サイトでは“Webサイトやモバイルアプリのデザイン、プロトタイプ作成、共有までを1つのアプリで実現する全く新しいUI/UXデザインツール”と表現されている。だが、この言葉に囚われる必要はないのではないか。デザインシンキングそのような考えに至ったのは、こちらの記事がきっかけ。デザインシンキングで使う Adobe XD - ProjectDDWebサイトやモバイルアプリのデザインなんて全くやっていなくてマジでびっくりした。しかしXDの機能をフルに活用されていてすごい。XDはもっと自由なんだと気付かされた。自分専用のノートとしてそれをきっかけに、一時期、読み返したい記事やじっくり実践したい記事などの管理を試みた。外部リンク設定ができないのが致命的すぎたが、軽快に分類やメモができること自体は良い感じだった。ちなみに今は Millanote に落ち着いている。ここまでしなくても、例えば目標や家族の写真などをいつでも見れるようにする程度なら現実的。共有URLを発行し、ショートカットアイコンをスマホ上に置くと良い。XDなら、見た目に好きなだけこだわることができる。オリジナルアプリっぽいものを簡単につくれるのだ。(あ、でもアイコン機能は廃止されてしまったか…)その他リーンキャンバスとかUXデザイン関連資料とかつくったりまとめたりプレゼンテーションツールとしてマインドマップ、マンダラートなど発想整理ツールとしてなど、工夫次第でいろいろ使えそう。まとめプロトタイプを活かした制作フロー改善のイメージが強いXDだが、ポテンシャルはかなり広いと感じている。特に速さと軽さは正義。まだまだ、デザインの運用とか実装との連携などの面でより良くなってほしいところがあるが、もっとおもしろい活用方法もあるだろう。気楽に使おう、XD。