製品やサービスのUI/UXを良いものにするためには、優れた「インタラクションデザイン」が必要になります。

「インタラクションデザインがどういうものか良く分からない」

「インタラクションデザインをどうやって自社に取り入れたらいいのか分からない」

と感じている担当者の方もいらっしゃるでしょう。

今回の記事では、インタラクションデザインの概要や具体例、企業が優れたインタラクションデザインを考えるためのポイントなどについて解説いたします。

NOROSHIは、デザインコンサルティングファームとして100以上のプロジェクトを支援してきました。プロダクトの使いやすさを左右するインタラクションデザインは、ユーザーの満足度や継続利用率に直結する重要な領域です。本記事では、理論だけでなく実務で活かせる視点もあわせて解説します。

インタラクションデザインとは？

「インタラクションデザイン」とは、ユーザーと製品・サービスとのやりとりを設計することです。

具体的には、「ユーザーが何か働きかけたとき、製品がどう反応し、それを見たユーザーが次にどう行動するか」を設計します。

この一連の流れ全体を、使いやすく、美しく、心地よいものにすることを目指す考え方がインタラクションデザインです。

ちなみに、インタラクション（interaction）は日本語で「相互作用」や「やりとり」を意味します。

これは「inter(間の)」と「action(行為)」が組み合わさった言葉で、モノが一方的に人を動かしたり、人が一方的にモノを動かしたりするのではなく、双方向的にお互いがお互いに働きかけることを意味します。

もともとHCI（ヒューマン・コンピュータ・インタラクション）という分野から派生した概念であるため、「インタラクションデザイン」という言葉が使われる時は、基本的にはデジタルプロダクト（いわゆる「機械」と呼ばれるもの）とのインタラクションを指します。

インタラクションデザインの5つの次元

インタラクションデザインを整理する枠組みとして「5つの次元」があります。

これらの要素をそれぞれ意識し組み合わせることで、ユーザにとって良いインタラクションデザインが考えやすくなります。

1次元：言葉

言葉は、情報を説明する単純な要素です。また、語調は製品やサービスの雰囲気や世界観も伝えることができます。

ちなみに一般的な用語としての1次元は「線」のことですが、言葉は線ではありません。あくまでインタラクションの中で「もっとも単純・基本的」なものの比喩です。これから紹介する5次元までの要素も全て比喩表現で、数字が増えるほどより複合的な概念になっていきます。

例えば、「送信」「削除」など、「ボタンを押すと何が起きるのか」といったインタラクションに関する情報は分かりやすく説明される必要があります。

また、表現や語調の一貫性も重要です。同じ意味で複数の表現が使われたり、語調がバラバラだったりしてしまうと、ユーザーは混乱してしまいます。

言葉はインタラクションデザインにおいて重要な役割を持っていますが、言葉を使って説明をしすぎると、かえって分かりにくくなってしまうことも。長い文章や難しい用語はユーザー体験を悪化させてしまいます。

また、海外の方も使う製品やサービスの場合、日本語だけで説明をしようとすると言語の違う方には理解できないようになってしまうため注意が必要です。

2次元：ビジュアル表現

アイコンやイラスト、写真などで操作後の反応をイメージさせる要素が「ビジュアル表現」です。

また、適切な情報の構造や優先度づけ、配色といった要素も良いインタラクションのためには重要です。

ビジュアル表現を使うことで、より直感的にユーザーが操作しやすくなります。

一方で、全てをアイコンやイラストなどのビジュアル表現にすると伝わりにくいこともあるため、言葉との使い分けや、組み合わせ方も重要です。

例えば、ドリンクバーで出てくる飲み物のボタンが全てアイコンだけで表現されていると、「これはお茶で合っているかな…？でも何のお茶だろう…？」といった不安をユーザーが抱えてしまいます。

アイコンに加えて「ウーロン茶」という言葉を記載することでユーザーは明確に判断ができるようになります。

3次元：物理的な物体や空間

ユーザーが操作をする道具や機器、ユーザーのいる場所や環境も一つの要素です。

スマートフォンやPCのマウスとキーボード、リモコンやボタンなど、ユーザーは物理的な物体を扱い操作を行います。

