Global communication plan 2.0

UI Design Rule
多言語同時通訳におけるデザインルール

Ver. 1.1.0

TOPPAN株式会社

改定履歴
バージョン

発行日付

改訂履歴

1.0.0

2022年11月29日

1.0.0 リリース

1.1.0

2023年10月31日

1. UIデザインルールのフィードバック①成果報告書からの引用表記を修正• 成果報告書の具体的なタイトル名を削除し、「社会実証WGの成果報告書より引用した」に統一した。
• 具体的な年度表記を削除し、その他同様の引用表記と記載を統一した。
②成果報告に関する補足エビデンスの記載方法を検討• 成果報告による推奨事項以外の参考となる情報を、本文外のコラム扱いとし、該当ページにて「memo」と書かれた欄に記載した。
③メガネ型ウェアラブルデバイスに関する記載方法を検討• メガネ型ウェアラブルデバイスに関する特記事項について、「1.5. デバイス 1.5.1. メガネ型ウェアラブルデバイ
ス」内に情報を集め、内容の充実化を図った。
• ウェアラブルデバイスについて分散していた情報を集約して確認できるよう更新した。
④記載項目を推奨する背景の追加• 「1.3. 基本要素 1.3.1. 文字 (4). 文字サイズ」の「認識結果よりも翻訳結果を大きく表示する方を推奨する」という記載について、１事業者様からは、これが良いとされた背景も含めた掲載の要望があったため、追記した。
⑤令和4年度の成果報告からの反映• 令和4年度の成果報告書より、UI要件として反映できる知見を抽出し追記した。
⑥内容削除を検討• 本年度の採用基準に則り、デザインルールの効果について言及している内容と記載内容の項目の必要性が既に自明と思われるものは削除対象とした。
⑦要件範囲外となった知見の集約• デザインルールにおいて要件範囲外となった知見に関しては、開発メンバー向けに情報を集約した資料「デザインルールに関する成果報告まとめ_令和5年度」を用意した。
2. 本年度ラボ実証からの追記• 「分からないを伝えるUIの研究」のラボ実証結果から、多言語同時通訳の文脈に関わるUI要件を抽出し追記した。

Copyright © 2023 TOPPAN Inc.

2

0. UI Design Rule とは

0. UI Design Ruleとは
概要
・総務省委託研究「多言語翻訳技術の高度化に関する研究開発」の成果のひとつとしてとりまとめたガイドライン
・「自動同時通訳アプリケーション」のUIデザイン設計時のガイドラインとなるドキュメント

想定読者
・「自動同時通訳アプリケーション」の設計者、開発者、デザイナー

構成
・「グラフィックデザイン」「コミュニケーションデザイン」「サンプルデザイン」の３つのカテゴリで構成- グラフィックデザイン・・・

UIの構成要素および提供機能に関する推奨値や推奨設定、知見・ノウハウ等を記載- コミュニケーションデザイン・・・ アプリケーションを介したスムーズなコミュニケーション実現に必要な観点と対策案を記載- サンプルデザイン・・・

想定した利用シーンにおけるアプリケーションのUIデザインの参考例を提示

Copyright © 2023 TOPPAN Inc.

3

目次
0. UI Design Ruleとは

3

1.3. 基本要素

11

1.3.1. 文字

11

1. グラフィックデザインについて

7(1). フォント11

1.1. 全体ルール

8(2). 文字間隔

12

1.1.1. 知覚可能

8(3). 文章幅

121.1.2. 操作可能

8(4). 文字サイズ

13

1.1.3. 理解可能

8(5). 文字サイズのイメージ

15

1.1.4. 堅牢性

81.3.2. 色

1.2. 配慮

169(1). カラーセット

16

1.2.1. アクセシビリティ

9(2). コントラスト

17(1). 考慮した設計

9(3). 色の使い方

18(2). シンプルな設計

9(3). 知覚できる設計

91.2.2. インクルーシブデザイン(1). 様々なユーザーへ適応

1.3.3. 字幕

19(1). 行数

1910(2). 1行あたりの文字数

1910(3). 認識可能な文字数

20(4). 字幕の最大表示時間

20(5). 文字サイズ

20(6). 表示方法

21(7). 文字表示エリア

21

Copyright © 2023 TOPPAN Inc.

4

目次
1.3.4. アイコン

22

1.3.8. インタラクション

36(1). デザイン

22(1). 原則36(2). サイズ

23(2). 状態の種類

36(3). 透明度

23(3). 警告39(4). 形状

24(4). 色による状態表示39(5). アイコンのアニメーション化

24(5). テキストによる状態提示39(6). アイコンのラベル

25

1.3.5. 画像(1). 最適な方法
1.3.6. モーション(1). 最適な方法

1.3.9. コミュニケーション

4026(1). 確認と承認

4026(2). オフライン状態

40

27

1.3.10. 文言(1). 言葉のトーンを考慮する

41(2). 人の呼び方に注意する

4128(3). 専門用語の使用を避ける

41(1). レイアウト構成

28(4). 平易な表現にする

42(2). 配置

29(3). デバイスの向き

29(4). タッチ可能領域

29(5). レイアウト4原則

30(6). 代表的な利用シーン

32

1.3.7. レイアウト

27

41

Copyright © 2023 TOPPAN Inc.

5

目次
1.3.11. LTRとRTL

43

1.6. 機能50(1). テキストの配置

43(1). アーカイブ

50(2). 言語に基づく調整

43(2). 逆翻訳

51(3). 数字の表現

44(3). フォーカス

52(4). 画像の向き

45(4). 画像送信

52(5). アイコンの向き

45(5). ジェスチャー操作

52(6). UIパターンのカスタマイズ

53(7). 設定メニュー

53

2. コミュニケーションデザインについて

54

2.1. 入力・翻訳精度向上

55

1.4. 構成パーツ
1.4.1. タブ(1). 表示方法

46
46

46

1.4.2. インジケータ

47(1). 音声入力中の認識結果文字を表示する

55(1). 表示方法

47(2). シンプルなボタンによるコントロール

56

1.5. デバイス

48

1.5.1. メガネ型ウェアラブルデバイス

2.2. 時間の効率化

4857(1). 入力ボタンを押す前の予測入力

57(2). 合成音声を使わない字幕表示

57(1). 最適な方法

48(2). 文字サイズ

49

3. 画面サンプル58(3). 色のコントラスト

49

3.1. 遠隔会話

59(4). レイアウト

49

3.2. 遠隔プレゼン61

3.3. 対面会話

66

3.4. 各ボタンの表示イメージ

67

Copyright © 2023 TOPPAN Inc.

6

1. グラフィックデザインについて7

1.1. 全体ルール

1.1. 全体ルール
用途に限らず守るべきルール
下記４項目を意識した設計デザインを行うことで様々な属性（年齢・能力・障害等）の人々が内容を理解し、操作することを可能にする。これらのいずれかが当てはまらない場合、障害を持つユーザーはコンテンツを使用できなくなる。

