アドビが開発中のちょっといい未来

10月にロサンゼルスで開催されたクリエイティビティ・カンファレンス「Adobe MAX 2015」では、アドビが開発中のツールや機能も数多く紹介されました。今すぐ使える機能ではなく、本当にリリースされるかどうかさえわかりませんが、アドビが作っている楽しそうな未来がちょっと見えてきてわくわくします。

プロトタイピングツール「Project Comet」

WebやアプリのデザインにはPhotoshopやIllustratorを使っている方が多いと思いますが、アドビが開発中の新しいデザインツールが紹介されました。

https://blog.adobe.com/media_aaeb2c5f57281881582990e93632dde6ede2ce3c.gif

ぱっと見た目はUIが簡素化されたIllustratorのような雰囲気

まだ開発中ではあるものの、2016年のはじめにプレリリース版の公開が予定されていますので、実際に試せるようになる日も遠くはなさそうです。

UXデザイナー向けのプロトタイピングツールという位置づけで、ワイヤーフレーム作成から簡単なビジュアルデザインまでを行うことができるツールを目指しているようです。

プロトタイプのデザイン中に発生する面倒な作業の１つ１つを簡単に行えるように工夫されています。
例えば、同じような要素を繰り返しタイル状に並べる作業は地味に大変ですが、、Cometなら、リスト化するアイテムとして指定すれば、全体の領域を広げるだけで、表示領域内が要素で埋まります。

https://blog.adobe.com/media_359bbd40d174bb877f7be530184be786f14804c1.gif

ハンドルをつかんで領域を広げるだけで、繰り返し要素が作られる

また、リスト内の１つ１つの要素の中に文字や画像を設定する作業は、これまた地味に時間がかかる作業ですが、Cometでは１回の操作で全要素内のアイテムをまとめて更新できます。下の画像は、各要素のサムネイル画像を一回のドラッグ＆ドロップで一気に設定しているところです。

https://blog.adobe.com/media_b30f11f427a8bda3ce50317a1d677b034526800c.gif

画像ファイルをまとめてドラッグ＆ドロップするだけで各要素に反映

画像だけでなく、適当なウェブページからテキストや画像をまとめてダミーデータとして取り込むこともできます。Cometがページ中の繰り返し要素を勝手に判断してコピーしてくれるようです。

https://blog.adobe.com/media_d0f7f1d2965a76f14a9329659f0dc0ca91eca3b0.gif

適当なページから、名前とプロフィール画像をダミーデータとして流し込んだところ

ある要素をタップしたら次の画面へ、といったインラクティブなプロトタイプも作れます。遷移する際のエフェクトも指定できます。

https://blog.adobe.com/media_c44fffa983f73675b2a484e8bccfb5d32a6c3e35.gif

遷移先のページ、遷移するときのエフェクトを設定できる

作成中のプロトタイプはいつでもプレビューできます。デザインの変更はリアルタイムに反映されます。

https://blog.adobe.com/media_2d63143527dc041989ee30c71ce1c0a50b8053c7.gif

ボタンをクリックして遷移を確認できる

常にサイトやアプリ全体を確認しながら仕上げられるので、管理も楽ですね。

https://blog.adobe.com/media_8b2d591d9d2d37ff7bef9afa45c655fe1bd56f2c.gif

各画面を、遷移を示す線で結んで表示する「プロトタイプモード」

ところでこの手の高機能ツールにありがちなのは、最初はよさそうと思って使い始めても、画面や要素の数が増えてくると動作が重くなって結局使い物にならないということですよね。
Cometに関してはそんな心配はいらないようです。デモでは、かなりの数の画面でも素晴らしいパフォーマンスで動作していました。これは期待が持てます。

https://blog.adobe.com/media_6ccd3ac31eb70b7d43d88c66d917e618cf424f0b.gif

こんなにたくさんの画面をデザインしても快適に動く