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

Slide 1

Slide 1 text

Designer's Pit 01

Slide 2

Slide 2 text

/// Designers Pit /// 2 タイムテーブル 19:00　講師紹介・挨拶、参加者自己紹介 19:10　イントロダクション〜 Origami について〜 19:20　ワークショップ（基礎編 30 分・応用編 30 分を予定） 20:30　まとめ 20:40　終了 20:45　次回 LT 21:00　退室

Slide 3

Slide 3 text

/// Designers Pit /// 3 自己紹介 http://yo-ry.hateblo.jp/ 吉竹遼（よしたけりょう） 1987 年 4 月生まれ。 2011 年よりフェンリルで UI デザイナーとして働いています。 Origami 歴はトータル 20 時間程度。ニャーン

Slide 4

Slide 4 text

/// Designers Pit /// 4 イントロダクション

Slide 5

Slide 5 text

/// Designers Pit /// 5 プロトタイピングの種類ペーパープロトタイプ紙ベースでプロトタイプを作成し、クライアントやエンジニアと認識合わせを行います。デバイスを模したベースの紙上に UI コンポーネントの形をした紙片を置き、福笑いのように入れ替えながらレイアウトについて議論したり、紙芝居のように 1 枚 1 枚画面を遷移の順にスライドして流れを確認したりします。 UI プロトタイプ要件も固まり、デザインカンプを作成した後は、より実際のプロダクトに近いプロトタイプを作ることで、具体的なイメージ・全体的な流れをクライアントと共有できます。デザインカンプを用いて作成することがほとんどとなり、UI の振る舞い方や画面遷移のトランジションなど、より本物らしいプロトタイプを作ることが可能です。

Slide 6

Slide 6 text

/// Designers Pit /// 6 プロトタイピングの種類インタラクティブプロトタイプビデオプロトタイプは一方通行なアウトプットとなるため、見栄えはいいものの実際に触って試せないという弱点があります。 UI プロトタイプとビデオプロトタイプの中間くらいに位置するのがインタラクティブプロトタイプです。名前通りユーザーのフィードバックを受けて実際に動くプロトタイプを作成することができます。プロトタイピングのためのツールやサービスは色々あるので、詳しく知りたい方は http://yo-ry.hateblo.jp/entry/2014/02/13/204727 をどうぞ。ビデオプロトタイプ UI プロトタイプは画面遷移の作成・確認が主となるため、細かいアニメーションは機能的に補えないものがほとんどです。また、新しい UI のかたちを考える際にもツールとしては不適切です。そのような「間の動き」を補完したり、ゼロから新しい UI を作る場合などに、動画を使ったプロトタイプが用いられます。

Slide 7

Slide 7 text

/// Designers Pit /// 7 Origami とは何か Origami とは、Facebook Design チームがプロトタイピングを行うために開発した『Quartz Composer』用のツールキットです。例えるなら、ライブラリとかアドオン的な存在？本来であればスクリーンセーバーや VJ っぽいプログラムを作るための QC を使ってプロトタイプを作成するという面白い試みです。あの Facebook Paper なども、Origami を使ってプロトタイピングをしたそうです。 http://facebook.github.io/origami/

Slide 8

Slide 8 text

/// Designers Pit /// 8 他のツールとの比較 After Effects インタラクティブ性作成時間参考資料自由度端末による確認 Flash Origami Framer

Slide 9

Slide 9 text

/// Designers Pit /// 9 他のツールとの比較 After Effects インタラクティブ性作成時間参考資料自由度端末による確認 Flash Origami Framer もちろん、時と場合によって印象は変わります。というか、この表は完全に主観 (Flash 触ったことない…)。何を作るかによって作成時間は上下するし端末による確認も、見て確認なのか触って確認なのかで大きく変わります。

Slide 10

Slide 10 text

