2013/5/11

1

メディア学入門（5）

第3章 メディアコンテンツ(3.3,3.4,3.5)

視覚、聴覚、触覚に関わるメディアコンテンツ

東京工科大学メディア学部

近藤邦雄

1

講義資料：http://www2.teu.ac.jp/media/~ksasaki/lectures13/media_intro/

授業予定（2013年度）

• 第１回序論：メディア入門

• 第２回メディア社会を築くコンテンツとサービス

• 第３回メディアを支えるICT

• 第４回視覚に関わるメディアコンテンツ

• 第５回視覚、聴覚、触覚に関わるメディアコンテンツ

• （インタラクティブメディアコース）

• 第６回コンテンツ制作のためのデジタル技術

• 第７回コンテンツ利用のためのデジタル技術

• 第８回 中間テストを含む

2

2013/5/11

2

本講義の内容

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

3

メディアのモデル（基本概念）

インタラクティブコンテンツ

送り手作り手発信者

受け手甘受者受信者

映像CG

テキスト音声

情報ニュース

案内作品

本、書籍ラジオテレビ

PC、スマホ

コンテンツ コンテナ コンベア

4

2013/5/11

3

メディアのモデル（基本概念）

コンテンツとサービス、ビジネス

送り手作り手発信者

受け手甘受者受信者

映像CG

テキスト音声

情報ニュース

案内作品

本、書籍ラジオテレビ

PC、スマホ

コンテンツ コンテナ コンベア

5

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

6

2013/5/11

4

書名：誰のためのデザイン？

• Ｄ.Ａ．ノーマン 著

• 野島 久雄 訳

• 新曜社

デザインとはなにか

何に留意すべきか

デザインの問題点は何か

7

デザインとは

• デザインの原則– 概念モデルの提供: 予測が容易

– 可視性を与える

– 対応づけ: コントロール手段と動き

– フィードバック: 情報を返す

人の生活を豊かにするための創造活動

8

2013/5/11

5

1．概念モデルの提供

概念モデル

物体

意味の理解が容易

機能の手がかり：

9

概念モデル

デザイナ

システム

ユーザ

デザインモデル ユーザのもつモデル

製品

10

2013/5/11

6

アフォーダンス(affordance)

• アフォーダンスとは• 物を取り扱うための手がかり、事物の知覚された特徴

• 対象をどう使うかを決定できる最も基礎的な特徴

• 使い方が説明不要でも分かる

– 良くないデザイン

• 説明が必要なもの

• 使い方を学ぶ必要があるもの押す 引く

11

入り口ドアの「押す」と「引く」の違い

「入るとき」 引く

「出るとき」 押す

アメリカテキサスにて

12

2013/5/11

7

2．可視性

何を見せるか？ 自然なシグナル

Toilet

13

可視性の有効性

• 容易に解釈したり理解できたりする

– 少しの手がかりが重要である

実例塩入れとこしょう入れの違い電灯の点灯

14

2013/5/11

8

3．対応付け( Mapping)

• 人の操作と機械の表示

コントロール手段

実際の世界に及ぼす結果

15

車輪

ハンドル

右

右

ハンドルと車輪

はさみ：使える道具の例

• 機能：見れば分かる

• 概念モデルは明らか

• 穴：アフォーダンス：

指を入れる大きさで制約

16

2013/5/11

9

リモコンの使い勝手の違い

17

パナソニック 『リモコン2』スマートビエラ TH‐P65ZT5 [65インチ]

パナソニック 『リモコン』VIERA TH‐P42S3 [42インチ]

4．フィードバック

• フィードバック：情報をユーザに返す

行為 結果

結果をユーザに返さないとどうなるか

19

2013/5/11

10

良いインタラクションデザインのために

• よい概念モデル• 操作と表現に整合性、一貫的・整合的イメージを生む

• 可視性• 装置の状態・可能な行為を知る

• よい対応づけ• 行為と結果との対応関係の確定

• フィードバック• 結果に対するフィードバックを受け取る

20

行為遂行の７段階モデル

ゴール

意図

行為実行

評価

日常の行為の流れ

良いデザインは行為の流れがスムース

21

知覚

解釈

2013/5/11

11

行為のサイクル

ゴール起こってほしいこと

