• WAN55
  • コラム
  • Webデザイン
  • 【デザイナー必見!!】Facebookからリリース、プロトタイピング作成ツール「Origami Studio」を使っ...

【デザイナー必見!!】Facebookからリリース、プロトタイピング作成ツール「Origami Studio」を使ってみた!

Webデザイン アプリ

2016.11.25(Fri)

こんにちは、デザイナーの高橋です。
みなさんはWebやアプリ制作で、どのプロトタイピングツールを利用していますか?
最近は多様なツールが登場していますが、その中でも、Macで動くネイティブアプリである「Origami Studio」は、素早くデザイナーのイメージを形にすることができ、簡易的な画面遷移から凝ったUIアニメーションまで、幅広いプロトタイプを作成可能なツールだと感じました。

導入1

そこで、「Origami Studio」の紹介とチュートリアルを通して、このツールの魅力をお伝えしていきたいと思います。

はじめに「Origami Studio」とは

2016年10月にFacebookからリリースされた、iPhoneやAndroidアプリのプロトタイプが簡単に作れる無料のツールです。
公式サイトよりダウンロードできます。

導入2

「Origami Studio」の特徴

ここ最近は続々と新しいプロトタイピング作成ツールが登場しています。
それぞれの得意分野はワイヤーフレーム、画面遷移、デザイン、アニメーションなど様々ですが、「Origami Studio」はアニメーションを伴うプロトタイプの作成に特化しています。

また、プロトタイプの挙動を作成する方法が少し特殊で、「パッチ」というブロックを繋いでいくことによってロジックやアニメーションを組み立てていきます。

導入3

他のツールに比べると習得に少し時間がかかるかもしれませんが、使い方を覚えると直感的かつスピーディにプロトタイプを作れるようになります。

それでは、実際に「Origami Studio」を使って簡単なプロトタイプを作って、使用感覚を掴んでいきましょう。
本文中では「Sketch」というツールでパーツ作成をしています(トライアル版でも大丈夫です)。

タップするとハートに色がつくFavoriteボタンをつくる

TwitterやInstagram等のSNSでよく見かける、アニメーションするFavoriteボタンの仕組みを作っていきます。

作例

1.「Origami Studio」の準備

Macにインストールした「Origami Studio」を起動します。
最初に表示されるウィンドウの[New with iPhone7]を選択します。

作例

編集画面が開いたら、右のレイヤービューから「Color Fill」レイヤーを選択し、プロパティのColorを黒から白に変更します。

作例

2.「Sketch」でハートを作成

「Sketch」でハートを作ります。
簡単なハートの作り方は コチラ を参照ください。

3.「Origami Studio」にハートをコピペ

「Sketch」で作成したハートを選択し ⌘C 、「Origami Studio」のレイヤービューへ ⌘V すると、ハートのレイヤーグループが作成されます。

作例

4.ベースとなるグレーのハートを配置

レイヤービューから先ほどペーストしたグループを選択し、「heart_default」とリネームします。
また、プロパティのAnchorの真ん中をクリックするとハートがプレビュー画面の真ん中に配置されます。

作例

「heart_default」グループ内のShapeを選択し、プロパティのFillの横の丸をクリックし、カラーピッカーから適当なグレーを選択します。
これがデフォルト状態のハートになります。

作例

5.アニメーション用の赤色のハートを配置

先ほど編集した「heart_default」グループを ⌘D で複製し、「heart_on」とリネーム、グループ内のShapeの色を赤色に変更します。

作例

6.クリックで赤色のハートが出現/消える仕組みをつくる

ここのフローはちょっと長いので焦らずに進めましょう。

「heart_default」レイヤーに表示されている[Touch]ボタンをクリック、出てきたウィンドウの中の[Tap]をクリックします。

作例

エディタ上にInteractionというパッチが出現しました。

作例

⌘enter して出てきた検索窓に「Switch」と入力して enter するとSwitchというパッチが出てきます。

作例

作例

これらのパッチをケーブルで繋いでグレーのハートをクリックすることで、赤で色づく仕組みを作っていきます。

InteractionのTapポートからSwitchのFlipポートにケーブルをドラッグ&ドロップで繋ぎます。

作例

続いて ⌘enter で今度はTransitionパッチを配置し、図のようにケーブルを繋ぎます。
「heart_on」レイヤーを選択し、Transitionパッチの出力ポートから「heart_on」のOpacityとScaleにケーブルを繋ぎます。

作例

以下のようになります。

作例

さて、ここでプレビュー画面のハートをクリックしてみてください。

作例

このようにハートがON/OFFする仕組みはできましたか?
でも少し味気ない印象なので、動きに華やかさを加えていきましょう。

 ⌘enter でSmooth Value、Pop Animationパッチを配置し、図のように結線します。
その際に各パッチの数値も変更しましょう。パッチ内の数値はクリックで変更できます。

作例

ここでまたプレビュー画面のハートをクリックしてみてください。
さっきよりON/OFFの変化が動的になりました!

作例

動作解説

  • Switch:ON/OFFを切り替え出力します。
  • Transition:Startの値からEndの値へ変化します。
  • Smooth Value:数値の変化を滑らかにします。
  • Pop Animation:数値がバネのような弾力をもって変化します。

グレーのハートをクリックするとSwitchから出力されたON/OFF信号が各パッチを経由して、赤いハートのOpacity(不透明度)とScale(大きさ)が0と1の間で変化します。

7.さらにアニメーション演出を追加

「ボタンを押した」という視覚的な手ごたえがもっと欲しいので、クリックすると少し遅れて赤色の波紋が広がって消える演出を作ります。
「heart_default」グループを ⌘D で複製し、「heart_ripple」とリネームします。
「heart_ripple」のSizeを90に変更します。

作例

「heart_ripple」内のシェイプを選択し、StrokeのColorを赤色に変更します。
ここで変更するのはFillでなく、Stroke(輪郭線)の色なので間違えないようにしてください。

作例

⌘enter でWait、Transition、Smooth Valueパッチを配置し、図のように結線します。
各パッチの数値も変更しましょう。

作例

さらに「heart_ripple」内のシェイプを選択し、図のように結線します。

作例

以下のようになります。

作例

ここでプレビュー画面のハートをクリックしてみてください。
より華やかなアニメーション演出とともにハートがON/OFFします!

作例

タップでハートがON/OFFするFavoriteボタンが完成しました!

動作解説

  • Wait:指定した時間分だけ待機します。

クリックして0.3秒後にWaitからON信号が出力され、heart_rippleのStroke>Width(ハートの輪郭線の太さ)が0から30に変化し、赤色の波紋が広がったように見えています。

まとめ

いかがでしたでしょうか?
このように思い描いた動作を即座に実現できるのが「Origami Studio」の良い点です。
公式サイトのチュートリアルを実践するとこのツールへの理解がより深まると思います。
これを機に、WEBやアプリ制作に「Origami Studio」を取り入れてみてはいかがでしょうか?

最後まで見ていただきありがとうございました!