UIUXデザインにおけるメタファー。UIの歴史をふりかえる

メタファーとは「隠喩」。日常生活ではあまりなじみのない言葉ですが、実はWEBを通して知らずのうちに触れています。UIデザインは現実世界に存在する物体や概念を平面的なデザインとして表現する時に、そのままの形で表現するのではなく、連想されるような形で表現します。

例えば、WordやExcelでよく目にする保存アイコンは、フロッピーディスクのメタファーです。フロッピーディスクは昔使われた記録メディアですが、若い世代はフロッピーディスクというものを知りません。ですが、フロッピーディスクのアイコンを見ると「保存するためのアイコン」と認識できます。

このほかにもUIデザインにおいてはメタファーが大きな役割を担っています。

メタファーとUIの歴史

現実世界に存在する物体や概念を連想される形で表現したものを「インターフェース・メタファー」といいます。もともとコンピュータは専門家しか使うことのないものでしたが、1984年にAppleのMacintoshが登場すると一般家庭でも利用されるようになりました。専門家しか使えなかったものが、一般ユーザーでも使えるようになったのは喜ばしいことですが、使い方が分からなくては元も子もありません。そんな時に登場したのが「インターフェース・メタファー」です。インターフェース・メタファーは一般ユーザーでもできるだけ簡単に操作ができるようにと進化してきました。

インターフェース・メタファーが最も顕著だったのが「スキューモーフィズム」といったデザイン技法を取り入れたiPhoneの初期UIや、2000年代のWEBデザインでしょう。スキューモーフィズムでは、ボタンを3Dにして本物のボタンのような見た目にしたり、メモ帳の背景をリアルな紙の質感にしたりすることで、より分かりやすい操作感を提供することに成功しています。コンピュータに慣れていない一般ユーザーが操作に迷う可能性を減らすことを目的にUIデザインが登場し、メタファーはUI向上に必要不可欠な存在だったともいえるでしょう。

メタファーに基づいたデザイン

メタファーに基づいたデザインで代表的なものが「アイコン」です。冒頭でお伝えしたフロッピーディスクもメタファーに基づいたアイコンの例です。アイコンは文字に頼らず形のみで表現しなくてはなりません。例えば編集を表すためには、鉛筆のアイコンが、削除を表すためにはゴミ箱のアイコンが、設定を表すためには歯車アイコンが使われます。いずれも現実世界のメタファーであり、ほとんどのユーザーが一目で操作できると思います。しかし、現実世界のメタファーであれば何でもよいというわけでもありません。削除を意味するものや行動は現実世界において「ゴミ箱」だけではありません。ごみ袋やほうき、ちりとり、シュレッダーなど多くのパターンが考えられます。とはいえ、削除のアイコンがほうきだったらどうでしょうか。おそらく一目で理解して操作をすることは難しいと思います。

つまり、適切なメタファーを心がける必要があります。適切なメタファーとは、「ユーザーがそのメタファーに慣れているかどうか」です。デザインの刷新や新たにシステムを導入する際、つい目新しいアイコンを採用したくなりますが、大切なのは直感的に使えるかどうかです。オリジナルのアイコンではなく、一般的に使われているメタファーを心がけましょう。

メタファーの効果

1.わかりやすくする
2.親しみを持たせる
3.ユーザーの注意をひく

言葉で説明しようとすると複雑なものも、メタファーであれば視覚的に訴えることができます。また、現実での行動に似た動きを実現させることで親しみを持たせることができます。さらに注意をひくという点においてもメタファーが重要になります。例えばECサイトにてあと〇時間でセールが終了ということを強調するために、デジタル時計を模してリアルタイムでカウントダウンがされるようなデザインをよく見るのではないでしょうか?これもよりユーザーの注意をひくメタファーとなります。

直感的に操作できるデザインを!

今回はメタファーについてお伝えしました。システムにおいて重要なのはわかりやすさや操作性です。メタファーは初めてシステムを使うユーザーにも、直感的な操作を助ける役割を担うため安心してシステムを利用することができます。また、シンプルを求めすぎて無機質になりがちなデザインも現実世界のメタファーを有効活用することで、より親近感を与えたり、世界観を表現することができます。

エイ・エヌ・エスでは、UIUXの観点から人間中心設計にてわかりやすく操作性の良い業務システムの構築を行っています。システムやデザインに関してのお悩みはぜひお気軽にご相談ください。

☆YouTubeはじめました☆
基幹システムをはじめとするIT関連情報を発信するチャンネルです。
チャンネル登録はこちらから⇓
https://www.youtube.com/channel/UC41Fu8lCawwGuNDXWy3PhSQ?sub_confirmation=1

・あわせて読みたい
2022年のUIトレンド!クレイモーフィズムとは?
使いやすさにフォーカスしたマイクロインタラクションとは?

・IT-Trustコラム(オーダーメイドのシステム導入で企業のDX推進を支援)
https://www.ans-net.co.jp/column/

・勤怠trustコラム(カスタマイズ可能な勤怠管理システムを構築)
https://www.kintai-trust.com/column/

マンガでわかる!イノベーションデザインラボ

contact us

ご相談・お問い合わせはこちら ご相談・お問い合わせはこちら