外界

実行外界に対して行ったこと

Ａ

評価起こったことと期待した

ことの比較

Ｂ

22

例：ワードプロセッサゲームなど

実行の段階 Ａ

ゴール

外界

何かをしようとする意図

実行のための行為系列

実際に実行する

23

2013/5/11

12

評価の段階 Ｂ

ゴール

外界

起こると思っていたことに対する評価

知覚の解釈

外界の状態を知覚

24

Normanの行為遂行の7段階モデル

(1) ゴールの形成 起こってほしいこと

(2) 意図の形成 行為をしようとする

(3) 行為の詳細化

(4) 行為の実行 外界に行為を及ぼす

(5) 外界状況の知覚

(6) 外界状況の解釈

(7) 結果の評価 ゴールと比較

25

2013/5/11

13

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

26

インタラクティブシステムとインタフェース

• インタラクティブ

• インタラクティブメディア

• インタラクティブシステム

27http://www.roppongihills.com/shops_restaurants/services/atm/402330008.htmlニンテンドー ゲームキューブ

2013/5/11

14

[1]入力機器

28

[1] インタラクティブシステムのための入力機器

30

(1)視覚に対応する機器(2)聴覚に対応する機器(3)触覚に対応する機器

a.RED ONE 4K Camera b.モーションキャプチャシステム東京工科大学

2013/5/11

15

入力装置

視覚 聴覚 触覚

フォースフィードバック3Dマウス

31

[2] インタラクティブシステムのための出力機器

32

(1)視覚に対応する機器：ディスプレイ装置，3次元ディスプレイ・ヘッドマウントディスプレイ

(2)聴覚に対応する機器：

MIDI(Musical Instrument Digital Interface)電子楽器（シンセサイザ）

(3)触覚に対応する機器ハプティックデバイス

図3.19 SPIDER‐mouse図3.18 大きさの異なるドット絵(ピクセルアート)

2013/5/11

16

出力装置

視覚 聴覚 触覚

33

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

34

2013/5/11

17

インタラクティブメディアコンテンツ1．ゲーム

2．VR3.  AR4．インタラクティブアート5． Webコンテンツ

3.3.3.

35

1．ゲーム

36

3.3.3.

2013/5/11

18

ゲームとは

• ユーザがコンピュータなどのディジタル機器を使って，さまざまな障害を解決して目的を達成するようなコンテンツ

• ゲーム機器の構成（考えてください）

– 入力

– 処理

– 出力

37

ゲームの適用分野

• エンターテイメント

• 教育

• 医療・福祉

• スポーツ

• どのような分野にゲームがあるか？

• ゲーミフィケーションとはなにか？

38

宿題教科書47ページ、147ページ参考

2013/5/11

19

ゲーム制作手法の提案インタラクティブメディアコース

• コンピュータゲームの企画，開発，展示– 最先端のカリキュラムとゲーム開発環境

– 世界の先端教育カリキュラム

– 東京ゲームショウ，CEDECほかに出展

• 1年次から実際に3DＣＧプログラミングを習得しながらゲームを開発

学生によるゲーム制作例

40

a.KIGGJ演習で制作したゲーム例(13,14) b.アクションRPG『四巡絵巻』(15)

図3.20 学生によるゲーム制作例

2013/5/11

20

多くの人に面白いと感じてもらえるゲーム性のあるメディアアート作品を作りたい

バランスボールインターフェース(IPA未踏プロジェクト、2007)

安本匡佑助教

加速度センサ、圧力センサも利用

2．AR

42

3.3.3.

2013/5/11

21

ARコンテンツ

• カメラで撮影した実写画像に3次元CGによる

仮想モデルをリアルタイムで同時に表示する拡張現実技術（Augment Reality）を利用したコンテンツ

• 現実空間を取り込むための入力装置

• 取り込んだ空間を認識するための計算機

• 合成した画像や映像を表示するモニタ

43

ARの応用事例

• 教育，メディアアート，絵本，広告などへの応用

44

コムメディアデザイン プロジェクト ゲームサイエンス プロジェクト東京工科大学 東京工科大学

2013/5/11

22

インタラクティブ・コンテンツの提案• 新しい人とコンピューターの関わり

「モノ」によってコンピューターが反応

