Blog「株式会社LIFULL(ライフル)」の社員によるブログです。OrigamiApple原理主義者の大坪です。Facebookが米国で2月3日に新しいアプリ、"Paper"を公開するというニュースが流れました。Vimeo.ふーん、きっと日本で公開されれば普通Facebookを見るのもこちらに切り替えるんだろうなあ。なんたって今のFacebookアプリは,,ところでこれ写真の上に文字を重ねるのどうやってるんだろう、とかのんびり考えていたわけです。している場合ではなかった。次に出てきたのがこのニュースです。designいいかげんな訳:しかしPaperの開発に使われたツールについては聞いたことがないかもしれない。Facebookはインタフェースのラピッドプロトタイピングツールとして"Origami"を開発した。それを使えば、デザインチームは、コードを書くエンジニアの助けなしに、複雑なアニメーションを作り、テストすることができる。引用先の表現を借りれば「インタラクションデザインにとってのPhotoshop」つまりは必携ツール、とのこと。「iOS7からは動きのデザインが重要になるよねー。動きのデザインってどうやってやればいいのー。デザイナーとエンジニアもっと協力しないとねー」とか他人ごとのように書いていたのがほぼ2ヶ月前。これがチンピラエンジニアとFacebookチームの差異というものなのでしょうか。彼らは単に嘆いているのではなく、「動きのデザイン」を可能にするツールを作成し、かつ(気前のいいことに)無料で公開しているわけです。Composerのプラグインとして提供されています。Tigerの「目玉機能」と称したビジュアルなプログラミング環境です。興味深いものの、なかなか広く使われていなかった技術でもありました。Composerの画面だ。その上で例えばこんな動きを試すことができます。(これはFacebookが公開しているサンプルです)こうした「動き」の検討が紙の上で可能でしょうか?そして今までこうした「動き」のプロトタイプがエンジニアの悲鳴もしくは怨嗟の言葉抜きで可能だったでしょうか?「ほら、こうやって上にスクロールするとメニューが”にゅい”っと隠れて、でもって指を離すとちょっとバウンドして」とか言ったところで話はさっぱり進まない。Composerの「プログラミング」を思い出したり調べたりしているわけです。下の図がその「プログラミング」の画面。とっつきやすそうに見えるが、思ったとおりの動きを実現するのはやはり簡単ではない。実際にPaperのデザイナー達は、これを使ってPaperのプロトタイプを作ったのです。designPaperで使われているほとんどのアニメーションは、Origami上でプロトタイプされ、そのあと実際のアプリ開発を行うプログラマーに渡された。Origamiで作られたプロトタイプは、デザイナーからプログラマーに渡された「仕様書」でもあったわけです。した新しいプロセスは正しい方向に向けた第一歩であることは間違いない。designかなりの意訳:Origamiが高校や大学で若いデザイナー達の役に立つことをFacebookは確信している。Origamiを使うことで、静的な画像のデザインではなく、動的なインタラクションの流れについてより深く考えるようになるだろう。近い将来、採用面接で「Origami使ったことないの?それでアプリのデザイナー志望?」と言われる日が来るのでしょうか。11:58Facebookが公開したインタラクションデザインのための"Photoshop"(無料!)Tweet関連記事2014-08-08デザイナーと一口に言うけれどApple原理主義者の大坪です。PC画面のデザイン/腕につけたディスプレイ上のデザインApple原理主義者の大坪です。Example:写経と実験から始めるOrigamiその2(スクロール+バーを隠す編)Apple原理主義者の大坪です。株式会社LIFULL「LIFULL」とは、世界中の人々の人生やくらし(LIFE)を満たす(FULL)企業へと成長していきたいという想いをこめた造語です。LIFULLはてなブログをはじめよう!nextdeveloperさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。