読者です 読者をやめる 読者になる 読者になる

よりぶろ

アプリのUIとかについて書いてく予定

Adobe Project Cometのデモ動画を見て何ができるか整理してみた

UI Prototype

http://landing.adobe.com/content/dam/landing/images/229818.en.comet.marquee-ui-image.954x577.jpg

Adobeが発表したプロトタイピングツールProject Cometの操作デモ動画が上がっていたので見てみましたぞい!な感想文です。

 

Cometの詳細については公式動画で大体のイメージが掴めます。


Meet Project Comet - YouTube

 

さて今回見たのは以下の実演デモ。30分ほぼ全編デモが見れるという贅沢な内容となっています。バージョンとしてはα版くらい?なのですかね。


Project Comet with Talin Wadsworth & Terry White ...

 

 

現段階で把握できる基本機能

・アートボード単位で画面を作成。
・左メニューから選べるのは

 『矩形』『円形』『線』『自由曲線』『テキスト』『アートボード』。
・オブジェクトを選択した状態で編集できるのは

 『横幅』『縦幅』『X位置』『Y位置』『角丸(矩形だけかも?)』『回転角度』

 『透明度』

 『塗り色』『線色』『線幅』『シャドウの色』

・矩形に角丸適用すれば円形も作れる。

複数オブジェクトの整列。

・ガイドに沿ったオブジェクトの自由移動が可能。

・オブジェクトの前面 / 背面移動(レイヤーとして視認はできない)

 

Comet独自の機能

・画面は『Design』タブと『Prototype』タブで分かれており、Design画面でカンプの作成、Prototype画面で画面遷移の作成が可能。
・特徴的なのがGroup Grid。グループ化したオブジェクトを上下左右にドラッグすることで連続生成することができる。

http://i.giphy.com/3o85xtghMA83IWMw8M.gif

 

 

・オブジェクト間のマージンも一括で調整できる。

http://i.giphy.com/xTiTnvAksdMW6rPB2o.gif

 

 

・Group Gridのオブジェクトに対して画像をD&Dすることで、それぞれ別個に適用できる

http://i.giphy.com/xTiTnpaXHxjP1H8XmM.gif

 

 

・Group Gridはシンボル的な動作はしないようで、複製したほうの画像サイズを変えても複製元のデータに反映はされない

http://i.giphy.com/3o85xH6wc2e3wDzP0s.gif

 

 

Prototypeモードでできること

・このモードの基本は、作成したオブジェクトをトリガーにして他画面に遷移する、という動きを作ること。

トランジションのオプションとしては

 遷移先 / トランジションの(動き)パターン / イージングパターン / デュレーション

 がそれぞれ選択できる。

・遷移のパターンはデモ動画では種類が少ない(Slide Left, Slide Right, Dissolve)が、公式動画では他サービスと同等のパターンが選べる(Slide Left, Slide Right,S lide Up, Slide Down, Push Left, Push Right, Fade, Pop, Flip, Throw / Dissolveはない)。

・アートボード自体を選択すると、ボード内でどのオブジェクトがどの画面に遷移するかが確認できる。

・端末によるライブプレビューが可能。

・URL共有が可能。

・PSD / AIからの読み込み(どんなかたちで読み込まれるか / 書き出しもできるかは不明)。

プラグインを使った機能拡張。

 

現時点でできなそうなこと

・レイヤーパネルが存在していないため、オブジェクトの整理が効率的にできない

・Prototypeモードでのスクロール?(動画内ではやってない)

・Prototypeモードで上固定 / 下固定エリアの作成?(動画内ではやってない)

・遷移用にタップエリアのみを作成?

 

で、Cometの立ち位置ってどんな感じなのよ

ツールの機能的には『Sketch + プロトタイピングツール』と言うとわかりやすいでしょうか。レイヤーがないのは(未実装なだけかもしれませんが)割り切っていていいなあと感じました。実際使ったら使いづらいかもしらんが。

またGroup Gridを見てわかるように、コンテンツに現実味のあるモックを手早く作ることに特化させている印象です。

反面、他のAdobeツールとの連携具合はまだよくわからないです。動画内では「Cometはとにかくプロトタイピングを早く作ることに特化させたので、細かい作り込みはPhotoshopなどでやってほしい(意訳)」みたいなことを言ってるぽいですね。公式サイトには相互連携みたいな文言があったので、何かしらできるとは思うのですが。

Prototypeモードでやれることが少ないのも、アニメーションに凄く時間をかけるというよりは具体的な全体感を俯瞰することに注力してほしいと思っているからかもしれませんね。

最近のプロトタイピングツールは「何を効率化させるか」を明確にしている場合が多いような気がして、Cometについては「具体的に感じられるモックをとにかく素早く作ってチーム内の認識レベルを同じにする」ことに重きを置いているのかなあと。

コメント機能とかは今のところ見受けられないので、コミュニケーション重視ではなさそうな印象です(ひょっとしたら共有URLに飛んだ先で付けられたりできるのかもしれませんが)。

これでCometでプロトタイプを作る→Photoshopで作りこむ→Extractでレイアウト指示をエンジニアに確認してもらう、という一連の流れが一貫性を持ってできるのであれば、作業が楽になりそうだなと感じました(最近はAdobeのソフト使ってないけど…)。

 

 

実際に使えるようになるのは来年の早い時期だそうで、今の状態からどれだけ進化するのかとても楽しみです。