– 日常に紛れ込むデジタルコンテンツ

– マウスやキーボードの操作をしない

– モニター（ディスプレイ）ではないものへの表示

積み木を置くと、スクリーンのキャラクターが登ったり降りたりします

グラスをテーブルに置くと、カクテルの情報が

テーブルに表示されます

インタラクティブメディアコース

東京工科大学

インタラクティブ・コンテンツの提案

体の存在や、動きにコンピューターが反応する

インタラクティブメディアコース

スクリーンの前に立つと、その人の「オーラ」が映しだされます

ポーズをとることで、かめはめ波が発射されます

見る人の顔が音符となって楽譜状に現れ、演奏される作品です

2013/5/11

23

未来のゲームを目指して

インタラクティブメディアコース

• 未来のゲーム制作のためのゲーム制作技術の研究開発– 新しい表現方法やユーザーインタフェイスの研究

エネルギー波表現のリアルタイムレンダリング

ARを⽤いたギターの演奏⽀援システムARによる仮想空間でのエフェクト表現

立体視ゲームの研究

東京工科大学

3．VR

48

3.3.3.

2013/5/11

24

VRコンテンツ• 仮想現実（VR: Virtual Reality）は，実写映像やCG映像を立体

視技術により生成した仮想的な3次元空間で、対象の観察や分析、対象の生成や処理技術を用いて制作したコンテンツ

• CAVE

49http://www.idolab.sakura.ne.jp/IDOLAB/events/2011/0615/0615.html

東日本大震災による津波の被害と力について 高解像度地球ダイナモシミュレーション4面CAVE

VRの活用• 住宅のなかのキッチンシステム：蛇口の位置や棚の

取っ手の具合などを実際に取り扱うように動作することによって，完成した後の様子を実感

• 過去の都市空間の再現：その空間の中に入り込んで，バーチャルに体感すること

• 伝統文化・無形文化財の体験：その踊りや演技の訓練，指導を受けること

• 電磁場の複雑な3次元軌道の粒子運動の観察

50図3.22 CAVEを用いたコンテンツ

2013/5/11

25

4．インタラクティブアート

51

3.3.3.

属性の積算(21_21DesignSite, 2010)(撮影：田村友一郎)

点にんげん、線にんげん(ICC, 2008)

安本匡佑

「君の身体を変換してみよ展」第20回文化庁メディア芸術祭

エンターテインメント部門で優秀賞

2013/5/11

26

The Light Shooter

東京ゲームショー出展

安本匡佑

54

「Lighting Choreographer」

メディアアートの例 制作：藤本実(17)

人間が自由に身体の色を変化させた場合に何ができるかというテーマは人間の機能の拡大という意味を持ち，人間とコンピュータのインタラクションにおいて重要

2013/5/11

27

5．Webコンテンツ

55

3.3.3.

Webコンテンツの構成例

Webコンテンツとは

• インターネット上で配信されるHTMLなどのハイパーテキストで表したコンテンツ

• 文字

• イラスト

• 写真画像

• ビデオ

• 2次元アニメーション

• 3次元アニメーション

56

2013/5/11

28

Webコンテンツの事例

• コンテンツ内容の検討とその表現構成，ユーザの明確化，コンテンツを利用する場面を決定

• トップページから直接リンク，または階層構造などによって分類・関連づけして、コンテンツの内容を分かりやすく示すように、Webサイトを構成

• 表示装置：PC，タブレット，スマートフォン，携帯電話に大きさの違い

• ページ構成:利用する表示機器のサイズを考慮

57

近藤邦雄のＷｅｂページ構成

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

58

2013/5/11

29

周期

振幅

振幅

時間

波形

3.4.1 音と聴覚

音:音波音の速さ：常温で毎秒340メートル周波数:音秒間に振動する回数

音の波形と三要素

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

60

2013/5/11

30

3.4.2 音楽メディア[1] 音楽メディア機器と記録メディア

• リズム，メロディ，ハーモニーの3要素

– 感情や主張を音で表現

• 映像コンテンツの企画:挿入曲，劇内音楽，サウンドトラック，エンディング曲

• 音楽制作工程:作曲・作詞，演奏，記録，聴取

• 電子楽器(シンセサイザ):