1.1.1. 知覚可能
情報やユーザーインターフェースは、ユーザーが知覚可能である必要がある。

1.1.2. 操作可能
ユーザーインターフェースや機能は操作可能である必要がある。

1.1.3. 理解可能
情報やユーザーインターフェースの操作は理解可能である必要がある。

1.1.4. 堅牢性
技術が進歩してもユーザーがコンテンツにアクセスできなければならない。
参考：
The World Wide Web Consortium (W3C). Introduction to Understanding WCAG 2.0. Understanding the Four Principles of Accessibility.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head

Copyright © 2023 TOPPAN Inc.

8

1.2. 配慮｜

1.2.1. アクセシビリティ

1.2. 配慮
アクセシビリティやインクルーシブの確保に関するルール
アクセシビリティやインクルーシブの方向性を定めることで、ユーザーの属性、能力に関係なく、コンテンツを利用できるようにする。

1.2.1. アクセシビリティ
下記3項目を意識した設計デザインを行うことで、様々な能力を持つユーザーや様々な方法でデバイスを操作するユーザーを除外しないようにする。

(1). 考慮した設計
能力や状況に関係なく、すべての人が情報を利用できるようにすること。

(2). シンプルな設計
複雑なタスクを、シンプルかつ簡単に実行できること。

(3).知覚できる設計
視覚、聴覚のいずれにおいても、すべてのコンテンツを確実に認識できるようにすること。
参考：Apple Inc. . Accessibility. Human Interface Guidelines.
https://developer.apple.com/design/human-interface-guidelines/foundations/accessibility

Copyright © 2023 TOPPAN Inc.

9

1.2. 配慮｜

1.2.2. インクルーシブデザイン

1.2.2. インクルーシブデザイン
下記を意識した設計デザインを行うことで、様々な視点を持つユーザーでもアクセスして理解できるようにする。

(1). 様々なユーザーへ適応
コンテンツを構成する際は、以下のような様々な視点を持つ人々がどのように理解するか考慮する。
• 年齢
• 性別
• 文化
• 民族
• 宗教
• 哲学
• 障害

Copyright © 2023 TOPPAN Inc.

10

1.3. 基本要素｜

1.3.1. 文字

1.3. 基礎要素
1.3.1. 文字
フォントや文字の仕様に関するルール
フォントやサイズをルールをもとにデザインすることで、一貫性を保ち、各画面で各要素を認識しやすくなる。

(1). フォント
以下のフォントを使用する。読みやすさを維持するために、フォントの太さを薄くすることは避ける。※1
日本語：ゴシック体（ヒラギノ角ゴ・ヒラギノUD角ゴ推奨）※2
使用できない場合は視認性の高いゴシック系フォントを使用する。
その他の言語：ゴシック体（Noto Sans推奨）
Noto Sans：GoogleがAdobeと共同開発したフォントである。

Noto Sansサンプル
参考：※1 Apple Inc. . Typography. Human Interface Guidelines.
https://developer.apple.com/design/human-interface-guidelines/foundations/typography※2 ゴシック体は、可読性に優れているとされており、見出しや小見出しに用いられることが多い書体である。Robin Williams（2016年）. 『ノンデザイナーズ・デザイ
ンブック [第4版]』 . マイナビ出版.
雑誌やパンフレットなどあらゆる媒体で幅広く活用しており、AppleのMacOSとiOSに標準搭載。 NEXCOでは、高速道路に設置する案内標識の和文部分の書体として採用している。
Copyright © 2023 TOPPAN Inc.

11

1.3. 基本要素｜

1.3.1. 文字(2). 文字間隔
文字と文字の間はスペースにゆとりがある場合は140%、情報量が多い場合は100%を基準※とする。

サンプルサンプル
サンプルサンプル

140%

サンプルサンプル
サンプルサンプル
サンプルサンプル
サンプルサンプル

100%

文字間隔サンプル
参考：※一般的に文字サイズの0.5文字分から1文字分の高さの行間をとることが適切とされる。ただし行長が広い場合は、より広い行間が必要になる。
高橋 佑磨, 片山 なつ （2021年）.『伝わるデザインの基本 増補改訂3版 よい資料を作るためのレイアウトのルール』.技術評論社(3). 文字幅
文章の幅が半角80字、全角40字を越えないことを推奨する。
字幕表示の文字幅に関しては字幕の項目を参照。

38文字

60文字

参考：
The World Wide Web Consortium (W3C). Introduction to Understanding WCAG 2.0. Visual Presentation.
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html

Copyright © 2023 TOPPAN Inc.

12

1.3. 基本要素｜

1.3.1. 文字(4). 文字サイズ
文字サイズはデバイスごとに下記サイズを参照すること。
テキストサイズの変更に対応するときは、重要なコンテンツを優先する。
文字の種類

PC

タブレット

スマートフォン

①

本文のサイズ

19px

19px

15px

②

本文のサブサイズ

16px

16px

13px

③

ボタンのラベルのサイズ

14px

14px

12px

④

アイコンのラベルのサイズ

12px

12px

10px

各デバイスの「横幅」画面解像度は下記の想定。

• PC：1440px（標準ブラウザ想定）• タブレット：1366px（iPadPro12.9準拠）• スマートフォン：375px（iPhone11Pro準拠）

参考：
文字サイズについて、以下のサイトを参考とした。
The World Wide Web Consortium (W3C).Web Content Accessibility Guidelines 2.0.
https://www.w3.org/TR/2008/REC-WCAG20-20081211/
凸版印刷株式会社. 「トッパンのユニバーサルデザイン、P.8 文字情報をわかりやすく伝える」
https://www.toppan.co.jp/library/japanese/ud/files/toppan_ud_all.pdf

Copyright © 2023 TOPPAN Inc.

13

1.3. 基本要素｜

1.3.1. 文字• 音声認識結果（母国語）の文字は小さく表示し、翻訳結果の文字を大きく表示することを推奨する。Webアンケートによるデザインルールの検証では、翻訳された英語を読むときの表示について「英語は大きく、日本語は小さい」が見やすい、やや見やすいで全体の91.7％を占めた。

訳語が大きい訳語が小さい• メガネ型ウェアラブルデバイスにおいては、上記文字サイズよりも大きく、表示時間を長めにすることを推奨する。上記文字
サイズと比べて、屋内では2倍弱、屋外では2倍前後の大きさを推奨する。作業をしながら表示内容を確認する遠隔協業およびメガネ型ウェアラブルデバイスの特性から用務達成度の向上が見込めるためである。

参考：
上記の3点の推奨事項は、いずれも社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

14

1.3. 基本要素｜

1.3.1. 文字(5). 文字サイズのイメージ①本文のサイズ15px①本文のサイズ
19px③ボタンのラベルのサイズ
14px③ボタンのラベルサイズ
12px②本文のサブサイズ
16px④アイコンのラベルのサイズ
12px②本文のサブサイズ
13px

