【こいつ】Principleを触ってみたよ【動くぞ】

【こいつ】Principleを触ってみたよ【動くぞ】

2016.01.18
kv-principle
やってみた

この記事はMac OSを前提として書かれています。

dwango creators’ blogをご覧のみなさま、こんにちは。ドワンゴデザイナーのたかはしです。
普段はニコニコ動画周りの仕事をしております。

プロトタイプが作れるアプリやサービスはいろいろとありますが、それぞれ得意なこと不得意なことがあり、フェーズにあった目的が果たせるツールを選択することが大切です。

画面遷移や全体設計ではProttやinVision、より細かいインタラクションやアニメーションにはPixateやOrigami、Framerといった目的にあったツールを組み合わせて使うことでより期待できる結果をもたらしてくれます。

そこで今回は、ちょっと踏み込んだUIアニメーションが作成できるプロトタイプツールPrincipleを年末年始に触ってみたのでちょろっと紹介したいと思います。

Principle for mac

去年の夏頃、Appleの元エンジニアが開発したプロトタイピングツールで、デザインデータから簡単にUIアニメーションが作成できるアプリケーションとなっています。

Principle__principleapp_さん___Twitter

Appleの元エンジニアがつくったこととPVがわかりやすいということでリリース直後一部で話題になりました。プロトタイプツールとしては比較的あたらしいツールであり、日本でも徐々に利用している方が増えています。

Principle – Animated Design

ss-principle-gui

インターフェイスはkeynoteやSketchととても親和性が高く、これらのアプリケーションになれている方はすんなり操作できるのではないでしょうか。

どんなことができる?

では実際にどんなが機能があるのか見ていきたいと思います。

レイヤー

ss-principle-layer
アートボード内に四角形やテキスト、画像を挿入できます。
プロパティから四角形の角を丸くしたり角度の調整などや、画像のマスキングにも対応されているので簡易なグラフィックであれば作成できます。

複数のレイヤーを選択して、Command+Gを押すとグループ化されます。

画像データはFinderなどからドラック&ドロップで挿入できます。

アクション

ss-principle-layer

レイヤーを選択しアクション設定アイコンを押すと設定できるアクションリストが表示されます。
タップやスクロール、ドラッグなどさまざまなジェスチャーに応じたアクションを設定することができます。

アニメーション/インタラクション

ss-principle-layer

設定されたイベントをトリガーとして、アニメーションやインタラクションを作ることが可能です。
キーフレームパネルから細かく制御することが可能でより精度が高いアニメーションを実装することもできます。

プレビュー

ss-principle-layer

アートボードに画像やテキストを挿入したり色調整などをしていくと、プレビューパネルのスクリーンでリアルタイムに作成した内容が確認できます。
プレビューパネルは独立ウィンドウにすることもできるので、広く使いたい時などには重宝しそうです。


作成したインタラクションやUIアニメーションは接続された実機に写して実際に操作できたり、録画機能を使ってアニメーションgifや動画形式にエクスポートしてくれたりとプロトタイピングする時には嬉しい機能もあります。

iPhoneでは、無料で提供されている「Principle Mirror」アプリをインストールすることによって、同Wi-Fi上でミラーリングされるのでMacと端末を繋がなくても実機で確認が行えます。

サンプルを作ってみた

これらの基本機能を使って、サンプルを作ってみました。

よくあるUIサンプル

実際アプリケーションを触りながら作業してみるとわかりますが、想像していたより学習コストは低く直感的に操作できるのでこれぐらいのプロトタイプならわずかな時間で完成できます。

dribbbleにもPrincipleを利用して作られたインタラクション/アニメーションが上げられています。参考に見てみるとこのアプリでできることを分かりますし、UIの参考にもなります。

dribbble – principle

まとめ

いかがでしたでしょうか。

Principleはリリースされて間もないので、まだ成長中なアプリです。
似たようなツールだとPixateやFlintoといったアプリもありますが、操作感や機能などはそのアプリにも劣らないと思います。

インタラクション/UIアニメーションの重要性が高まってきていますので、そういった要素を多く盛り込みたいサービスにはPrincipleは向いているツールといえます。また、精度の高いプロトタイプを短時間で作れますので、スクラップ&ビルドを何回もすばやく繰り返しおこなうプロトタイピングにも適したツールになるのではないでしょうか。

今回紹介したPrincipleですが、プロトタイピングのさまざまな手段の一つでしかないですし、アニメーションを作るだけでも他にいろいろと手段はあります。
その時、その目的、その環境に合った手段を選択するのが大切だと考えています。

また機会があれば、他のプロトタイピングツールも紹介したいと思います。

では。

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

たかはし

たかはし

Designer

国産30代半ば男性

ドワンゴデザイナー メンバー募集 ! !