Pixate制作で気になる制作時間についてをどんなことが簡単にできて、どんなことに時間がかかるのかを紹介します。 サンプル１つめのアプリ https://ameba-furugiya.com/lp サンプル２つめの動画 https://www.youtube.com/watch?v=PdCq-1qHZNU pixateのはじめの一歩 http://ameblo.jp/ca-1pixel/entry-12070891045.html

1. 株 式 会 社サイバーエージェント
中 隆理
pixate、
どれくらい時間がかかる？

2. 中 隆 理 ( なか たかみち )
デザイナー
あだ名 / なかちゃん
p i x a t e 歴 9ヶ月くら い
現 在 、アメーバブログのデザインを 担当

3. pixateと私
社内でのハンズオン勉強会 pixateモックの制作・公開 技 術ブログへの寄稿

4. pixateの作り方に触れながら
どんなことが簡単にできて、
どんなことに時間がかかるのかを
紹介します！

5. アメーバ古着屋を作る

6. 作った pixateを見ながら紹介

7. 1. スクロール
2. スクロールしたら〇 〇する
3. タブバー の 動き
4 . 遷 移 ( タップ )
5 . ブラー

8. ・ 縦にスクロール
・ 横にスクロール
・ 指 定 サイズにフィット ( フリック )
1- スクロール
スクロールの 種 類

9. ル ールさえ 知ってい れば できる
1- スクロール
3分
それぞれ

10. 2- スクロールしたら⃝ ⃝
動き・変化をスクロールと連 動
移動する 透明度 変わる

11. 2- スクロールしたら⃝ ⃝
「スクロールしたら⃝ ⃝する」の⃝ ⃝が
単 純で場 合 分けなどがないときは難しくない
それぞれ
10分

12. 下にスクロール → 画面外に移動する
上にスクロール → 移動しない
3- タブバーの動き
if 文を書く
け ど

13. 書き方が決まっているし、1∼２文程 度で書ける
area_scrool_01.velocityY > 0
下にスクロールした時だけを指定

14. 3- タブバーの動き
スクロールの方向や距離と
組み合わせることが多い
大きさや不透明度、位置などいろいろな
条件を設 定する事ができる
タブの動きは定番の条件式

15. 3- タブバーの動き
スクロールの向きを判定するのはあの式だ！
みたいな感じでさほど悩まない。
10分

16. 画面外にある画像を
指定の位置まで動かしている。
動き方は細かく指定できる。
４- 遷移 ( タップ )
「タップしたら⃝ ⃝する」は簡単

17. それぞれ
動かしたい画 像 パーツを準 備して、動きや
不透 明 度などをそれぞれ 設 定する。
5分
４- 遷移 ( タップ )

18. ブラーという機能はないので
ぼかした画像を用意して
不透明度を変更している
5- ブラー
できないことはそれっぽく見せる

19. できることは限られているので、
それっぽく見えるように作る必 要があるし、
それができるのが pixateだと思う
10分
5- ブラー

20. この規模なら３∼４時間を
イメージしていたほうがいいかも
アメーバ古着屋を作る

21. Lica を作る
日 記× S N S を テ ーマ に 制 作したア プ リで す

22. 作った pixateを見ながら紹介

23. 画面数がやたら多い

24. 1. t o p ページ
2 . 日付 をタップ
3. スケジュール タップ
4 . 詳 細 遷 移
5 . 遷 移 先 スクロール
6 . カレンダーフリック
7. 予 定の 追 加
8 . ログ 詳 細
9. FA B

25. それぞれの作り方は
アメーバ古着屋と同じ要領で
部分ごとに作っていく
ただ、画像パーツ量が 5倍くらい
Lica を作る

26. Lica 制作で難しいところだけ説明
「drag」設 定でスワイプを表現できる
トップ→カレンダー ログ詳細→ログ

27. スワイプを起 点とした画 面遷 移は
見え方 、レイヤー構造、条 件設 定などで
おそらく悩む
Lica を作る
60分

28. レイヤーが 探 せない、数字・スペルミス、構造ミス、どのアニメーションなのか忘れる ...etc
1 つひとつの作業時間はそんなに
かからないけど、パーツ量に比例して
単純なミスが増える& 頭が疲れる
Lica を作る

29. 3∼４時間×5倍＝１5∼20 時間 ?
まるまる２日位かかった
Lica を作る

30. レイヤーの整理が大事
常にするべし !
ミスを減らすには
のちの修正に効いてきます
Lica を作る

31. まとめ

32. アニメーション
・シンプルな動きは難しくない
・場合分けなどが発生すると若干悩む
・オリジナルの動きは悩む

33. 作 るときの 意 気 込 み
・レイヤー整理でミスを減らす
・１つのファイルにつめ込まない

34. サイバーエージェント
公 式クリエイターブログ
「１p i x e l 」で
詳しい説 明 や 使い方 など
書きましたー！
ht tp://ameblo.jp/ca-1pixel/
entr y-12070891045.html

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