– 鍵盤（キーボード），ギター，打楽器

– 人の動きの認識による音の入力・演奏技術

タッチパネル 61

テルミン大人の科学マガジン

[2] 音楽とデータ形式

• 音楽の記録メディア：，音楽を保存でき，それを聞くことができる機能• CD，DAT，MD，ミュージックビデオ，DVDオーディオ，携帯電話• 音楽配信サーバを利用したダウンロード・配信サービス

• 音楽・音声などのデータを保存するファイルフォーマット：MIDI,mp3，WAVなど各種の形式

• MIDI：Musical Instrument Digital Interface の略称– 電子楽器の演奏データの世界規格

– 電子楽器の演奏情報のデータ形式，プロトコル，物理的インタフェースなどを統一

– 電子音楽のソフトウエア，コンピュータネットワークでやりとりされる音楽データ，テーマパークなどでの自動演奏装置，通信カラオケの送信データ，携帯電話の着信メロディ

– コンサートや演劇などのステージにおいてもMIDIシステムと照明装置が連動

– 音声・音楽ファイルフォーマットであるmp3– Windows 標準の音声・音楽フォーマット WAV – アナログ信号である音を圧縮技術によって，ディジタルデータに変換して保存

62

3.5.3 音声合成

2013/5/11

31

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

63

3.4.3 サウンドデザイン[1] さまざまなサウンドの制作• サウンド：画像や映像とともに重要• 映像コンテンツやゲームにおけるサウンド• 現場音，足音などのフォーリー，効果音，セリフ，ナレーション• フォーリーや効果音の制作：さまざまな道具の利用

– 床を歩く音の違いの表現：大理石，土，板，コンクリートなどを用意

– 波の音，マッチを擦る音，小銭をばらまく音，ドアを開ける音，本をめくる音など日常生活におけるありとあらゆる音を制作，収録

– 環境音：映像演出には必要

64

フォーリーアーティスト

http://www.kobedenshi.ac.jp/blog/sound/2009/11

2013/5/11

32

さまざまなサウンドの制作

65

(a)小豆による波の音の表現（日本工学院専門学校 声優・俳優科提供）

(b)アナログシンセサイザー

http://blog81.neec.ac.jp/archives/50143099.htmlhttp://blog82.neec.ac.jp/archives/51060084.html

[2] インタラクション，コミュニケーションを助けるサイン音

• サウンドはインタラクションを助ける機能を持つ：ゲーム，情報メディアシステム，家電製品，公共空間で利用

• サウンドの役割：選択音，起動音，通知音，フィードバック音，着信音，警告音，サイン音

• インタラクションに関するサイン音

– 開始・設定・終了・警告などのタイミング

– 音のデザインである音色の種類，ユーザとの距離などを考慮してメッセージが正しく伝わるようにする．これによって，快適なインタラクションを行うことができる．

66

2013/5/11

33

生活におけるサウンドの利用

67

(a)横断歩道の音声ガイド (b)札幌市時計台図3.29 生活におけるサウンドの利用

サウンドを生かしたコンテンツ

68

絵で音に「はたらきかける」事によって演奏を実現

ロボット型のデバイスによって実現したもの。ロボットにすることで、手で触ったり、動かしたりするなど、より直感的な操作で演奏を実現

歯車を使ったリズムボックス

脳波で奏でる楽器

脳波のみで演奏するシンセサイザー魚住講師

2013/5/11

34

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

69

3.5.1言語処理

• 言語とは：

– 知能を記述する一つの手段

• 役割：事物の説明ができるだけでなく，時々刻々と変化するような事象なども表現

• コミュニケーションの成立

– 話し手の心情や要求が聞き手の正しく理解されることであり，話し手の伝えたい意図と聞き手の理解したことが一致すること

• 言語情報処理

– 文書の作成支援やコミュニケーションの効率化・高精度化

• 手法：

– テキストの翻訳，要約生成，用例集や単語の出現確率計算，固有表現抽出，用語の誤りチェック，情報検索，遠隔指示

– 大量の文書は「知識」であるので，それらを解析して必要な単語を抽出する技術，知識の再構成の理論の提案

70

2013/5/11

35

言語とテキストの応用事例• 文書執筆作業支援

