LIFULL Creators Blog

「株式会社LIFULL(ライフル)」の社員によるブログです。

Facebookが公開したインタラクションデザインのための"Photoshop"(無料!)

Apple原理主義者の大坪です。

Facebookが米国で2月3日に新しいアプリ、"Paper"を公開するというニュースが流れました。

Introducing Paper from Facebook on Vimeo.

ふーん、きっと日本で公開されれば普通Facebookを見るのもこちらに切り替えるんだろうなあ。なんたって今のFacebookアプリは,,ところでこれ写真の上に文字を重ねるのどうやってるんだろう、とかのんびり考えていたわけです。

しかしのんびりしている場合ではなかった。次に出てきたのがこのニュースです。

But what you might not have heard is the story of the tool behind Paper--Origami. Facebook developed Origami to be a rapid prototyping tool for interfaces, to allow its designers to create and test complex, original animations without the help of the coding team.

via: Facebook Develops A Photoshop For Interaction Design, And It's Free For Anyone To Use | Co.Design | business + design

いいかげんな訳:しかしPaperの開発に使われたツールについては聞いたことがないかもしれない。Facebookはインタフェースのラピッドプロトタイピングツールとして"Origami"を開発した。それを使えば、デザインチームは、コードを書くエンジニアの助けなしに、複雑なアニメーションを作り、テストすることができる。

引用先の表現を借りれば「インタラクションデザインにとってのPhotoshop」つまりは必携ツール、とのこと。

「iOS7からは動きのデザインが重要になるよねー。動きのデザインってどうやってやればいいのー。紙じゃ無理だよねー。デザイナーとエンジニアもっと協力しないとねー」

とか他人ごとのように書いていたのがほぼ2ヶ月前。これがチンピラエンジニアとFacebookチームの差異というものなのでしょうか。彼らは単に嘆いているのではなく、「動きのデザイン」を可能にするツールを作成し、かつ(気前のいいことに)無料で公開しているわけです。

Origamiは単独のアプリケーションではなく、Quartz Composerのプラグインとして提供されています。Quartz Composerとはなにか?それはある人がMac OS 10.4 Tigerの「目玉機能」と称したビジュアルなプログラミング環境です。とても興味深いものの、なかなか広く使われていなかった技術でもありました。

さっそくダウンロードページから、インストラクションに従ってインストールしてみると、、ををこれは紛う方なき懐かしいQuartz Composerの画面だ。その上で例えばこんな動きを試すことができます。

f:id:nextdeveloper:20140204102343g:plain

(これはFacebookが公開しているサンプルです)

こうした「動き」の検討が紙の上で可能でしょうか?そして今までこうした「動き」のプロトタイプがエンジニアの悲鳴もしくは怨嗟の言葉抜きで可能だったでしょうか?

「ほら、こうやって上にスクロールするとメニューが”にゅい”っと隠れて、でもって指を離すとちょっとバウンドして」

とか言ったところで話はさっぱり進まない。 というわけで

数年ぶりにQuartz Composerの「プログラミング」を思い出したり調べたりしているわけです。下の図がその「プログラミング」の画面。一見とっつきやすそうに見えるが、思ったとおりの動きを実現するのはやはり簡単ではない。

f:id:nextdeveloper:20140206065529j:plain

しかし実際にPaperのデザイナー達は、これを使ってPaperのプロトタイプを作ったのです。

And in fact, almost every animation you see in Paper was prototyped first in Origami before it was handed to Facebook's programmers to build into the real app.

via: Facebook Develops A Photoshop For Interaction Design, And It's Free For Anyone To Use | Co.Design | business + design

Paperで使われているほとんどのアニメーションは、Origami上でプロトタイプされ、そのあと実際のアプリ開発を行うプログラマーに渡された。

つまりOrigamiで作られたプロトタイプは、デザイナーからプログラマーに渡された「仕様書」でもあったわけです。こうした新しいプロセスは正しい方向に向けた第一歩であることは間違いない。

Facebook firmly believes that Origami can strengthen the work of young designers in high school and college today, driving them to think about fluid interaction design rather than static image design.

via: Facebook Develops A Photoshop For Interaction Design, And It's Free For Anyone To Use | Co.Design | business + design

かなりの意訳:Origamiが高校や大学で若いデザイナー達の役に立つことをFacebookは確信している。Origamiを使うことで、静的な画像のデザインではなく、動的なインタラクションの流れについてより深く考えるようになるだろう。

近い将来、採用面接で「Origami使ったことないの?それでアプリのデザイナー志望?」と言われる日が来るのでしょうか。