ここ数年で次々と新しいデザインツールが登場しています。その中でもインタラクションに特化したプロトタイプを作るツールが増えてきました。アプリやWebでのリッチなインタラクション表現の実現はデザイナーとエンジニアの連携が課題でしたが、新しいツールによって連携はスムーズになり、従来よりも素早く快適にインタラクションを実現できる環境が整ってきています。
目次
デザイナーからエンジニアへどうやって伝えるか
ユーザーインターフェースのデザインを考える時には、ビジュアルデザインだけでなくインタラクションについても考慮が必要です。
実際の業務フローではデザイナーは主に画面のデザインを作り、実際に動くものを作るのはエンジニア、というように分業されていることが多いと思います。しかし、アニメーションやインタラクションといった動きを伴う表現を実現したい場合に専用ツールというものはなかったので、デザイナーは動画作成ソフトでムービーを作ったりKeynoteを使ったりと工夫して伝えてきました。ここ最近では、従来のUIデザインツールに動きをつける機能が追加されたり、新たなインタラクションデザインツールが登場するなど、様々なツールが出揃って来た印象があります。
こうしたツールの登場によってデザイナーとエンジニアの溝が埋まり、連携をスムーズになることで、従来できなかったことができるようになるはずです。今後インタラクションの表現はより高い水準が求められるようになり、同時にデザイナーもよりリッチなプロトタイプを作ることが求められます。ツールが増えた分、そのツールで解決できる課題・目的も様々なので、用途を正しく理解して使いこなす必要がありますが、ツールを使うことはより良いアウトプットへの近道といって間違いないでしょう。
ツールを使う
すでに高いレベルのインタラクションを実現しているサービスは、どのような方法で進めているのでしょうか？
こちらの動画では、UberがFramerを使っている様子が見られます。動画を見る限り、実際のアプリと同程度と言える、かなり高忠実度のプロトタイプになっているのが分かると思います。Framerはコードを書く必要がありますが、必ずしもコードを書かなくても近しい表現ができるツールもありますから、使用する当人のスキルや現場によって適切なツールは変わってくるでしょう。
インタラクションと一口にいっても、トランジションにフォーカスしたものから、細かいアニメーションを実現するものまでツールの目的も違います。マイクロインタラクションやウォークスルーで使用されるようなリッチなアニメーションはHaikuのようなツールが向いています。トランジションならInVisionの全体の画面遷移レベルから始めて、FramerやProtopieのようなツールで部分的に作りこむのが良いでしょう。
全てをまかなえる一つのツールというのは現状はないと思いますので、いくつかのツールを使い分ける必要があります。（InVision Studioは近い将来その可能性があるかもしれませんが、）それぞれの現場で必要なものも変わってくると思いますし、はじめはとにかく使ってみるしかないでしょう。
幸い、数日間は無料で使える期間を設けているツールが多いので、試して比較しやすい環境です。ぜひ導入の検討を進めてみてはいかがでしょうか？
以下ツールの紹介です。
マイクロインタラクション/アニメーション
Lottie
LottieはAirbnbが提供するオープンソースのライブラリです。
デザイナーはAfter Effectsで思い通りのアニメーションを作り、プラグインを利用してJSONファイルに書き出します。Lottieの説明では、エンジニアはネイティブアプリに画像を追加するくらいの手軽さでそのJSONファイルを動かすことが出来るとのこと。
デザイナーのイメージ通りに動かせることと、エンジニアの負荷が軽減されるのが素晴らしいです。
ただ一つネックなのは、After Effectsは本格的な動画制作ソフトなのでツールの習熟に時間がかかるのと、動かしたい要素をIllustratorで作成する必要があります。
Haiku
Haiku.aiはAfterEffectsと同様にキーフレームのアニメーション作成ツールですが、AfterEffectsはあくまで動画作成ツールなのに対して、HaikuはUIのためのアニメーションに特化しています。
HaikuはSketchで描いたものを動かせるので、Sketchを普段使用してるデザイナーにとってはあれこれツールを跨いで作業する必要がありません。
書き出し形式はLottieで使用できるJSONや、JS,GIFなどが生成できます。URLも生成されるので共有も簡単に行うことができ、スピード感を持ってアニメーション実装ができます。
マイクロインタラクションや、シンプルなアニメーションを作る場合にはそこまで多くの機能は必要ありませんから、Haikuで十分というケースは大いにあると思います。細かな調整が必要な場合はAfter Effects + Lottieという風に使い分けるのも良いかもしれません。
トランジション
Framer
先述のUberのように触ってフィードバックがあるレベルの詳細なプロトタイプが作れます。実際のアプリと同じようにあらゆる要素、トランジションがスムーズに動いています。Framerの中でデザインから作り込めるので、ページ数の少ないアプリなら1から10までこなすことが出来そうです。
Protopie
コード不要でプロトタイプツールです。複雑な操作はなく、トランジションの設定もいくつかのパラメータに集約されているので素早くアニメーションを作れます。
InVision Studio
InVisionの提供するデザインツールです。使用感はSketchに近く、コード不要で画面間のアニメーションを詳細に作り込むことができます。
現時点では正式リリースではありませんが、今後ワンストップでデザインが完結できる強力なツールになるかもしれません。
Timeline for Sketch
Auto LayoutなどのSketchプラグインを提供するAnimaがインタラクション向けの新しいプラグインを発表しています。
こちらはSketchプラグインという形で、デザインモック作成のフローにそのまま組み込むことができます。買い切りなのと、Sketch内でそのまま使えるのですぐに導入できると思います。
おまけ
i3DESIGNの環境は Sketch + InVisionが基本で、細かいアニメーションはHaiku or AE to Lottieを。トランジションはProtopieの導入を進めています。
できればInVision Studioに移行してデザインフローのほぼ全てを済ませたいのですが、日本語表示の問題などが解決されるまでまだ移行は難しいかなと思います。
＿＿＿＿＿＿＿＿＿＿＿＿
in-Pocket is presented by i3DESIGN
i3DESIGN（アイスリーデザイン）は渋谷とウクライナに拠点を構えるIT企業です。
「デザイン思考」の手法を取り入れたクライアントワークと、Google対応の自社クラウドサービス「GOMOBILE」の提供を行っています。
ビジネスの創出に必要な”右脳”であるUX/UI分野と”左脳”の開発分野が融合した組織で、サービスデザイン・UI制作・プロジェクト管理・設計・開発・品質管理・システム運用を一貫してご提供できることが、i3DESIGNの強みです。
お問い合わせはこちらから
