プロトタイプをより魅力的な製品にする

ランディングページに動きを加えることは、エンゲージメントの向上やコンバージョンの増加に一役買っています。しかし、動きのメリットはランディングページに限ったことではありません。人々は、動画、インタラクション、GIFなど、あらゆる種類の動きを含むデジタル製品に、より興味を持ちます。

多くの人にとって、GIFはソーシャルメディアのコメントに反応するための楽しい方法となっています。しかし、デジタルデザインの世界では、GIFはより重要な役割を担っています。ウェブページ、スマートフォンアプリ、その他のデジタル製品を制作する際には、プロトタイプにGIFを追加することの利点について学びたいと思うでしょう。

おすすめの記事: Design Trends 2021

プロトタイプにGIFを加えることのメリット

プロトタイプにGIFを追加することで得られる最も大きなメリットは、ユーザーのエンゲージメントが向上することです。多くの人は、静止した画像よりも動きのある画像を好みます。動きのある画像は、ユーザーがインタラクションできると、さらに魅力的になります。例えば、画面を下にスクロールすると、海の波のGIFが動くかもしれません。

ウェブページやモバイルプロトタイプにGIFを使用することで、エンゲージメントが向上しますが、メリットはそれだけではありません。モーションデザインとインタラクションを組み合わせることで、次のようなことが可能になります。

ユーザーが意思決定をするために必要な情報を表示することで、製品の機能性を向上させる。
ユーザーが製品に触れる時間を増やすことで、広告収入や売上、権威を高めることができる。
消費者をセールスファネルに導き、購入を完了させる可能性を高める。
ユーザーに永続的な印象を与えることで、ブランドの認知度を高めることができます。

動画を使ってエンゲージメントを高めるのはどうでしょうか？

動画でもユーザーとのエンゲージメントを高めることができます。場合によっては、QuicktimeのMOVファイルをデザインに追加することも意味があります。

しかし、動画の使用にはデメリットもあります。例えば、以下のようなものです：

クリエイティブチームが動画を作るには、GIFよりもずっと時間がかかることがあります。
高品質な動画を作るためには、カメラや編集、人材などに多くの費用が必要になるかもしれません。
帯域の限られた消費者や、モバイルネットワークでしか製品にアクセスできない消費者には届かないかもしれません。

また、GIFを選択することにはいくつかの利点があります。多くの人がGIFを好む理由は以下の通りです：

ファイルサイズが小さいので、より多くのユーザーのニーズに応えることができます。
ファイルサイズが小さく、より多くのユーザーのニーズに応えることができる。
ほとんどのデザイナーは、魅力的で効果的なGIFを迅速かつ安価に作成することができます。

常にGIFが正しい選択というわけではありませんが、ファイルサイズを小さくしたい場合や、長編コンテンツではなく少量の情報でユーザーを惹きつけたい場合には、動画よりもGIFの方が適していることが多いようです。

おすすめの記事: Create Clickable Prototypes

UXPinでプロトタイプにアニメーションGIFを追加する

UXPinでは、デザインにGIFを簡単に追加することができます。GIFを追加するには、ファイルからアップロードするか、Sketchなどのソフトウェアから他のアセットをインポートするのと同じ手順を踏むことになります。

インタラクションで状態をコントロール

エンゲージメントを高めるために、インタラクションの間で状態をコントロールする簡単な方法も用意されています。インタラクションで状態をコントロールするということは、カーソルを合わせると画像が変化するということです。例えば、ホテルの部屋探しを支援するアプリでは、部屋の写真を表示し、マウスカーソルが画像に重なると情報（価格、広さ、アメニティなど）に切り替えることができます。

また、クリックすると拡大するアコーディオンメニューや、数秒ごとに写真が入れ替わるカルーセルなどのインタラクションを使用することもできます。これらはすべて、あなたのプロトタイプをよりリアルに感じさせるためのものです。