活用事例からみるマウスインタラクション

マイクロインタラクションは2017年のもっとも大きなトレンドの一つとして、ビットコインと同様に話題になりました。デベロッパー達は進んでユーザー体験をよりよいものにしようとし、熱意を持ってこの仕事に当たりました。私たちは少しずつ、知的で分かりやすいインターフェイスの時代へと入っていったのです。

よいユーザー体験の根幹を成すものとして、上質なマイクロインタラクションはとてもよい効果をもたらします。この工夫のおかげでWebサイトは馴染みやすくより人間らしさを持ち、魅力的で遊び心にあふれたものになります。インターフェイスはより直感的に操作できるものになり、楽しさを提供しています。

これとは別に、優れたインタラクションとして、マウスを通したインタラクションがあげられます。タッチスクリーンの普及の勢いは凄まじいですが、多くのユーザーはマウス無しではやっていけないでしょう。ドラッグ&ドロップがよい例です。

DurocのサイトのTopページにもこの技術が使われています。このサイトのポートフォリオを見て回りたければ、格子状に並んだ案件の中から文字通りドラッグして持ってくるだけでいいのです。魅力的なアイデアですが、素朴なものです。

しかし、このアイデアにはまだまだ可能性があります。廃れたわけでも時代遅れになったわけでもないのです。Ben Mingoの例を見てみましょう。

Ben Mingoのフロントページには、マウスポインタの効果に彩られた１本のスクロールバーがあります。スクロールするためにはこのバーをマウスでドラッグしなければなりません。そしてドラッグしたままマウスを動かすと、スクロールバーのピクチャーが滑らかに動き出します。こちらはより洗練されたインタラクションの例です。

マウスインタラクションを２つのグループに分けてみましょう。

１つ目は、Webアプリとユーザーの間のギャップを埋めるものです。一例としてWalking Menでは、マウスポインタを半透明の円で表しており、メニューアイテムやボタンなどの重要なUIにポインタが置かれた時に円のサイズを拡大してユーザーに知らせています。

２つ目は、ユーザーを楽しませるために使われるものです。Virtual Selfにおける、マウスカーソルを合わせると中央のオブジェクトの輝きが増す仕掛けがこれに当たります。

私たちにとって１つ目のグループに含まれるマウスインタラクションがとても重要です。Webサイトは年々洗練されてきて、精巧な作りになっています。入念に考えられたマイクロインタラクションが無ければ、サイトの進化について行けないでしょうし、サイトの魅力を十分にユーザーに理解してもらうことも難しいでしょう。

マイクロインタラクションが適切に用いられると、どんなユーザーにも心地よさを感じてもらうことができます。伝えたいメッセージが明確になり、操作性が向上し、より楽しいユーザー体験を提供できるでしょう。

ほとんど気付かれないような小さな効果から、ダイナミックにユーザーの注意を惹きつける方法まで、開発者たちはインタラクションの分野を深く調べ続けました。あまりにもサイトが静的すぎることを避けようとした開発者たちが、より優れた方法としてマウスインタラクションにたどり着いたのは自然な流れです。

エンタメ要素の入ったインタラクション

エンタメ要素の入ったインタラクションは、補助的な位置付けで使われます。使い方としては、

• ユーザー体験を豊かにする
• ブランドの独自性を強める
• ユーザーの注意を引くポイントを作る
• クリエイティブな雰囲気を強調する
• メッセージを伝える

代表的な例はKappowです。大きく描かれた「K」に小さな効果が組み込まれていて、マウスカーソルをこの上に重ねることでその効果を確認できます。水しぶきのような泡の演出は2016年初期には斬新で、今だに目を引く効果があります。

同じ仕掛けはSocialclubにも使われています。このサイトには、昔から使われ続けている信頼のおけるやり方がソリューションとして採用されました。

開発チームはTopページをスケッチブックに見立てて、サイトを訪れた人にデジタルペンシルを持たせて落書きさせるのです。スタート地点は２つの目が示してくれています。仕掛け自体にはまったく新しさはありませんが、適切なアプローチで、見る人の心を捉えています。

VeoliaとShuttle by Wonderland Industryはいずれも、マウスインタラクションを多用しサイトの美しさを作り上げている典型的な例です。それぞれ「ストーリーテリング」と「ゲーム」という、２つの大きな方向性を打ち出しています。

The resourcing machineは全面的にイラストで構成されたサイトで、訪れたユーザーは自分で物語を紡ぐようにカラフルなイラストを存分に見て回ることができます。このアイデアの中でマウスインタラクションは重要な役割を果たしています。マウスインタラクションによってユーザーを導き情報を提供するなど、ユーザーとのコミュニケーションツールとなっています。

Shuttle by Wonderland Industryのサイトでは、マウスを使って伏せられたカードをめくり、隠された絵を明らかにするゲームが体験できます。

最新技術を使ったインタラクション

もしもっと独創的で斬新な使用例に関心があれば、最新技術を使ったインタラクションを見るのがいいでしょう。マウスをアクションの中心に据えた、最高レベルのWebGLを実装しているIbiza Music ArtistsとLa shop studiosのサイトを見てみましょう。

これらのサイトに入ると、Three.jsのようなハイエンドツールで作成された洗練された画面が出迎えてくれます。Ibiza Music Artistsの開発チームは、リアルで壮麗な背景でユーザーを魅了します。この背景は水面を模してあり、ユーザーがマウスカーソルを動かすとそこに波紋が起きるのです。ほんの小さな仕掛けが感動的な印象を作り出しています、

La shop studiosのスタッフは逆に、スキューモーフィズム（リアルな質感の再現）にこだわるよりも人工的な質感を好んでいます。楽器の弦にインスパイアされたテーマが、ユーザーに電子的なインタラクションを提供します。

これまでの例とは異なり、Folk Strategiesのサイトにはハイテクさを感じませんが、マウスインタラクションの使い方は一級品です。シンプルでありながら、エレガントで独創的です。マウスカーソルの動きに従って、テキスト情報のエリアが伸縮します。

最後に、これは最低限の条件ですがインタラクションはわかりやすく明白であるべきで、時にはある種「うるさい」ものでさえある必要があります。Anagram Parisのサイトにはダイナミックな効果が仕込まれおり、とてもよいのですがユーザーが気づく為の明白な指示はありません。

もしページのローディングを待っている間に「またか」と思ってうんざりしてしまえば、画面上のカウンターにも注意が向かないでしょうし、下の方に小さく表示される「ローディングが終わったらサイトをドラッグしてみてください」という注意書きにも気づかないでしょう。単純に、ユーザーは何をすればいいかわかりません。おそらくサイトの閲覧の際にはマウスのホイールかスクロールバーを使って済ますので、せっかくサイトを魅力的にする為に用意しているエフェクトにも気づいてもらえずに終わってしまいます。

まとめ

マウスインタラクションには様々なバリエーションが存在します。それぞれに異なる目的を持ち、異なるゴールを目指しています。ユーザーを楽しませるためのものであれ、彼らを導くためのものであれ、ユーザー体験の充実と将来のWebサイトの発展のためには必要な技術です。

あなたにとってマウスインタラクションは心地よいものですか、それとも邪魔なものですか？　こんなふうに人を夢中にさせるようなインタラクションを経験したらぜひ教えてください。