CreatorsMeetUp24の登壇資料です。 第24回 Creators MeetUp http://cmu.connpass.com/event/10912/ Session02「手元作業の「自動化」をした効用とその先のこと」 フロントエンド的な、とある手元の作業を、最近も自動化しました。そういった時に気づいた効率だけではない自動化の効用とその先に見えることについて、お話します！ ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・商用フリーで使える影絵素材サイト シルエットデザイン →　http://kage-design.com/ ・human pictogram 2.0 →　http://pictogram2.com/

1. Session2
手元作業の「自動化」をした効用と
その先のこと
20150117 第24回Creators MeetUp 田中正吾

2. 私の話はスライドは後ほど共有します。
話す内容に注力いただいて大丈夫です！

3. 自己紹介

4. 4
田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。
以後、FLASH制作を中心にインタラクティブコ
ンテンツを主に行い現在に至る。
最近は、JavaScriptやHTML5アニメーション、
スマートフォン演出制作のワークフロー改善に
関わったりしていました。

5. 5
iPadアプリ作ったりしています

6. 6
HTML5アニメーション
作ったりしています

7. 7
デジタルサイネージ
作ったりしてます
！

8. 手元作業の「自動化」したよ

9. 最近もフロントエンド的な手元の作業を自動化し
ました。まずはそこから。

10. フロントエンドの頻度の高い作業として
「受領デザインの正確な再現」というのがある。

11. 受領デザインがあるとして

12. 一つ一つ素材を切り出して

13. FLASHやHTMLなりで位置を再現する。
こういう処理。

14. Photoshopでの作業

15. Photoshopで一つ一つ切り出してくれる機能がある
（Generator機能）

16. 便利！しかし。

17. ありがたい機能なのだが、再現という観点から見ると位置情
報は無くなってしまう。結局HTMLやFLASHに再度パズルピ
ースを置き直すようなことをする羽目になる。
制作物に
再配置

18. 10パーツならいいが100～200となると
これ結構つらい。

19. そんなわけで自動化しました

20. PhotoshopにはJSXという操作を自動化するツールがあり、
JSXを使ってバラバラにする前に、位置情報を別に記録して
再配置する自動処理作りました。
自動でやってくれる

21. ブログにも雰囲気の分かる処理をアップしてます。
http://www.1ft-
seabass.jp/memo/2015/01/16/generator_png_l
ayer_listup_jsx/

22. このような処理を日々作ってるわけですが、作っ
ている時や使っている時思ったことを話します。

23. 自動化は自分の作業が
客観的に見えるようになる
自動化その先 その１

24. 自分の作業を自動化をするということは
作業を見直すことになります。

25. 自動化のためにプログラムを書くので、
自分で自分に仕様を固める必要があります。

26. 「ややこしい作業」という大きな印象のものも
作業

27. アプリケーションの操作手順や
ルールを揃えたいファイル名という着地など
なにげなく行っている作業が見えてくる
1 2 3 4

28. 1 2 3 4
自動化しにくい処理＝曖昧な処理を
見つけることにも寄与するので
作業のシンプル化・スリム化にも繋がります
1 新2 3 4 5
例：分割してシンプルに例：見直してスリムに

29. 自動化の目線を既に持っていると
「ややこしいそうな作業」も
違和感から危ないとピンとくる時がある。
うまくいけば先手で改善できることもある。
なんかヤバイ！

30. 一人で出来る限界への
新しい越え方が見えるときもある
自動化その先 その2

31. 制作力を高めていくことは大事。
しかし。一人の限界というのはある。

32. 自動化を作るということは
ある意味、自分の作業量への見切りではあります
（くやしいけれど）

33. 見切りが悪く「よくわからないまま、あふれる」
と、急にメンバーに迷惑をかけたりするのは
なかなか心に来るものがありますね・・・。

34. これは1人やっても無理だ。自動化するぞ。
という見切りによって行動する場合、
「よくわからないまま、あふれる」前に
自分自身を拡張しつつ対応できる
事前のワンチャンスができます

