近未来を感じる！インタラクションデザインとは

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はCarrie Cousins氏によって投稿されました。

「インタラクションデザイナー」という言葉は、デザインの分野で近年よく聞かれるようになりました。インタラクションデザインの真の意味とは？またインタラクションデザイナーになるには？

これらの疑問に答えて、優れたインタラクションデザインの実例を紹介します。

目次

• インタラクションデザイン入門
• インタラクションデザイナーの役割
• インタラクションデザインの概念と原則
• インタラクションデザインの実例

インタラクションデザイン入門

インタラクションデザインとは、論理的かつ考え抜かれた動作と振るまいを備えた、魅力的なWebインターフェースをデザイナーが作るプロセスのことです。

成功するインタラクションデザインは、テクノロジー、コミュニケーションを利用して、理想的なユーザーエクスペリエンスを実現しています。Webサイトやアプリケーションにおけるインタラクションデザインについて、ここ約10年で多くが語られていますが、その基本は変わりません。

インタラクションデザインの概念を紹介するために最もよく引用されているものの1つは、Bob Baxley氏（『Making the Web Work: Designing Effective Web Applications』の著者）が2002年に公開した記事で、全12回にわたってWebアプリケーションのためのインタラクションデザインを定義しています。

その第1回『インタラクションデザインへの案内（Introducing Interaction Design）』では、インタラクションデザインを5分野に分類しています。現在でも役に立つ内容です。

• 人間とマシンのコミュニケーション（Human/machine communication ）

インタラクションデザインの基本的な役割は、ユーザーとデバイス間のコミュニケーションを翻訳して円滑にすることだとしています。

• 操作と操作への応答（Action/Reaction）

インタラクションがどのように起こり、発展していくのかに注意を向けるべきだとしています。

• 状態（State）

ユーザーがアプリケーションの現在の状態を知り、何がなぜ起こっているかわかるような設計にすべきだとしています。

• ワークフロー（Workflow）

ユーザーが、デバイスやアプリケーションはどのような人向けなのか、また次に何が起こるか予測できるような設計にすべきだとしています。

• 不具合（Malfunction）

エラーは起こるものだと想定するべきだとしています。

次に、インタラクションをデザインするときに考えるべきポイントを挙げてみます。デザインに役立つ基本的な質問がusability.govで提供されているので、引用します。

• インターフェースを操作するとき、ユーザーはマウスや指やタッチペンを使って何ができるだろう？
• インターフェースを操作するとき、ユーザーが使えるコマンドは？
• デバイスの外観を、ユーザーが機能を予測できるようなデザインにしてみるのはどうだろう？
• ユーザーがデバイスを操作する前に、デバイスの動作を予測できるような情報をユーザーに与えたか？
• エラーを未然に防げる設計になっているか？
• エラーメッセージはユーザーに解決策を提示できているか？
• 操作が完了したときに、ユーザーはどのようなフィードバックを受けるか？
• 操作から応答までの待機時間はどのくらいか？
• インターフェースに使われている要素は、操作しやすいサイズか？
• インタラクティブな要素を配置するために、インターフェースの端のレイアウトは上手く設計されているか？
• デバイスは、標準規格を満たしているか？
• 一度に表示される情報は、まとめて整理されているか？
• 可能な限りシンプルなデザインになっているか？
• 一般的なフォーマットを利用しているか？

インタラクションデザイナーの役割

もしあなたが上で見た質問を考えるタイプだとしたら、インタラクションデザイナーの素質があります。

インタラクションデザイナーの役割は、デザイン、開発、クリエイティブ、マーケティングのチームにおいて、デザイン戦略を考えたり、製品の重要なインタラクションを特定したり、製品のコンセプトを試すためにプロトタイプを作成したり、ユーザーを魅了できるような最新のテクノロジーやトレンドについて知識をアップデートしておくことです。

このように表現すると、インタラクションデザイナーの仕事は範囲が広くて曖昧なものに思えるかもしれません。簡単に言うと、企業がインタラクションデザイナーを雇うのは、アプリケーション製品が実際にユーザーの手元に届いたときに、確実に上手く機能させるためです。

インタラクションデザイナーへのキャリアパスは多様です。研修プログラムによってインタラクションデザイナーになる人もいれば、それまでの経験や機会によってインタラクションデザイナーになる人もいます。

しかしインタラクションデザイナーに共通する素養として、物事のメカニズムへの探求心や、人に質問することを恐れないこと、要素やコンセプトを実現化して新しい方法を試す能力などがあります。

インタラクションデザインの概念と原則

インタラクションデザインの活用の場面を広げている要因は何でしょうか。

また普通の「デザイン」とは何が違うのでしょうか？実はこの境界線ははっきりしていません。今回はインタラクションデザインをテーマとしていますが、実際のインタラクションデザインは、Web、アプリケーションのデザインおよび開発の一部なのです。

主要なポイントやツールは変わっても、インタラクションデザインの基本的な概念は変わりません。

これらの概念を見てみましょう。

• 目的を達成するためのデザイン あなたのサイトやインタラクションが存在する目的は何でしょうか？目的を明確にして、アプリケーションによってこの目的を確実に達成できるようにします。
• 魔法のようなインターフェース　最も優れたインターフェースとは、魔法のようにその存在に気づかないものです。
  「最も優れたインターフェースデザインは「存在していない」かのように思えるものです。データの読み込みや応答に
  時間がかかることもなく、ユーザーを悩ませることもありません。」と述べられています。
• ユーザビリティ　基盤となるシステムを、理解しやすく使いやすいインターフェースが好まれます。
• アフォーダンス　最も優れたインタラクションデザインとは、たとえ説明がなくてもどのように操作したらいいかわかるものです。つまり、有名なことわざを借りると「形態は機能に従う」のです。
• インタラクションデザイナーの学習能力 使いやすいインターフェースは、すでにあるコンポーネントで作られます。優れたインタラクションデザイナーであれば、以前と似たようなデザインの課題に取り組むときには、車輪の再発明はしません。むしろ、決まったパターンを上手く使いこなせるのです。

インタラクションデザインの実例

次に優れたインタラクションデザインの実例を紹介します。どのプロジェクトにおいても、インタラクションデザインの概念の核心が体現されています。

Move Product（Barthelemy Chalvet氏 開発）

Weather App（Sergey Valiukh氏 開発）

Fiche（Barthelemy Chalvet氏 開発）

マテリアルデザインのアニメーション

Mobile Animations & Interactions

Team Messages（Jan Losert氏 開発）

Float Label Form Interaction（Matt D. Smith氏 開発）

iOS New Gestures（Javi Perez氏 開発）

Qards Contact Form（Sergey Shmidt氏 開発）

Nike（Owi Sixseven氏 開発）

Android Wear（Ramotion氏 開発）

Apple Watch（Jakub Antalík氏 開発）

結論

ユーザーは、現代のWebサイトにインタラクティブな体験を期待します。それは仕方ないことかもしれません。Webに最新のデザインを取り入れて、ユーザーの再訪率を安定させるには、インタラクションが不可欠です。

また、チーム内に、インタラクションの管理、企画、モニタリングを担当する人を置いておくのも大切です。つまり、インタラクションデザイナーが必要なのです。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。