また、ユーザーの置かれている場所がどこなのかや、どういった環境なのかによっても最適なインタラクションデザインは変わってきます。

Webサイトやアプリにおいては、デザインするインタフェース自体は2次元ですが、ユーザーが使用しているデバイスを考慮したデザインが求められます。

例えば、ユーザーがスマホを使うのか、パソコンを使うのか、テレビのモニターで見るのかといった状況によって最適なインタラクションデザインは変わってきます。近年では、複数のデバイスで利用されるケースを考える必要性も高まってきています。

4次元：時間

インタラクションデザインにおいては、時間の経過も考慮する必要があります。

具体的には、ユーザーの操作に対し、「どれくらいの時間で反応するべきなのか」、「時間内にどのような反応を返すべきなのか」などを考えていく必要があります。

実は、アニメーションや音も時間の関係する要素です。

例えば、動作の読み込み中にロード画面を表示させると、ユーザーは反応が得られるまでの時間がどれくらいか想像することができ、無駄なストレスを抱えずに済みます。

5次元：行動

従来、インタラクションデザインにおける次元は4次元まででしたが、5次元まであるという考え方も広がってきています。

その5次元が「行動」で、ユーザーと製品やサービスそれぞれの行動も、インタラクションデザインの一要素です。

ユーザーがどのような行動をとるか、それに対して製品やサービスはどのような行動をとるか、を繰り返し設計していくことで、ユーザーは自然と製品やサービスを利用することができるようになります。

UXデザインとインタラクションデザインの違い

「インタラクションデザイン」に類似する言葉として「UXデザイン」という言葉もあります。

ISO（国際標準化機構）によるUXの定義：製品、システムまたはサービスを使用した（使用しようとする）ときの、人間の知覚や反応

UXは体験に焦点を当てているという部分で、インタラクションデザインにかなり近い概念といえます。

良いUXを実現するためのインタラクションデザインという位置付けだと考えると分かりやすいでしょう。

一方、インタラクションデザインという言葉を使う時には、ディスプレイとキーボードを通したインタラクションだけでなく、VRゴーグルや振動の伝わるベストなど、さまざまなデバイスとの五感を使ったインタラクション、あるいは使いやすさだけでなくもっと美的な表現が含まれます。

インタラクションデザインが直接システムとインタラクションする場面に焦点を当てるのに対して、UXデザインはシステムに触れる前後も含むので、UXデザインの方がより広い概念と言えます。

※関連記事：UI/UXデザインとは？基本知識から優れたUI/UXの特徴、設計・改善のポイントまで徹底解説！

インタラクションデザインを行う3つのメリット

ここまでインタラクションデザインの概要や具体例を解説してきましたが、企業にとってはインタラクションデザインを行うことでどのようなメリットがあるのでしょうか？

ここからは、企業が自社の製品やサービスにインタラクションデザインを行うメリットについて解説していきます。

ユーザーの操作性が向上し、ユーザー体験が良くなる

適切なインタラクションデザインを行うことで、ユーザー体験全体が良くなり、製品やサービスに価値を感じてもらいやすくなります。結果として、自社のブランド価値の向上や、競合との差別化、ユーザーの継続利用にも繋がります。

また、ユーザー体験の良い製品やサービスは、口コミが増え広告費の削減に繋がることも。

コンバージョン率や収益の向上

ユーザーが製品やサービスを購入したり課金したりするまでの流れを最適化することで、コンバージョン率や収益の向上に繋がります。

例えば、ECアプリではアプリの使いやすさが収益に直結します。ユーザーが商品の購入に迷ってしまうと、離脱をされてしまう可能性が高まりますし、次回以降のリピートにも繋がりにくくなってしまいます。

開発における手戻りの削減

製品やサービスを開発する際、インタラクションデザインをあらかじめ考えておくことで、無駄な工数を割かずに機能の開発やUI/UXデザインが行えます。

まだ製品やサービスの形ができていない新規事業の立ち上げ時は、しっかりと顧客理解を深めた上でインタラクションデザインを考えておく必要があります。

プロダクト設計の実務においては、「どこまで自動化し、どこにユーザーの意思決定ポイントを残すか」を機能単位で検討することが重要です。自動化によって便利になる部分と、ユーザーが自分でコントロールしたい部分を切り分け、それぞれに適切なインタラクションを設計しましょう。

