見出し画像

Origami Studio 3ではじめるインタラクションプロトタイプ - 概要編 -

インタラクションプロトタイピングの重要性

Fluid Interfaceの登場以降、ジェスチャ操作など現実世界に則したインタラクションがより重要になり、それにともなってUIの設計やプロジェクトメンバー間の理解の難易度が高くなるケースが増えてきています。

Origami Studioのような実装レベルに近いインタラクションを実現できるツールをデザイナーが扱えることは、プロダクトのクオリティを左右する設計プロセスやコミュニケーションのレベルを高めるうえで強力なアドバンテージになりえると考えています。


Origami Studio とは?

「Origami Studio 3」は、ジェスチャー操作など高度なインタラクションを実現できるプロトタイピングツールです。

ツール自体はMacOS上で動作しますが、iOS・Androidデバイスで動作確認できる「Origami Live」アプリが用意されていて、ミラーリングで動作確認しながら制作したり、ファイルを共有すればデバイス単体でもプロトタイプの確認ができるのが特徴です。

栄枯盛衰のペースが早いプロトタイピングツールですが、開発元はFacebookで2014年から継続的に開発・提供されているので信頼性も高く、オフィシャルなコミュニティ(英語ベースですが)もあるので、安心して使っていけそうなこともポイントです。

・Appleの開発ツールに含まれていた「Quartz Composer」がベース
・開発者のキーマンのひとりはAppleのUIデザイナーでもあったMike Matas氏
・2020年8月に新機能が追加されたOrigami Studio 3がリリース


制作のながれ

Origami Studioの基本的な構造は「レイヤーや画像などに対してタップなどのインタラクションがあったときに何かしらの動作を発生させる」というものです。

画像1

動作はパッチと呼ばれるブロック形状のUIでコントロールでき、それらをケーブル状のUIでつなぐことで動作を実現します。どのようにインタラクションに対して動作をつけていくのか、ながれを5ステップでご紹介します。


✅ ステップ1:画像やレイヤーなどに対してTap、Drag、Scrollなどインタラクション(受け取る操作)を決める

インタラクションをきめるには、レイヤーの+ボタンをクリックしてメニューから選択します。すると、紫色のインタラクションパッチが現れます。

画像2

(これはタップ操作を受け取るパターン)


✅ ステップ2:インタラクションによって変化させたいプロパティ(座標、透明度、スケールなど)を決める

プロパティをきめるには、インスペクタからプロパティの横にあるプラスボタンをクリックします。すると、プロパティ名が水色にハイライトされ、水色のプロパティパッチが現れます。

画像3

(これは透明度をかえるパターン)


✅ ステップ3:プロパティをどのように変化させたいか、アニメーションやイージングを決める

アニメーションやイージングをコントロールするのもパッチをつかいます。
たとえば弾むようなアニメーションをつける場合には、このような2つのパッチをつかいます。

画像4


✅ ステップ4:必要におうじて状態を管理したり、ロジックを追加する

状態管理やロジックもパッチをつかっておこないます。ON/OFFの状態を管理するスイッチパッチや、「または」という条件ロジックを実現するOrパッチなど豊富にパッチが用意されています。

画像5


✅ ステップ5:パッチをつなげば完成

パッチの右側が出力、左側が入力ポートになっています。インタラクションパッチからプロパティパッチまでをつなぐことで、インタラクション→動作のながれが完成します。

画像6


さいごに

以上、Origami Studioでプロトタイプを制作するときの5ステップのながれについて書いてみました。ご参考になったでしょうか。

この記事は、ぼくが登壇させていただいた、UX MILKさん主催「UX All Night」でのワークショップ「今夜からはじめるインタラクティブプロトタイプ -Origami Studio初級編-」のスライドをベースに、ワークショップではご紹介しきれなかったことを交えて書かせていただいています。

次回はツールについての記事になる予定ですので、ぜひまた読んでいただけたら嬉しいです。

さいごまで読んでいただきありがとうございました。それではまた!

ーーー

オフィシャルサイト
https://origami.design

Origami Community
https://www.facebook.com/groups/origami.community/

Origami Live
https://apps.apple.com/jp/app/origami-live/id942636206

Mike Matasさんのサイト
http://www.mikematas.com


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございます。
50
THE GUILD ボードメンバー / webtron Inc. 代表 / MoneySmart 代表。Fintechスタートアップを運営するUI / UX デザイナーです。日ごろ実践しているデザインメソッドの紹介や、Fintech 関連のことを書いていきます。