アニメーションを使ったUIを楽しくデザインできる便利な無料ツール『Origami』の使い方を動画でご紹介

Post on:2015年3月17日

sponsors

去年あたりから、魅力的なプロトタイプ作成ツールがいろいろリリースされ、制作の現場でもそれらをもう使ってるという人も少なくないと思います。

その中の一つ、Facebookの『Origami』の動画コンテンツが公開されたので紹介します。

Origamiは簡単に説明すると、スマホやタブレット、そしてデスクトップのWebページ・アプリのユーザインターフェイスをデザインするOS X用の無料アプリです。Sketchとの相性も非常にいいのも大きな特長です。

Origamiでどんなことができるのかは、下記のExampleページに多数のデモがあります。
先日の記事で紹介した「Windy Effect」もOrigamiで作られたものです。
まずは、インタラクションのデモ。

続いて、インターフェイスのデモ。

使い方のチュートリアルは動画で公開されており、なかなか面白そうです。

Origamiのイントロダクション。画像をタップでズームイン・アウトさせる基本的な使い方の説明。

スクロールのポジションに基づいてFeedを表示したレイヤーをスクロールさせるチュートリアル。

Feedをスワイプして横からコンテンツを表示させるナビゲーション機能を加えるチュートリアル。

ボタンをタップして、Feedに新規ウインドウをアクティブにするチュートリアル。

OrigamiはSketchの相性も抜群。
簡単な操作で、Sketchで作成したドキュメントをOrigamiに統合するチュートリアル。