企業が優れたインタラクションデザインを考える3つのポイント

インタラクションデザインの概念を理解することができても、自社に取り入れて製品やサービスを開発したり、改善したりするためにはまた別のノウハウが必要になってきます。

企業が自社でインタラクションデザインを行う際は、次の３つの施策から自社のリソースや課題感に合った手法を選定し、分析結果を取り入れると良いでしょう。

1.    一般的な原則を利用する（工数：小）

2.    類似する製品やサービスの事例を調査する（工数：中）

3.    ユーザーインタビューやユーザーテストを行う（工数：大）

調査にリソースをかけるほどより正確な評価がしやすくなりますが、全ての施策を実施する必要はありません。

例えば、自社のリソースが少ない場合はまずは一般的な原則を元に評価を行うと良いでしょう。そして、それだけでは評価が難しい場合は類似する製品やサービスの調査を行います。それでもうまくいかなければ、実際に製品やサービスを使ってもらったデータから、そのプロダクトや機能について個別の議論を行っていきます。

ここからは、それぞれの施策について詳しく解説しますが、その前にインタラクションデザインの改善でよくある落とし穴を押さえておきましょう。

インタラクションデザインの改善に取り組む際、最も多い失敗パターンは「見た目の改善」から入ってしまうことです。配色やレイアウトの変更だけでは、ユーザーの操作体験は根本的に改善しません。

まずユーザーが「何をしようとしているか（行動目標）」を把握し、その目標達成を阻害している要因を特定することが出発点です。その上で、以下の3つの施策を段階的に活用してください。

1.一般的な原則を利用する

インタラクションデザインにおいては、一般的なデザイン原則に基づくヒューリスティック（経験則）的なデザイン方法を取り入れる必要があります。

例えば、「似た意味の要素は物理的に近くあるべき」、「状況が可視化できるようなフィードバックはあるべき」といったデザインの考え方です。

このような知見が無いメンバーでインタラクションデザインや製品・サービスの開発を行ってしまうと、結果的にユーザーにとって使いにくいものができてしまう可能性があります。

一般的な原則については、ニールセンのユーザビリティの10原則や、ゲシュタルトの法則などを参考にすれば、デザイナーではない方でも大きな問題点は見つけることができます。

【ニールセンのユーザビリティの10原則】

• システム状態の可視性

• システムと現実世界の一致

• ユーザーに主導権と自由を与える

• 一貫性と標準性を保つ

• エラーを予防する

• 使い方を覚えなくても使える

• 利用の柔軟性と効率性

• 最小限で美しいデザイン

• ユーザーによるエラーの認識・診断・回復のサポート

• ヘルプとドキュメンテーションを用意

【主なゲシュタルトの法則】

• 近接の法則 ：距離が近い要素同士は一つのグループとして認識される。

• 類同の法則：似ている要素同士は、距離に関わらず一つのグループとして認識される。

• 閉合の法則：図形は欠けた部分があっても脳が補完する。

• 連続の法則：連続している要素は、たとえ途中に別の要素があっても、一つのまとまりとして認識される。

• 共通運命の法則：同じ方向やタイミングで一緒に動く要素は、一つのグループとして認識される。

• 図と地の法則：人間は「図」と、その背景となる「地」に分けて認識する。

• プレグナンツの法則：人間は、最も単純で、安定し、秩序立った良い形になるように知覚しようとする。

社内に知見やノウハウがない場合は外部の専門家やデザイナーと協業することも検討してみてください。

2.類似する製品やサービスの事例を調査する

その製品ジャンルにおける固有のデザインルールを調査・理解し、自社の製品にも取り入れていきましょう。

製品ジャンルにおける固有のデザインルールとは、「自販機の一般的なデザインや操作方法」や「ダッシュボードの一般的なデザインや操作方法」などのことです。

人は、頭の中で製品やサービスの使い方を想像し作り上げています。（このことはメンタルモデルとも呼ばれます。）

※関連記事：メンタルモデルとは？意味やデザインにおける活用法を解説！

「自動販売機の見た目は大きな長方形で、お金を入れて好きな飲み物の下にあるボタンを押すと、その飲み物がすぐに出てくる」といったイメージです。

