デザインにおけるメタファーとアナロジーの違いとは

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はNick Babichからの翻訳転載です。配信元または著者の許可を得て配信しています。

Metaphors and Analogies in Product Design (2017-04-28)

HCI(ヒューマンコンピュータインタラクション)やUXデザインにおいて、機能やアフォーダンス(編注:機能に関する視覚的な手がかり)に注目を集めるとき、アナロジーやメタファーは大切な要素です。アナロジーとメタファーは密接に関連しているので、違いを理解しておくべきでしょう。メタファーとアナロジーを区別できると、ある状況でなぜどちらかを使って、どちらかを使わないのかを見定められるようになります。

メタファー

メタファーとは、別の何かを使って、実際にデザインしているものについて表現することです。

やるべきこと:親しみのないものを親しみのあるものに(デスクトップメタファー)

メタファーを使うと、何か新しいものや親しみのないものを、親しみのある形で表現することができます。HCIとUXデザインにおいて、もっとも有名なメタファーはAlan Kay氏の「デスクトップメタファー」でしょう。デスクトップメタファーにより、コマンドラインのコマンドが、デジタルに表現されたオブジェクトを使った直接的な操作に変わりました。

新しいグラフィックUIを一躍有名にした1984年当時のMac OSのデスクトップです。

やるべきこと:はっきりとした関連性を利用する(Apple iMac)

メタファーを使うことで、人々の感情を引き出すことができるでしょう。Appleが第2世代のiMacをデザインしたとき、Steve Jobs氏とJohny Ive氏は次の世代をどのような見た目にしようか、庭を歩きながら想像していたと言われています。Jobs氏はひまわりを見つけて、第2世代はひまわりのようにしたいと提案したそうです。以下の画像を見ると、画面の傾き方がひまわりのように見えることがわかるでしょう。

ひまわりをメタファーに、iMacがより身近に感じられるような工夫をしています。

やるべきこと:人々を納得させる(Pinterest)

もし世の中のどんな製品とも似ていない製品を提供する場合、少なくとも部分的には何か消費者が既に知っているもので説明する必要があるでしょう。ユーザー数1,000万人にどのソーシャルネットワークサイトよりも早く到達したPinterestでは、コルクボードのメタファーを使って展開しています。ユーザーは、Webで見つけた画像に「ピン」をして、トピック別のコレクションに整理することができます。このメタファーには、実際にクリエイティブな思考を促進する効果があるようです。

やるべきでないこと:単純な文字通りのメタファー(Microsoft Clippy)

デザインのメタファーを選ぶのはとても難しいことです。まるで間違った印象を与えるようなメタファーを選んでしまう可能性が常に存在します。そしてご存知のように、誤ったメタファーはユーザーを困惑させてしまいます。

Microsoft Clippyは、大規模に公開されたUIの中でもっとも失敗した例の1つとしてよく知られています。結果的に今までに公開された機能のうち、もっとも人気のない機能の1つになってしまいました。Clippyの事例からは、現実味がありすぎるメタファーを使ったり、かけ離れすぎたメタファーを使ったりすると、このような問題が起こることが学べます。

Microsoft Clippyは、Microsoft Wordのスクリーンの角にポップアップするアニメ―ションのペーパークリップで、ユーザーの作業の流れを完全に邪魔するものでした。

やるべきでないこと:闇雲に現実世界のものを取り入れる(Apple iBooks)

AppleのiBooksがこの主な例でしょう。iBooksは本棚のデザインで、3Dの木目調になっています。本棚のメタファーの意図は、本棚で本を保管、管理するというユーザーの習慣をデジタル環境でも適用できるようにすることでした。棚と木目調のデザインは、アプリの機能自体には関係していませんが、メタファーを強化するために使われていました。のちにAppleはUIからこの模造の本棚のデザインを排除しています。

AppleのiBooksは親しみやすくわかりやすい木目調の本棚というメタファーを使って、何が表示されているのか、また何ができるのかについてユーザーが理解しやすいようにしています。

アナロジー

アナロジーとは、ほとんどの場合同じカテゴリーの中から部分的に似ている2つのものを比較することを指します。アナロジーとメタファーの違いは、メタファーは同じカテゴリーに属さないものを参照することが多い点です。

やるべきこと:見慣れたものを別の視点で見る(Nest)

人間は世の中の理屈を通す方法として、自然とアナロジーを利用し続けています。アナロジーによって、見慣れたものを別の視点から見ることができるようになり、問題に対して新しい解決策を生み出すことができるのです。

良い例の1つが、Nestでのサーモスタットのデザインに使われているアナロジーです。もともと、このデザインはHoneywellのサーモスタットを参考にしていて、円形状のタブを回すことで温度を調節できるようになっています。Nestはこの機能を実際に表現するにあたり、ほかの方法を選ぶこともできたでしょうが、Honeywellのサーモスタットを選びました。これによってNestのサーモスタットにどことなく親近感を与えることに成功しました。

Honeywellの当初の、 象徴的な丸いサーモスタット(左)とNestのサーモスタット(右)です。新しいテクノロジーを、比較的身近に感じられるものを用いて表現しています。

やるべきこと:新しいコンセプトをわかりやすくする(Facebook)

私たちは新しいコンセプトを理解するために、新しいコンセプトと既に知っていることを、知らず知らずのうちに比べています。過去の経験と新しい状況との間に共通点を探して、新しい製品を理解しようとしているのです。

Facebookが誕生する前に存在した、コミュニケーションの方法やメディアのあり方を変えるようなソーシャルメディアと言えば、MySpaceがありました。MySpaceはFacebookと同じような客層をターゲットにしていて、Facebookよりずっと前に誕生しています。しかしMySpaceには、多くのユーザーにとってプロフィールページが見にくいという大きな問題がありました。また、MySpaceではユーザーがプロフィール画面をカスタマイズできるのですが、最終的に以下の画像のような結果になってしまいました。

典型的なMySpaceのプロフィール画面です。

一方でFacebookは、とても直接的なアプローチを取りました。紙の学生名簿をアナロジーに利用したのです。多くの人がこのようなデータを扱った経験があるので、多くのユーザーにとって、Facebookはわかりやすく使いやすいものになりました。

Facebookは、ユーザーのデジタルプロフィールに紙のプロフィールをアナロジーに利用しました。

結論

メタファーやアナロジーなどのシンボルを使うことで、あなたの伝えたいことを端的に伝えることができます。メタファーやアナロジーはユーザーを誘導したり補助したりするだけでなく、コンテンツをより影響力のあるものに変えたり、より素晴らしい製品に変えたりすることもできる魔法の力なのです。


イベント

2017/10/06(金)
UX School(全10回)