LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

Origamiを使った「デザイン」事例@Facebook

最近「Apple原理主義者」と合わせ「Origami原理主義者」と名乗ろうかと考えている大坪です。

先日行われたFacebookのf8 デベロパーカンファレンスでのOrigamiのデモを紹介します。

まずこのビデオ。新しくなったFacebook Messengerアプリに関するプレゼンですが..

この「Facebook Messengerアプリ」のように見えるものは、一行のコードも含まず、デザイナーが「空いた時間を使って一週間で作った」とのこと。

このプレゼン中で述べられているOrigami(Quartz Composer)の特徴は

  • Visual: not like Javascript

  • Real time : not like After Effects

  • Non-Linear: not like Flash

Photoshopで静的なイメージを作るより、少しデザインにかかる時間は増える。しかし開発全体で観れば大きな時間の節約になる。

他にも例えばメッセージ一覧画面のデザインを決めるまでにどれだけのパターンを試したのか、アイコンを何種類試し最終的なデザインに落ち着いたのか、サウンドは、など見所が満載のプレゼンテーションです。

もう一つは本家Paperのプレゼンテーション中のデモ。(画面左上のOrigamiアイコンに注意してください)

このビデオを見ると、Paperが実際のコードで動く前に、Origamiで非常に詳細に「デザイン」されていたことが見て取れます。

このプレゼンをしているのはPaperのEngineeringチームのマネージャなのですが、

「このプロトをみているうちに、心配になってきた」

と言っています。そりゃそうだろう。Origami上で見事に動いても、同じことが実コードで再現できるとは限りません。このプロトのように「誰も観た事がない」ようなインタラクションが実現されていればなおさらのことです。

どうしたらこのような動きが実現できるのか?「普通に実装」するとこんなぎこちない動きになってしまいます。

ああ、、そうだよ。普通に作るとこうなっちゃうんだよ(体験談)

ではここからPaperチームはどのような方法をとったか、についてはまた別の機会に(とか書いちゃっていいのか)

このプレゼンの最後の方にこういう文字がでてきます。

"Accept the challenge of ambitious design"

野心的なデザインのチャレンジを受けて立つ

Paperのデザインチームは

「今使うことができる画面部品」

からスタートしたのではなく

「モバイルアプリのUIはどうあるべきか」

からスタートし、Origamiでプロトを作り上げました。エンジニアチームはそれを

「信じられないくらいスルスル動く」

実際のアプリに結実させた。

マウスとキーボードで、離れた場所にある大画面を操作するデスクトップアプリのUIと、手のひらの中にあるディスプレイをタッチで操作するモバイルアプリのUIは根本的に違うものであるべきではないか。こうして文字にすると当たり前のようですが、我々はまだこの「違い」に気が付き始めたところなのかもしれません。

とかなんとか取り乱しているのは私だけですか?そうですか。