35. はい。つぎ。
仕事
仕事 仕事
仕事仕事
仕事
仕事
仕事事

36. 仕事
仕事 仕事
仕事仕事
仕事
仕事
事 仕事
制作も複数走るようになると、
一つにかけられる時間はどうしても限られ、
より精度が求められます。切れ味重要。

37. 余裕があれば、かけられる時間＞仕事ですが
かけられる時間≒仕事になってくる。
仕事
かけられる時間かけられる時間
仕事
精度

38. いかに切れ味よく対応するかで、
自動化で作業精度を高められるケースも出てくる
仕事
仕事 仕事
仕事仕事
仕事
仕事
事 仕事

39. 自動化によって出来た余裕（時間）を
いかに使うか考えるようになる
自動化その先 その3

40. 自動化がうまくいくと、
本来やるはずだった作業が軽減され
余裕できます。

41. 自動化がうまくいくと、
本来やるはずだった作業が軽減され
余裕できます。

42. 本来大変だった作業に余裕ができると、
有効に使おうとします。
（個人差があります）
だ い じ

43. 余談

44. 自動化を行って先が見えるはずなのに！
危機が去らないプロジェクトもあります。
作業が多すぎたり、別で疲弊していると気づいたり。
（逐次人員投入でダメと気づくよりは素敵ですね。）
HELLO!!!

45. 失敗談

46. あるとき、プロジェクトが進み
自動化を組み合わせすぎた時があります。

47. やりすぎた自動化は
結局その使い方を覚える必要があるため
途中参加にキツい属人化が進む場合もあります。

48. 途中参加の方に作業がわかりにくくなり
「明確化したつもりが別の大変さが出るんだ。」
と、気づいたのは収穫でした。
（このあといろいろ整理しました）

49. 途中参加の方にも、一度は素の作業をしていただき
うわ！大変な作業と認識してからのほうが、
「よくわからないけど、なんかできる」より
使う共感が得れて大事そうです。

50. 自動化ができると
他の人に作業をお願いしやすくなる
自動化その先 その3

51. 作業を客観視して出来上がった自動処理。
それは他の方が動かしても同じ結果が出やすく
それそのものがマニュアルの役割も果たします
こういう処理だよ

52. 自動処理を軸に対応してもらうことで、
他の方との間でも曖昧な作業がなくなり
品質は保ちやすくなります。

53. 「手順書をすべて完璧に行わないと！」
とお願いしてギスギスするよりも

54. 自動化でお願いできると
お互いハッピー！というところ。

55. 気軽に頼めるようになるというのは
結構、重要だったりします

56. 「使い勝手を意識するようになる」

57. 自分だけだと説明も必要のない処理が
他の方に使ってもらうと
思いのほか迷わせてしまったり
説明が不足だったりします（あるある）
? ? ?

58. 「いつ動作・完了したかわからない」
「間違って起動したときに止めれない」
「AのあとBを実行、最後にC。多いわ！」
「あるアプリへキレたはずの処理を自分自身が産出」
つらい。なるべくなら気持よく使って欲しい。という意識。
× × ×

59. 実感としてアラートとか大事と分かってくる。
（何が起きてるかの状態を説明）
! ! !

60. 他の方の使用を考えると
普段の仕事とは違った目線で
使い勝手を意識するようになります。
（できないときもあるけど、なるべく頑張るで、何卒）

61. まとめ

62. ➔ 自動化を作成するときに作業を客観的に見る視点が得れる。
➔ 自動化で余裕が生まれるので、その使い方をクオリティアッ
プ使うなど意識するようになる。普段から依頼されたフロー
での違和感を検知できるようになる時もある。
➔ 自動化することで、作業を分析できてるため、他の方に同様
の作業をお願いしやすくなる。他の方の使用を目の当たりに
すると、いままで及ばなかった使い勝手へ意識が芽生えたり
する。
➔ このように自動化は目下の効率UPだけでない、様々な地味に
自分の切れ味を増す効用があるのでオススメ。
まとめ

63. ご清聴いただきまして
ありがとうございました！