この記事は、2017年に初めて実務でAdobe XDと一緒にプロトタイピングでの制作にチャレンジしてみた備忘録です。
Adobe XDとは？
Webサイトやモバイルアプリのデザイン、プロトタイプ作成、共有までを1つのアプリで簡単にできるデザインツールです。
（※公式より引用）
導入した背景
- 新規事業（スタートアップ）
- さくっと作ってさくっとリリースしたい
- スマホファースト
- Webサイトのデザインにはリッチさを求めない
- でもUIは重視するよ
既存のプロジェクトではPhotoshopでリッチなデザインをすることが多かったのですが、
今回は、Photoshopでないと作れないリッチな画像はメインビジュアルくらい。
更に速さとUI重視…
↓
これは、XDを使うチャンスでは！？
実際に使ってみた
前提：ざっくりとしたサイト構成図をディレクターさんに用意してもらっている
※スマホサイトの場合です。
構成図からのプロトタイプと実機確認
まず、構成図を元にXDでモノクロでプロトタイプを作ります。
XDのプロトタイプ機能を使いリンクの設定をします。
画面右上のアイコンをクリックし、「プロトタイプを公開」をクリック
「新規リンク」をクリックすると
ほんの少し待って
また元の画面に戻りますが、シェアされた状態になります。
「リンクを開く…」をクリックすると、ブラウザが起動します。
PCのGoogle Chrome上での状態です。
既にスマホっぽい画面で見ることができますが、
スマホ実機では上下左右の余白も省略され、より実装後に近い状態で見ることが出来ます。
※Chromeの開発者ツールのiPhoneモードで見た場合
このURLをプロダクトメンバー全体に共有し、
要素や画面遷移がこの段階で問題ないかを スマホ実機で確認 してもらいます。
★感じたメリット
- プロトタイプの段階で実機で画面遷移まで確認が可能に
- 不足要素や未考慮の遷移の洗い出しが早期発見できた
プロトタイプからデザイン
シンプルなデザインの場合、プロトタイプに色をのせるだけで出来てしまいます。
※プロトタイプとデザインをほぼ同時で可能な場合は、合わせて行う場合もあります。
★感じたメリット
- とにかく軽い、ストレスフリー
- 機能が少ないのが逆に必要最小限で良い
- 使いたい機能が目の前にあるのが便利
- シンプル、フラットなデザインほど時間の圧縮が大きい
デザインからの確認
デザインが出来たら、再度シェア（共有）します。
プロトタイプと同一のURLがいい場合は「リンクを更新」、
別にしたい場合は「新規リンク」を選択します。
リンクを更新、もしくは新規発行したら、メールやチャットで連絡し、
メンバーにはスマホ実機からデザイン確認してもらいます。
★POINT!
- 初めてXDのプロトタイプを見る人は「もうコーディングまで完了してる！」と勘違いしてしまうことも…
- 電話や口頭で「これはまだデザイン（画像）ですよ！」と念入りに教えてあげましょう
- ついでにXDというツール、プロトタイプの良さを布教してしまいましょう：）
★感じたメリット
- 画像を何枚もZIPにまとめて送ったり（でもメールの容量に引っかかる！とか）、
画像を何枚もチケット（弊社はRedmineを利用しています）に添付したりしていたのが、URLで１つに！
☆社内で多かった質問
- 公開したプロトタイプはどこに行くの？
- Adobeマイアセットに格納されています（要：Adobeログイン）
- https://assets2.adobe.com/assets/prototypes
- パスワードは掛けられるの？
- 2017年12月時点では掛けられないそうです（今後に期待）
- 心配な時はシェアをせず、画像で書き出してあげましょう
確認からの修正
★感じたメリット
- ディスカッション中に発生した修正も、その場で直して即シェア、即実機確認！のスピード修正が可能に
デザインFIXからのマークアップ
これは必須ではありませんが、やっておくといい感じなフローです。
デザインがFIXしたら、レイヤーを整理します。
この段階で、CSSの命名ルールが決まっていたら、それをそのまま適用してしまいます。
デザイン、マークアップが同じ言葉で紐づくことで、公開後の改善時の修正も楽になるといい、かな！
みたいな目論見をしています。
まとめ
XDを使ってよかったこと
- 必要最小限な機能のみで、とにかく軽く、制作ストレスの軽減ができる
- シンプル・フラットなデザイン程、時短ができる
- プロトタイプで画面遷移も実機確認できるため、不足要素や未考慮の遷移の早期発見ができる
- シェアURLにより、メンバー間の共有が容易になり、MTG時のライブ感のある修正・実機確認なども実現できる
感想：Adobe XDでサクッと制作〜リリースのスピード感、楽しい！