/// Designers Pit /// 10 なぜ Origami なのか？ Origami を選ぶワケ・ビデオプロトタイプのように一方向性でない。・Framer のようにプログラムを書かなくてもよい。・Facebook ページがそこそこ賑わっている。・定型的なインタラクションならすぐ作れる。・慣性の調整が簡単にできる。 Origami を選ばないワケ・参考になるドキュメントが少ない。・初期の学習曲線の伸びが低い。・Apple に見放された環境である。・自由度を得るにはプログラムの記述が必要。・実装面での効率化はあまり図れない。

Slide 11

Slide 11 text

/// Designers Pit /// 11 なぜ Origami なのか？どんな時に Origami を使うべきか？ Flinto や Briefs など静的イメージのみで作るプロトタイプでは伝わらない、でも動きを正確に伝えたい部分を作りたい時。動作の繰り返しや行ったり来たりを検証して、自分が頭の中で思い描いていたインタラクションと差異がないか確認したい時。この 2 つがメインかなと、個人的には思います。全体の設計の流れは Flinto や Briefs で行い、確認したい箇所ごとに Origami で作る、が効果的に成果を得られそうな感触。

Slide 12

Slide 12 text

/// Designers Pit /// 12 Hello,Origami

Slide 13

Slide 13 text

/// Designers Pit /// 13 というわけで、まずは QC について軽くお勉強。

Slide 14

Slide 14 text

/// Designers Pit /// 14 QC について QC は「パッチ」と呼ばれるプログラムのブロックを線で繋ぐことで、結果をアウトプットします。例えば下図では Interaction2 の「Click」が Switch の「Flip」に繋がり（クリックしたら切り替わる）、Bouncy Animation（値の変化の差分を見せる）を介して、Layer の「Width」「Height」を Transition の「Value」によって変化（拡大）させています。 QC のプログラムは左から右へ流れるパッチポートケーブル

Slide 15

Slide 15 text

/// Designers Pit /// 15 QC についてまた、パッチを置き過ぎるとエディタ画面が汚くなってしまうので、Photoshop のレイヤーグループに相当するマクロパッチを生成することで、画面がきれいに片付きます。実は下図のマクロパッチは、前ページのパッチを格納しています。これがマクロパッチ（角が四角い）

Slide 16

Slide 16 text

/// Designers Pit /// 16 QC について Patch Library は QC にインストールされているパッチを検索して探すことができます。ここからエディタ画面へパッチを置いていきます。 Patch Inspector は選択したパッチの設定を閲覧・編集することができます。ちなみにインスペクタ内の数値や状態を変更しても⌘ +Z で元に戻らないので注意！

Slide 17

Slide 17 text

/// 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 で追加されたパッチ

Slide 18

Slide 18 text

/// Designers Pit /// 18 Origami にはモバイルアプリの挙動などを再現するためのパッチが多く用意されていますが、自分の思い描いた動きを作るためにはもともと QC にあるパッチも有効活用しなければなりません。そのあたりは独学が必要となります。

Slide 19

Slide 19 text

/// Designers Pit /// 19 それではさっそく、簡単なものから作ってみましょう。基礎編

Slide 20

Slide 20 text

/// Designers Pit /// 20 Origami 基礎編テンプレートテンプレートを開いてみる。

Slide 21

Slide 21 text

/// Designers Pit /// 21 Origami 基礎編テンプレート Render in image をダブルクリックして下の階層に入る。

Slide 22

Slide 22 text

/// Designers Pit /// 22 Origami 基礎編画像を置く Sleipnir.png を D&D で置く。この数字が高いほど上のレイヤーに置かれるダブルクリックで名前が変えられる

Slide 23

Slide 23 text

/// Designers Pit /// 23 Origami 基礎編ビューワ出た！ QC はカンバスど真ん中が x0,y0 になる。

Slide 24

Slide 24 text

/// 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 で追加されたパッチ

Slide 25

Slide 25 text

/// Designers Pit /// 25 とりあえずスクロールさせてみる。

Slide 26

Slide 26 text

/// Designers Pit /// 26 Origami 基礎編 Scroll/Bouncy Animation Scroll と Bouncy Animation をライブラリから探しだして配置する。 Enter キーで配置できる

Slide 27

Slide 27 text

