簡単なアニメーションを伴うプロトタイピングに！Principleを試してみた
この記事は、2019年3月4日に執筆し、加筆・修正を加えたものです。
デザイナーの田村（@tamu0505y）です。すっかり花粉症の季節ですね！
わたしも、花粉にはアレルギーを持っているのですが、今のところは平気です。くしゃみを連発している同僚を見ては、「うわぁ、辛そうだな…」と他人事のように思っています。
さて、最近プロトタイプを作っていて、簡単なアニメーションを再現したいと思うことが増えてきました。
そこで「Principle」というツールを試したところ、とても使いやすくて驚きました。今回は、簡単に使い方や、メリットやデメリットなどをご紹介したいと思います。
Principleとは？
Principleとは、手軽にUIアニメーションが再現できる、プロトタイピングツールです。
特に目新しいツールというわけではなく、リリースされてから、すでに3年以上は経過しています。
しかし、まだまだ日本語の解説記事などは少ないため、メジャーなツールとは言えないと思います。ただでさえ、今はプロトタイピングツールの戦国時代ですから。
今回は、以前わたしが担当した施策を題材にして、いくつかのアニメーションを再現してみました。まずはこちらから。
円をクリックすると、中央からフワッと広がり、文字の色も変わっているかと思います。このくらいのアニメーションであれば、すぐに再現することができます。
使い方
それでは、簡単に使い方について、見ていきましょう。
あらかじめ、取り込みたいSketchデータを開いておけば、左上の「Import」からすぐに取り込むことができます。
左側を見ると、Sketchのレイヤー構造が、そのまま保持されていることが分かります。
今回は、円をクリックすると、中央からフワッと広がるようにしたいと思います。
そのためには、アニメーションの開始と終了の状態を、それぞれ作らなければなりません。
まずは、左上の「Insert」から「Circle」をクリックし、円の上に配置します。このとき、塗りのAlpha値を「0」、Width / Heightも「0」にしておきます。これで、アニメーションの開始状態を作れました。
続けて、クリックイベントを設定します。クリック対象のオブジェクトを選択し、「Tap」をクリックすると、遷移先を指定できます。
このとき、遷移元のアートボードを選択すると、コピーされたアートボードに遷移するようになります。
遷移先を指定できたら、先ほど配置した円を拡大し、塗りのAlpha値も100%に戻しておいてください。
細かいパラメーターの設定は、上のボタンから「Animate」を開けば、調整することができます。
テキストの色に関しても、同様に開始と終了の状態を作ってば、自動的にアニメーションが設定されます。
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本ほどアップされており、全てに目を通せばひととおり使えるようになるでしょう。
おわりに
クラウドワークスでは、新しいデザインツールでも、積極的に試せる環境が整っています。
好奇心旺盛なデザイナーなら、きっと楽しく仕事ができると思います。
引き続き、一緒に働いてくれるデザイナーを募集していますので、まずは気軽にオフィスまで遊びに来てください！
あなたの幸運を全力で祈ります!