【こいつ】Principleを触ってみたよ【動くぞ】
この記事はMac OSを前提として書かれています。
dwango creators’ blogをご覧のみなさま、こんにちは。ドワンゴデザイナーのたかはしです。
普段はニコニコ動画周りの仕事をしております。
プロトタイプが作れるアプリやサービスはいろいろとありますが、それぞれ得意なこと不得意なことがあり、フェーズにあった目的が果たせるツールを選択することが大切です。
画面遷移や全体設計ではProttやinVision、より細かいインタラクションやアニメーションにはPixateやOrigami、Framerといった目的にあったツールを組み合わせて使うことでより期待できる結果をもたらしてくれます。
そこで今回は、ちょっと踏み込んだUIアニメーションが作成できるプロトタイプツールPrincipleを年末年始に触ってみたのでちょろっと紹介したいと思います。
Principle for mac
去年の夏頃、Appleの元エンジニアが開発したプロトタイピングツールで、デザインデータから簡単にUIアニメーションが作成できるアプリケーションとなっています。
Appleの元エンジニアがつくったこととPVがわかりやすいということでリリース直後一部で話題になりました。プロトタイプツールとしては比較的あたらしいツールであり、日本でも徐々に利用している方が増えています。
インターフェイスはkeynoteやSketchととても親和性が高く、これらのアプリケーションになれている方はすんなり操作できるのではないでしょうか。
どんなことができる？
では実際にどんなが機能があるのか見ていきたいと思います。
レイヤー
アートボード内に四角形やテキスト、画像を挿入できます。
プロパティから四角形の角を丸くしたり角度の調整などや、画像のマスキングにも対応されているので簡易なグラフィックであれば作成できます。
複数のレイヤーを選択して、Command+Gを押すとグループ化されます。
画像データはFinderなどからドラック＆ドロップで挿入できます。
アクション
レイヤーを選択しアクション設定アイコンを押すと設定できるアクションリストが表示されます。
タップやスクロール、ドラッグなどさまざまなジェスチャーに応じたアクションを設定することができます。
アニメーション/インタラクション
設定されたイベントをトリガーとして、アニメーションやインタラクションを作ることが可能です。
キーフレームパネルから細かく制御することが可能でより精度が高いアニメーションを実装することもできます。
プレビュー
アートボードに画像やテキストを挿入したり色調整などをしていくと、プレビューパネルのスクリーンでリアルタイムに作成した内容が確認できます。
プレビューパネルは独立ウィンドウにすることもできるので、広く使いたい時などには重宝しそうです。
作成したインタラクションやUIアニメーションは接続された実機に写して実際に操作できたり、録画機能を使ってアニメーションgifや動画形式にエクスポートしてくれたりとプロトタイピングする時には嬉しい機能もあります。
iPhoneでは、無料で提供されている「Principle Mirror」アプリをインストールすることによって、同Wi-Fi上でミラーリングされるのでMacと端末を繋がなくても実機で確認が行えます。
サンプルを作ってみた
これらの基本機能を使って、サンプルを作ってみました。
よくあるUIサンプル
実際アプリケーションを触りながら作業してみるとわかりますが、想像していたより学習コストは低く直感的に操作できるのでこれぐらいのプロトタイプならわずかな時間で完成できます。
dribbbleにもPrincipleを利用して作られたインタラクション/アニメーションが上げられています。参考に見てみるとこのアプリでできることを分かりますし、UIの参考にもなります。
まとめ
いかがでしたでしょうか。
Principleはリリースされて間もないので、まだ成長中なアプリです。
似たようなツールだとPixateやFlintoといったアプリもありますが、操作感や機能などはそのアプリにも劣らないと思います。
インタラクション/UIアニメーションの重要性が高まってきていますので、そういった要素を多く盛り込みたいサービスにはPrincipleは向いているツールといえます。また、精度の高いプロトタイプを短時間で作れますので、スクラップ＆ビルドを何回もすばやく繰り返しおこなうプロトタイピングにも適したツールになるのではないでしょうか。
今回紹介したPrincipleですが、プロトタイピングのさまざまな手段の一つでしかないですし、アニメーションを作るだけでも他にいろいろと手段はあります。
その時、その目的、その環境に合った手段を選択するのが大切だと考えています。
また機会があれば、他のプロトタイピングツールも紹介したいと思います。
では。
