インタラクションデザインとは？その要素やデザインのポイント12項
WEBサイトやアプリケーションを構築する際に、インタラクションデザインという言葉を耳にすることが増えてきました。
今回は、インタラクションデザインを理解するためのメリット、要素、優れたインタラクションデザインのポイントについて解説していきます。
目次
インタラクションデザインとは
インタラクションデザインとは『ユーザーとモノが相互作用（interaction）するデザイン（design）』を意味します。
技術の進歩により、さまざまなことがパソコンやスマホなどのデバイス、アプリケーションなどで行えるようになりましたが、同時に操作方法が複雑になっています。これらを実際に操作するためには、ユーザーが操作を理解し、習得する必要があります。
インタラクションデザインは、ユーザーがこれらの操作の習得を最小化するとともに、満足度を高めるために必要です。
では、相互作用するデザインとはどういったものなのでしょうか。WEBサイトの表示を例にとってみます。
かつては目的の対象ページを探すのにブラウザのアドレスバーにURLを手動で入力するのが通常でした。現在でもこの方法は有効ですが、Googleなどの検索エンジンを利用すれば、キーワードを打ち込むだけで目的のサイトを探し出すことができます。
この場合は検索エンジンがインタラクティブに機能しています。ユーザーは複雑なURLを打ち込む手間やスペルミスが軽減されます。
インタラクションデザインのメリット
インタラクションデザインを採用することは、ユーザーにも提供者にもメリットがあります。
ユーザーが得られるメリット
ユーザーが得られるメリットは操作の複雑さから解放されることです。ここではコンピュータの操作を例に取りあげてみます。
コンピュータは人の代わりに多くの複雑な処理が瞬時に実行できます。かつてはすべての命令をコマンドで入力を行なっていました。これには必要なコマンドを覚えるという手間があり、利用者のほとんどは技術者でした。
Windowsパソコンが登場して以降は、画面上でマウスを使って選択するだけで殆どの作業ができるようになり、ユーザーはキーボードによるコマンド入力から解放されました。
そして現代ではパソコンからスマートフォンに移り変わり、マウスを使わなくとも直接ディスプレイを触れる、または音声入力で操作が可能になっています。
提供者側のメリット
インタラクティブなデザインを設計する提供者側のメリットは、ユーザーが獲得しやすいということです。上でコンピュータの事例をあげましたが、内部処理はどんどん高度かつ複雑化の一歩を辿っています。けれども、ユーザーは複雑な操作は望んではいません。
コンピュータがパソコンとして浸透し、スマートフォンを一人一台持つようになったのが良い事例だと言えます。
IoTやAIへシフトし、ユーザーとモノがより近接的になっていく中で、インタラクションデザインの重要性は以前より増していくでしょう。
インタラクションデザインの要素とは
ここまでに挙げたように、インタラクションデザインとはユーザーの負担を軽減し、利用を容易にするための手法です。では、インタラクションデザインを実現するために必要なことは何でしょうか？
インタラクションデザインに求められる要素は5つあると言われています。
アメリカのBob Baxley氏（『Making the Web Work: Designing Effective Web Applications』の著者）は、2002年に公開した記事でWEBアプリケーションに考慮されるべきインタラクションデザインの5つの要素について次のように述べています。
1：コミュニケーション機能
第一にインタラクションデザインはユーザーとデバイスとのコミュニケーションを果たします。インタラクションデザインはユーザーの望む操作を翻訳し、デバイスに伝達します。この機能により、ユーザーは複雑な操作から解放されます。
2：操作の予測
設計者はユーザーの負担を減らすために、どのような操作を行うか予測してデザインする必要があります。
例えば文書の印刷であれば、用紙サイズを指定する、出力枚数を指定する、出力先のプリンターを指定するといった操作が必要になります。
設計者はこれらの操作を予測し、それに見合ったインタフェースを用意することは、インタラクションにデザインされていると言えます。
3：実行状態の伝達
ユーザーが理解できるようにデバイスやアプリケーションが現在どのような状態にあるのか、ユーザーに伝達する機能が必要です。
4：誰に向けたモノなのかわかること
デバイスやアプリケーションが誰に向けて作られているのか、ユーザーが把握できるようにデザインされていることが重要です。また、ユーザーがそのデバイスやアプリケーションを利用することによって何が得られるのかわかりやすいことも重要な点となります。
5：不具合への対処
不具合はユーザーの操作ミスやデータの不備、あるいは設計上のミスにより引き起こされます。不具合は起こるものだと考え、実際に起こった場合に備えた設計を行うことが必要です。
なお、Bob Baxley氏はWEBアプリケーションについて投稿されていますが、デバイスやその他の製品についても同様の定義が当てはまります。
優れたインタラクションデザインのポイント
優れたインタラクションデザインを示す12のポイントを紹介します。
1：ユーザーの利用環境への配慮されていること
ユーザーが使用するインターフェイスが変われば操作方法も変わります。
パソコンの場合、従来型のディスプレイであればマウスを使用して、画面上のカーソルを操作します。また、アプリケーションの起動を行う場合はアイコンをカーソルで選択してクリックします。Wordなど文書の作成においては、文字の入力に外部のキーボードを使用します。
一方、スマートフォンなどのタッチパネル式のディスプレイを採用したデバイスの場合、指やタッチペンで直接画面に触れることで、操作ができます。
インタラクションデザインを行うにあたっては、異なるインターフェイスや入力デバイスが異なる場合にどのように用いられるのかを予測して、配慮が必要になります。
2：直感的なデザインであること
優れたインタラクションデザインを直感的なデザインにより、ユーザーが利用する際の不安を回避します。ユーザーが実際に手にした時に、それがユーザーにとってどんな役割をするものなのか、すぐに判断できる外観や、構成になっていることがポイントとなります。
これはユーザーにとって、自身が使うべきモノかどうかの判断材料にもなるでしょう。
3：予測しやすい操作性であること
優れたインタラクションデザインは、予測しやすい操作性を持っています。ユーザーがデバイスやアプリケーションを操作する前に、どのような処理が実行されるのかメッセージを伝える設計になっています。
これはユーザーに対して、操作を行う前の不安を取り除く効果を発揮します。
4：エラーへの対処がされていること
優れたインタラクションデザインは、エラーに対する処理が適切に行われています。エラー処理を事前に組み込むことで、不用意に止まらないように設計されています。また、万が一エラーが発生した場合でも、エラーの内容や問い合わせ方法を表示するなど、ユーザーに解決策を提供します。
これにより、ユーザーはエラーが発生した際の不安が解消できます。
5：操作完了のフィードバックがあること
優れたインタラクションデザインでは、デバイスで実行中の操作が完了した時に、適切なメッセージを表示します。
ユーザーはフィードバックを確認することで、処理が完了したことが確認できます。
6：応答時間が考慮されていること
一つの操作が開始から応答するまでの待機時間に配慮しています。
7：個々のインターフェイスのサイズが適切であること
優れたインタラクションデザインでは、使用するインターフェイのサイズが適切になるように設定されています。
例えば販売用WEBサイトを例にした場合、申し込みボタンが目視できないほど小さくデザインされていると、ユーザーは申し込むことができません。反対に、ページの枠からはみ出るほどの大きな文字のボタンを配置した場合、ユーザーは何を処理するボタンなのか判断出来なくなります。
8：インターフェイスの配置が適切であること
優れたインタラクションデザインでは、使用するインターフェイスが適切に配置されています。
例えばWEBサイトでは、ヘッダーメニューに大きなカテゴリページへのボタンや、リンクが水平一列に配置されています。一方、サイドメニューには各カテゴリーページの下層カテゴリー別に配置されています。
このように同列のインターフェイスを配置することで、ユーザーはWEBサイトでの操作を容易に行えるようになります。
9：標準的なデバイスサイズであること
優れたインタラクションデザインでは、標準的なサイズが採用されています。例えばスマートフォンはどこのメーカーでもほぼ同一のサイズで作られています。
標準的なサイズを採用することで、他のデバイスから移行した場合にも違和感を与えないことも大事なポイントになります。
10：情報が整理されて表示されること
優れたインタラクションデザインでは、情報が整理されて表示されています。よくある企業情報サイトでは、会社概要、事業内容、製品紹介、問い合わせ、Q＆Aなどが別々の階層で構成されています。
もし、会社概要とQ＆Aが同一のページに記載されていたとしたら、閲覧者は違和感を起こすことが予想されます。
11：シンプルなデザインであること
優れたインタラクションデザインは、できる限りシンプルな設計になっています。シンプルなデザインは、複雑な操作を回避し、利用のしやすさを提供します。
iPhoneは典型的な良い例です。一つのボタンインターフェイスで操作が完結するというシンプルさを実現しています。
12：一般的なフォーマットであること。
優れたインタラクションデザインは、一般的なフォーマットで提供されます。ユーザーは馴染みのあるフォーマットを好みます。
WEBサイトであれば、ヘッダーとフッダーがあり、間にコンテンツを表示するフォーマットになっています。また、サイドバーを組み込む場合、多くても3列までが主流となっています。
一般的なフォーマットのデザインを取り入れたWEBページでは、ユーザーが目的の情報を得るためにどこを見れば良いか判断が容易になります。
インタラクションデザインの事例
ここではインタラクティブなWEBサイトの事例をご紹介します。全体的なデザインも綺麗ですが、動きも参考になります。
モバイル向けのUI（ユーザーインターフェィス）の紹介サイトです。動画でUIの動きを確認できます。
WEB、モバイル、アプリのインタラクティブなデザインを取り上げているサイトです。こちらも動画で動きが確認できます。
大塚製薬のオロナイン特設サイトです。画面のスクロールに合わせて、オロナインがクルクルと回り出したり、小物入れのファスナーが開いたりします。動きがあってついつい引き込まれます。
海外向けのキリン一番搾りの紹介サイトです。動画もですが、一番搾りの製法が海外の消費者に伝わるようにデザインされています。
東京の猫の健康をサポートする商品を取り扱っているサイトです。ページ遷移する際には、本のページをめくるようなアニメーションになっています。
おわりに
今回はインタラクションデザインについて取り上げました。
技術が進歩する中で、デバイスやアプリケーションといったモノが持つ機能が複雑化していっています。人とモノのコミュニケーションは、ますます重要になっていくことでしょう。それにはインタラクションデザインの採用が不可欠となります。
今回ご紹介した、インタラクションデザインに必要な5つの要素と、優れたインタラクションデザインが持つポイントを理解することが必要です。
インタラクションデザインを取り入れる上で最も必要なことは『ユーザーの視点』です。ユーザーがどんな考え方をして操作するかという心理的な部分も考慮して、デザインすると良いでしょう。