20230917

UI・UXデザイン

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

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

第01週:09月19日

開講クラス数:1クラス

開講日時:火曜日・2時限

授業教室:10-214

担当教員:渡部隆志

0)出席登録

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

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

1)授業の概要

■ 担当教員の自己紹介

1967年 京都生まれの、グラフィックデザイナーです。

グラフィックデザインを学んでいた学生時代に、アルバイトとして印刷会社でデザインの実務に携わり、その経験をもとに、1989年にヘッドプラスハート ビジュアルコミュニケーションデザインスタジオを立ち上げました。

右のYouTubeへのリンクでは、コンピュータが道具となる以前のグラフィックデザイン制作の様子を観ることができます。

わたしがデザイナーとしての活動をスタートさせた当時、デザイン設計はハンドワーク(手作業)によるものだったのです。

スタジオでのデザイン設計業務と並行して、修了と同時に大学研究室にアシスタントとして勤務する機会を得て、デザイン教育の一端にも携わるようになりました。 当時、研究室にあったMacintoshに触れたことが起点となり、コンピュータを利用したデザイン設計の世界に、研究・教育の立場から関わってきました。

いくつかの芸術系大学に講師としての出講を経て、2003年、日本で初めてとなるユニークな学際領域を対象としたデジタルゲーム学科の新設を機に、本務校である大阪電気通信大学に着任し、現在に至っています。

■ 目的

UI(ユーザインターフェイス)とは、ユーザと製品・サービスの接触面を指し、ユーザの目に触れ使用するすべての部分、情報を指します。一方、UX(ユーザエクスペリエンス)とは、ユーザがサービスを利用して獲得できる体験であり、ユーザが製品・サービスを通して感じたことのすべてを指しています。

この科目では、ユニバーサルデザインやサインデザインの観点からUI、 UXの設計について理解し、ひとと具体的にコミュニケーションするビジュアル表現について考える端緒とします。

さらには、デジタルコンテンツにおける、より豊かなインタフェースとエクスペリエンスについてより深く考察する契機となることを期待しています。

■ 授業内容

01. 授業の概要

    UI・UXとは何か

02. ユニバーサルデザインの考え方と社会的背景

    ゲシュタルト要因

03. 課題[アイコン・シンボルの収集と分類]1 課題説明

04. 課題[アイコン・シンボルの収集と分類]2 制作・提出

05. 課題[アイコン・シンボルの収集と分類]3 プレゼンテーション

06. 課題[アイコン・シンボルの収集と分類]4 プレゼンテーション

    メタファー

07. UIとモーション

    課題[UIモーションの分析]1 課題説明・制作・提出

08. 課題[UIモーションの分析]2 プレゼンテーション

09. 課題[UIモーションの分析]3 プレゼンテーション

10. 課題[インターフェイスデザインの改善提案]1 課題説明

    課題[シンボルマークの設計]1 課題説明

11. 課題[インターフェイスデザインの改善提案]2 制作

    課題[シンボルマークの設計]2 制作

12. 課題[インターフェイスデザインの改善提案]3 制作・個別チェック

    課題[シンボルマークの設計]3 制作・個別チェック

13. 課題[インターフェイスデザインの改善提案]4 制作・個別チェック

    課題[シンボルマークの設計]4 制作・個別チェック

14. 課題[インターフェイスデザインの改善提案]5 制作・個別チェック

    課題[シンボルマークの設計]5 制作・個別チェック

15. 課題[インターフェイスデザインの改善提案]6 レポート試験の説明

    課題[シンボルマークの設計]6 レポート試験の説明

    UI・UXデザインの課題確認

    UI・UXデザインの総括

    授業アンケートへの回答

■ 評価基準・評価方法

以下の提出物とレポート試験により総合的に評価します。

1. 課題[アイコン・シンボルの収集と分類]レポートデータ, コメント

2. 課題[UIモーションの分析]レポートデータ, コメント

3a.  課題[インターフェイスデザインの改善提案]レポートデータ

3b.  課題[シンボルマークの設計]レポートデータ

評価方法と評価観点の配点については、Webシラバスを参照してください。

■ 教科書・参考書

参考書

「ピクトさんの本」内海慶一 著 ビー・エヌ・エヌ新社

「SIGN, ICON and PICTOGRAM」Rayan Abdullah, Roger Hubner 共著 ビー・エヌ・エヌ新社

「グラフィックデザイナーのUI・UXデザイン」デザインノート編集部 編 誠文堂新光社

「新版 UIデザインの教科書」原田秀司 著 翔泳社

教科書は指定していません。

参考書についても授業内で紹介をしますから、特に手元に必要というわけではありません。

興味を持たれた方は、大学図書館での貸出などを利用してください。

■ その他

学生各自所有の教材コンピュータを使用し、講義資料(Web)の閲覧、課題制作をおこないます。

課題制作に必要となる材料などは、その都度連絡し学生各自にて用意してください。

積極的かつ能動的な受講と制作への取り組みが望まれます。

Graphic Design tools before Photoshop

Photoshop以前のグラフィックデザインの道具

LinkedIn Learning(Youtube)

2)UI・UXとは何か

■ そもそもデザインとはなにか?

本講でテーマとするUI・UXデザインの本題に入る前に、まずはデザインという行為の再確認をしましょう。

