Adobe XDに惚れた2017年。期待膨らむ2018年

はじめに

[contentblock id=2 img=gcb.png]

この記事は、Adobe XD Advent Calendar 2017 – Adventar の12月10日の記事です。アドベントカレンダーという文化がある事自体、11月に知ったばかりですが、いい機会なので頑張って書いてみました（1つの記事をここまで丁寧に書くのは初めてかも）。

内容は、自分が仕事でよく使っているWindows/Macのアプリ「Adobe XD」のお話をします。そう、デザインツールのPhotoshopやIllustratorでおなじみのアドビによるアプリです。

Adobe XDとは？

Adobe XD（以下「XD」）は、大雑把に書くと、Webサイトやスマフォアプリのワイヤーフレーム（骨組み）をデザイン出来るWindows/Mac用のツールです。デザインするだけでなく、画面の遷移（ページの切替）もある程度再現出来るのが特徴です。

自分は、社内やクライアントに「情報のレイアウトはこんな感じでいかがでしょう」と、作ったものを共有しながら詳細を詰めるのによく使っています。

Adobe XD 公式サイト

※以降は、知っている人以外は理解が難しい専門的な記事になります。ご了承願います。

XDを知ったのは、2016年春。しかし・・・

XDの存在を知ったのは、2016年の春くらいでした。きっかけは、当時読んだ以下のブログの記事（2016.4.26付）だったと記憶しています。

UIデザインの面倒な部分を自動化！ラクしてプロトタイプが作れる「Adobe XD」のメリット/デメリット | dwango creators’ blog（ドワンゴクリエイターズブログ）

上記の記事を見て「Webサイトの骨組みや、ページ遷移のイメージを作るのに便利そうだなー」と、少し使ってみました。

とはいえ「便利そうだなー」とは思いつつも、

  • まだリリースされたばかりで、機能が非常に限られていた
  • プロトタイプをURLで共有できるのはいいけど、パスワードはかけられない
  • 動作が軽快だけど、それだけで関係者に「これ使おう」と言うのは難しい
  • その時はタイミング的に仕事でそれをガッツリ使う機会がなかった
  • 別の分野の仕事で忙しく、じっくりと「何が出来るか」を検証する余裕がなかった

という事もあり、ちょっと触った後、すっかり記憶から消え去ってしまっていました。

2017年5月下旬。久しぶりにチェックしてみたら・・・色々変化していた

時は経ち、2017年5月下旬。
きっかけは記憶にありませんが、XDの事を久しぶりに調べる機会がありました。そして、

ということを、初めて知ることとなりました。

XDのリリース当初からずっと動きを追っていた人にとっては当たり前の事かもしれませんが、これらを知り、「このツール、まだ発展を続けてたのか！これは・・・今後も期待できそうだな」と感じ、以後、XDの流れをキャッチアップしていくようになりました。

改めて気づいた、XDのいいところ

上記の流れを受けて、改めてXDを触ってみたら、色々なことに気づかされました。

以下、XDを触っている人にだけ分かる（おい）、XDのいいところ箇条書きです。

動作が軽い！

XDがリリースされた当時、動作が軽快というのが1つのセールスポイントになっていましたが、あれから1年以上経過した2017年12月においても、この軽さが維持されている。素晴らしいです。

特定のルールに沿った要素の繰り返しを簡単に作れる

XDの利用者の間で評判のすこぶる良い「リピートグリッド」機能。特定のルールに沿った要素の繰り返しを簡単に作ることが出来て、自分も重宝しています。

作ったものをすぐにスマフォで見れる

クラウドフォルダへの保存 or Macとの接続。いずれかの方法で、デザインしているものをリアルタイムでスマホで確認出来る。パーツのサイズについて使いやすさを逐次チェックしながら進められるところが、好きです。

プロトタイプモードで、ページの遷移を再現できる

これが、XDならではの機能だと思っています。この機能のおかげで、今まで紙で「こちらがトップページで、こちらが会社概要ページで…」のように見せるより先に、スマフォ実機で「実際に体験」させる事が出来るようになりました。

スマフォで表示を見るために、コードを書かなくていい

Webサイトを作るためには、HTMLやCSSやJavaScriptといった言語でゴリゴリとページを作っていくものですが、これ、ページ遷移などのちょっとした動きを含むにしても時間がかかってしまいます。
XDは、オンライン共有の機能を使えば、タップや画面の遷移が出来るプロトタイプを簡単に他の人と共有できるため、コードを書く前の段階でアレコレと関係者と詰められるようになりました。

画像のトリミングをいい感じにやってくれる

あらかじめ準備しておいた図形の中に写真をはめ込むと、下記のように、図形の大きさを変更しても、写真の縦横比をゆがめることなく、いい感じにトリミングしてくれます。「写真の大きさをちょっと調整したい」時にすごく重宝しています。

マスクも出来る