/// Designers Pit /// 27 こいつ……動くぞ！

Slide 28

Slide 28 text

/// Designers Pit /// 28 でもちょっと待って！

Slide 29

Slide 29 text

/// Designers Pit /// 29 Origami 基礎編 Layer Group Y 位置ズレてるし走らせた時にバウンスしてるし… これじゃダサい！

Slide 30

Slide 30 text

/// Designers Pit /// 30 マクロパッチを使ってダサくなくする！

Slide 31

Slide 31 text

/// Designers Pit /// 31 Origami 基礎編 Layer Group Layer Group を新しく配置して、Layer と Image をカットする。

Slide 32

Slide 32 text

/// Designers Pit /// 32 Origami 基礎編 Layer Group Layer Group をダブルクリックして中に入り、 Layer と Image をペーストする。ここから上の階層に戻れる（ショートカット：⌘ +U）

Slide 33

Slide 33 text

/// Designers Pit /// 33 Origami 基礎編 Layer Group Layer Group を Layer の Image に繋げる。

Slide 34

Slide 34 text

/// Designers Pit /// 34 Origami 基礎編 Layer Group さらに、Layer Group と Scroll の Image を繋げる。なんかこれがポイントっぽい。

Slide 35

Slide 35 text

/// Designers Pit /// 35 （何故か）ダサくなくなった！！！

Slide 36

Slide 36 text

/// 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 で追加されたパッチ

Slide 37

Slide 37 text

/// Designers Pit /// 37 あるエリアをクリックしたら画像が拡大するようにしてみる。

Slide 38

Slide 38 text

/// Designers Pit /// 38 Origami 基礎編 Hit Area/Interaction 2/Switch/Transition Hit Area、Interaction 2、Switch、Transition を繋げて Layer の Scale に結びつける。

Slide 39

Slide 39 text

/// Designers Pit /// 39 何をやったか？

Slide 40

Slide 40 text

/// Designers Pit /// 40 Origami 基礎編 Hit Area/Interaction 2/Switch/Transition ①まずはエリアを作成。位置とかサイズ決める。 ②エリアにインタラクションを追加する。今回の場合は Click。「エリアをクリックしたら〜」となる。右上のポチと左上のポチを繋げると、それに対してのみアクションが適用される。

Slide 41

Slide 41 text

/// Designers Pit /// 41 Origami 基礎編 Hit Area/Interaction 2/Switch/Transition ③エリアをクリックしたら ◯◯を ON/OFF する（◯◯は右のパッチ）なんか Transition の後ろに持っていったら動きが微妙だったので前に持ってきた

Slide 42

Slide 42 text

/// Designers Pit /// 42 Origami 基礎編 Hit Area/Interaction 2/Switch/Transition ④最初の値は 1 だけど ON になったら 2 になる

Slide 43

Slide 43 text

/// Designers Pit /// 43 Hit Area を Click するたびに Start Value と End Value を Switch で切り替える（今回は End Value が 2 なので 2 倍の大きさになる）

Slide 44

Slide 44 text

/// Designers Pit /// 44 切り替える先が Position ならオブジェクトが移動する。 Opacity なら透明度。 Rotation なら回転軸。などなど… Interaction 2+Switch+Transition の組み合わせはお世話になります。

Slide 45

Slide 45 text

/// Designers Pit /// 45 Origami 基礎編 Timer ちなみに Timer を挟むとアクションを遅延させることができる。 Timer は QC にデフォで入ってる Smooth パッチと合わせたりする。

Slide 46

Slide 46 text

/// 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 で追加されたパッチ

Slide 47

Slide 47 text

/// Designers Pit /// 47 以上で Origami の簡単な基礎をおさえることができました。

Slide 48

Slide 48 text

/// Designers Pit /// 48 アプリの機能から挙動を考えてみる応用編

Slide 49

Slide 49 text

/// Designers Pit /// 49 成果物

Slide 50

Slide 50 text

/// Designers Pit /// 50 Origami 応用編画像を置くとりあえず TabBar.png と NavBar.png を置く。

Slide 51

