インタラクションの意味とは
『インタラクション』は、2者間でのやり取りを意味します。人が動いて、何か他の物が反応したときの様子がインタラクションです。
多くの場合、人間と機械のコミュニケーションを指すことが多いですが、決まった定義はありません。基本的には人が何らかの動きをした結果、何かのシステムや機械などが反応する様子を指します。
たとえば自動販売機なら、人がボタンを押すと機械が反応し、ジュースが出てくる様子がインタラクションです。
インタラクションの使い方
インタラクションという言葉は、さまざまな場所で使われます。使い方としては、「人と機械のインタラクション」や「インタラクションデザインにこだわった製品」などです。
インタラクションの意味としては、『2つの物が影響を与え合う様子』と考えましょう。正しい使い方があるというよりは、相互作用という言葉に置き換えて考えると分かりやすいです。
もちろん、コンピューター関連の用語としてだけでなく、相互に影響しているものならインタラクションという言葉を使っても問題ないでしょう。
2つの英語を組み合わせた言葉
インタラクションは英語の『inter』と『action』を組み合わせた言葉で、直訳すると『相互作用』や『交互作用』です。interは『相互に』の意味を持ち、actionには『行動』や『作用』の意味があります。
いわゆる造語に近い言葉で、具体的な定義が決まっていないのは、生まれて時間が経っていないことも原因でしょう。1900年代前半頃から使われていますが、現在では主にコンピューター用語として知られています。
インタラクションデザインの概要
『インタラクション』だけでなく、デザインの分野では『インタラクションデザイン』が注目されています。インタラクションデザインは、使用者と商品のインタラクションに関わるデザインです。
つまり、人とソフトウェアなどの製品が関わったとき、問題なく起動してスムーズに動作することがインタラクションデザインの一部です。もちろん、起動するかどうかだけでなく、使用者が快適に利用できることも重視されます。
インタラクションデザインの目的
インタラクションデザインには、人間が機械を使いやすいように配慮するなどの目的があります。ちょっとした問題や日常のいらいらする出来事を取り除き、快適に使えるようにするのがインタラクションデザインの役割です。
他にも、メールやSNSなど、人と人とのコミュニケーションを円滑に進めるためのサービスを作ることも、目的としてあげられます。
優れたUXにつながる要素
UX（ユーザーエクスペリエンス）は、何らかの製品やサービスなどを使ったとき、人が何らかの経験をすることを意味します。ユーザーが快適な体験をするか、それとも不便で価値のない体験をするのかは、インタラクションデザイン次第とも言えるでしょう。
小さなスマホ一つにしても、インタラクションデザインがなければ使用者は何もできません。ボタンを押せば電源がつき、画面をなぞればアプリが起動するなど、インタラクションデザインは大切な要素です。
優れたインタラクションデザインを作ることは、ユーザーの利便性につながり、生活が便利になるなどの優れたUXにつながるのです。
デザイナーとしての心得
インタラクションデザイナーとしての心得には、人間中心のデザインを作り上げることがあげられます。もし素晴らしい製品を開発したとしても、人間が使うことを考えていなければうまくいきません。
ユーザビリティーを重視し、説明書なしでも使えるシンプルさや、視覚的に分かりやすいデザインを作りましょう。ユーザーが簡単に学習でき、誤りがあったときのフィードバックの用意も必要です。
音や光、アニメーションなどでユーザーを誘導し、分かりやすい製品を作る必要があります。
マイクロインタラクションとは
マイクロインタラクションは、何らかのシステムを人が使ったとき、反応して動くアニメーションなどです。光や音など、操作に合わせた反応も、マイクロインタラクションの一種に当たります。
単なるアニメーションと思われることもありますが、操作に対して反応していることが主な条件です。
基本要素
マイクロインタラクションの基本要素は、マイクロインタラクションが起こるきっかけとなる『トリガー』や、ユーザーに対する『フィードバック』などです。
また、何を操作したときにマイクロインタラクションが起こるのか定義付け（ルール化）も行われます。継続して反応する場合は、ループ処理も重要な構成要素です。
身近なマイクロインスタラクション
身近なマイクロインタラクションには、アプリを起動したときのアニメーションがあります。ローディング画面もマイクロインタラクションの一種です。中には、キャラクター紹介とちょっとしたゲームなどが始まり、楽しめる仕組みもあります。
また、メールが届いたことを知らせる光や音、スマホ画面上のメールアプリに追加される数字などの通知システムもマイクロインタラクションに該当します。
パソコンやスマホ、アプリなどのソフトウェアだけでなく、玄関の扉を開けたら電気がつく仕組みや、自動販売機のボタンを押すと光るのもマイクロインタラクションです。
インスタグラムの例
デザインにこだわっているインスタグラムにも、多数のマイクロインタラクションが盛り込まれています。たとえば、スクリーンショットを撮るとシェアを促す通知が表示されます。
その他、写真をダブルタップするだけでいいねができる機能や、日本語以外の言語に翻訳ボタンが表示される機能なども、ユーザビリティーを高めるために使われています。
写真をコレクションするときにも、プロフィール画面への格納をアニメーションで表すなど、分かりやすさが魅力です。
注意点
マイクロインタラクションを取り入れる上で注意したい点は、美しさやデザイナーとしての気持ちを優先させないよう心がけることです。マイクロインタラクションは、ユーザーが操作したときに、毎回表示されます。
特定のルールに従ったときのみ表示されるものも多いですが、グラフィックの美しさだけを追求するものや、機能的でないものは基本的に不要です。
デザイナーとしてはアニメーションの美しさや、凝った機能にこだわりたくなりますが、あくまでもユーザーの使い勝手を第一に考えましょう。もちろん、使いやすくて、そのうえ美しいデザインなら問題はありません。
Webデザインに取り入れよう
Webデザインにマイクロインタラクションを取り入れることは、サイト上で何が起きているかユーザーに伝えるために必要です。
マイクロインタラクションを表示させる間もなく素早いレスポンスが実現できる場合は不要ですが、利用者を待たせてしまう場合にはローディング画面などを表示して、待ち時間があることを伝えます。
ローディングなどシステム状況の表示
システムが必要なデータをロードしているときには、マイクロインタラクションとしてローディング画面を表示します。それだけで、利用者は今何が起きているのか、どのくらい待たなければならないかを推測できます。
もしローディング画面がなく、ただ暗い画面が表示されるだけでは、待つべきなのかも判断できません。ユーザビリティーを考えれば、ロード中のアニメーションは有意義なマイクロインタラクションです。
チュートリアルアニメーション
利用者に使い方を分かりやすく伝える、チュートリアルアニメーションも便利な機能です。言葉では説明しづらい内容も、アニメーションにすれば簡単に伝わります。
チュートリアルは、初めて使用する場合など、使い方を知りたいユーザーに対してのみ表示されるように設定しておけば、普段の使い勝手も悪くなりません。
たとえば、アプリの使い方をユーザーに伝えるとき、アニメーションで押すべきボタンや画面遷移の方法を示せば、短時間でチュートリアルが終わります。
画面遷移を分かりやすく
Webサイトを見ている人に、今いる位置を伝えるのもマイクロインタラクションです。サイト内はいくつものページで構成されており、移動しているうちに混乱をまねくことも多いため、ページを移動したことや、移動先を分かりやすく伝えることが重要になります。
たとえば、見出しをクリックすると文字が光り、色が変わることで画面遷移したことを分かりやすくできるでしょう。今何を見ているのかが瞬時に把握できます。
また、スワイプで画面切り替えを行う場合も、瞬間的に切り替わるのではなく横や縦に移動していくアニメーションを取り入れれば、次のページに移動したことが、より鮮明に分かります。画面がどこへ移動したのか分かるアニメーション作りが大切です。
ボタンのデザイン
ボタンのデザインを分かりやすくすることも、インタラクションデザインの大切な要素です。ぱっと見てボタンなのか単なる画像なのか分からないものは、ユーザーに優しくありません。
できるだけ、美しいデザインかどうかよりも、すぐにボタンだと分かるデザインを選びましょう。
一目で押せると分かるボタン
一目で押せると分かるボタンは、陰影のついた塗りつぶし型のボタンです。影がついているために、クリックできるボタンだと判断しやすくなります。
陰影がなく、周囲に空白のスペースも作られていなければ、単なる枠なのか押せるものなのか、見た人が混乱してしまいます。インタラクションデザインを考えるときは、できるだけ人が見たときにボタンとすぐ分かるデザインを選び、その上で見た目も美しく整えることが大切です。
気持ちのよい動きをするアイコン
いいねボタンなどに代表されるエモーションアイコンは、魅力的なインタラクションデザインです。ハートマークが動くアニメーションや、アイコンの大きさが変化するなど、気持ちのよい動きを取り入れましょう。
使う人が楽しい気分になるようなアイコンは、Webサイトに欠かせません。素敵なアイコンはまたクリックしたくなり、サイトに訪れるユーザーをリピーターにしてくれるでしょう。
SVG画像とCSSで実装可能
アニメーションは、SVG画像とCSSを使って実装できます。CSSのプロパティを変えると、アニメーションのように画像が動き、アイコンやボタンを押したときの動きが取り入れられる仕組みです。
CSSを使ったアニメーションは自由度が高く、一定時間ごとに画像の角度や形が変わる仕組みなどを簡単に作れます。Webサイトに利用したいときは、積極的に活用しましょう。
入力フォームのデザイン
入力フォームのデザインは、入力者が分かりやすくて使いやすいことが重要です。たとえば、自動でテキストやフォーマットを整えてくれるデザインや、入力が楽しめるものが使いやすいと言えます。
ユーザビリティーを優先してデザインを組めば、快適な入力のサポートが可能です。
自動でフォーマットを整える
たとえば電話番号などを入力するとき、正しい位置にカッコやハイフンを入力するのは手間がかかります。マスキングフィールドを利用すれば、テキストを入力するとフォーム側が自動的にフォーマットを整えるため、ユーザーは快適です。
似たようなものにプレースホルダテキストがありますが、こちらは入力者がフィールドにカーソルを当てるとヒントテキストが消えてしまうため、あまり役立たないことがあります。
どのようなシステムを使うかは、対象のユーザーを想定して考えましょう。状況や対象者によって、快適なインタラクションデザインは変化します。
入力したくなる楽しいデザイン
インタラクションデザインは、入力したくなるようなフォームを作ることが重要です。快適な入力をサポートするだけでなく、ちょっとした遊び心も取り入れましょう。
もちろん、ユーザーの行動を妨げないことが前提です。ちょっとしたアニメーションやフォームの変更で、顧客がストレスなく使えるWebサイトが作れるでしょう。
ただし、想定する対象ユーザーに適したマイクロインタラクションにするのがポイントです。たとえば、10代の女性が楽しいと感じるものと、50代の男性が興味を引かれるものには大きな違いがあります。
参考になる書籍3選
インタラクションデザインやマイクロインタラクションを学びたいとき、役立つ書籍を紹介します。インタラクションの概要や、デザインの重要性が知りたいときに役立つでしょう。
これからUXデザインを学びたい人や、デザイナーとして活躍したいなら一読がおすすめです。ユーザビリティーの向上とデザインの関連がよく分かるでしょう。
インタラクションデザイン
『インタラクションデザイン』には、国内外の制作事例が200例収められています。どんなデザインがあり、クリエイターがどのような目的で作成したのか一目で分かる書籍です。
概要だけではインタラクションデザインがどんなものなのか理解できない人でも、個別の事例を見ればすぐに分かります。簡単に、どの技術を使って制作されたのかについてもまとめられているため、デザイナーにとって役立つ一冊です。
- 商品名：インタラクションデザイン
- 価格：3240円
- Amazon：商品ページ
マイクロインタラクション
『マイクロインタラクション』は、一つのことだけを行うインタラクションに特化した書籍です。UXの改善に役立つマイクロインタラクションとは何なのか、概要や意味などを解説している書籍です。
分かりやすく、マイクロインタラクションを分解し、4つの要素に分けて解説していることも魅力でしょう。実例つきで、ドキュメント作成やプロトタイプなどの実践的な内容もまとめてあります。
インタラクションデザインの第一人者でもあるドナルド・ノーマンが推薦していて、インタラクションデザインを学び始めた人にぴったりの一冊です。
- 商品名：マイクロインタラクション
- 価格：2592円
- Amazon：商品ページ
インタラクションデザインの教科書
『インタラクションデザインの教科書』は、すでにインタラクションデザイナーとして活躍している人から、用語を知ったばかりの人まで分かるように書かれています。
概要だけでなく、具体例も多数紹介されている本です。
初心者向けの内容から具体例まで紹介されており、一冊である程度理解したいと考える人にもおすすめです。教科書的に、オールマイティーな内容で、読者の疑問に答えてくれます。
もちろん、専門分野としてのインタラクションデザインだけでなく、テクニックを知って他の分野で活用したい人にも役立つでしょう。
- 商品名：インタラクションデザインの教科書
- 価格：1361円
- Amazon：商品ページ
まとめ
インタラクションは、定義があいまいな言葉ですが、人と機械、または人と人の関わり合いを示しています。
近年では、アプリやソフトウェアが人間の操作に対してどのように動くのかということが、主なインタラクションの意味合いです。さまざまなインタラクションデザインを通して、ユーザビリティーの向上が期待できます。
デザイナーは、デザインの美しさにこだわりすぎず、ユーザー重視の内容を考えることが大切です。