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

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

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

サイトのキャプチャ

Facebook Origami

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

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

サイトのキャプチャ

Examples -Origami

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

サイトのキャプチャ

Examples -Origami

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

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

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

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

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

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

sponsors

top of page

©2019 coliss