Slide 51 text

/// Designers Pit /// 51 Origami 応用編 Image Transition まずは TabBar の仕組みを先に作ります。 Origami プリインの Image Transition を置く。

Slide 52

Slide 52 text

/// Designers Pit /// 52 Origami 応用編 Image Transition Image Transition を Layer に繋げる。

Slide 53

Slide 53 text

/// Designers Pit /// 53 Origami 応用編 Image Transition btn_tab_newcard_default.png を置く。

Slide 54

Slide 54 text

/// Designers Pit /// 54 Origami 応用編 Image Transition Layer から切り離す。

Slide 55

Slide 55 text

/// Designers Pit /// 55 Origami 応用編 Image Transition 同じ要領で btn_tab_newcard_disable.png も置き、 normal を Start Image、Disable を End Image に繋げる。 Anchor Point: Bottom Center Y Pos: 8

Slide 56

Slide 56 text

/// Designers Pit /// 56 Origami 応用編 Image Transition TabBar、Button を選択して

Slide 57

Slide 57 text

/// Designers Pit /// 57 Origami 応用編 Image Transition マクロパッチにまとめる（画面を綺麗にするため）。とりあえず TabBar は一旦寝かしておく。

Slide 58

Slide 58 text

/// Designers Pit /// 58 Origami 応用編画像を置く次にリストを作る。 Layer Group と Layer を新規で配置して

Slide 59

Slide 59 text

/// Designers Pit /// 59 Origami 応用編画像を置く Layer Group の中に Lists.png を置く。

Slide 60

Slide 60 text

/// Designers Pit /// 60 見た目が整った！！！

Slide 61

Slide 61 text

/// Designers Pit /// 61 ここからインタラクションを考えていきます。

Slide 62

Slide 62 text

/// Designers Pit /// 62 Origami 応用編インタラクションの付加 Lists.png の他に Menu.png も置き、 Scroll を繋げる。

Slide 63

Slide 63 text

/// 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

Slide 64

Slide 64 text

/// Designers Pit /// 64 Origami 応用編インタラクションの付加 List の Layer Group に潜って Bouncy Animation を List の X Pos と繋げる。

Slide 65

Slide 65 text

/// Designers Pit /// 65 Origami 応用編 Publish Inputs Bouncy Animation を右クリックして Publish Inputs -> Number を選択する。

Slide 66

Slide 66 text

/// Designers Pit /// 66 Publish Inputs / Outputs を設定することで上の階層にポートの口（くち）を出すことができます。

Slide 67

Slide 67 text

/// Designers Pit /// 67 Origami 応用編 Publish Inputs なんか出てきた！ので Transition の Value と Number を繋げる。

Slide 68

Slide 68 text

/// Designers Pit /// 68 Hit Area をクリックするとリストが動いた！

Slide 69

Slide 69 text

/// Designers Pit /// 69 この調子で TabBar にも変化を与えてみましょう。

Slide 70

Slide 70 text

/// Designers Pit /// 70 Origami 応用編 Conditional 新登場 Conditional。これは QC に元からあるパッチです。簡単に言うと if 文のようなもの。

Slide 71

Slide 71 text

/// Designers Pit /// 71 Conditional を使って何をやるか？今までは Interaction 2 と Switch を使って「クリックされたら◯◯する」という命令の行き帰りだけでした。 Conditional を挟むことで「◯◯の値が◯◯でなかったら◯◯する」というような命令を作ることができます。今回は「Hit Area がクリックされたら Button を disable に切り替える」という動きを作ります。

Slide 72

Slide 72 text

/// Designers Pit /// 72 Origami 応用編 Conditional Conditional のインスペクタを下図のように設定する。

Slide 73

Slide 73 text

/// Designers Pit /// 73 Origami 応用編 Conditional TabBar のマクロパッチに潜って Image Transition の Progress を Publish する。

Slide 74

Slide 74 text

/// Designers Pit /// 74 切り替わった！！！

Slide 75

Slide 75 text

/// Designers Pit /// 75 ここから先は時間があれば、、

