ユーザーを魅了する、おすすめUIインタラクション5選

アニメーションやトランジションを意識してUIをデザインすることは、よりよいUXにも繋がります。アニメーションによるマイクロインタラクションは、より早い反応が求められるWebやアプリの世界において、訪問者の好感度を刺激するのにぴったりです。

インターフェイスやそのインタラクションの過程に関わるものと同じように、アニメーションも単なる装飾ではなく、機能的な要素でなければいけません。

今回はプロトタイピングツールである『Principle for Mac』を使った実例を取り上げつつ、おすすめのUIインタラクションを5つご紹介します。

【Principle for Macとは】

Principle for Mac（以下「Principle」）は、アニメーションやトランジションエフェクトを自動化してくれる、プロトタイピングツールです。アートボード上で動きをつけたい要素のプロパティを変更するだけで、簡単にアニメーションやトランジションエフェクトをつけてくれます。

1. 水平パララックススクロール

パララックス効果は、静止画像や動きの遅い背景画像を、動きの速い前景画像と組み合わせることで、多層構造の3Dスクロール機能を実現するもの。垂直と水平の両方に使用できます。

ゲームではじめて使用されてから数10年後にWebデザインにも導入されました。そのあと、少しずつモバイルアプリにも使用されています。

没入感のあるUXを実現するパララックス効果は、その繊細な表現でユーザーを魅了するでしょう。

水平パララックススクロールの魅力は、おもに以下の2つです。

• 2次元の空間に視差効果を使うことで、フラットなピクセルに奥行きと立体感を持たせることができる
• 異なる視覚的要素を異なる速度で動かすことで、動きと奥行きの錯覚をもたらす

水平パララックススクロールの実例

実例1. モバイルゲーム用の武器カード

▲出典：Hassan Mahmud

モバイルアプリやWebサイトのカードやセクションは、パララックススクロールを使うのにぴったりの場所です。エフェクトがもっとも分かりやすいのは、最後のカードやセクション。最後までスクロールすると、Appleのラバーバンドエフェクトのように感じられます。

実例2. NIKEのアプリに使用されているカード

▲出典：Jardson Almeida

NIKEによる製品のプロモーションにも、水平パララックススクロールが使われています。

この例では、前景のエレメントである靴を背景のカードからはみ出させ、スクロールに連動して背景色を変えています。パララックス効果以外にも工夫を凝らすことで、デザインのレベルを押し上げているのです。

このインタラクションのPrincipleファイルは、こちらからダウンロードできます。

こうした例からもわかるように、パララックス効果のインタラクションは強い印象を残します。パララックス効果は単なる装飾としてではなく、他のエレメントと同様、訪問者に対して価値を提供できるかどうかを考えながら取り入れましょう。

水平パララックススクロールの注意点

パララックス効果に動きがありすぎると、めまいや方向感覚の喪失などを引き起こす危険性があります。パララックス効果を取り入れるときには、以下のような点に注意しましょう。

• パララックス効果の数は最小限に抑える
• 動きを画面のなかの限られた範囲にとどめる
• 重要な情報にアクセスしづらくなるような効果はつけない

2. 検索バーのアニメーション

検索バーは、モバイルアプリやWebデザインのなかで、ユーザーがもっとも頻繁に触れるマテリアルのひとつです。検索バーのアニメーションは、アイコンをクリックすると検索フィールドが伸び縮みするというものが一般的です。

検索バーにちょっとしたアニメーションを加えると、以下のようなメリットがあります。

• デジタル製品でもっとも一般的なインタラクションのひとつである、データの検索に遊び心を加えられる
• 入力時のみ検索バーを拡大表示することで、余白を有効活用できる

検索バーのアニメーションの実例

▲出典：Alex Pronsky

この例では、円形のアイコンをクリックすると検索バーが展開します。5画面以内なら使用できる、とても軽量なインタラクションデザイン。アプリやWebサイトへの実装もとてもシンプルです。

このインタラクションのPrincipleファイルは、こちらからダウンロードできます。

3. 送信ボタンのスプラッシュメッセージ

スプラッシュメッセージは、フォームへの入力後などに送信ボタンを押すと表示されます。またスプラッシュアニメーションについては、アプリをはじめて起動したり、アプリのキャッシュやデータをすべて取得したりしたときに表示されることもあります。

スプラッシュメッセージやスプラッシュスクリーンの魅力は、おもに以下の2つです。

