プロトタイプツールのHype 3が超便利

プロトタイプツールのHype3が超便利なの感想をメモ。

fb8de4767df5effa20b0398dbc265327

▪︎Tumult Hype3 とは

プロトタイピングツール。正確にはHTML5のアニメーションやサイトを簡単に作成できるツール。かなりシンプルで、ドキュメントを読まなくても大体の機能が使える。Appleのkeynoteくらいの感覚。大きな特徴はアニメーション用のタイムライン。AfterEffectと同じような感じで使える。

スクリーンショット 2015-05-24 22.45.53

▪︎できること

・アニメーション作成
・インタラクション設定
・Webとモバイルの両方に対応
・画面感遷移
・日本語対応済

▪︎できないこと

・条件に応じたアクションの設定(Javascriptを書けば可能っぽい)
・素早いワイヤフレーム(素材さえ用意しておけば可能だと思う)

▪︎アニメーション

testHype
タイムラインを使ってアニメーションを作成できる。キーフレームを追加して状態を設定する方法で、AfterEffectsに似ている。初めてでも5分くらいで以下のアニメーションができた。成果物はプレビューボタンで素早くブラウザ上で確認できる。
<製作サンプル>

▪︎アクション設定

select
クリック、タップ、ドラッグ、マウスオーバーなんかは使える。条件に応じたアクションの設定はよく分からない。Javascriptを自作して追加すればできるのかな。PixateなんかはGUI上でできるみたいだけど。サンプルくらいなものでも5分くらいで作成可能だった。<製作サンプル>

▪︎画面の移動

web_test
シーン(画面)間の移動も可能。単一画面の移動だけでなくサービス全体の構成も確認できそう。
<製作サンプル>

▪︎書き出し

スクリーンショット 2015-05-24 22.45.18
途中経過はブラウザを指定してプレビューできる。書き出しはHTML5やムービーの選択が可能。

▪︎プラットフォーム選択

スクリーンショット 2015-05-24 22.49.16
web、モバイル、tumblerやDribbble、バナーまで位色々なサイズを選択可能。

▪︎グレード

スタンダード価格は$49.99。プロ価格は$99.99。プロ仕様のメイン機能は「シンボル」。
要素タイムラインアニメーションの再利用が可能になる。シンボルひとつを編集すれば、そこに関連するすべての要素も同時に編集できるっぽい。シーンをまたいだ同じ要素の編集に便利。(曖昧)

しばらく試して使えるようなら続けていこう。

2015-05-24 | Posted in デザイン, 開発No Comments » 
Comment





Comment