More Related Content
More from Ryo Yoshitake (6)
Designers Pit 01 Origamiを使ったプロトタイプ作成を学ぼう
- 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 時間程度。
ニャーン
- 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 で作る、が効果的に成果を得られそうな感触。
- 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 にあるパッチも有効活用しなければなりません。
そのあたりは独学が必要となります。
- 22. /// Designers Pit /// 22
Origami 基礎編 画像を置く
Sleipnir.png を D&D で置く。
この数字が高いほど
上のレイヤーに置かれる
ダブルクリックで
名前が変えられる
- 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 で追加されたパッチ
- 26. /// Designers Pit /// 26
Origami 基礎編 Scroll/Bouncy Animation
Scroll と Bouncy Animation をライブラリから
探しだして配置する。
Enter キーで
配置できる
- 29. /// Designers Pit /// 29
Origami 基礎編 Layer Group
Y 位置ズレてるし走らせた時にバウンスしてるし…
これじゃダサい!
- 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 を繋げる。
なんかこれがポイントっぽい。
- 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 で追加されたパッチ
- 38. /// Designers Pit /// 38
Origami 基礎編 Hit Area/Interaction 2/Switch/Transition
Hit Area、Interaction 2、Switch、Transition を繋げて
Layer の Scale に結びつける。
- 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 で追加されたパッチ
- 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 を置く。
- 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
- 57. /// Designers Pit /// 57
Origami 応用編 Image Transition
マクロパッチにまとめる(画面を綺麗にするため)。
とりあえず TabBar は一旦寝かしておく。
- 58. /// Designers Pit /// 58
Origami 応用編 画像を置く
次にリストを作る。
Layer Group と Layer を新規で配置して
- 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 を繋げる。
- 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 する。
- 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
- 84. /// Designers Pit /// 84
AddCategory.png
は
Menu 上の Hit Area(+ ボタン)
を
タップすると出し入れができる
が、
NavBar 上の Hit Area(" 完了 " ラベル)の Switch
が
オフになった場合
は
「元に戻す(画面内に出さない)」。
という条件をつくってみる。
- 86. /// Designers Pit /// 86
Origami 応用編 Multiplexer/Logic
とりあえず、まずは Conditional を置く。
First Value を Publish Inputs で上の階層に。
- 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 を繋げる。
- 94. /// Designers Pit /// 94
まとめ
・できることとできないことがある。
・他のツールと比較して、メリットもデメリットもある。
・細かい設計を考えることもできるが、時間がかかる。
・QC について熟知する必要がある。
・やっぱり最初のとっかかりがむずかしい。
・実機に入れる手段がようわからん。
・それでも、パッチを繋げて動かすのは楽しい。
- 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