インタラクションデザインの意味とは
インタラクションデザインはWebだけでなく、さまざまな製品に使われています。ここでは、インタラクションデザインの意味や役割を理解しましょう。
参加型デザインである
インタラクションという言葉は『相互作用』という意味を持っており、機械のボタンを押すとランプが点灯するというような、製品とユーザーの間のやりとりを指しています。
インタラクションデザインの役割は、ユーザーのアクションに対する適切なリアクションを設計し、ユーザーと製品の関係を向上させることです。
人と機械の間の対話が一方的では、ユーザーが気持ちよく操作できません。アクションに対応したリアクションが正しくなされているかどうかは、使い勝手を大きく左右するでしょう。
設計にはエンジニアやデザイナーが参加し、互いに協力しあいながら作業を進めていきます。
インタラクションデザインのポイント
インタラクションデザインの基本は、どんなユーザーが、どんな場面で、どのように使用するのかを考えることです。このポイントを考えながらデザインすると、ユーザーにとって価値のある製品を作れるでしょう。
Web制作の現場で使用する場合、サイトにアクセスするユーザーにとっての使い心地や、使用した上でどんな印象を持つかという点が重要視されます。
どんなに革新的な機能を作ったとしても、見せ方が悪ければユーザーにとって使いやすいサイトにはなりません。使い方が難し過ぎたり、機能にたどり着くまでに時間がかかり過ぎたりしないように注意する必要があります。
インタラクションデザインの進め方
インタラクションデザインはどのように設計していけばよいのでしょうか。進め方のヒントを紹介します。
目的を考える
目的が曖昧なままインタラクションデザインを進めても、十分な効果を得られません。ユーザーの思考をシミュレーションし、設計に反映する必要があります。
例えば『初めてサイトに訪れた人でもスムーズに利用できるように作る』など、目的を具体的に決めた上でデザインしましょう。
どのようなデザインにしたらよいのかを決めかねる場合は、あらかじめ決めておいた目的を思い出すことで、適切なデザインを決定していくことができるようになります。
提案と修正、改善を繰り返す
ある人にとっては分かりやすくて使いやすいデザインでも、別のある人にとっては操作しづらいデザインという場合があります。
とくにWebのように日進月歩の分野では、新しい技術にまだ慣れていない人や、思い違いによって引き起こされる困難を想定してデザインすることが大切です。
テスト段階でのフィードバックだけでなく、運用を開始してから寄せられたユーザーの声にも耳を傾け、使いにくい部分の修正と改善を繰り返せば、より適切なインタラクションデザインを提供できるでしょう。
マイクロインタラクションを知ろう
『マイクロインタラクション』は、直訳すると『ごく小さいやりとり』という意味があります。ユーザーのアクションに対する結果を、正しく届けるための細かいデザインのことです。
マイクロインタラクションを駆使することで、より魅力的なコンテンツを作れます。ここでは、マイクロインタラクションの具体例をチェックしましょう。
分かりやすさと魅力的な演出
マイクロインタラクションで重要なのはユーザーにとっての分かりやすさです。
例えば新着メッセージが届く状況を想定してみましょう。メッセージが届くと同時に通知音が鳴る設計にすれば、すぐにメッセージの存在に気づけます。
そして、その音が心地良いものであれば、ユーザーがそのサイトやアプリに対して持つイメージの向上につながります。ユーザーの使いやすさ・分かりやすさが第一ではありますが、同時に魅力的な演出を盛り込むことも重要なのです。
良い例と悪い例
ユーザーの使い勝手が向上するようなマイクロインタラクションは良い例です。
例えば、あるSNSの記事に対して『いいね』などの高評価を伝えるアイコンをクリックすると、マークが弾けるようにアニメーションして反応するデザインがあります。
アイコンが正しくクリックされたことを伝えるだけでなく、明るい気持ちを誘うような演出となっており、良い例だといえるでしょう。
一方で、良い例ばかりではなく悪い例もあります。どんなにスタイリッシュな演出が使われていたとしても、無駄なものばかりでは意味がありません。
例えば、アイコンが意味もなく時間差で現れるなどの演出はユーザーを混乱させてしまうため、良い例だとはいえないでしょう。
ユーザー体験を意識したWebデザイン事例
インタラクションデザインを駆使すれば、ユーザーの使いやすさだけでなく、ユーザーの心を動かす工夫ができます。ユーザー体験を意識したデザインの事例をチェックしましょう。
心地良いマウスインタラクション POGG
アニメーションやマイクロインタラクションを使い、メインの商品であるスイートポテトパイを魅力的に紹介しているサイトです。
写真や商品紹介といった要素をあえてずらして配置することで、ユーザーの興味を引くデザインを実現しています。
また、新着情報リストや店舗リストにマウスホバーアニメーションを採用しており、思わずクリックしたくなる楽しいデザインに仕上げているところにも注目です。
アクションとアニメーションの組み合わせが、単なるリストをエンターテインメントに押し上げ、ユーザーにちょっとした感動を与えることに成功しています。
スクロールで回転 オロナイン公式サイト
ページをスクロールすると画面に配置した画像がアニメーションします。メインの商品であるオロナインを可愛らしくアピールすることに成功しているといえるでしょう。
こうした使用頻度が高いアニメーションは、JavaScriptライブラリを活用すれば一からプログラムを作成しなくても済むため、プログラミングにそれほど詳しくない人でも簡単にデザインに取り入れられます。
インタラクションデザインに求められる力
インタラクションデザインを作り上げるには、具体的にどのような能力が必要とされるのでしょうか。優れたインタラクションデザインをするにあたり、求められる能力を紹介します。
アイデアを伝える力
どんなに素晴らしいアイデアを思いついても、プロジェクトの責任者や他のデザイナーたちに伝える力がなければ、良いデザインを作れません。
インタラクションデザインのアイデアを、他の人に見える形にまとめて伝える能力が必要です。
目に見える形としてアイデアをスケッチブックに描いたり、試作品を作成したりして、説得力のある説明をする力を身に付けましょう。
デザインソフト、映像編集のスキルなど
PhotoshopやSketchといった画像編集に特化したデザインソフトの使い方を身に付けておくと、アイデアを落とし込む際や他者にアイデアを伝えるビジュアルイメージを作成する時に活用できます。
また映像編集のスキルがあれば、より分かりやすくアイデアを伝えられるでしょう。必ずしもソフトを扱う高度なスキルが必要になるわけではありませんが、アイデアを分かりやすく伝える手段として学んでおいて損はありません。
まとめ
インタラクションデザインは人と機械のやりとりをスムーズにするためのものです。目的を見誤ったデザインをしてしまうと、思ったような効果が得られないばかりか、ユーザーの心が離れてしまいます。
無意味にアニメーションさせるのではなく、動きに意味を与え、使いやすさを向上させるデザインをすることで、ユーザーからの共感や好印象を得られるでしょう。