この頭の中のイメージと異なる操作方法や表現を自社の製品やサービスに採用してしまうと、ユーザーは混乱してしまう可能性があります。

例えば、自動販売機で冷たい飲み物が出てくるボタンの色が赤色だと、「冷たい」という文字が書かれていてもユーザーは赤色のボタンを勘違いして押してしまいます。

自社独自のインタラクションデザインを提供しようと工夫をしすぎると、かえってユーザーにとって使いにくいものになってしまう可能性もあります。

類似する製品やサービスも調査したうえで、自社が提供したい価値に合わせてインタラクションデザインを最適化しましょう。

3.ユーザーインタビューやユーザーテストを行う

その製品固有のインタラクションの性質に基づくデザインを行うには、ユーザーインタビューやユーザーテストも効果的です。

例えば「AI機能を搭載した財布」などユニークな組み合わせの製品を開発する際、どんなインタラクションになるのか直感的には予測が難しくなります。そのため、頭の中で思考を巡らせるよりも、プロトタイプを開発し、実際のユーザーにテストをしてもらった方がはやいでしょう。

ユーザーテストでは、使い方の説明が無くてもユーザーが操作をできるか、実際にテストしてもらい検証します。できれば開発の初期段階でこれらを行うことで、無駄な工数の削減に繋がります。

インタラクションデザインでは、ユーザーの行動に焦点をあてるため、発話思考法という方法を取り入れるのも良いでしょう。発話思考法とは、ユーザーがプロトタイプの操作をする際に感じたことや考えていることをそのまま話してもらうリサーチ手法で、ユーザーの感情や感覚を理解しやすくなります。

※関連記事：ユーザーインタビューとは？目的と方法、実施における注意点まで徹底解説！

※関連記事：ユーザーテスト（ユーザビリティテスト/コンセプトテスト）とは？概要と方法について解説！

よくある質問（Q&A）

Q：インタラクションデザインとUI/UXデザインの違いは何ですか？

A. UIデザインは画面の見た目や配置といった静的な要素、UXデザインはサービス全体を通じた体験の設計を指します。インタラクションデザインは、ユーザーの操作に対するシステムの反応という「動的なやりとり」に焦点を当てる分野です。UIデザインの一部であり、UXデザインの構成要素でもあるという関係性です。

Q：インタラクションデザインの改善は、どの段階で行うのが効果的ですか？

A. 理想的には開発の初期段階からインタラクションを設計するのが最も効果的です。ただし、既にリリース済みのプロダクトでも、ユーザビリティテストで課題を特定し改善することは十分に可能です。まずは離脱率の高い画面や問い合わせの多い操作フローなど、影響の大きい箇所から着手するのがおすすめです。

Q：社内にデザイナーがいなくてもインタラクションデザインは実践できますか？

A. 基本的なレベルであれば、ニールセンのユーザビリティ10原則などの一般的な原則に照らし合わせることで、非デザイナーでも課題の発見は可能です。ただし、本格的な改善には専門的な知見が必要になるため、外部のデザインコンサルティングファームとの協業も有効な選択肢です。

Q：インタラクションデザインの品質をどうやって測定すればよいですか？

A. 定量的にはタスク完了率、エラー発生率、操作にかかる時間などの指標が有効です。定性的にはユーザビリティテストでの観察やインタビューを通じて、ユーザーの迷いやストレスを把握します。両方を組み合わせることで、改善の優先順位を客観的に判断できます。

まとめ

今回の記事では、インタラクションデザインの概要や、インタラクションデザインの5つの次元、企業が優れたインタラクションデザインを行うためのポイントなどについて具体的に解説いたしました。

良いインタラクションデザインは、ユーザー体験を良くし、顧客の満足度や収益の向上にも繋がります。

一方で、インタラクションデザインを行うには実務経験のある専門家の知見も必要不可欠です。

「インタラクションデザインの進め方や改善方法が分からない」という場合は、専門家への依頼も検討してみてください。

NOROSHIは、100以上のプロジェクト支援の実績を活かし、プロダクトのインタラクションデザイン改善を支援しています。「操作性を改善したいが、どこから手をつけるべきか分からない」という方は、ぜひお気軽にご相談ください。