Slide 76

Slide 76 text

/// 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

Slide 77

Slide 77 text

/// Designers Pit /// 77 Origami 応用編 Multiplexer/Logic Hit Area の Y Pos を Scroll と繋げる。ここまでで、AddCategory.png の出し入れができるはず。

Slide 78

Slide 78 text

/// Designers Pit /// 78 Origami 応用編 Multiplexer/Logic さらに Conditional を加える。（今回は画面外に出し、List.png がスライドするタイミングで出現させる） Start Value: -400 End Value: 0

Slide 79

Slide 79 text

/// Designers Pit /// 79 Origami 応用編 Multiplexer/Logic こんな感じの全体像になりました。

Slide 80

Slide 80 text

/// Designers Pit /// 80 でもちょっと待って！

Slide 81

Slide 81 text

/// Designers Pit /// 81 この状態で AddCategory は出したくない。。

Slide 82

Slide 82 text

/// Designers Pit /// 82 ので！

Slide 83

Slide 83 text

/// Designers Pit /// 83 /// Designers Pit /// 83 少し条件を複雑にしてみます。

Slide 84

Slide 84 text

/// Designers Pit /// 84 AddCategory.png は Menu 上の Hit Area（+ ボタン）をタップすると出し入れができるが、 NavBar 上の Hit Area（" 完了 " ラベル）の Switch がオフになった場合は「元に戻す（画面内に出さない）」。という条件をつくってみる。

Slide 85

Slide 85 text

/// Designers Pit /// 85 QC に入っている「Multiplexer」と「Logic」の 2 つを駆使します。

Slide 86

Slide 86 text

/// Designers Pit /// 86 Origami 応用編 Multiplexer/Logic とりあえず、まずは Conditional を置く。 First Value を Publish Inputs で上の階層に。

Slide 87

Slide 87 text

/// Designers Pit /// 87 Origami 応用編 Multiplexer/Logic Multiplexer を置く。

Slide 88

Slide 88 text

/// Designers Pit /// 88 Origami 応用編 Multiplexer/Logic Source Index に Conditional の Result を、 Source #0 に Switch の On/Off を繋げる。

Slide 89

Slide 89 text

/// Designers Pit /// 89 Origami 応用編 Multiplexer/Logic 次に Logic を置く。ダブルクリックで OR に変更。ぶっちゃけ Logic がどういうものかはまだよく分かってないです。。

Slide 90

Slide 90 text

/// Designers Pit /// 90 Origami 応用編 Multiplexer/Logic 左上のポートに Interaction 2 の Click を、左下のポートに Multiplexer の Output を繋げ、出力先を Switch にする。

Slide 91

Slide 91 text

/// Designers Pit /// 91 Origami 応用編 Multiplexer/Logic 1 つ上の階層に戻り、Transition の Value と、Publish しておいた First Value を繋げる。

Slide 92

Slide 92 text

/// Designers Pit /// 92 できたハズ

Slide 93

Slide 93 text

/// Designers Pit /// 93 まとめ

Slide 94

Slide 94 text

/// Designers Pit /// 94 まとめ・できることとできないことがある。・他のツールと比較して、メリットもデメリットもある。・細かい設計を考えることもできるが、時間がかかる。・QC について熟知する必要がある。・やっぱり最初のとっかかりがむずかしい。・実機に入れる手段がようわからん。・それでも、パッチを繋げて動かすのは楽しい。

Slide 95

Slide 95 text

/// Designers Pit /// 95 まとめおまけ〜実機での表示〜

Slide 96

Slide 96 text

/// Designers Pit /// 96 まとめ・まずは基本から。ネットで情報を集めたり、鹿野さんの本読んだり。・いきなり最終成果物に挑まない。小さいブロックに切り分けて考える。・うまくいかない時はインスペクタを見ながら流れを逆算してみる。・Facebook ページからみんなの作品を DL して学ぶ。 Origami マスターになるために

Slide 97

Slide 97 text

/// 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

Slide 98

Slide 98 text

/// Designers Pit /// 98 ありがとうございました。