CrowdWorks Designer Blog | クラウドワークス デザイナーブログ

クラウドワークスのデザイナーが書くブログ。深いような、そうでもないような知識、体験、考察をお届けします。

簡単なアニメーションを伴うプロトタイピングに!Principleを試してみた

f:id:yusuke-tamura:20190312105345p:plain

デザイナーの田村です。すっかり花粉症の季節ですね!

わたしも、花粉にはアレルギーを持っているのですが、今のところは平気です。

くしゃみを連発している同僚を見ては、「うわぁ、辛そうだな…」と他人事のように思っています。

さて、最近プロトタイプを作っていて、簡単なアニメーションを再現したいと思うことが増えてきました。

そこで「Principle」というツールを試したところ、とても使いやすくて驚きました。

今回は、簡単に使い方や、メリットやデメリットなどをご紹介したいと思います。

Principleとは?

Principleとは、手軽にUIアニメーションが再現できる、プロトタイピングツールです。

特に目新しいツールというわけではなく、リリースされてから、すでに3年以上は経過しています。

しかし、まだまだ日本語の解説記事などは少ないため、メジャーなツールとは言えないと思います。

ただでさえ、今はプロトタイピングツールの戦国時代ですから。

実際に作ったもの

今回は、以前わたしが担当した施策を題材にして、いくつかのアニメーションを再現してみました。

まずはこちらから。

円をクリックすると、中央からフワッと広がり、文字の色も変わっているかと思います。

続けて、こちらをご覧ください。

f:id:yusuke-tamura:20190311161514g:plain

アイコンをクリックすると、ポップアップが表示され、メッセージが下りてきています。

このくらいのアニメーションであれば、すぐに再現することができます。

使い方

それでは、簡単に使い方について、見ていきましょう。

あらかじめ、取り込みたいSketchデータを開いておけば、左上の「Import」からすぐに取り込むことができます。

f:id:yusuke-tamura:20190311170149p:plain

左側を見ると、Sketchのレイヤー構造が、そのまま保持されていることが分かります。

f:id:yusuke-tamura:20190311170221p:plain

今回は、円をクリックすると、中央からフワッと広がるようにしたいと思います。

そのためには、アニメーションの開始と終了の状態を、それぞれ作らなければなりません。

まずは、左上の「Insert」から「Circle」をクリックし、円の上に配置します。このとき、塗りのAlpha値を「0」、Width / Heightも「0」にしておきます。

これで、アニメーションの開始状態を作れました。

f:id:yusuke-tamura:20190311170242p:plain

続けて、クリックイベントを設定します。クリック対象のオブジェクトを選択し、「Tap」をクリックすると、遷移先を指定できます。

このとき、遷移元のアートボードを選択すると、コピーされたアートボードに遷移するようになります。

f:id:yusuke-tamura:20190311170304p:plain

遷移先を指定できたら、先ほど配置した円を拡大し、塗りのAlpha値も100%に戻しておいてください。

f:id:yusuke-tamura:20190311170324p:plain

細かいパラメーターの設定は、上のボタンから「Animate」を開けば、調整することができます。

f:id:yusuke-tamura:20190311170344p:plain

テキストの色に関しても、同様に開始と終了の状態を作ってば、自動的にアニメーションが設定されます。

Principleでは、アートボードをまたいでもレイヤー名が同じなら、同じオブジェクトとして認識されます。

オブジェクトの値の差分を読み取って、自動的に補完してくれるのです。

Principleのメリット

Principleのメリットは、SketchやFigmaから、直接データを取り込める点です。

リッチなアニメーションを表現する場合、After EffectsやOrigami Studioなど、より高い表現力を持つツールは他にもあります。

しかし、WebサービスやスマホアプリのUIデザインを行っているのであれば、SketchやFigmaで仕事をされる方も多いでしょう。

静的な画面をSketchやFigmaで作成し、アニメーションのみ、別のツールで専用に作り直すのは大変です。

Principleであれば、SketchやFigmaでベースを作成したら、速やかにアニメーションも作り始められます。

Principleのデメリット

Principleのデメリットは、あまり複雑な表現には、向いていないという点です。

デメリットと言うと、悪く聞こえるかもしれませんが、これは前述したメリットと表裏一体のことだと思います。

簡単にアニメーションを再現するため、色々なことをよしなにやってくれますが、その分だけ自由度も低くなります。

前述のように、SketchやFigmaを使ったワークフローと相性が良く、WebサービスやスマホアプリのUIデザインには最適です。

それ以外の、より高度な視覚表現を行いたいのであれば、AfterEffectsなど他のツールを利用する方が良いでしょう。

学び方

ここまで読んで、Principleを試したくなった方は、公式のチュートリアル動画を見てみてください。

動画はすべて英語ですが、実際の画面を見ながら解説が進むので、英語が苦手でも問題ありません。

Principleに関しては、日本語の情報も少ないので、おそらく検索してもあまり出てこないと思います。

チュートリアル動画は、5分程度のものが8本ほどアップされており、全てに目を通せばひととおり使えるようになるでしょう。

おわりに

クラウドワークスでは、新しいデザインツールでも、積極的に試せる環境が整っています。

好奇心旺盛なデザイナーなら、きっと楽しく仕事ができると思います。

引き続き、一緒に働いてくれるデザイナーを募集していますので、まずは気軽にオフィスまで遊びに来てください!

www.wantedly.com