INDEX of This Page
「動き」の役割は、注目・理解・演出
皆さん、こんにちは。本日は「動き」の役割について、T Fきりんさんにお話を伺います。よろしくお願いします。
こんにちは。よろしくお願いします。今日は、動きが持つ「注目」「理解」「演出」の3つの役割についてお話ししたいと思います。
それは興味深いですね！最近「インタラクション」という言葉をよく聞きますが、具体的には何を指すのでしょうか？
インタラクションとは本来、ユーザーが操作したときに、システムがどのように応答するかという「相互作用」を意味します。
なるほど。でも、Webやアプリのデザインでは「どんな動きや変化があったか」という意味で使われることも多いですよね。
その通りです。昔と比べて、今では様々な「動き」が実現できるようになりました。その動き自体が、使いやすさに大きな役割を果たすようになってきています。
確かに、操作時の動きって大事ですよね。
ええ。どんな操作のときにどのような動きをするのかという「動き」の設計は、サービスの使い勝手を左右する重要なデザイン領域です。
動きの効果は「注目」「理解」「演出」
動きには具体的にどんな効果があるのでしょうか？
大きく分けて「注目」「理解」「演出」の3つがあります。特に「理解」の効果は重要で、場合によってはサービスの価値そのものに直結するほどです。
例えばどんな例がありますか？
Yahoo!ショッピングで毎日のように提供されるクーポン情報がありますよね。画面右下にループするアニメーションとして表示されていて、無視したいのについ目がいってしまいます。これは「注目」の効果です。
ああ、確かに動いていると目に入りますね。
動きで「理解」を促す
動きが「理解」にもつながるというのはどういうことですか？
現実世界では、ある状態から別の状態に変化するとき、一瞬で姿が変わったり移動したりしませんよね。必ず連続的な変化があります。
そうですね。ソフトウェアでも同じように動きを表現すると理解しやすいんですか？
その通りです。動きを加えることで、ユーザーは何が起こったのかを直感的に理解できます。
iOSの設定画面の例
例えば、iOSの設定画面では次の画面に移動するときに動きを取り入れています。「日付と時刻」をタップすると、そのエリアの背景色がグレーに変化し、次の画面が右側から覆いかぶさるように現れます。
タイトルの「一般」はどうなりますか？
「一般」は左に移動しながら小さくなり、「戻る」ボタンに変化します。新しいタイトル「日付と時刻」は右側から現れて中央に移動します。
なるほど、一連の動きで画面遷移を理解しやすくしているんですね。
そうなんです。この一連の動きが1秒弱の間に行われ、ユーザーは体感的に理解できます。動きはソフトウェアの仮想世界と現実世界をつなぐ重要な役割を果たしています。
拡大して表れるページ遷移
他にも動きを使った例はありますか？
はい。「椅子」の画像をクリックすると、次のページが拡大しながら表示されるサイトがあります。これも何をしたらどうなったのかを動きで表現しています。
2段目のスライドメニュー
また、1段目のスライドメニューは左から、2段目は上や下から現れるようにすると、異なる階層に移動したことが分かりやすくなります。
「演出」としての動き
動きを「演出」として使うこともできるんですね。
ええ。動きを付けることで、純粋な面白さやカッコよさを表現できます。こうした「演出」としての動きは、操作の楽しさを通じてサービスやブランドの魅力を訴求する手法です。
具体的にはどんな例がありますか？
スクロールに合わせて画面に変化を付けるのは、最も一般的な「演出」としての動きです。画面をスクロールすると、各種パーツがそれぞれに動いていくサービスがあります。
動きがあると楽しいですよね。
さらに、全体のスクロールと背景画像などを意図的に異なるスピードで動かすことで視差効果を生み出し、奥行きや立体感を演出する手法をパララックスと言います。
パララックスには横向きの表現もあるんですか？
はい。例えば、カードとその上の文字が回転によって微妙に異なるタイミングで動くことで、中央部が盛り上がった厚みのあるカードのように見える表現もあります。
ストーリーの表現
また、スクロールによって一連のストーリーを表現することも可能です。左右に走る線から動画が展開し、それがスマートフォンの画面に変化していく様子が、スクロールに合わせて描かれていきます。
入力フィールドの状態
味気ない入力フィールドも、工夫次第で魅力的になります。例えば、文字を入力する先をクマが目で追っていき、パスワードのときには目隠しをするなど、何気ない楽しさを演出しています。
複合的な効果
「理解」の動きであり、「演出」のためでもある
動きの効果は複合的に使えるんですね。
はい。例えば、SmartNewsではカテゴリを移動する際にタブをタップするか、画面をスワイプします。どちらの場合でも「ページがめくられる」演出が入ります。これにより、ユーザーは操作で何が起こったのかをはっきりと理解できます。
確かに、ページをめくる感覚で使いやすいですね。
SmartNewsの価値と独自性は、このインタラクションにあると言っても過言ではありません。
「注目」させて、意味を「演出」する
また、Androidのホーム画面にある「検索フォーム」は、特定の日に独自の演出を行います。OSを起動して少しすると、検索フォーム左側からアニメーションが始まり、最後に赤いハートが出てきます。
それで「あ、今日はバレンタインデーだ」と気づくわけですね。
そうなんです。動くものには目がいってしまうので、自然と注目し、意味を演出することができます。
マイクロインタラクション
最小単位のインタラクション
マイクロインタラクションとは何ですか？
マイクロインタラクションとは、気づかれないほどさりげない最小単位のインタラクションのことです。サービスの細部に多く盛り込まれていて、その有無で使い勝手に大きな違いが出ます。
具体的にはどんな例がありますか？
Twitterで「いいね」ボタンを押すと、ハートマークの色が変わるだけでなく、細かな動きが加わります。これによってユーザーにちょっとした楽しさを提供し、状態変化を強くフィードバックしています。
確かに、あのアニメーションは嬉しいですね。
他にも、パスワード設定画面で入力した文字の妥当性をすぐに表示してくれるものもあります。こうしたささやかな利便性がマイクロインタラクションによって実現され、積み重ねがサービス全体の品質を底上げします。
小さな工夫が大きな効果を生むんですね。
その通りです。マイクロインタラクションはユーザー体験を向上させる重要な要素です。
今日のお話で、動きの重要性がよく分かりました。
本日は貴重なお話をありがとうございました。
こちらこそ、ありがとうございました。ぜひデザインに活かしてください。