PCの場合

④アイコンのラベルのサイズ
10px

スマートフォンの場合

Copyright © 2023 TOPPAN Inc.

15

1.3. 基本要素｜

1.3.2. 色

1.3.2. 色

画面構成や文字の色に関するルール
画色はブランドを識別し、ブランド間で一貫した体験を生み出し、情報の識別に役立つ。色は見た目に配慮し、3種類から5種類程度に色の種類を抑え、混乱させないために、同じ意味を持たせたい情報は同じ色にし、いたずらに色を分けないようにする。
※1(1). カラーセット
カラーセットは本デザインルール指定の下記の使用を推奨する。使用する色は、海外の国や文化でどのように認識されるか検討した上で使用する。※2 併せて、ユーザー自身と他者の発言内容が分かるよう、色分けされていることを推奨する 。 ※3色の種類

カラーサンプル

カラーコード

使用シーン

Text

#0b0c0c

見出し、テキストに使用する

Link#0068B7

リンク要素に使用する

Error#d4351c

エラーメッセージに使用する

Brand#0068B7

キーカラーに使用する

Focus#ffdd00

フォーカスされている要素を示すために使用する

参考：※1 Google LLC. . Color, Color-usage, Hierarchy, Limiting color. Material Design.
https://m2.material.io/design/color/color-usage.html#hierarchy※2 Apple Inc. . Color. Human Interface Guidelines.
https://developer.apple.com/design/human-interface-guidelines/foundations/color※3

社会実証WGの成果報告書より引用した。
Copyright © 2023 TOPPAN Inc.

16

1.3. 基本要素｜

1.3.2. 色(2). コントラスト
JISでは文字の視認性を高めるために、文字および画面上の文字について背景色と文字色の間のコントラスト比を保つことが必要であり、達成等級AAおよび、AAAで「コントラスト比」の基準値が規定されている。コントラスト比はフォントの種類とサイズ
によって異なる値が定められている。※1
メガネ型ウェアラブルデバイスの様に屋外で利用する際は、AAAのコントラスト比7よりも10以上高いコントラスト比(18.6)にすることを推奨する。表示の見易さが向上するためである。※2 コントラスト比の計算方法は参考文献を参照すること。
達成等級

全角フォント22pt（太字18pt）未満
半角フォント18pt（太字14pt）未満

全角フォント22pt（太字18pt）以上
半角フォント18pt（太字14pt）以上

AA

4.5 : 1 ※3

3 :1

AAA

7:1

