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

インタラクションデザインとは、論理的かつ考え抜かれた動作と振るまいを備えた、魅力的なWebインターフェースをデザイナーが作るプロセスのことです。実際のアプリを実例に紹介しながらインタラクションデザインの概念についても理解しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

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

 

目次

1時間でできる無料体験!

 

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

インタラクションデザインとは、論理的かつ考え抜かれた動作と振るまいを備えた、魅力的な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で提供されているので、引用します。

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

 

[PR] UI/UXデザインで挫折しない学習方法を動画で公開中

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

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

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

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

 

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

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

 

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

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

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

 

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

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

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

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料体験 に参加してみませんか?

初心者でも最短1時間で学習が体験できるカリキュラム、現役エンジニアに何でも相談できるカウンセリング、無制限のチャット質問サービスすべて無料で体験 できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら体験者限定の割引特典付き! 無料体験はこちら

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

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

Move Product(Barthelemy Chalvet氏 開発)

 

Weather App(Sergey Valiukh氏 開発)

 

Fiche(Barthelemy Chalvet氏 開発)

 

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

 

Mobile Animations & Interactions

mobile-animations-interactions

 

Team Messages(Jan Losert氏 開発)

 

Float Label Form Interaction(Matt D. Smith氏 開発)

57efad40adbc4601462289

 

iOS New Gestures(Javi Perez氏 開発)

57efae0a574cd001740089

 

Qards Contact Form(Sergey Shmidt氏 開発)

57efb4001e7b9931955864

 

Nike(Owi Sixseven氏 開発)

nike1

 

Android Wear(Ramotion氏 開発)

 

Apple Watch(Jakub Antalík氏 開発)

57efa9d15ac9f634396160

 

結論

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

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

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

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する