縁の下のUIデザイン―少しの工夫で大きな改善!

第8回 動きによる楽しさの演出―コンテンツの変化,操作へのフィードバック

この記事を読むのに必要な時間:およそ 2 分

アニメーション/トランジション

ユーザーが何か操作した際に,気持ち良くなる動きを付けてあげることは,ユーザーにとって楽しくなるきっかけになります。たとえば,面倒な手続きをしなければいけない画面や日々の煩わしいオペレーションなど,楽しさとは相入れないような操作に対して,気持ちの良い動きがあればユーザーにとって良い体験に変わるかもしれません。

ただし,一瞬であるがゆえに,ついついやりすぎてしまうこともあります。やりすぎると逆効果になってしまうため,その動き自体に何か意味を付けてあげることが必要になります。効果的に使うことでユーザーの操作を楽しく病み付きにする効果も持っています。

タップ時のフィードバックアニメーション

ユーザーがボタンやアイコンなどをタップした際にタップした対象に動きを付けてあげることで,その行為自体が楽しく感じられ,またやってみようというきっかけになることが多くあります注1⁠。女性向けの情報サービス「MERY」では,ハートアイコンをタップすることで記事を保存できます。タップするとアイコンの色が反転しますが,ハートアイコンが少し跳ねて,色も動きを伴い変化します図4⁠。

図4 MERYのAndroidアプリ

図4 MERYのAndroidアプリ

一見見逃してしまうような動きかもしれませんが,ただ色が変わるだけよりも気持ち良く感じられ,またこの感覚を味わいたいという気持ちから押す回数が増えるかもしれません。

タップ時やクリック時の動きは,エンターテイメント性が強いゲームなどのUIが参考になることが多くあります。

Nintendo Laboで用いられている早送りボタンは,ボタンを引っ張ることで動画の速度のコントロールが可能です図5⁠。引っ張ることでボタン自体が伸びるアニメーションが表示され,速度が上がることをわかりやすく伝えながら,楽しさも両立させた事例です。ユーザーのアクションに合わせてボタンの形状が伸びるようデザインされています。

図5 ⁠Nintendo Labo』の早送りボタン

図5 『Nintendo Labo』の早送りボタン

細かな変化ではありますが,実際に何かを引っ張っているかのような演出が心地良く感じます。

注1)
このような細かな操作に対して付ける工夫を,一般的にはマイクロインタラクションと呼びます。

画面移動時のトランジション

画面と画面の間をつなぐための効果であるトランジションを工夫することで,楽しい使い心地にすることができます。特にスマートフォンアプリでは,画面を切り替える場面がよくあります。その動きを工夫することで,何が起こったかをわかりやすく伝えることはもちろん,同時に楽しさも感じてもらえるきっかけになります。

「SmartNews」では,タブからタブに移動する際に,紙をめくっているような動きが付きます図6⁠。これまで新聞を読んでいた経験があるユーザーにとっては,この紙をめくるような体験が,毎朝そして夕方の時間にアプリを起動しようと無意識に思わせることにつながるかもしれません。

図6 SmartNewsのiPhoneアプリでのタブの画面送り

図6 SmartNewsのiPhoneアプリでのタブの画面送り

UIデザインの改善は見やすい,わかりやすい,使いやすいといったユーザビリティへの効果が期待されることがほとんどで,楽しさなどへの配慮は忘れられがちです。しかし,目標に向かって改善する際に小さな動きにも着眼して施策を考えてみることで,新しい切り口が考えられるかもしれません。そして,楽しさを大切なエッセンスとしてちゃんと取り扱うことが,そのサービスのファンユーザーを獲得していくことへの大切な要素になるとも考えられます。

また,楽しいという観点はユーザーにとってだけではなく,開発者たちにとっても,プロジェクトのプロセスが楽しくなる雰囲気を作るきっかけになることもあると思っています。

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.116

2020年4月24日発売
B5判/152ページ
定価(本体1,480円+税)
ISBN978-4-297-11345-2

  • 特集1
    はじめてのトラブルシューティング
  • 特集2
    [実践]AWS CodeDeploy
  • 特集3
    アプリケーションアクセシビリティ

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/