• データを取得したり、データをアップロードするときに、訪問者の注目を引きつけておける
• UXに強い影響を与える双方向的な体験を提供することで、単に注目を引きつける以上の効果が期待できる

送信ボタンのスプラッシュメッセージの実例

▲出典：Khai

この例では、ユーザーが送信ボタンを押したあと、スプラッシュアニメーションが表示されます。データがデータベースに送信されるあいだ、ジャンプするボールが遊び心を演出。そのあと表示されるチェックマークが訪問者のアクションに対してフィードバックを提供する仕組みです。

このインタラクションのPrincipleファイルは、こちらからダウンロードできます。

スプラッシュスクリーンを作るときには、以下のポイントに気をつけましょう。

• 2秒以内におさめる
• 複数回の投稿など、アプリ内で何度もおこなう可能性のあるインタラクションの場合、1秒以内におさめる
• 複雑なデザインは避けて、シンプルで大胆なデザインにする
• 背景は無地やグラデーションなどにする

上記のガイドラインに従うことで、優れたスプラッシュスクリーンを制作できるはずです。

4. セクション間のページネーションアニメーション

ページネーションは、複数のページに分かれたコンテンツを指します。ページネーションには、ナビゲーションがしやすい、UXを向上させられる、バイヤージャーニーを円滑化できるなど、さまざまな利点があります。ECサイトがその好例です。

ページネーションアニメーションの魅力は、おもに以下の2つです。

• 従来のWebサイトやアプリの多くは、コンテンツを分割するために別々のページを使用し、ページの読み込み時間が長くなってUXが分断されていた。ページネーションアニメーションを使うと、離脱率を定価させ、顧客維持率を向上させられる
• 従来は複数のページを移動する必要があったコンテンツを、あたかもひとつのページで完結しているかのように見せられる

セクション間のページネーションアニメーションの実例

▲出典：André Gonçalves

モバイルアプリで人気のある「ストレッチページネーション」の一例。訪問者がセクション間を移動するときに、流動的なUXを提供します。

ECサイトで商品画像を閲覧したり、教育アプリで複数のセクションの情報を読んだり、料理アプリでレシピを見たりするなど、訪問者がセクション間を素早くスワイプする必要があるアプリにおすすめです。

このインタラクションのPrincipleファイルは、こちらからダウンロードできます。

5. スティッキーエレメントを使ったカード拡大

カードリストは、フラッシュカードやポストイットなど、カードを使った情報の記憶・整理方法にヒントを得て開発されました。何枚かのカードに分散させるため、情報を処理しやすいのが特徴です。

しかし訪問者に伝えるべき情報のすべてが、カードのみに集約されているわけではありません。そこで、ユーザーに負担をかけずに、バランスよく情報を提供することが重要になります。

拡大可能なカードを使うことで、ユーザーは情報を明確に把握でき、深掘りできます。拡大における連続性と流動性の維持は、スムーズなUXの要です。カードにスティッキーエレメントを使用し、シンプルなアニメーションを使えば、双方向的デザインをダイナミックに演出できます。

スティッキーエレメントを使ったカード拡大の実例

▲出典：Lukas Guschlbauer

時計のECサイトを模したコンセプトアプリのなかで、製品である時計の紹介にカードが使われています。

価格や評価などの主要な情報を各カードで表示しつつ、拡大したときには特徴やおすすめのポイントなどの追加情報が閲覧できる仕組みです。

時計の画像は、カードを拡大すると固定されて、購入の意思決定に必要な情報を閲覧するときに、連続性のあるUXを提供しています。

このインタラクションのPrincipleファイルは、こちらからダウンロードできます。

拡大可能なカードリストは、レスポンシブデザインを使いやすく構成するにあたって、おすすめの選択肢のひとつです。とくにコンテンツや情報量が多いアプリのナビゲーションを向上させたいなら、ぜひ取り入れてみましょう。

おわりに

今回取り上げたPrincipleは、Apple、Amazon、Netflix、Microsoftなどのデザインチームにも使用されています。ツールの詳細は、公式サイトのチュートリアルからチェックしてみてください。

PrincipleはMac用のツールですが、『UXPin』や『ProtoPie』はWindowsでも使用できます。Windowsを使用しているなら、Principleの代替ツールとして検討してみましょう。

（執筆：Rashida Haji　翻訳：Asuka Nakajima　編集：北村有　提供元：Muzli）