人生の大半をWYSIWYGソフトウェアを軽蔑してきた私にとって、TumultのHTML5ウェブ・アニメーションソフトウェア「Hype」が2011年に初めて登場した時、その素晴らしさに驚きました。当初のレビューでは、優れたHTML5アニメーションとウェブサイト構築ツールを高く評価し、ここ数年でさらに進化を遂げています。Tumultが「ユーザーへのラブレター」と呼ぶ最新アップデートにより、複雑でスケーラブルなHTML5アニメーションの作成に興味があるものの、HTML、CSS、JavaScriptの専門知識が不足している人にとって、既に素晴らしいソフトウェアであるHypeは、まさに必須のツールとなりました。
柔軟なレイアウトに歓喜
レスポンシブデザインを採用したウェブサイト構築に初めて挑戦したのは2012年のことでした。その経験から、スケーリング、デバイス幅、そして「@」で始まり午前2時にキーボードを叩きまくって終わる様々なCSSルールについて、あまりにも多くのことを学びました。
それらすべてとは対照的に、Hypeのレスポンシブコントロールは笑ってしまうほどシンプルです。有効にするには、ドキュメントインスペクタの下にある「スケール」ボックスにチェックを入れ、 「フレキシブルレイアウト」の下にある「ピンとサイズ」コントロールを使用します。また、 「スケーリング動作」ドロップダウンを調整することで、ウィンドウのサイズを変更したときに要素がどのように拡大されるかを調整することもできます。要素を引き伸ばすか、アスペクト比を維持して縮小するか拡大するかを選択できます。
iOS開発者なら、Hypeのレスポンシブデザインの実装スタイルに見覚えがあるかもしれません。実際、TumultはHypeのレスポンシブツールの開発にあたり、iOSの「Springs and Struts」モデルを参考にしたことを公に認めています。「当社のユーザーは、インフォグラフィックから児童書まで、多種多様なコンテンツを作成しています。そのため、幅広いドキュメントで動作することが実証されているシステムを求めていました」と、共同創設者のJonathan Deutsch氏はMacworldへのメールで述べています。「ユーザーインターフェースの観点から、側面に固定するという概念は非常に分かりやすく、サンプルエリアがあれば、ユーザーは要素がどのように動作するかをすぐに確認できます。」
前述のサンプルエリアは素晴らしい工夫で、TumultがHypeユーザーに対して抱いている配慮と敬意の表れと言えるでしょう。このアプリは、レスポンシブデザインや「Springs and Struts」といった概念に馴染みがある必要はありません。たとえそれらを扱ったことがなくても、サンプルエリアを使えばすぐにレスポンシブな作業を始めることができます。ツールはあらゆるタスクに最適というわけではありません。例えば、私が作成したテストアニメーションでは、絶対位置で配置した要素をウィンドウのサイズを変更しても、同じ位置を維持するのに苦労しました。しかし、基本的なレスポンシブプロジェクトのほとんどには最適です。
もうWebだけではない
Hypeは当初から、基本的なアニメーションを作成するための非常に優れたプログラムでしたが、あくまでもHTMLツールでした。作成したアニメーションを公開するにはオンラインでホストする必要があり、ブラウザのCSS標準が多様だったため、視聴者が意図した通りに表示されないこともありました。これはHypeの欠点ではありません。Hypeは、プロジェクトがあらゆるコンピュータとブラウザで完全に互換性を持つように、非常に努力しています。しかし、作成したアニメーションによっては、必ずしもうまく動作するとは限りません。
Hype 2.5はこの問題に大きく対処し、アニメーションを表示するための2つの代替プラットフォーム（ビデオとGIFアニメーション）を提供します。HTML5は依然としてプログラムの主力ですが、エクスポートオプションの拡張により、Hype 2.5は全く新しいタイプのユーザー、つまり新進気鋭のアニメーターへの扉を開きました。
アニメーション制作は趣味程度にとどめ、それ以上のことは考えていませんが、基本的な作品をこんなに早く仕上げることができたのは驚きでした。Photoshopで描いた絵とレタリングには約1時間半かかりましたが、アニメーション自体はHypeのツールに慣れる必要があったにもかかわらず、わずか2時間ほどで完成しました。賞を取れるほどの作品ではないと思いますが、一晩でしっかりとした作品が完成したことは、とても満足感があります。
GIFアニメーションに興味があるなら、そこまでする必要はありません。私の最初のHype 2.5テストは、3秒間の点滅する星のループアニメーションでした。描画に30分、構築とエクスポートに10分かかりました。
Hype でアニメーションを作成するにはキーフレームについて少し知っておく必要がありますが、Tumult にはすぐに始められる素晴らしいチュートリアルが多数用意されています。
Hype Reflect、完璧なモバイルアクセサリー
Hypeのインスタントプレビューオプションを使えば、Webプロジェクトのテストが驚くほど簡単になります。同社が2013年後半にリリースしたコンパニオンアプリ「Hype Reflect」も、iOSデバイスでのプレビューに同様の機能を備えています。このアプリはWi-Fiネットワークを使ってデスクトップ上のHypeに接続し、プロジェクトを正しいサイズで瞬時に表示し、適切にスケーリングされているかを確認できます。さらに、ミラーモードを使えばMacでプロジェクトを微調整し、その変更をリアルタイムで反映させることもできます。さらに高度なプロジェクトを作成している場合は、アプリのJavaScriptコンソールを使ってプロジェクトに追加したスクリプトをデバッグすることも可能です。
Hype ReflectのミニマルなiOS 7インターフェースは、モバイルでプロジェクトを操作する際に邪魔になることはほとんどなく、これはありがたいです。結局のところ、アプリの様々な装飾よりもプロジェクトそのものに重点を置くべきでしょう。煩わしいコントロールはそれほど多くありませんが、プレビュー、ミラーモード、モバイル版Safariへのプロジェクトの送信など、アプリは十分な柔軟性を提供しています。
微調整、トリム、効率ブースター
Hype 2.5の主要な機能に加え、Tumultはプログラムの使いやすさを向上させるために多大な努力を払い、内部的な調整も加えました。その成果は明らかです。Retinaサイズの画像をアップロードできるようになり、Hypeはこれらの画像を適切なデバイスに適切なサイズで表示するように自動的に調整することで、帯域幅を節約します。要素のスナップ、矢印キーによる操作、キーフレームのキーボードショートカットといった基本的なタイムライン編集機能の追加により、アニメーションの作成もはるかにスムーズになりました。
3軸回転や要素の円形パスなどの新しい回転オプションが追加されました。すべてのシーンにマスタータイムを適用するのではなく、各シーントランジションの継続時間を調整できるようになりました。また、再生後にシーン全体を逆再生できる新しい「タイムラインを続行」オプションも追加されました。JavaScriptに精通した方には、Hypeのタイムライン方向、現在時間、再生状態、タイムラインの継続時間、シーントランジションの継続時間をフックするAPIも用意されています。さらに、フランス語、ドイツ語、日本語、中国語、イタリア語、スペイン語のユーザーは、アプリがこれらの6言語に完全にローカライズされたため、母国語でアプリを使用できるようになりました。
これらのビットやバイトは単体では小さいように思えるかもしれませんが、組み合わせることで、すでに優れたプログラムがさらに洗練されます。Retina画像のサポートと自動画像最適化により、Hypeのレスポンシブデザインツールはあらゆるプラットフォームに対応した開発手段として確固たるものになり、タイムラインの改善と新しい要素オプションは、プログラムのアニメーションコンポーネントにさらなるパワーと魅力を加えます。
結論
CSSトランスフォームやJavaScriptのテクニックに精通していなくても、HTML5アニメーションやレスポンシブWebデザインの世界に足を踏み入れたいなら、Hypeはまさにうってつけのプログラムです。思いついたものなら、Hypeがきっと実現してくれるでしょう。高度なプロジェクトでは時折、手作業によるコーディングが必要になることもありますが、それ以外のほとんどの用途では優れたツールです。