デザインというと、「絵」や「図」を描くこと…と誤ってイメージする方が、今なお多いと思われます。目に見える色彩や形体を捉えて、そのものがデザインだと認識することは、デザインという行為の表層を捉えているに過ぎません。

では、デザインの深層は何かというと、目に見える色彩や形体を通して、ひとの行為を適切に導くための「設計」であるといえるでしょう。

UI・UXデザインの観点からも先進的な製品を世に送り出したApple。そのCEOであった故 スティーブ・ジョブズは、「デザインとはどう見えるか(how it looks)を意味すると考える人がいる。しかし掘り下げれば、それはどう機能するか(how it works)ということなのだ」という言葉を残しています。

また、デザインは時として芸術(アート)と混同されることもあります。

デザインが芸術領域を取り込む部分があったとしても、デザインと芸術はその目的が異なるがゆえ、しっかりと分けて認識しておく必要があります。

芸術(アート)は、作家の個人的な内面から発露する表現によって、鑑賞者の感性や感情、思考に何かしら作用することを目的としています。それに対してデザインは、目に見える色彩や形体に対して、設計者による機能や働きが込められ、それによって問題や課題を解決し新たな価値を生み出すことを目的としているのです。

本講のサブタイトルとしている「ひとを導くビジュアルコミュニケーションデザイン」は、UI・UXデザインにおいて、ビジュアル(視覚)を通したコミュニケーション(情報伝達や意思疎通)のデザイン(設計)によって、ユーザのさまざまな行為を迷わせることなく適切に導くことを念頭に置いたものです。

■ UI(ユーザインターフェイス)

UIとはUser Interface(ユーザインターフェイス)の略語で、今やいたるところで用いられる一般化した名称となっています。ユーザ(使用者)に対して提供されるシステムやサービスの接点のことを指したものです。

みなさんが今まさに使用している、マウス、トラックパッド、キーボード、タッチパネルなどが直接手で触れるインターフェイスであり、それらの操作によってディスプレイ画面の中で間接的に動作するポインタ、アイコン、メニュー、ボタンなどの機能を持ったエレメントもインターフェイスに含まれます。

ユーザは何らかの目的や欲求を達成するためにシステムやサービスにアクセスし、その接点となるデバイスを通して間接的にシステムやサービスに用意されたエレメントを操作します。この部分がUIであり、UIデザインとは、ユーザとシステムやサービスの接点となるインターフェイスをより使いやすく心地よいものとして設計することなのです。

■ UX(ユーザエクスペリエンス)

UXとはUser Experience(ユーザエクスペリエンス)の略語で、こちらも一般化した名称といえるでしょう。広義では、そのシステムやサービスを知った瞬間から、実際に利用し、さらに使用を終えた後の期間も含めて、ユーザがシステムやサービスを通して得たすべての体験を指します。

UXの定義には諸説ありますが、ここではUXの概念を提唱したドナルド・A・ノーマンのテキストを引用します。「ユーザエクスペリエンスとは、企業やサービスや製品について、ユーザとのやりとりすべてを網羅するもの」とされ、「明らかにUIはデザインの非常に重要な部分であるが、UIとUXを区別することが重要である」と述べています。

ユーザがシステムやサービスを認知した瞬間からUXがはじまります。すなわち、広告、セールス、マニュアル、サポートなど、システムやサービスに関わるあらゆる事象がユーザの主観的なUXに影響を与え、UXを構築していくことになり、UXの対象は広範かつ多岐にわたるものであることがわかるでしょう。

■ UXの中のUI

UIは目に見えるエレメントであり、誰にとっても客観的に捉えることのできる対象であるのに対し、UXはあくまでユーザの体験でありそれは主観的なもので、一概には捉えにくいものです。UIが設計者の意図に基づいて設計できることに対して、UXはユーザの内面をも含めた概念であり、設計者の意図するところで設計しきれるものではありません。

広範かつ多岐にわたるUXの中で、UIが担うのはごく一部ではありますが、それが中核であることは間違いないでしょう。

今一度整理すると、システムやサービスにおいて、ユーザとデバイスの接点がUIであり、ユーザが受け取るすべての体験がUXであるといえるでしょう。UIとUXは別の概念であり、UIの客観性に対してUXが主観的なものであることをしっかり認識しておいてください。

3)ビジュアルコミュニケーションによる情報伝達

UI・UXデザインに入る前に、わたしたちの身の回りで見ることのできるビジュアルコミュニケーションによる情報伝達について考えてみましょう。

以下の1〜12のビジュアルエレメントはそれぞれ何を表しているでしょうか?

知っているものについてはその答えを、また知らないものについても自分なりに想像した意味を、教員に指示に従ってMeetのチャットで回答してください。

Copyright (C) WATANABE, Takashi / HEAD+HEART, Visual Communication Design Studio. All rights reserved.
Made on a Mac

Mac、Macロゴは、米国およびその他の国で登録されているApple Computer, Inc.の商標です。

Made on a MacバッジはApple Computer Inc.の商標であり、同社の許可により使用しています。

第01週:09月19日

第02週:09月26日

第03週:10月03日

第04週:10月10日

第05週:10月17日

第06週:10月24日

第07週:10月31日

第08週:11月14日

第09週:11月21日

第10週:11月28日

第11週:12月05日

第12週:12月12日

第13週:12月19日

第14週:12月26日

第15週:01月09日

Google

WWWを検索

headheart.comを検索

Image