@dots 20150924

1. Pixateの導入についてのあれこれ
2015.09.24

2. 自己紹介
株式会社サイバーエージェント
クリエイティブディレクター / デザイナー
及川 和之
おい かわ かず ゆき

3. 本日の内容
プロジェクトにおける
Pixate導入の経緯について

4. WEBハイブリッド
2014年中盤くらいから
フルネイティブ
native
+
html & css & js
native

5. フルネイティブならではのUI
フルネイティブ化にあたって
より良いUXを提供する為に
心地よいインタラクション
よりスムーズな
アニメーションの使用も念頭においた
etc…
このあたりは頑張らないと、というかマスト。

6. どう進める？

7. 当初の予定
連携
インタラクションプロトタイプ
スマホ端末でユーザーと同じ感覚で触れるもの
Native App
Engineer
Designer

8. が、しかし…

9. 大前提として、
ネイティブアプリエンジニアのリソースが
潤沢にあるわけではない。

10. 新規サービスの場合
既存サービスのリニューアル
インタラクションも肝になってきそうだけど、
まずは技術検証と機能開発を進めないとマズイかも。
webハイブリット前提の設計を刷新する必要がある
通信系をはじめ、サクサク動かそうとした時にボトルネックになる部分多数あった
やらないといけない事
Native App Engineer
そのうえで

11. ネイティブエンジニアのリソースが、
インタラクション以外のとこで
既にパツパツ
（サービスの方向性と進め方によります。）

12. リソースが空くのを待つと、
時間的なロスが拡大してしまう。

13. デザイナーがやるしかないんじゃ
がんばれ
デザイン /
プロトタイプ制作
コード
機能開発 /
システム刷新
Native App EngineerDesigner

14. どうやって作る？
デザイナー、基本コード書けないけど、

15. ツールを検討しよう

16. After Effects
FLASH
Proto.io
Pixate
細かいアニメーション等も作り込めるが、操作の結果として動作というのは基本できない。
AdobeCCは導入済みなので、使おうと思えばすぐ使える。
使えるデザイナーも多く、操作の結果としてのインタラクションも作れるが、
スマホの実機で触る事ができない。AdobeCCは導入済みなので、使おうと思えばすぐ使える。
細かいとこまで作り込めそうだが、その分やや複雑な印象。
5ユーザーで月80ドル。15日間試用可能なのでとりあえず使ってみる。
デモを見るかぎり良さそう。一番安いプランで月8.34ドル（当時）
1ヶ月試用できるみたいなので、とりあえず使ってみる。
invision
プロトタイピングツールとして既に導入されている。サービスの全体間を把握するには良い
が、インタラクションを作り込むタイプのツールではない。これと併用するものが必要。

17. 実機で触れないと、
スマホアプリのUXの検証としては不十分
Proto.io か Pixateが良さそう

18. 試用してみた感じ
Proto.io少し複雑。使いこなせれば良いんだろうけど。
Pixateはいろいろ癖があるけど、1日使えば慣れる程度
どっちもサービスの一部分を抜き出してインタラクショ
ンを付けるような割り切った使い方なら良さそう。
サービスのプロト丸ごとこれで作るとかはしんどい。
実機で動かせるのはやはり大きいよね
Pixateは、条件式で思ったよりも細かく制御できる
Designer A
Designer B
Designer A
Designer B
Designer BDesigner A

19. pixateが良さそうなんで、
他のツールで対抗馬が無さそうなら、
アカウントの購入申請出しましょうか。

20. SOLOプランが消滅→FREEプランに
1project（prototype数は無制限）/パーツ容量1GB
以外は無制限で使えるように
（現在は共有の為のクラウド機能以外は完全に無料）

21. 再び無料に
すでに支払った金額は、
クラウド機能のコストに利用できるポイントとして
チャージされていました。

22. ・スマホの実機でプレビューできるのは大きい
L 指で触るのとマウスカーソルで触るのでは印象が違う
以上ですが
導入してみた所感 1/2
・具体的な動きまで共有する事で、
認識合わせが確実にできる
・同じく具体的なプロトがあると議論もしやすい。
L 技術的に難しい部分の発見。より良いアイデアが早い段階で出る。

23. 以上ですが
導入してみた所感 2/2
・シンプルな動きの表現であればpixateで結構いける
・が、複数オブジェクトを同時に…は結構面倒
L 変更するの大変。せめてアニメーションを使い回せると良いなぁ・・
・がんばれば複雑なものもいける
・実装してみたけど、これはちょっと・・を回避できる

24. ありがとうございました。