UI・UXデザイン

大阪電気通信大学 総合情報学部 デジタルゲーム学科, ゲーム＆メディア学科 後期開講科目

ひとを導くビジュアルコミュニケーションデザイン

第06週：11月05日

0）出席登録

MyPortalから出席登録をおこなってください。

授業内で指示するコードを入力してください。

1）課題［アイコン・シンボルの収集と分類］4 プレゼンテーション（追加）

先週に続き、プレゼンテーション動画を視聴します。

2）メタファー

これは、Microsoft Office for Mac 2011のアプリケーションに用いられている［保存］を意味するアイコンです。

このアイコンは、フロッピーディスクをモチーフにデザインされています。

フロッピーディスクは、コンピュターのデータを保存するディスク型記憶媒体のひとつで、1980〜2000年頃にかけて広く用いられていました。その後、大容量のディスク型記憶媒体の登場により徐々に廃れていきました。現在においては、データを保存する記憶メディアとしてフロッピーディスクを利用することはほとんどないと思われます。

メタファーは、日本語では暗喩や隠喩と訳され、たとえの形式をとらない比喩とされます。物事のある側面をより具体的なイメージを喚起する言葉で置き換えて簡潔に表現することを指します。「雪の肌」「バラの微笑」といった類で、比喩であることを表す「〜のような」といった語を用いません。

UI・UXデザインにおけるメタファーとは、ユーザとシステムやサービスの接点となるアイコンやシンボルの表現に、その事象のより具体的な機能を喚起するイメージで置き換えることといえるでしょう。

フロッピーディスクのアイコンは［保存］という行為のメタファーとして設計されているのです。

メタファーは、ユーザがシステムやサービス上の抽象的な情報を理解するためのサポートとして有効な手法です。具体的な概念と抽象的な情報をリンクさせることで、ユーザが情報を理解しやすくなります。

［保存］のメタファーとしてどのようなデザインが提案されているのか、アイコン素材配布サイトで検索した結果を見てみましょう。

　iconmonstr

　ICONFINDER

　Icons8

3）UIとモーション

わたしたちは、地球の自転から素粒子の振動まで、さまざまなモーション（動き）のある世界の中に存在しています。そのモーションは目に見えるものから目に見えないものまでありますが、そうしたモーションを捉えて情報を感知し知覚しているといえるでしょう。

UIにおけるモーションも、わたしたちが情報を感知し知覚する上でたいへん重要な要素であり、ユーザとシステムやサービスの接点に振る舞いを与えることで、より感知と知覚に強く働きかけるものとなります。

UIにおけるモーションは、以下の4つ観点から捉えることができます。

1. ユーザの身体や動作の延長にあるモーション

PCのマウスカーソルの動きや、タブレット端末やスマートフォンのスクロールなど、基本的な操作に関わるモーションで、ユーザの操作が直接的にデバイス上で反映されます。

2. UIの構造を認知させるためのモーション

画面遷移、レイヤー表示やタブ表示の切り替えなど、ユーザの操作に反応するモーションで、情報の重なりや空間の移動といったモーションによって、UIの構造を認知させる役割を担います。

3. システムやサービスからのメッセージとしてのモーション

ダイアログ、プログレスバー、マイクロインタラクションなど、システムやサービスの状況に関する情報提示にモーションが加わることによって、システムやサービス自体が自律的な存在として、そこに対話を感じるようになります。

4. コンテンツに連動する演出としてのモーション

ウェブやデジタルゲームなどのUIでは、コンテンツに連動した演出としてのモーションを用いることで、その世界観の表現を構成するものが見られます。

先週も紹介したMATERIAL DESIGNの一環としてのモーションについてまとめられた動画を紹介します。

　Google Developers / MATERIAL DESIGN

Googleではモーションについて、以下の効果があるとしています。

　・画面間での視線誘導

　・ユーザーが操作を完了すると何が起きるのかヒントを示す

　・要素間の階層的、空間的な関係

　・バックグラウンド処理から注目をそらす

　・キャラクター表現、楽しさの演出

Google マップを例にそのモーションを見てみましょう。

　四條畷−寝屋川キャンパス間の経路検索

昨今のUIデザインを牽引するGoogleのMATERIAL DESIGNのガイドラインの中では、かつてAppleのUIデザインにおいて採用されていたスキューモーフィズムといわれる質感や立体感といったリアルな現実世界のメタファー表現は影が薄くなり、より抽象的で幾何学的なフォルムにシフトしている傾向があります。

ユーザのシステムやサービスのUIに対する理解度が高くなり、現実世界のメタファーでは表現しきれない新たな概念が登場していることにも関係があるでしょう。

そうした中で、メタファーとしてのモーションにUIの観点が移行していると考えられます。

そうしたモーションを分解して確認すると構造や意図が理解できるでしょう。例としてiOS11でのホーム画面からアプリケーションの切り替えを取り上げます。

　iOSでのUIモーション

　・ホーム画面の後退とグレーアウト

　・アプリケーション画面群の左右方向のスワイプ

　・アプリケーション選択による全画面移行

　・選択アプリケーションの後退と左右方向のスワイプ

　・上方向へのスワイプでのアプリケーション終了

　・アプリケーション画面群の格納とホーム画面復帰

ほんの一瞬の操作に対していくつかのモーションが設定され、モーションが効果的に機能することでUIの操作感を豊かなものにしていることがわかるでしょう。

このようにモーションを分解して、ひとつひとつの動きとその意図を確認することは、UIデザインにおいて有用なプロセスであるといえます。

ページトップへ

　次のページへ