4.5 : 1■(#767676)のカラー コントラスト比＜4.5 : 1＞■(#EE0000)のカラー コントラスト比＜4.5 : 1＞■(#888888)のカラー コントラスト比＜0.60 : 1＞■(#FF0000)のカラー コントラスト比＜0.36 : 1＞

参考：※1

NTTサービスエボリューション研究所 (2014). P.90,「JIS X8341-3」『ウェブユニバーサルデザイン』, 近代科学社.

※2

社会実証WGの成果報告書より引用した。

※3 The World Wide Web Consortium (W3C). Web Content Accessibility Guidelines (WCAG) 2.1. Success Criterion 1.4.3 Contrast (Minimum).
https://www.w3.org/TR/WCAG21/#contrast-minimum

Copyright © 2023 TOPPAN Inc.

17

1.3. 基本要素｜

1.3.2. 色(3). 色の使い方
色は画面上の特定の要素に注意を引く。ある要素の色が周囲の色と対照的であれば、その要素は目立つため、ユーザーに対して、その対象が重要であることを認識させることができる。
例えば、黒いアイコンは、白い背景に対して配置すると、とても目立つ。

参考：
Google LLC. . Color, Color-usage, Hierarchy. Material Design.
https://m2.material.io/design/color/color-usage.html#hierarchy

Copyright © 2023 TOPPAN Inc.

18

1.3. 基本要素｜

1.3.3. 字幕

1.3.3. 字幕

リアルタイム翻訳結果の表示方法に関するルール
表示方法や時間などを定めることで、可読性の高い字幕の表示可能になる。

(1). 行数2行以内で表示することを推奨する。

(2). 1行あたりの文字数
日本語の場合：1 行当たり最大13文字を推奨する。
映像に動きが少なく文字を注視できる内容であれば最大21文字

欧文の場合：１行当たり最大32文字を推奨する。

参考：
TEDスタッフ有志, 文字数,『TED 日本語字幕の表記ガイドライン』
https://translations.ted.com/TED_%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%AD%97%E5%B9%95%E3%81%AE%E8%A1%A8%E8%A8%98%E3%82%AC%E3%82%A4%
E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3
Copyright © 2023 TOPPAN Inc.

19

1.3. 基本要素｜

1.3.3. 字幕(3). 認識可能な文字数
1秒あたり4文字とする。
参考：
文字数について、以下のサイトより引用した。青山学院大学 文学部英米文学科 染谷 泰正,「P.19
大学における「字幕翻訳」授業のための指導モデル ～理論と実践の両面から～』
http://someya-net.com/84-Subtitle_TeachingModel/Jimaku_Handout_TsuyakuGakkai09.pdf

字幕の基本ルール (Rev. 09-2)」,『日本通訳翻訳学会第10回大会 (2009)(4). 字幕の最大表示時間
日本語の場合、字幕1枚（26文字想定）は6.5秒の表示を目安とする。字幕の最大字数が1行=13 文字、2行まで。1秒当たり認識可
能な文字数が4文字の場合、字幕１枚の最大秒数はおよそ26÷4 = 6.5 秒
参考：
TEDの日本語字幕では、字幕１枚の表示時間は１～７秒を推奨している。これは、１秒あたりの文字数について、最長10文字/秒を目安にしているためである。
TEDスタッフ有志, 文字数,『TED 日本語字幕の表記ガイドライン』
https://translations.ted.com/TED_%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%AD%97%E5%B9%95%E3%81%AE%E8%A1%A8%E8%A8%98%E3%82%AC%E3%82%A4%
E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3(5). 文字サイズ
下記サイズを参照すること。
文字の種類

PC

タブレット

スマートフォン

本文のサイズ

19px

19px

15px

各デバイスの「横幅」画面解像度は下記の想定。
•

PC：1440px（標準ブラウザ想定）•

タブレット：1366px（iPadPro12.9準拠）•

スマートフォン：375px（iPhone11Pro準拠）
Copyright © 2023 TOPPAN Inc.

20

1.3. 基本要素｜

1.3.3. 字幕(6). 表示方法
１対Nの遠隔プレゼンにおいて、下からスクロール（せり上がる）するよう連続的に表示することを推奨する。

参考：
20年度ヤマハ実証実験において上記の表示方法とすることでユーザー評価が向上した。

(7). 文字表示エリア
字幕を表示するエリアは映像の下を推奨する。

①映像内に黒背景、白文字②映像内に縁取り文字③映像外に黒背景、白文字④映像外に白背景、黒文字

文字と地の色は「1.3.2. 色 (2). コントラスト」の基準値を守るように設定する。スマートフォンなどの、画像の表示領域が小さい場合は、字幕のオーバーレイ機能をオフに出来る仕様を検討することを推奨する。
参考：
社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

21

1.3. 基本要素｜

1.3.4. アイコン

1.3.4. アイコン

機能を表現するボタンや図柄のデザインに関するルール
形状やサイズを統一化することで、特定の機能にアクセスさせる場合に、理解度を最大化し、認知的負荷を軽減することが可能になる。

(1). デザイン• 太くはっきりとした形状にすること。
• モダンで、親しみやすい形状にすること。
• 最小限の形態に落とし込まれ、本質的な特徴を表現すること。
• 幾何学的で一貫した形状を使用すること。
• 繊細で細いストロークウェイトは使用しないこと。
• 有機的な形は使用しないこと。
• シンプルでユニバーサルなデザインを目指すこと。※• 視覚的な一貫性を維持すること。※• 意味を伝えるために不可欠な場合にのみ、テキストをデザインに含めること。※

Copyright © 2023 TOPPAN Inc.

22

1.3. 基本要素｜

1.3.4. アイコン

参考：
※ 3点のみ以下サイトから引用した。 Apple Inc. . Icons. Human Interface Guidelines.
https://developer.apple.com/design/human-interface-guidelines/foundations/icons(2). サイズ
サイズは下記を参考にする。
• 基本サイズ：24px• 最小サイズ：20px
参考：
Google LLC. . System icons. Material Design.
https://m2.material.io/design/iconography/system-icons.html#design-principles(3). 透明度〇アクティブなアイコンの透明度
明るい背景にフォーカスされた状態のアクティブなアイコンの標準的な透明度は87％である。
〇非アクティブなアイコンの透明度
視覚的階層の下位にある非アクティブなアイコンの不透明度は38％である。

参考：
Google LLC. . System icons. Material Design.
https://material.io/design/iconography/system-icons.html

87%

38%

Copyright © 2023 TOPPAN Inc.

23

1.3. 基本要素｜

1.3.4. アイコン

(4). 形状
他のサイト、サービスで使われているアイコンと機能のパターンを使用することで、初めて操作するユーザーでも、迷わず操作することが可能である。

字幕のアイコン

チャットのアイコン

言語のアイコン

参考：
ヤコブの法則によれば、ユーザーは他のサイトで多くの時間を費やすため、対象のサイトにも、他と同じ挙動をするように期待をしている。
Nielsen Norman Group. 1. Jakob's Law of the Internet User Experience, End of Web Design.
https://www.nngroup.com/articles/end-of-web-design/(5).アイコンのアニメーション化
押下した後の挙動など、アイコンをアニメーションで表現することにより、視覚的なデザインとリアクションの両方を演出することができる。
参考：
Google LLC. . Animated icons. Material Design.
https://m2.material.io/design/iconography/animated-icons.html#usage

Copyright © 2023 TOPPAN Inc.

24

1.3. 基本要素｜

1.3.4. アイコン

(6). アイコンラベル
機能を想起しやすい文言を推奨する。
利用者の言語で表示することを推奨する。

日本語版

英語版

参考：
社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

25

1.3. 基本要素｜

1.3.5. 画像

1.3.5. 画像

デバイス上の画像に関するルール
アートワークを適切な倍率と解像度で設計することによって、デバイス上で、画像を崩さず、適切に表示することが可能である(1). 最適な方法• コンテンツ内の全てのアートワークに高解像度の画像を提供する。
• 画像は最低度の解像度で設計し、高解像度の素材を作成するためにスケールアップするのが望ましい。

参考：Apple Inc. . Images. Human Interface Guidelines.
https://developer.apple.com/design/human-interface-guidelines/foundations/images

Copyright © 2023 TOPPAN Inc.

26

1.3. 基本要素｜

1.3.6. モーション

1.3.6. モーション

デバイス上の画面要素の動きや変化に関するルール
操作によって、画面上の要素がどのように変化するか設計することで、ユーザーにシステム状態を理解させることが可能である。

(1). 最適な方法• ユーザーの注意をそらさないよう、不必要または過剰なアニメーションは避ける。
• ユーザーが理解しやすいよう、動き方は、リアルさと信頼性を追求する。意味のない動き、または物理法則に反する動きは、
人々を混乱させる恐れがあるため、注意する。
• 簡潔で、正確なアニメーションが望ましい。シンプルで正確さを兼ね備えたアニメーションは、情報をより効果的にユーザーへ伝えることができる。

• 頻繁に発生するインタラクションには、動きを追加しないようにする。ユーザーが操作するたびに、不要な動きを起こすこと
は避ける。

参考：
Apple Inc. . Motion. Human Interface Guidelines.
https://developer.apple.com/design/human-interface-guidelines/foundations/motion

Copyright © 2023 TOPPAN Inc.

27

1.3. 基本要素｜

1.3.7. レイアウト

1.3.7. レイアウト

多言語同時通訳における基本となるルール
統一された要素を用いて、一貫性を持たせる。レイアウトの基本的な考え方は下記の４原則になる。

(1). レイアウト構成
画面レイアウトには、以下3つの主要な領域に分かれる。レスポンシブ対応を検討する場合、領域と余白の最小寸法と最大寸法を確立し、各領域がそれぞれ適応できるようにする。
• 映像領域• アーカイブ領域（チャット欄、機能詳細はP.50を参照）

アーカイブ領域• アプリバー

映像領域

アプリバー
参考：
Google LLC. . Layout, Understanding layout, Layout anatomy. Material Design.
https://m2.material.io/design/layout/understanding-layout.html#layout-anatomy
Copyright © 2023 TOPPAN Inc.

28

1.3. 基本要素｜

1.3.7. レイアウト(2). 配置
十分なスペースを確保し、重要な情報を強調する。ユーザーは重要な情報をすぐに見たいと思うため、重要でない画面やウィンドウが乱雑になることは避ける。

(3). デバイスの向き
縦向きと横向きの両方をサポートすることを目指す。ユーザーは様々な理由で向きを変更するが、システムがあらゆる状況で適切に機能することを期待する。

(4). タッチ可能領域
インタラクティブな操作に、十分なタッチ領域をユーザーに提供する。

参考：Apple Inc. . Layout. Human Interface Guidelines.
https://developer.apple.com/design/human-interface-guidelines/foundations/layout/

Copyright © 2023 TOPPAN Inc.

29

1.3. 基本要素｜

1.3.7. レイアウト(5). レイアウト4原則
レイアウトの基本的な考え方は下記の４原則になる。

(5)-A. 近接
関係する情報を近づけ、直感的に情報の構成を理解できる

例）発言者と字幕を近づけることで関連性を明確にする(5)-B. 整列
要素の内容に応じて、位置、大きさ、形、色などを揃えることで見た目が整い、直感的に情報を理解できる。

例）発言内容を相手、自分で整列させ差別化する
Copyright © 2023 TOPPAN Inc.

30

1.3. 基本要素｜

1.3.7. レイアウト(5)-C. 反復
書体、枠線、色、アイコンなどを繰り返し用いることで一貫性や統一感のあるレイアウトを実現する。

例）表示領域を一定のサイズで繰り返す(5)-D. 強弱
異なる要素を色、大きさ、形などで差別化し、情報の差別化を直感的に理解させる。

例）発言内容を相手、自分で色で差別化する
参考：
A. 近接～D. 強弱については、以下の書籍を参考にした。
Robin Williams（2016年）. 『ノンデザイナーズ・デザインブック [第4版]』 . マイナビ出版.

Copyright © 2023 TOPPAN Inc.

31

1.3. 基本要素｜

1.3.7. レイアウト(6). 代表的な利用シーン
以下は代表的な３シーンにおける、基本となるレイアウトである。翻訳結果が蓄積する「アーカイブ領域」を用務達成における重要な要素と位置づけし、全てに反映する。
各利用シーンにおける設計の際に参照すること。※具体的なイメージは「サンプルデザイン」参照(6)-A. 遠隔会話
• 主には1対1もしくは1対Nの遠隔コミュニケーションを想定• 映像領域とアーカイブ領域は同程度の領域(1:1)を割り当て• メガネ型ウェアラブルデバイスの場合は、アーカイブ領域を3割程度で表示することを推奨する。※

参考：※

社会実証WGの成果報告書より引用した。
Copyright © 2023 TOPPAN Inc.

32

1.3. 基本要素｜

1.3.7. レイアウト(6)-B. 遠隔プレゼン○プレゼンター• 主には1対Nの遠隔コミュニケーション• プレゼンターはリスナーの様子、また自身の映像（資料や現場映像含む）を把握するため、映像領域を大きく割り当て○リスナー• プレゼンターの映像が用務達成における主なコンテンツとなるため映像領域を大きく割り当て

Copyright © 2023 TOPPAN Inc.

33

1.3. 基本要素｜

1.3.7. レイアウト(6)-C. 対面会話
• 主には１対１もしくは１対Nの対面コミュニケーションを想定• 映像は不要のためアーカイブ領域のみとすることが望ましい。スマートフォンで翻訳の字幕のみを表示するインターフェース
は、社会実証において、前年と比較して著しく評価が向上した。

参考：
社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

34

1.3. 基本要素｜

1.3.7. レイアウト(6)-d. 複数言語の同時表示• 3言語表示する画面構成は、「言語毎に領域を縦に分割する画面」、または「言語毎に領域を分割せず、文字を言語毎に色分けした画面」を推奨する。
• 言語毎に領域を縦に分割することを推奨する。

言語毎に領域を縦に分割

言語毎に領域を横に分割

Copyright © 2023 TOPPAN Inc.

35

1.3. 基本要素｜

1.3.8. インタラクション

1.3.8. インタラクション

UI要素の状態に関するルール
インタラクションのルールを設定することで、UI要素の状態をユーザーに伝え理解させることが可能になる。

(1). 原則• 優先度レベルに応じて、他の状態や周囲のUIと明確に区別するためのアフォーダンスが必要である。
• 選択状態やホバー（カーソルをボタンの上に来た時の動作）など、複数の状態が同時に発生する場合は、両方の状態を表示する必要がある。
• 使いやすさを向上させるために、状態はUI要素で一貫して適用する必要がある。

(2). 状態の種類(2)-A. 押下可能な状態
ボタンを押すことが可能な状態であることを伝える。

押下可能※意匠はイメージ

Copyright © 2023 TOPPAN Inc.

36

1.3. 基本要素｜

1.3.8. インタラクション(2)-B. 押下無効な状態
ボタンを押すことが不可能な状態であることを伝える。

押下無効(2)-C. ホバー
インタラクティブな要素の上にカーソルを置いて、選択できる状態であることを伝える。

ホバー(2)-D. フォーカス
カーソルを使わず、キーボードや音声などの入力方法で、インタラクティブな要素を選択している状態であることを伝える。

フォーカス

Copyright © 2023 TOPPAN Inc.

37

1.3. 基本要素｜

1.3.8. インタラクション(2)-E. 選択状態
インタラクティブな要素を選択している状態であることを伝える。

未選択
選択済み
未選択

(2)-F. アクティブ化された状態
操作を開始された状態であることを伝える。

アクティブ状態
非アクティブ状態
非アクティブ状態(2)-G. 押下状態
インタラクティブな要素をタップするなど、押下した状態であることを伝える。

押下状態

Copyright © 2023 TOPPAN Inc.

38

1.3. 基本要素｜

1.3.8. インタラクション(3). 警告
予期しないデータ損失を引き起こす可能性のあるタスクを開始する場合は、ユーザーに警告する。

(4). 色による状態提示
色の変化によって、以下のようにUI要素の状態に関する情報を提供することができる。
• ボタンが押下可能か不可能かなど、要素やコンポーネントの現在の状態• UI要素に対する状態の変化
状態の変化を示す場合、微妙な色の違いを設定すると、ユーザーが見逃してしまう恐れがあるため、設定する色は明確にする必要がある。

(5). テキストによる状態提示
アイコンやその他の要素は、WCAGの読みやすさの基準を満たす必要はないが、機能を示したり情報を伝えるために、できるだけ見やすくすることが望まれる。
例えば、明るい背景（#FFFFFF）に暗いアイコン（#000000）や他の要素を配置する場合、以下のような不透明度を適用することができる。
• アクティブなアイコンの不透明度は87%• 非アクティブアイコンの不透明度は60%• 無効なアイコンの不透明度は38%
参考：
Google LLC. . Interaction, States. Material Design.
https://m2.material.io/design/interaction/states.html#usage
Copyright © 2023 TOPPAN Inc.

39

1.3. 基本要素｜

1.3.9. コミュニケーション

1.3.9. コミュニケーション

ユーザーにフィードバックするためのルール
システム側の処理や動作をユーザーへフィードバックすることで、システム状態や操作の理解につながる。

(1). 確認と承認
ユーザーの操作を確認することで、ユーザーが実行した、または実行しようとしている操作の不確実性を減らすことが出来る。
同時に、ユーザーが間違いを犯すことを防ぐ。

(2). オフライン状態
オフライン時に利用できる機能と利用できない機能がある場合、現在の状態がオフラインか、オンラインなのかを示す必要がある。
• 接続に時間がかかる、断続的、または全く接続できない場合は、機能やアプリがどのように動作するかを示すこと。
• 接続が制限されている場合、コンテンツを全く読み込まないのではなく、利用可能なコンテンツを読み込ませること。
• オフライン機能では、どのように機能するかを説明し、その目的を伝えること。

参考：
Google LLC. . Communication, Offline-states. Material Design.
https://m2.material.io/design/communication/offline-states.html#offline-functionality

Copyright © 2023 TOPPAN Inc.

40

1.3. 基本要素｜

1.3.10. 文言

1.3.10. 文言

画面構成や文字の色に関するルール
色はブランドを識別し、ブランド間で一貫した体験を生み出し、情報の識別に役立つ。色は見た目に配慮し、3種類から5種類程
度に色の種類を押さえ、混乱させないために、同じ意味を持たせたい情報は同じ色にし、いたずらに色を分けないようにする。

(1). 言葉のトーンを考慮する
使用する言葉のトーンが意図しない形にならないよう注意する。たとえば、専門的なトーンの言い回しは、レベルの高い文章のみを求められているように誤解される恐れがある。コンテンツに適した文章を作成する際は、明確、直接的であることに重点を置く。

(2). 人の呼び方に注意する
人を指す言葉として「ユーザー」を使うと、アプリがよそよそしく居心地の悪いものに感じられる可能性があるため、「あなた」などの直接話し方けるような呼び方を心がける。また、会社やアプリを指す言葉としては、「私たち」を使用することを推奨する。

(3). 専門用語の使用を避ける
専門用語を使った文章は、文章を簡潔にまとめることが出来るが、その反面、用語の意味を知らない人を混乱させる恐れがある。
文章を作成する際は、平易な言葉を使用し、読みやすさを優先する。

Copyright © 2023 TOPPAN Inc.

41

1.3. 基本要素｜

1.3.10. 文言(4). 平易な表現にする
口語表現は多くの場合、文化固有のものであり、翻訳が難しい場合がある。そのため、口語表現は平易な表現にする。

参考：Apple Inc. Inclusion. Human Interface Guidelines.
https://developer.apple.com/design/human-interface-guidelines/foundations/inclusion/

Copyright © 2023 TOPPAN Inc.

42

1.3. 基本要素｜

1.3.11. LTRとRTL

1.3.11. LTRとRTL

多様な言語をサポートするためのルール
アラビア語やヘブライ語などの右から左へ記述する言語をサポートするために、必要なインターフェイスを逆にし、関連するス
クリプトの読み方向を一致させる。

(1). テキストの配置システムが自動的に調整しない場合は、インターフェイスの方向に合わせてテキストの配置を調整する。例えば、左から右 (Leftto right) の文脈でテキストをコンテンツに左揃えにする場合は、テキストを右揃えにして、右から左 (Right to left)の 文脈でコンテンツのミラーリングされた位置に一致させる。

LTR文脈の左揃えのテキスト

RTL文脈の右揃えのテキスト(2). 言語に基づく調整
現在の文脈ではなく、言語に基づいて段落を揃える。3行以上のテキストとして定義される段落の配置がその言語と一致しない場
合、読みにくくなる可能性があるため、注意する。

‫من اليمين الى اليسار‬Support right-to-left languages like Arabic andHebrew by reversing your interface as needed tomatch the reading direction of the related
scripts.
RTL文脈の左揃えの段落‫من اليمين الى اليسار‬Support right-to-left languages like Arabic andHebrew by reversing your interface as needed tomatch the reading direction of the related
scripts.
RTL文脈の右揃えの段落

Copyright © 2023 TOPPAN Inc.

43

1.3. 基本要素｜

1.3.11. LTRとRTL(3). 数字の表現• 言語によっては、異なる記数法になるため、注意する。例えば、ヘブライ語のテキストは西アラビア数字を使用するが、アラ
ビア語テキストは西アラビア数字または東アラビア数字のいずれかを使用する場合がある。アラビア数字の使用は、国や地域によって異なり、同じ国や地域内の地域によっても異なる。

123

٣٢١

西アラビア数字

東アラビア数字• 特定の数字の順序を逆にしないよう、注意する。現在の言語や周囲のコンテンツに関係なく、特定の数字 (「541」、電話番号、
クレジット カード番号など) の数字は常に同じ順序で表示される。

Order number 523651

523651 ‫رقم الطلب‬ラテンアラビア語 (東アラビア数字)• 進行状況、カウントする方向を示す数字の順序を逆にする。数字自体を反転させないよう、注意する。例えば、プログレス
バー、評価表示などは、意味を明示するために数字を含むことがある。このように数字を使用する場合は、反転したコント
ロールの方向と一致するように数字の順序を逆にする。また、数字の並びを使用して特定の順序を伝える場合は、数字の並びを逆にする。

1

2

3

4

5

٥

ラテン

٤

٣

٢

١

アラビア語 (東アラビア数字)

Copyright © 2023 TOPPAN Inc.

44

1.3. 基本要素｜

1.3.11. LTRとRTL(4). 画像の向き• 写真、イラスト、一般的なアートワークなどの画像を反転することは避ける。画像を反転した場合、画像の意味が変わってしまう恐れがある。著作権で保護された画像を反転すると、違反になる可能性がある。画像のコンテンツが読み方と強く関連している場合は、元の画像を反転せず、新しいバージョンの画像を作成することを検討すること。
• なお、順序に意味がある場合は、イメージの位置を逆にする。たとえば、時系列、アルファベット順、お気に入りなどの特定の順序で複数の画像を表示する場合は、それらの位置を逆にして、RTL コンテキストでの順序の意味を保持する。

LTR文脈で意味のある位置を持つアイテム(5). アイコンの向き

RTL文脈で意味のある位置を持つアイテム

テキスト、または読み上げ方向を表すアイコンを反転する。例えば、アイコンが左揃えのバーを使用してLTRの文脈でテキストを表す場合、RTLの文脈ではバーを右揃えにする。

テキストを表すLTRのアイコン

テキストを表すRTLのアイコン

参考：Apple Inc. . Right to left. Human Interface Guidelines.
https://developer.apple.com/design/human-interface-guidelines/foundations/right-to-left
Copyright © 2023 TOPPAN Inc.

45

1.4. 構成パーツ｜

1.4.1. タブ

1.4. 構成パーツ
1.4.1. タブ
異なる画面、機能、インタラクション間でコンテンツを整理するためのルール
タブは、関連性があり、同じ階層にあるコンテンツグループを整理し、その間のナビゲーションを可能にする。

(1). 表示方法• アイコンとラベル名をセットで使用し、アクティブなタブのラベル名、アイコンを強調させる。
• ラベル名のみとアイコンのみを混在させないこと。

アイコンとラベル名をセットで使用している

ラベル名のみとアイコンのみを混在している

Copyright © 2023 TOPPAN Inc.

46

1.4. 構成パーツ｜

1.4.2. インジケータ

1.4.2. インジケータ

待機時間を表し、ユーザーに進行状況を知らせるためのルール
コンテンツの読み込み中に、動作が遅い、またはフリーズしていると誤解されないよう、コンテンツが読み込まれていることを明確に伝える。

(1). 表示方法
翻訳中や、システム動作時にローディングや情報処理を進行中であることを知らせることを推奨する。

※意匠はイメージ※PCイメージ
参考：
社会実証WGの成果報告書より引用した。

MEMO•

社会実証において、インジケータの表示によって、翻訳が表示されるまでの待機時間を感じにくくする効果があった。

Copyright © 2023 TOPPAN Inc.

47

1.5. デバイス｜

1.5.1. メガネ型ウェアラブルデバイス

1.5. デバイス
1.5.1. メガネ型ウェアラブルデバイス
メガネ型ウェアラブルデバイスの利用に関するルール
遠隔作業時に扱われるメガネ型ウェアラブルデバイスのルールを定めることで、ほぼ視野全体をカバーする広い表示領域を最大限に活かしたユーザー体験を提供できる。

(1). ベストプラクティス
農場（屋外）では日光による見逃しがあるので、履歴ありを推奨する。
生産現場（屋内）では目の前の作業対象物が履歴表示にかぶるため会話履歴のあり、なしを選べる機能を推奨する。

メガネ型ウェアラブルデバイスの表示イメージ農場（屋外）での利用シーン

生産現場（屋内）での利用シーン

参考：
社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

48

1.5. デバイス｜

1.5.1. メガネ型ウェアラブルデバイス(2). 文字サイズ（P.13にも同様の内容を記載）
PC、タブレット、スマートフォンの文字サイズよりも大きく、表示時間を長めにすることを推奨する。他のデバイスの文字サイズと比べて、屋内では2倍弱、屋外では2倍前後の大きさを推奨する。作業をしながら表示内容を確認する遠隔協業およびメガネ型ウェアラブルデバイスの特性から用務達成度の向上が見込めるためである。
文字の種類

PC

タブレット

スマートフォン

①

本文のサイズ

19px

19px

15px

②

本文のサブサイズ

16px

16px

13px

③

ボタンのラベルのサイズ

14px

14px

12px

④

アイコンのラベルのサイズ

12px

12px

10px

(3). 色のコントラスト（P.17にも同様の内容を記載）
屋外で利用する際は、AAAのコントラスト比7よりも10以上高いコントラスト比(18.6)にすることを推奨する。表示の見易さが向上するためである。
達成等級

全角フォント22pt（太字18pt）未満
半角フォント18pt（太字14pt）未満

全角フォント22pt（太字18pt）以上
半角フォント18pt（太字14pt）以上

AA

4.5 : 1

3 :1

AAA

7:1

4.5 : 1(4). レイアウト（P.32にも同様の内容を記載）
アーカイブ領域を3割程度で表示することを推奨する。
参考：
社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

49

1.6. 機能

1.6. 機能
翻訳システムへ応用が可能な様々な手法とそのルール
翻訳システムに応用が可能な手法である。それぞれ特徴があり、全ての用途やデバイスに使えるわけではないので、利用シーンに応じて取捨選択が必要である。

(1). アーカイブ• 会話のアーカイブを画面に表示することで、過去の遡りが可能となり、精度の高いコミュニケーションを行うことができる。
• 相手と自身の発言を背景カラーや位置（インデント）で差別化することを推奨する。
• 複数言語を同時表示する場合、可能な限り3言語以内に留めることが望ましい。もし4言語表示する必要がある場合、長い文章
表示によって各言語の翻訳結果が画面から見切れてしまう可能性を考慮し、なるべく短い文章で翻訳されるよう工夫することを推奨する。
• アーカイブ本文の日本語文字数が、30文字以上になる場合は、改行することを推奨する。
• アーカイブは、一度に表示する文章を2行以下にし、それ以上になる場合はチャット欄を分けることを推奨する。

参考：
社会実証WGの成果報告書より引用した。
Copyright © 2023 TOPPAN Inc.

50

1.6. 機能MEMO•

社会実証において、会話内容を正しく理解しようとするために、アーカイブが必要と言う意見が9割以上を占めた。

(2). 逆翻訳
各国の言語に翻訳したものを、日本語に再度翻訳した機能である。最初に入力した文と見比べることで、相手に意図が正しく伝わっているか確認することができる。
2023年現在、世間に十分に浸透しているとは言えない機能のため、ユーザーが意味を認識しやすい単語を用いることを推奨する（例：「翻訳の意味※」など）。

参考：
社会実証WGの成果報告書より引用した。
※ 多言語音声翻訳アプリ＜ボイストラ＞
https://voicetra.nict.go.jp/manual.html

リファレンスマニュアル

1.音声翻訳画面

MEMO•

社会実証において、「逆翻訳」という単語から、どういった機能なのか判断できない被験者がいた。

Copyright © 2023 TOPPAN Inc.

51

1.6. 機能(3). フォーカス
展示会や商品発表会など、リモートに複数のユーザが参加している場合で、かつ、プレゼンターが任意のユーザにフォーカスを当てて固定表示する場合に利用する。

(4). 画像送信
画像を添付して相手に送信する。テキストのみのやり取りで意思疎通が行いにくい場合や、ビジュアルを見せることで理解促進される場合に使用する機能である。

(5). ジェスチャー操作
スマートフォン、タブレットなどのモバイル機器において、文字を大きく見たい時は、ピンチイン・ピンチアウトで文字の大きさを変えられることを推奨する。

参考：
社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

52

1.6. 機能(6). UIパターンのカスタマイズ
話者の顔、画面共有資料、など領域の大きさをユーザー自身で変更できる機能の搭載を推奨する。
参考：
社会実証WGの成果報告書より引用した。

(7). 設定メニュー• 設定メニュー内は、機能の優先度を設けたうえで各設定項目を配置することを推奨する。他にも、初回利用時にチュートリア
ルを設けて、何らかの設定を行わせるなど、ユーザーをフォローする仕組みを設けることを推奨する。
参考：
社会実証WGの成果報告書より引用した。

MEMO•

社会実証において、設定画面での操作が必須のため、初回ログインの際は、設定画面へ自動で遷移させるようにする施策が求められた。

Copyright © 2023 TOPPAN Inc.

53

2. コミュニケーションデザインについて54

2.1. 入力・翻訳精度の向上

2.1. 入力・翻訳精度の向上
音声入力・翻訳精度を向上させるための手法
エンジンそのものの精度に関わらず、画面の表示方法やデバイスの扱い方などで音声入力・翻訳精度を向上させるための手法である。

(1). 音声入力中の認識結果文字を表示する
音声入力中の認識結果をリアルタイムに画面に表示させることで、下記の効果があり音声入力精度が向上する①ユーザが正しく発声しようとする②機械が認識していることが明示的に分かる

日本語から英語へ翻訳する場合の入力画面のイメージ（音声入力がされるとリアルタイムで認識結果が画面に表示）

Copyright © 2023 TOPPAN Inc.

55

2.1. 入力・翻訳精度の向上(2). シンプルなボタンによるコントロール
シンプルなボタンによる音声入力デバイスを自分自身でコントロールすることで、下記理由により精度が向上する。

① 開始位置と終了位置がコントロールしやすい(注1)。
② デバイスを自分に向けることで、自身が集中し、きちんと話してくれる傾向がある。※③ ユーザー自身にきちんと向けることで、ノイズキャンセリングに繋がる。※④ 発言を始めてもよいことをユーザーに知らせるため、音声認識ボタンを押した後に、ガイダンスを提示することを推奨する。

参考：
社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

56

2.2. 時間の効率化

2.2. 時間の効率化
コミュニケーションの時間を効率化するための手法
より短時間でコミュニケーションを行うための手法である。

(1). 入力ボタンを押す前の予測入力
入力ボタンを押してから音声入力を行う場合、頭のワードが落ちてしまうことや、入力を待つ場合コミュニケーションが遅れてしまう（0.2 - 0.3秒程度）
システムでは常に音声の録音を行い、ボタンを押したら1秒前から入力を開始することで頭のワードが落ちなくなり翻訳精度が高くなり、コミュニケーション時間の短縮にもなる。

(2). 合成音声を使わない字幕表示
音声合成を行う場合、会話が長くなる（音声の入力→音声の読み上げ、となるため）音声合成を入れないことで会話が短くなり、字幕表示であれば短時間でコミュニケーションが行える※一方的なプレゼンであれば音声合成は必要（資料や映像を見ながら聞きたい）※元の入力音声がある場合ユーザーは安心する

Copyright © 2023 TOPPAN Inc.

57

3. 画面サンプル

58

3.1. 遠隔会話

3.1.遠隔会話
相手の発言
翻訳結果

自分の発言
翻訳結果

相手の映像
翻訳結果

PC表示イメージ

Copyright © 2023 TOPPAN Inc.

スマートフォン表示イメージ59

3.1. 遠隔会話(1). 誤認識・誤翻訳を補完する仕組みの要望
音声認識の間違いや誤翻訳でわからない部分を指摘できる機能の搭載を推奨する。
ただし、片方向の情報伝達を行っている際に外国人から誤った箇所を指摘することは全体の進行を止めてしまうため難しい。そのため、片方向の情報伝達においては、発話者自身が誤った箇所を見つけ修正する他、発話者以外の同席者が誤った箇所の修正対応を行う等も想定される。用務達成度やユーザ満足度を高めるため、誤認識・誤翻訳を補完する仕組みに関しても、ユース
ケースに即した方法の検討が望まれる。

(2). スクロールバー表示の要望
スクロールバーを設けるなど、誤操作を防ぐための施策を設けることを推奨する。スクロール操作中にタップの誤動作をしてしまうことが度々見られたためである。

(3). 映像と文字の表示• 映像と文字を一体で表示するなど、画面上で現在話をしている主体が分かるようにする等の画面設計上の工夫することを推奨
する。

参考：

社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

60

3.2. 遠隔プレゼン3.2. 遠隔プレゼンプレゼンター

リスナー映像

リスナー相手の映像、資料等

自分の映像、資料等

複数のリスナーを一覧で表示する。映像領域は75%を推奨する。プレゼン
ター自身の映像および資料は下部に配置する。

プレゼンター自身の映像あるいは資料が最も重視すべき対象のため、映像領域を大きくとる。

参考：
社会実証WGの成果報告書より引用した。

MEMO•

社会実証において、相手の表情やリアクションがわかるよう、参加者の顔映像が表示されていることで、コミュニケーション円滑化、内容の理解度が向上するという意
見が半数以上あがった
Copyright © 2023 TOPPAN Inc.

61

3.2. 遠隔プレゼン(1). 遠隔鑑賞など映像に重きが置かれるシーン
美術品の遠隔鑑賞など映像に重きが置かれるコミュニケーションの場合は、相手の顔の優先度は低く、対象となる映像を大きく表示することを推奨する。

参考：
社会実証WGの成果報告書より引用した。

MEMO•

社会実証において、美術館・博物館、企業ショールームでの遠隔ガイドにおいても有効という意見があがった。

Copyright © 2023 TOPPAN Inc.

62

3.2. 遠隔プレゼン
利用シーンに応じて、映像・話者の顔・画面共有資料・アーカイブなど領域の大きさを、ユーザー自身で変更できる機能の搭載を推奨する。

参考
社会実証WGの成果報告書より引用した。

パターン①

パターン②

パターン③

パターン④

MEMO
•

社会実証において、4種類のUIパターンについて、以下3点の印象が見られた。
➢ コロナ禍によってオンライン会議システムを活用するユーザが多くなり、その使い慣れたUI（例えばZoom、Teams等）に近いパターン③の評価が高かった。
➢ 展示品映像をできるだけ大きく見たいため、要素最低限（パターン①）が良いという意見が半数以上あがった。
➢ フィールド実証においてはアーカイブ、ガイド者映像、ユーザ映像などを含めた要素最大量（パターン④）が良いという意見があがった。

Copyright © 2023 TOPPAN Inc.

63

3.2. 遠隔プレゼン(2). 質疑応答などの対話シーン
１対１の場合はプレゼンター、リスナー共に相手の映像（顔）が見えることで会話の状態を把握することができ、安心感に繋がる。

参考：
社会実証WGの成果報告書より引用した。

Copyright © 2023 TOPPAN Inc.

64

3.2. 遠隔プレゼン(3). １対Nの片方向の字幕表示について
片方向の発信が主となるシーンにおいては吹き出しによる表示よりは、字幕としてシンプルに羅列されることが望ましい。

Copyright © 2023 TOPPAN Inc.

時間

日本語認識結果・日本語
認識結果

時間

日本語認識結果・日本語

時間

日本語認識結果・日本語
認識結果・日本語認識結果

時間

日本語認識結果・日本語65

3.3. 対面会話

3.3. 対面会話(1). 対面の１対１の場合
１対１の場合、双方が同じ画面を見ることで共通理解が高まるという意見が多くみられたことから、両者の間に1台の表示機器を設置することが有効と考えられる。

参考：

社会実証WGの成果報告書より引用した。

タブレット表示イメージ

Copyright © 2023 TOPPAN Inc.

スマートフォン表示
イメージ

66

3.4. 各ボタンの表示イメージ

3.4. 各ボタンの表示イメージ
翻訳言語
✓
日本語
ChineseEnglishFrench
ビデオ解像度
✓
1080p
720p
360p

カメラの選択マイクの選択✓Same as System
USB Condenser MicroPhone✓

UCB Camera
FaceTime HD Camera

文字サイズ
120%
110%
✓
100%
90%
80%

Choose Virtual Background

スピーカー選択✓
Same as System
SoundStick Wireless

Choose Virtual Filter

オーディオ

カメラ

設定

フォーカスの選択✓
画面共有✓

ScreenPhoto
Website URL
Whiteboard

画面共有

Remote User 1
Remote User 2
Remote User 3
Remote User 4
Remote User 5
Remote User 6
Remote User 7
Remote User 8
Remote User 9

フォーカス

Copyright © 2023 TOPPAN Inc.

67