Edited at

QuartzComposerでiOSアプリプロトタイピングする必要があるのか #vgadvent2014

More than 3 years have passed since last update.

※これはVOYAGE GROUP エンジニアブログ:Advent Calendar 2014の5日目の記事です。

VoyageGroupエンジニア ガイアです。

ご存知の通り、モバイルアプリ開発はまずプロトタイプを作り、動きを確認するのがよいとされています。

今回はQuartzComposer上で動く、facebook製のツールOrigamiを見ていきましょう。


QuartzComposer

http://ja.wikipedia.org/wiki/Quartz_Composer

パッチをついないでいく形でプログラムしていくApple製のツール。

直感的で強力な、メディアアートのためのプロトタイピングツールだと僕は思っています。

(以前よくお世話になっていました)


Facebook Origami

facebook製のプロトタイピングツール

QuartzComposer上で動くってのがかなり胸熱

日本語の記事もいくつかあります、ちゃんと学びたい人はすぐにリンク先に飛んでください。

インタラクティブデザインプロトタイピングのための Facebook Origami

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


Facebook Origamiをインストールだ!

Facebook Origami Get started now に従ってください。

英語のサイトを見ると発作を起こしそうになるやつのために、手順だけ紹介しておきます。

- Xcodeインストール

- 無料のAppleDeveloper登録

- QuarzComposerインストール

- Facebook Origamiインストール


Sample is Best!

喜んで下さい、facebookチームはサンプルを提供してくれています。

Origami Example alpha and ScaleをダウンロードしてQuartzComposerにドラック&ドロップしましょう。

スクリーンショット 2014-12-05 1.44.52.png

画面表示の部分をクリックすればiPhoneの画面が出てくるはずです。

もちろんこんな一つのパッチで表現できるわけではありません。

マクロパッチをダブルクリックしてみてください。

スクリーンショット 2014-12-05 2.00.44.png

ここが基本の入出力です、デバイスの種類をパッチから選び、(パラメタを開いてそこで変更できます)

でレイヤグループパッチの出力されたimageをPhoneで画面に表示しています。

レイヤグループパッチをダブルクリックしましょう。

スクリーンショット 2014-12-05 1.03.32.png

ここがインタラクションやイメージ出力を管理しているところです。

青いパッチは画面への出力を行うのですが、

レイヤグループパッチの中で画面出力を行うとレイヤグループパッチの出力として扱えます。


まあ、まずは触ってみてください。

- 触る上で知っておくべきこと

- 色
- 青は画面出力
- 紫がデータ入力
- 黒が処理
- パッチの角
- 角丸のパッチが一番最小のパッチ
- 角が尖ったパッチがマクロパッチ


使ってみる

では実際にアプリをプロトタイピングしてみます。


コンセプトと仕様

まずは妄想を膨らませて、どんなアプリを作るか考えます。

Evernote Camera Roll 20141205 211316.jpg

今回は弊社の社内Bar AJITOの混雑具合を表示する、

AJITO運用監視アプリを作りたいと思いました。

AJITOでのひととき

AJITO

写真は株式会社 VOYAGE GROUP に行ってきた! : 941::blogから転載

Evernote Camera Roll 20141205 211317.jpg

- いい感じにAJITOの混雑状況を表示してくれる

- AJITOButtonでみんなにAJITOに入ったことを伝えられる


UIデザイン

次に画面遷移や、言われたむちゃくちゃなことを、UIとして落とし込んでいきます。

今回画面は2つでした、このまま見せても、動きが分からないとか、触ってみないとと言われてしまいます。

Evernote Camera Roll 20141205 212124.jpg

スクリーンショット 2014-12-05 21.14.03.png


プロトタイピング

Facebook Origamiでプロトタイピング

スクリーンショット 2014-12-05 21.33.02.png

- 現在のAJITOの込み具合を色で教えてくれる

 - 緑 空いてる
 - 黄色 ちょっと人が多い
 - 赤 人であふれかえっている
- AJITOへのin通知を出す

スクリーンショット 2014-12-05 21.33.53.pngスクリーンショット 2014-12-05 21.34.04.png

社内のハイパーディレクターの方に見てもらいました。

Evernote Camera Roll 20141205 215017.jpg

ディレクター「この押す感じがすげーいい、採用したいわ」

通常のプロトタイピングにはない、アニメーションまでかなり作り込めるため、そこがこのディレクターの方に

少しだけ刺さったみたいです。

と、実際にアプリのプロトタイプを作ってみるところまでやってみました。


【まとめ】QuartzComposerでiOSアプリプロトタイピングする必要があるのか


ほぼない

まあ他の人も言っていますが、学習コストが高い、プロトタイピングにはリッチすぎる。

デザイナーが使っているであろうツールとはかけ離れている。

ほぼ必要はないと言っていいと思う。

だが、アニメーションが重要になるプロダクト(FacebookのPaperとか)ではもちろん

動的にパラメータを設定できることは非常に価値のあることだと思う。

全体を作るのは難しいが、パラメータを変えるぐらいならだれでもできる。

そういう意味では、Baseのプロジェクトがあれば変更が容易であると言える。

また、ユーザテストにも向いているでしょう。

エンジニアからしたらデザイナがこんなツールばりばり触ってたら冷や汗ものです。

デザイナーの表現方法が広がり、僕らも更に学んでいかなければ、形にはならないでしょう。

なんともエンジニア泣かせのツールです。

さて、この記事はVOYAGE GROUP Advent Calendar 2014、12/5の記事でした。

次は@hagino3000さんらしいので、皆さん、お楽しみに!!