– 文書校正：

– かな漢字変換:文字による日本語入力のための方法

• 情報検索と抽出

– 検索エンジン

– 固有表現抽出 日時や場所

– 情報抽出：特定の文章やサイトから必要な情報をフィルタリングなどを通して取得する方法

• 文書生成

– 自然言語生成 知識ベースや論理形式などの機械表現系から自然言語を生成すること

– 自動要約生成

– 翻訳ソフト

• 文字認識

– 活字の文書の画像（通常イメージスキャナーで取り込まれる）をコンピュータが編集できる形式（文字コードの列）に変換

71

漫才の笑い分析とモデル化オープンコミュニケーション

コミュニケーションデザイン 卒研プロジェクト （飯田教授、榎本講師）

➩研究用データとして既に収録済み：

・ナイツ・サンドウィッチマン・シャンプーハット

2013/5/11

36

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

73

音声認識

• 音声認識

– 人間が話す言葉をコンピュータにより解析し，音声の内容，発声者，性別，感情などを理解すること

• 音声認識処理– 学習：音声の波形を分類し子音と母音のひな形を作成する処理

– 認識：ひな形と認識したい音声波形を照合して文字データを取り出す

認識処理

• 音声認識ソフトウエア

– この認識処理のみを扱っていることが多い．

74

2013/5/11

37

音声認識技術を利用した例

75

パイオニア カーナビ図3.30

• 会議の会話の議事録作成• 音声によるメモ入力• 生番組におけるリアルタイム字幕制作• 英会話の発音評価・練習• 放送番組の検索• ハンズフリーの車・家電機器操作• 宛先認識による配送

• バーチャルキャラクターとの会話やキャラクター語への変換

• ロボットとの対話• 特定話者認証によるセキュリティへの応用

音声認識処理の応用事例

• 会議の会話の議事録作成

• 生番組のリアルタイム字幕制作

音と音声によるインタラクションプロジェクトの研究例（相川教授）

76

音声で図柄を検索

効果音でゲームプレイヤーの心を揺り動かすクイズ音声対話

2013/5/11

38

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

77

3.5.3 音声合成

• 音声合成とは:

– 音声波形をつなぎ合わせ手法や統計的学習に基づいた音声波形生成手法を用いて人間の音声を人工的に作り出す技術

• 合成音声：

– この方法を用いて生成した音声を合成音声という．

– 合成音声をいかに人間の音声に近づけるかが課題であり，多くの手法が提案されている．

78

2013/5/11

39

合成音声の応用分野

• コンピュータの表示画面の読み上げ• 電話の自動音声応答• ATM操作説明• 広告・電子書籍・教材のナレーション• 音声認識音声翻訳アプリ搭載スマートフォン• 音声アシスタント• カーナビや交通機関の行先案内• ゲームの自動応答• 歌声合成ソフト

79

音声合成技術の利用例

80

図3.32キンチョーCM 金鳥 プレシャワー 「ベンチの人」

図3.31合成音声技術を利用した歌声合成(19)

ill. by KI (c) Crypton Future Media, Inc. www. crypton.net

使用許諾済，再配布禁止

2013/5/11

40

本講義のまとめ

3.3 インタラクティブメディアコンテンツ1. インタラクティブシステムとユーザインタフェース

2. インタラクティブシステムのための機器

3. インタラクティブメディアコンテンツ

3.4 音楽・サウンド1. 音と聴覚

2. 音楽メディア

3. サウンドデザイン

3.5 言語とテキスト1. 言語処理

2. 音声認識

3. 音声合成

81

宿題１：ゲーミフィケーションとはなにか？

1 ゲーミフィケーションとはなにかを調べてください。

2 ゲーミフィケーションの事例を2つ以上あげてください。名称と内容を説明してください。

3 あなたが考えるゲーミフィケーションの応用例を説明してください。目的、内容、システム図、機能、使い方などをまとめること。

まとめ方：pptで、1．表紙（テーマ名、学籍番号、氏名）、2．事例紹介、3．提案、4．まとめ、5．感想という内容でまとめること。

提出締切：5月24日木曜日13:00まで。 Ａｓｓｉｔで提出

82

予習課題：教科書 第4章の4.1, 4.2を必ず読んで来

てください。