#author("2026-04-07T18:06:52+09:00;2026-04-07T17:38:27+09:00","default:inoue.ko","inoue.ko") #author("2026-04-07T18:09:52+09:00;2026-04-07T18:06:52+09:00","default:inoue.ko","inoue.ko") *インタラクションデザイン｜IxD //人とモノ、人と社会との「心地よいキャッチボール」を設計する ~ インタラクションデザインは、人間と機械・システムとの対話(=Interaction)のデザインを意味します。Web、携帯、家電、様々な分野で、ユーザがスムーズにシステム関わることができるよう、対話システムのふるまいを定義するのが、その使命です。 インタラクションデザインという語は、イギリスのインダストリアルデザイナー、ビル・モグリッジ（Bill Moggridge、デザインファームIDTwo：現在のIDEO）が1980年代半ばごろ、従来のユーザーインタフェース・デザインに代わる言葉として 命名したと言われています。近年ではこの言葉は、Webブラウザに代表されるソフトウエアやデジタル家電のデザイン分野のみならず、マーケティングの分野 でも用いられています。（ 略記：IxD ） ~ ~ **UI/UX と IxD 関連する概念として UI/UX がありますが、これらの包含関係を示すと、UX（ユーザー体験）という大きな枠組みの中に、UI（ユーザーインターフェース）があり、それらをつなぐ「動的な振る舞い」としてインタラクションデザインがあるという構造になります。 ~ ***UXデザイン (User Experience Design) 体験全体の質の設計 -範囲：最も広く、製品の利用前・利用中・利用後すべてを含む -焦点：ユーザーの「感情」や「満足度」 -評価： --このサービスを使ってユーザーの悩みは解決したか？ --また使いたいと思ったか？ ~ ***UIデザイン (User Interface Design) 配色、フォント、アイコン配置、画面のレイアウトなどの静的な設計 -範囲：ユーザーが直接触れる「接点（インターフェース）」に特化 -焦点：「視覚的要素」や「情報の整理」 -評価： --ボタンは押しやすい位置にあるか？ --文字は読みやすいか？ --ブランドの雰囲気は伝わっているか？ ~ ***インタラクションデザイン (Interaction Design / IxD) スワイプした時のアニメーション、エラー時のポップアップの出し方、音声操作への応答など、動的な設計 -範囲：UIとUXの橋渡しをする「動き」や「対話」の部分です。 -焦点：「時間軸に沿った振る舞い」と「フィードバック」。 -評価： --ボタンを押したときにどう動くか？ --読み込み中（待機時）にどう見せるか？ --ユーザーの操作に対して、システムはどう反応を返すか？ -インタラクションデザイン４つのレベル --直感的に理解可能なインターフェース モノ自体とユーザ間のアフォーダンスによる --使っているうちに自然に学習できるインターフェイス アクションに対するリアクション（因果関係）が明瞭であることが必要 --表記の支援によって理解できるインターフェイス 操作手順の表記など、補足情報が必要なレベル --マニュアルなど操作説明が必要なインターフェイス パソコンなどのように、マニュアルと概念理解が必要なレベル ~ ~ **__[[オブジェクト指向>ObjectOrientedProgramming]]__とタスク指向 使いにくい製品・・の最大の理由は、ユーザー視点ではなく、メーカー視点（いかに収益につなげるか）でインターフェイスが設計されているからです。その違いは、オブジェクト指向とタスク指向の違いとして説明することもできます。 ~ ***オブジェクト指向 ユーザーに対して対象（オブジェクト）が開示されています。ユーザーはその全体を眺め（プロパティを確認し）、動かして（メソッドを確認し）、「ああすればこうなる」という因果関係を見出すことができます。 アナログの道具の大半は基本このタイプで、見て触ってみれば、何をどうすればいいのかが、体験的にわかります。危険な部分は見ればわかるので、事故のリスクも小さいと言えます。 ~ ***タスク指向 ユーザーに対して対象は開示されておらず、システムがどんなプロパティ（設定情報）を持っていて、どんなメソッド（操作）が可能なのか・・その全体を事前に把握することができません。ユーザーは、入口（許可を要するケースもあり）から入ると、その後決められた手順に沿って候補の選択作業をすることになります。システムの全体が見えないので、自分がどこにいるのかもわからず、ただシステムに従うしかありません。 デジタル家電の多くが、このタイプに陥っています。ボタンの先に何があるかわからないまま、とりあえず押さないと先へ進めないし、むやみにあちこち触ると設定が変わって戻せなくなる・・。これが「使いにくい」の最大の理由です。また、何が危険かもわからないので、大事故につながるリスクがあります。 ~ ***見た目の良し悪しの問題ではなく、根本的な設計思想の問題 プロプライエタリなものは、メーカー視点で設計されたタスク指向的なものが多いので、ブラックボックスの中を誘導に従って進むしかない。ユーザーにとっては、理解しにくく、使いにくいものとなります。 その点、オープンソースはユーザー視点で設計されたオブジェクト指向的なものが多く、ホワイトボックス化されているので、使いやすいものが多くなる・・これは当然の結果と言えます。 ~ ***オブジェクト指向とタスク指向の事例比較 -オブジェクト指向（名詞→動詞：操作する対象からスタート） --''商品''を選ぶ ＞ お金を入れる / ICカードをタッチ ＞ ・・（新自販機） &small(キャンセルの場合、そのまま立ち去ればよい。); --連絡したい''相手''を選ぶ ＞ 電話する / メールする ＞ --画面上の''ファイル''を右クリック ＞ コンテキストメニューから操作 ＞ &small(パソコン・スマホの GUI は、基本的にオブジェクト指向です。); -タスク指向（動詞→名詞：操作対象は事後に登場） --お金を入れる ＞ ''商品''を選ぶ ＞ ・・（旧自販機） &small(キャンセルの場合、「返却」操作をする必要がある。); --受話器を取る ＞ 連絡したい''相手''の電話番号をプッシュする --ログインする ＞ 必要項目を入力する ＞「次へ」を押して進む ~ ***付記：パソコンとテレビの比較 テレビやレコーダーという家電製品は、GUIではなく、リモコンで逐次制御することを前提に設計されています。ユーザーの関心は「番組コンテンツ」で、それをオブジェクトとして選んでから「見る / 録画する / 移動する / 削除する」などの操作ができれば簡単なのですが、実際はリモコンから「見る / 録画する・・」といった機能（タスク）を先に選んで、その後で番組（オブジェクト）を探すという手順になります。GUI（オブジェクト指向）に慣れた人にとって、リモコンの逐次操作（タスク指向）は非常にイライラするものとなります（ちなみにテレビのリモコンには「CTRL+Z」（ひとつ前の操作に戻る）もありません）。 一方で、最近のスマートテレビのUI（NetflixやYouTubeのアプリなど）は、PCやスマホに近く、オブジェクト指向へとシフトしています。 -サムネイルの並び： まず見たい「作品（オブジェクト）」が並び、それを選んでから「再生」「詳細を見る」といったアクションを選ぶ形式です。 -ポインティングリモコン： LGのマジックリモコンのように、画面を直接指せるデバイスの登場により、家電でも「オブジェクト指向」的な操作が可能になりつつあります。 「まずボタンを探す（タスク指向）」というテレビの操作系は、多くの機能を詰め込みすぎた結果、ユーザーの認知負荷を高めてしまいました。一方で、CUIからGUIへの転換をしたパソコンがこれほど普及したのは、人間の「物に触れてから何かをする」という自然な振る舞いに近いオブジェクト指向を採用したからだと言えます。 ~ ~ **オブジェクト指向ユーザーインターフェイス オブジェクト指向ユーザーインターフェイス（OOUI：Object-Oriented User Interface）という言葉は、GUIが実用化されはじめたころ（1980年代中頃？）に登場したと記憶しています。当時はまだPCもCUIで、インターネットとブラウザも一般的ではありませんでしたが、プログラミングのパラダイムとしての__[[オブジェクト指向>ObjectOrientedProgramming]]__は、その後の Macintosh や Windows のアプリケーション開発に必須の概念となりました。 オブジェクト指向ユーザーインターフェイス（OOUI：Object-Oriented User Interface）という言葉は、GUIが実用化されはじめたころ（1980年代中頃？）に登場したと記憶しています。当時はまだPCもCUIで、インターネットもブラウザもありませんでしたが、プログラミングのパラダイムとしての__[[オブジェクト指向>ObjectOrientedProgramming]]__は、その後の Macintosh や Windows のアプリケーション開発に必須の概念となりました。 ~ ***オブジェクト指向ユーザーインターフェイスの原則 -オブジェクトを知覚することができ、直接それを操作することができる - オブジェクトは自身のプロパティ（属性・状態情報）をもって知覚される &small(例えば、今選択されいてるファイル（オブジェクト）が強調表示される・・など); -オブジェクトは自身に対するメソッド（操作機能）をもつ -接触の順序は、オブジェクトの選択 ＞ 操作の選択 -すべてのオブジェクトが自律分散的に協調する仕組みをもつ ~ ~ //***デザインプロセス //-調査（参与観察・インタビュー） //-コンセプト・プロファイルの生成 //-プロトタイプの作成 //-ユーザーテスト //-実装・検証 //-システムテスト ~ ~ **KEYWORD LINKS ***法則 -[[テスラの複雑性保存の法則>Google:テスラの複雑性保存の法則]] -[[ヒックの法則>Google:ヒックの法則]] -[[フィッツの法則>Google:フィッツの法則]] -[[マジカルナンバー7±2>Google:Magical Number 7]] --[[マジカルナンバー4>Google:Magical Number 4]] -[[ムーアの法則>Google:ムーアの法則]] ~ ***関連キーワード -[[INTERACTION-DESIGN.ORG ｜ Encyclopedia>http://www.interaction-design.org/encyclopedia/]] -[[アフォーダンス>Google:アフォーダンス]] --[[アフォーダンス>http://www.isis.ne.jp/mnn/senya/senya1079.html]] （松岡正剛の千夜千冊） -[[マッピング>http://www.interactiondesignblog.com/2008/07/mapping-of-controls/]] -[[メンタルモデル>Google:メンタルモデル]] -[[メタファー>Google:メタファー]] -[[ルック＆フィール>http://ja.wikipedia.org/wiki/%E3%83%AB%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A2%E3%83%B3%E3%83%89%E3%83%BB%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB]] ~ ~ **参考図書 -誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書) ドナルド・A. ノーマン (著), 野島 久雄 (翻訳), D.A. ノーマン (著) -インタラクションデザインの教科書 (DESIGN IT! BOOKS) Dan Saffer (著), 吉岡 いずみ (翻訳), ソシオメディア株式会社 (翻訳) -クロフォードのインタラクティブデザイン論 クリス・クロフォード（安村通晃 監訳） ~ ~ ~