Webデザイン実践Ⅲ<インタラクション>|12.インタラクション概論/ワークショップ

インタラクション概論

動くとはどういうことか

「動く」とひとことで言ってもさまざまです。ウェブサイトにおける「動く」は、たとえば以下のような分類ができます。
  1. 商品や世界観を伝える「映像/動画」(youtubeなど)
  2. インフォグラフィックスなどを演出するための動き
  3. フェードイン/フェードアウトなどの効果
  4. パララックス(視差効果)
  5. ボタンなどを押した時の変化

このうち①はプレーヤーが必要になります。 ②〜④はスクロールにより発動します(これを「着火する」と言ったりします)。⑤はボタンにhoverしたり、ボタンを押したときに発動します。

これら②〜⑤の、ユーザーの動作に応じて変化する小さい動きのことを「マイクロインタラクション」と言います。ユーザーにとって有益な情報を提供するインタラクティブなアニメーションのことだと認識しておくと良いでしょう。

マイクロインタラクションのメリットは以下のようなものが考えられます。

  1. フィードバックがあることで使いやすくなる
  2. コントロール感を得られる
  3. ブランディングに寄与する

これらのマイクロインタラクションは総じて"心地よい動き"である必要があります。たとえばフェードが遅かったり、インタラクションによって文字が読みにくなってしまうのは本末転倒です。

映像/動画

youtubeの台頭により動画の埋め込みなども盛んです。こうした動画による説明はわかりやすいだけではなく、ブランディングにも大きく寄与します。反面、動画を全部見なければ全容がわからなかったり、wifi環境のないスマートフォンで強制的に再生が始まってしまうことでマイナスの印象を抱くこともあるでしょう。

たとえばyoutubeのプレーヤーはスマートフォン向けでは自動再生がされません。外部メディアを埋め込む際はこうした仕様にも気を配りましょう。

音声UI

現状のウェブデザインとは直接関係はありませんが、パソコンやスマートフォンの音声アシスタント、スマートスピーカーなどの製品に実装されているVUI(Voice User Interfaceボイスインターフェース)も今後ますます発展していくものと思われます。

スクリーン上での操作と異なり、マウスやキーボードを使わなくても操作ができるという点が優れています。