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

2020年9月20日 20:32

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

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

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

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

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

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

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

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

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

（これは透明度をかえるパターン）

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

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

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

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

✅ ステップ５：パッチをつなげば完成

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

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

この記事は、ぼくが登壇させていただいた、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

この記事が気に入ったらサポートをしてみませんか？