Designers Pit 01『Origamiを使ったプロトタイプ作成を学ぼう』

近年、モバイルアプリの世界において、1枚のデザインカンプや切り出した画像リソースを用いて、擬似的に動くプロトタイプを作り出せるツール・サービスが登場しています。
これによってデザイナーでも手軽にプロトタイピングのサイクルを作れるようになりましたが、まだまだインタラクションを伴った成果物を作るのは難しく、また環境も整っていません。
このワークショップではFacebookデザインチームが開発したQuartz Composer用ツールキット「Origami」について学び、インタラクティブなプロトタイプの作成を体験して頂けます。

Transcript

1. Designer's Pit 01
2. /// Designers Pit /// 2 タイムテーブル 19:00　講師紹介・挨拶、参加者自己紹介 19:10　イントロダクション〜 Origami について〜 19:20　ワークショップ（基礎編 30 分・応用編 30 分を予定） 20:30　まとめ 20:40　終了 20:45　次回 LT 21:00　退室
3. /// Designers Pit /// 3 自己紹介 http://yo-ry.hateblo.jp/ 吉竹 遼（よしたけ りょう） 1987 年 4 月生まれ。 2011 年よりフェンリルで UI デザイナーとして働いています。 Origami 歴はトータル 20 時間程度。 ニャーン
4. /// Designers Pit /// 4 イントロダクション
5. /// Designers Pit /// 5 プロトタイピングの種類 ペーパープロトタイプ 紙ベースでプロトタイプを作成し、クライアントやエンジニアと認識合わせを行います。 デバイスを模したベースの紙上に UI コンポーネントの形をした紙片を置き、福笑いのよう に入れ替えながらレイアウトについて議論したり、紙芝居のように 1 枚 1 枚画面を遷移の 順にスライドして流れを確認したりします。 UI プロトタイプ 要件も固まり、デザインカンプを作成した後は、より実際のプロダクトに近いプロトタイ プを作ることで、具体的なイメージ・全体的な流れをクライアントと共有できます。 デザインカンプを用いて作成することがほとんどとなり、UI の振る舞い方や画面遷移のト ランジションなど、より本物らしいプロトタイプを作ることが可能です。
6. /// Designers Pit /// 6 プロトタイピングの種類 インタラクティブプロトタイプ ビデオプロトタイプは一方通行なアウトプットとなるため、 見栄えはいいものの実際に触っ て試せないという弱点があります。 UI プロトタイプとビデオプロトタイプの中間くらいに位置するのがインタラクティブプロ トタイプです。名前通りユーザーのフィードバックを受けて実際に動くプロトタイプを作 成することができます。 プロトタイピングのためのツールやサービスは色々あるので、詳しく知りたい方は http://yo-ry.hateblo.jp/entry/2014/02/13/204727 をどうぞ。 ビデオプロトタイプ UI プロトタイプは画面遷移の作成・確認が主となるため、細かいアニメーションは機能的 に補えないものがほとんどです。また、新しい UI のかたちを考える際にもツールとしては 不適切です。 そのような「間の動き」を補完したり、ゼロから新しい UI を作る場合などに、動画を使っ たプロトタイプが用いられます。
7. /// Designers Pit /// 7 Origami とは何か Origami とは、Facebook Design チームがプロトタイピ ングを行うために開発した『Quartz Composer』用のツー ルキットです。 例えるなら、ライブラリとかアドオン的な存在？ 本来であればスクリーンセーバーや VJ っぽいプログラムを 作るための QC を使ってプロトタイプを作成するという面 白い試みです。あの Facebook Paper なども、Origami を使ってプロトタイピングをしたそうです。 http://facebook.github.io/origami/
8. /// Designers Pit /// 8 他のツールとの比較 After Effects インタラクティブ性 作成時間 参考資料 自由度 端末による確認 Flash Origami Framer
9. /// Designers Pit /// 9 他のツールとの比較 After Effects インタラクティブ性 作成時間 参考資料 自由度 端末による確認 Flash Origami Framer もちろん、時と場合によって印象は変わります。 というか、この表は完全に主観 (Flash 触ったことない…)。 何を作るかによって作成時間は上下するし 端末による確認も、見て確認なのか触って確認なのかで 大きく変わります。
10. /// Designers Pit /// 10 なぜ Origami なのか？ Origami を選ぶワケ ・ビデオプロトタイプのように一方向性でない。 ・Framer のようにプログラムを書かなくてもよい。 ・Facebook ページがそこそこ賑わっている。 ・定型的なインタラクションならすぐ作れる。 ・慣性の調整が簡単にできる。 Origami を選ばないワケ ・参考になるドキュメントが少ない。 ・ 初期の学習曲線の伸びが低い。 ・Apple に見放された環境である。 ・自由度を得るにはプログラムの記述が必要。 ・実装面での効率化はあまり図れない。
11. /// Designers Pit /// 11 なぜ Origami なのか？ どんな時に Origami を使うべきか？ Flinto や Briefs など静的イメージのみで作るプロトタイプでは 伝わらない、でも動きを正確に伝えたい 部分を作りたい時。 動作の繰り返しや行ったり来たりを検証して、自分が頭の中で思 い描いていたインタラクションと差異がないか確認したい時。 この 2 つがメインかなと、個人的には思います。 全体の設計の流れは Flinto や Briefs で行い、確認したい箇所ご とに Origami で作る、が効果的に成果を得られそうな感触。
12. /// Designers Pit /// 12 Hello,Origami
13. /// Designers Pit /// 13 というわけで、 まずは QC について軽くお勉強。
14. /// Designers Pit /// 14 QC について QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで、結果をアウトプットします。 例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わ る） 、Bouncy Animation（値の変化の差分を見せる）を介して、Layer の「Width」 「Height」を Transition の「Value」によって変化（拡大）させています。 QC のプログラムは左から右へ流れる パッチ ポート ケーブル
15. /// Designers Pit /// 15 QC について また、パッチを置き過ぎるとエディタ画面が汚くなってしまうので、Photoshop のレイヤーグループに 相当するマクロパッチを生成することで、画面がきれいに片付きます。 実は下図のマクロパッチは、前ページのパッチを格納しています。 これがマクロパッチ（角が四角い）
16. /// Designers Pit /// 16 QC について Patch Library は QC にインストールされているパッチを検索して探すことができます。ここからエディ タ画面へパッチを置いていきます。 Patch Inspector は選択したパッチの設定を閲覧・編集することができます。ちなみにインスペクタ内の 数値や状態を変更しても⌘ +Z で元に戻らないので注意！
17. /// Designers Pit /// 17 パッチの種類 Color Transition 2 つの色を切り替える Image Transition 2 つの画像を切り替える Layer 階層情報を持たせる Text Layer テキストをレイヤーとして配置 Button テキスト + 背景をボタンとして配置 Fill Layer 画面全体を覆う矩形を生成 Switch ある状態のオンオフの切り替え Scroll 画像のスクロール Bouncy Animation 慣性のあるアニメーション Classic Animation 慣性のないアニメーション Transition 開始値と終了値の設定 Layer Group 空のマクロパッチを生成 Hit Area クリック可能なエリアを生成 Phone モバイルデバイスの外見を生成 Timer タイマーの実行 Counter 2 カウンターらしい（よく分かってない） Progress 取得値を 0 と 1 に設定？（よく ry） Origami に備わっているパッチ 1.1 で追加されたパッチ
18. /// Designers Pit /// 18 Origami にはモバイルアプリの挙動などを 再現するためのパッチが多く用意されていますが、 自分の思い描いた動きを作るためには もともと QC にあるパッチも有効活用しなければなりません。 そのあたりは独学が必要となります。
19. /// Designers Pit /// 19 それではさっそく、簡単なものから 作ってみましょう。 基礎編
20. /// Designers Pit /// 20 Origami 基礎編 テンプレート テンプレートを開いてみる。
21. /// Designers Pit /// 21 Origami 基礎編 テンプレート Render in image をダブルクリックして下の階層に入る。
22. /// Designers Pit /// 22 Origami 基礎編 画像を置く Sleipnir.png を D&D で置く。 この数字が高いほど 上のレイヤーに置かれる ダブルクリックで 名前が変えられる
23. /// Designers Pit /// 23 Origami 基礎編 ビューワ 出た！ QC はカンバスど真ん中が x0,y0 になる。
24. /// Designers Pit /// 24 Origami 基礎編 Color Transition 2 色間をフェードさせる Image Transition 2 つの画像をフェードさせる Layer 画像に階層情報を持たせる Text Layer テキストをレイヤーとして配置 Button テキスト + 背景をボタンとして配置 Fill Layer 画面全体を覆う矩形を生成 Switch ある状態のオンオフの切り替え Scroll 画像のスクロール Bouncy Animation 弾力性のあるアニメーション Classic Animation 弾力性のないアニメーション Transition 開始値と終了値の設定 Layer Group 空のマクロパッチを生成 Hit Area クリック可能なエリアを生成 Phone モバイルデバイスのエミュレータを生成 Timer タイマーの実行 Counter 2 カウンターらしい（よく分かってない） Progress 取得値を 0 と 1 に設定？（よく ry） Origami に備わっているパッチ 1.1 で追加されたパッチ
25. /// Designers Pit /// 25 とりあえずスクロールさせてみる。
26. /// Designers Pit /// 26 Origami 基礎編 Scroll/Bouncy Animation Scroll と Bouncy Animation をライブラリから 探しだして配置する。 Enter キーで 配置できる
27. /// Designers Pit /// 27 こいつ……動くぞ！
28. /// Designers Pit /// 28 でもちょっと待って！
29. /// Designers Pit /// 29 Origami 基礎編 Layer Group Y 位置ズレてるし走らせた時にバウンスしてるし… これじゃダサい！
30. /// Designers Pit /// 30 マクロパッチを使って ダサくなくする！
31. /// Designers Pit /// 31 Origami 基礎編 Layer Group Layer Group を新しく配置して、Layer と Image をカットする。
32. /// Designers Pit /// 32 Origami 基礎編 Layer Group Layer Group をダブルクリックして中に入り、 Layer と Image をペーストする。 ここから 上の階層に戻れる （ショートカット：⌘ +U）
33. /// Designers Pit /// 33 Origami 基礎編 Layer Group Layer Group を Layer の Image に繋げる。
34. /// Designers Pit /// 34 Origami 基礎編 Layer Group さらに、Layer Group と Scroll の Image を繋げる。 なんかこれがポイントっぽい。
35. /// Designers Pit /// 35 （何故か）ダサくなくなった！！！
36. /// Designers Pit /// 36 Origami 基礎編 Color Transition 2 色間をフェードさせる Image Transition 2 つの画像をフェードさせる Layer 画像に階層情報を持たせる Text Layer テキストをレイヤーとして配置 Button テキスト + 背景をボタンとして配置 Fill Layer 画面全体を覆う矩形を生成 Switch ある状態のオンオフの切り替え Scroll 画像のスクロール Bouncy Animation 弾力性のあるアニメーション Classic Animation 弾力性のないアニメーション Transition 開始値と終了値の設定 Layer Group 空のマクロパッチを生成 Hit Area クリック可能なエリアを生成 Phone モバイルデバイスのエミュレータを生成 Timer タイマーの実行 Counter 2 カウンターらしい（よく分かってない） Progress 取得値を 0 と 1 に設定？（よく ry） Origami に備わっているパッチ 1.1 で追加されたパッチ
37. /// Designers Pit /// 37 あるエリアをクリックしたら 画像が拡大するようにしてみる。
38. /// Designers Pit /// 38 Origami 基礎編 Hit Area/Interaction 2/Switch/Transition Hit Area、Interaction 2、Switch、Transition を繋げて Layer の Scale に結びつける。
39. /// Designers Pit /// 39 何をやったか？
40. /// Designers Pit /// 40 Origami 基礎編 Hit Area/Interaction 2/Switch/Transition ①まずはエリアを作成。位置とかサイズ決める。 ②エリアにインタラクションを追加する。 今回の場合は Click。 「エリアをクリックしたら〜」となる。 右上のポチと左上のポチを繋げると、 それに対してのみアクションが適用される。
41. /// Designers Pit /// 41 Origami 基礎編 Hit Area/Interaction 2/Switch/Transition ③エリアをクリックしたら ◯◯を ON/OFF する（◯◯は右のパッチ） なんか Transition の後ろに持っていったら 動きが微妙だったので前に持ってきた
42. /// Designers Pit /// 42 Origami 基礎編 Hit Area/Interaction 2/Switch/Transition ④最初の値は 1 だけど ON になったら 2 になる
43. /// Designers Pit /// 43 Hit Area を Click するたびに Start Value と End Value を Switch で切り替える （今回は End Value が 2 なので 2 倍の大きさになる）
44. /// Designers Pit /// 44 切り替える先が Position ならオブジェクトが移動する。 Opacity なら透明度。 Rotation なら回転軸。などなど… Interaction 2+Switch+Transition の組み合わせはお世話になります。
45. /// Designers Pit /// 45 Origami 基礎編 Timer ちなみに Timer を挟むとアクションを遅延させることができる。 Timer は QC にデフォで入ってる Smooth パッチと合わせたりする。
46. /// Designers Pit /// 46 Origami 基礎編 Color Transition 2 色間をフェードさせる Image Transition 2 つの画像をフェードさせる Layer 画像に階層情報を持たせる Text Layer テキストをレイヤーとして配置 Button テキスト + 背景をボタンとして配置 Fill Layer 画面全体を覆う矩形を生成 Switch ある状態のオンオフの切り替え Scroll 画像のスクロール Bouncy Animation 弾力性のあるアニメーション Classic Animation 弾力性のないアニメーション Transition 開始値と終了値の設定 Layer Group 空のマクロパッチを生成 Hit Area クリック可能なエリアを生成 Phone モバイルデバイスのエミュレータを生成 Timer タイマーの実行 Counter 2 カウンターらしい（よく分かってない） Progress 取得値を 0 と 1 に設定？（よく ry） Origami に備わっているパッチ 1.1 で追加されたパッチ
47. /// Designers Pit /// 47 以上で Origami の簡単な基礎をおさえることができました。
48. /// Designers Pit /// 48 アプリの機能から挙動を考えてみる 応用編
49. /// Designers Pit /// 49 成果物
50. /// Designers Pit /// 50 Origami 応用編 画像を置く とりあえず TabBar.png と NavBar.png を置く。
51. /// Designers Pit /// 51 Origami 応用編 Image Transition まずは TabBar の仕組みを先に作ります。 Origami プリインの Image Transition を置く。
52. /// Designers Pit /// 52 Origami 応用編 Image Transition Image Transition を Layer に繋げる。
53. /// Designers Pit /// 53 Origami 応用編 Image Transition btn_tab_newcard_default.png を置く。
54. /// Designers Pit /// 54 Origami 応用編 Image Transition Layer から切り離す。
55. /// Designers Pit /// 55 Origami 応用編 Image Transition 同じ要領で btn_tab_newcard_disable.png も置き、 normal を Start Image、Disable を End Image に繋げる。 Anchor Point: Bottom Center Y Pos: 8
56. /// Designers Pit /// 56 Origami 応用編 Image Transition TabBar、Button を選択して
57. /// Designers Pit /// 57 Origami 応用編 Image Transition マクロパッチにまとめる（画面を綺麗にするため） 。 とりあえず TabBar は一旦寝かしておく。
58. /// Designers Pit /// 58 Origami 応用編 画像を置く 次にリストを作る。 Layer Group と Layer を新規で配置して
59. /// Designers Pit /// 59 Origami 応用編 画像を置く Layer Group の中に Lists.png を置く。
60. /// Designers Pit /// 60 見た目が整った！！！
61. /// Designers Pit /// 61 ここからインタラクションを 考えていきます。
62. /// Designers Pit /// 62 Origami 応用編 インタラクションの付加 Lists.png の他に Menu.png も置き、 Scroll を繋げる。
63. /// Designers Pit /// 63 Origami 応用編 インタラクションの付加 毎度おなじみ？ Hit Area + Interaction 2 + Switch + Transition を作成。 Anchor Point: Top Right X Pos: -22 / Y Pos :-55 Width: 120 / Height: 60 Start Value: 0 End Value: 380
64. /// Designers Pit /// 64 Origami 応用編 インタラクションの付加 List の Layer Group に潜って Bouncy Animation を List の X Pos と繋げる。
65. /// Designers Pit /// 65 Origami 応用編 Publish Inputs Bouncy Animation を右クリックして Publish Inputs -> Number を選択する。
66. /// Designers Pit /// 66 Publish Inputs / Outputs を設定することで 上の階層にポートの口（くち）を出すことができます。
67. /// Designers Pit /// 67 Origami 応用編 Publish Inputs なんか出てきた！ので Transition の Value と Number を繋げる。
68. /// Designers Pit /// 68 Hit Area をクリックするとリストが動いた！
69. /// Designers Pit /// 69 この調子で TabBar にも変化を与えてみましょう。
70. /// Designers Pit /// 70 Origami 応用編 Conditional 新登場 Conditional。 これは QC に元からあるパッチです。簡単に言うと if 文のようなもの。
71. /// Designers Pit /// 71 Conditional を使って何をやるか？ 今までは Interaction 2 と Switch を使って 「クリックされたら◯◯する」という命令の行き帰りだけでした。 Conditional を挟むことで 「◯◯の値が◯◯でなかったら◯◯する」 というような命令を作ることができます。 今回は 「Hit Area がクリックされたら Button を disable に切り替える」 という動きを作ります。
72. /// Designers Pit /// 72 Origami 応用編 Conditional Conditional のインスペクタを 下図のように設定する。
73. /// Designers Pit /// 73 Origami 応用編 Conditional TabBar のマクロパッチに潜って Image Transition の Progress を Publish する。
74. /// Designers Pit /// 74 切り替わった！！！
75. /// Designers Pit /// 75 ここから先は時間があれば、 、
76. /// Designers Pit /// 76 Origami 応用編 Multiplexer/Logic List の Layer Group に潜って AddCategory.png を置き いつものセット + Bouncy Animation を作成し、Y Pos に繋げる。 Anchor Point: Bottom Center Start Value: 0 End Value: 98
77. /// Designers Pit /// 77 Origami 応用編 Multiplexer/Logic Hit Area の Y Pos を Scroll と繋げる。 ここまでで、AddCategory.png の出し入れができるはず。
78. /// Designers Pit /// 78 Origami 応用編 Multiplexer/Logic さらに Conditional を加える。 （今回は画面外に出し、List.png がスライドするタイミングで出現させる） Start Value: -400 End Value: 0
79. /// Designers Pit /// 79 Origami 応用編 Multiplexer/Logic こんな感じの全体像になりました。
80. /// Designers Pit /// 80 でもちょっと待って！
81. /// Designers Pit /// 81 この状態で AddCategory は出したくない。 。
82. /// Designers Pit /// 82 ので！
83. /// Designers Pit /// 83 /// Designers Pit /// 83 少し条件を複雑にしてみます。
84. /// Designers Pit /// 84 AddCategory.png は Menu 上の Hit Area（+ ボタン） を タップすると出し入れができる が、 NavBar 上の Hit Area（" 完了 " ラベル）の Switch が オフになった場合 は 「元に戻す（画面内に出さない） 」 。 という条件をつくってみる。
85. /// Designers Pit /// 85 QC に入っている 「Multiplexer」と「Logic」の 2 つを駆使します。
86. /// Designers Pit /// 86 Origami 応用編 Multiplexer/Logic とりあえず、まずは Conditional を置く。 First Value を Publish Inputs で上の階層に。
87. /// Designers Pit /// 87 Origami 応用編 Multiplexer/Logic Multiplexer を置く。
88. /// Designers Pit /// 88 Origami 応用編 Multiplexer/Logic Source Index に Conditional の Result を、 Source #0 に Switch の On/Off を繋げる。
89. /// Designers Pit /// 89 Origami 応用編 Multiplexer/Logic 次に Logic を置く。ダブルクリックで OR に変更。 ぶっちゃけ Logic がどういうものかはまだよく分かってないです。 。
90. /// Designers Pit /// 90 Origami 応用編 Multiplexer/Logic 左上のポートに Interaction 2 の Click を、 左下のポートに Multiplexer の Output を繋げ、出力先を Switch にする。
91. /// Designers Pit /// 91 Origami 応用編 Multiplexer/Logic 1 つ上の階層に戻り、Transition の Value と、Publish しておいた First Value を繋げる。
92. /// Designers Pit /// 92 できた ハズ
93. /// Designers Pit /// 93 まとめ
94. /// Designers Pit /// 94 まとめ ・できることとできないことがある。 ・他のツールと比較して、メリットもデメリットもある。 ・細かい設計を考えることもできるが、時間がかかる。 ・QC について熟知する必要がある。 ・やっぱり最初のとっかかりがむずかしい。 ・実機に入れる手段がようわからん。 ・それでも、パッチを繋げて動かすのは楽しい。
95. /// Designers Pit /// 95 まとめ おまけ〜実機での表示〜
96. /// Designers Pit /// 96 まとめ ・まずは基本から。ネットで情報を集めたり、鹿野さんの本読んだり。 ・いきなり最終成果物に挑まない。小さいブロックに切り分けて考える。 ・うまくいかない時はインスペクタを見ながら流れを逆算してみる。 ・Facebook ページからみんなの作品を DL して学ぶ。 Origami マスターになるために
97. /// Designers Pit /// 97 参考資料 参考資料 Facebook Origami Origami Community Prototyping with Facebook Origami (Viemo) Prototyping With Quartz Composer (Gibbon) Introducing Origami for Quartz Composer (Medium) Quartz Composer Book - PDF edition KanoLab
98. /// Designers Pit /// 98 ありがとうございました。