上記の自動トリミング機能は、任意の領域をトリミングすることは難しいですが、マスク機能も装備されているため、写真の自由なトリミングが出来ます。（マスクは、任意の写真の上に図形を描いてから、両方を選択してCmd+Shift +Mで出来ます）

JPG書き出し：圧縮クオリティが、想像以上にすばらしい

こちらは、11月のアップデートで実装された機能（それまでも、PDFやPNGへの書き出しは出来ましたが、JPGへの書き出しは出来ませんでした）。

実装された時は「ふーん」という気持ちでしたが、実際に使ってみると、JPG圧縮のクオリティが、思った以上に優秀でした。

以下は、640×480ピクセルの写真を普通にJPG書き出しした時の容量ですが、クオリティ100→60に落としても、見た目はほぼ変わらない割に、結構いい感じに圧縮されていました。

書き出し自体も「Cmd+E」というシンプルなショートカットで出来るのもGOODです。

アプリの開発の進捗を公式ブログやフォーラムを通して知ることが出来るので、ワクワクする

機能ではありませんが、XDの広報のあり方にも好感を持っています。例えば、以下のような項目です。

  • アップデートについては、ベータ版の頃から2017年11月の正式版に至るまで、ほぼ毎月実施。
  • 今後追加される機能についても、Adobe Creative Stationのブログで告知。日本語なのがうれしい！
  • オンラインのフォーラム（英語）にてユーザーの意見を募っている。また、ユーザーから寄せられている要望が体系的にまとめられている

最近のツールだと、上記のような姿勢は当たり前なことなのかもしれません。が、ユーザーと交流し、ユーザーからどんな意見を受け取っているのかを伝え、何に取り組んでいているのかを伝え、将来は何が出来るようになるかを伝える事。これらは、なかなか出来ることじゃないです。

プロダクトにもよりけりですが、ソフトウェアに関しては、秘密主義を貫くよりも、ユーザーの意見に耳を傾けて、より良い方向に進めていく事にこそ好感を持たれるケースが多くなっているように感じる今日このごろです。XDからは、そんな姿勢を感じました。

2018年、Adobe XDに期待すること

きっと、いや、間違いなく、2018年もXDを使っていくと思われますので、2018年のアップデートに期待することを。

  • ページ内スクロール
  • ハンバーガーメニューやLightboxのように、スマフォでタップしたその場で、別の要素を表示
  • ヘッダーやフッターのナビゲーションを、リンク設定も含めてシンボル化して、複数のアートボードで使い回し
  • テンプレート機能（例：新しいアートボードを作ったら、デフォルトで特定のパーツが配置されている）
  • レスポンシブ機能（共有リンクを開く時、PC/スマフォで別々のレイアウトを設定可能）

すでに実装が予告されているもののありますが、将来的には、アプリやスマフォサイトのUI（インターフェイス）を、プログラミングのスキルが無くてもそっくりそのまま再現出来るようになることを期待しています。

個人的トンデモな願望

トンデモな願望ですが、このツールで作成したデータを、キレイなHTML5で書き出すことで、そのままWebサイトとして公開。コーディングの手間そのものをゼロに近い所まで大幅に削減できたらなぁ、というのを密かに願っております（コーダーを敵に回す発言）。

2018年のロードマップ

先日11月30日、AMA: What’s Next for Adobe XD? – Designer Newsにて、XDの今後のロードマップ的なものが、

Today we’re excited to talk about XD’s roadmap for 2018 — here’s a snapshot of the features being worked on:

という文脈で発表されました。

（Rich Leeという、アメリカのXD開発の関係者のようです。また、AMAとは、Ask Me Anythingの略で、日本語で言うと「なんか質問ある？」とのこと）

雑に翻訳するなら、

デザインモード

テキストにアンダーラインを引く
円形のグラデーション
CCライブラリ内のベクターグラフィックのサポート
ダッシュ線、ドット線のサポート
シンボルのリサイズと、中身の入れ替え
画面サイズに応じたレイアウトの実現
アセットの整理と検索

プロトタイプモード

オーバーレイ（Lightboxのような表現が可能になる？）
スクロール可能エリア

共有機能

デザインスペックに、アセットの詳細も記述
デザインスペックに、コードスニペットも記述
パスワード保護

・・・と言ったところでしょうか。
実装予定の機能が色々と書かれており、今後に期待せずにはいられません。

(個人的には、パスワード保護が嬉しいです)

さいごに

ここまでお読みいただき、ありがとうございました。
Webサイト制作に関わる立場から「ココが好き」と「これからの期待」を書かせていただきました。

実際のコーディングに入る前に、XDで作ったプロトタイプで実機検証が行えたら。

ビジュアルデザインに入る前に「挙動の見本」を作るという工程をクライアントやデザイナーやプログラマーと共有できたら。

Adobe XDが、これらを解決してくれるツールとして2018年も発展してくれる事を願う2017年12月でした。