色彩調和論による配色を考慮した動画キャプションデザイン支援システム
安達悠斗* 五十嵐悠紀*
概要．本稿では動画のキャプションを付ける際，色彩調和論による配色デザインを考慮したキャプションデザインを制作するシステムを提案する．キャプションの配色を決める際，キャプションを入れるタイムコード内の動画像を読み込み，色彩調和論に沿った配色提案を行い，適切な配色を選択可能な機能を用意した．本システムを用いることで，色彩調和論による配色デザインを考慮し，動画編集ソフトのような制作方法で可能なキャプションファイルの制作を目指した．動画投稿に用いられることの多い YouTube の動画キャプションにエクスポートする機能も備えた．

1

はじめに動画にキャプションを付けるのは一見簡単に思われるが，キャプションには設定が多く，見やすいデザインで制作することは難しい．
映画の字幕，歌詞，研究紹介ビデオ，ホームビデオ，聴覚障がい者用動画などさまざまな観点でキャプション・字幕は用いられ，その制作には様々なスキルが問われている．
一行で表現する文字数，表示させる時間の長さ，背景色に対する読みやすい文字色，文字を出す座標位
置，フォントなど見やすいデザインを考えるには多くの設定が必要である．
これまでのキャプションを付ける動画ソフトはAdobe Premiere[1]のように専門家が使うことを想定したものが多い．一方で初心者がキャプションを付ける機会も増えてきており，iPhone のスマートフ
ォンや Mac で用いられる iMovie[2]や Windows で用いられる Aviutl[3]などの無料のソフトが使用されている．しかし，初心者が使いこなせるシステムやモードの場合には，設定が楽な反面，文字の装飾，座標位置などの指定が不可能であり，デザイン性を追求できないという問題点が挙げられる．
本稿では色彩調和論による配色を手軽に考慮しながらデザインができる動画キャプションデザイン支援システムを提案する．色彩調和論とは，見る人に好感を与える配色パターンとしてアメリカの色彩学者ジャッド(Deane B. Judd)が唱えた配色の論理である[4]．提案システムを使うことで背景色に対して読みやすい文字でキャプションをデザインすることが可能になる．システム単体での利用の他，システ
ム内でデザインしたキャプションを動画投稿に頻繁に用いられる YouTube を対象に字幕ファイルをエ
Copyright is held by the author(s). This paper isnonrefereed and non-archival. Hence it may later
appear in any journals, conferences, symposia, etc.
*明治大学総合数理学部先端メディアサイエンス学科

クスポートする機能も備えた．これにより，色デザインに関する知識がないユーザであっても，色彩調和論に沿った配色提案を使いながらキャプションをデザインすることが可能になる．

2

関連研究

色彩調和論による配色デザイン支援システム[5]では色彩調和論に沿った配色デザインを作成できる支援システムを提案した．単色からその色に合った配色パターンやカメラで物体の色を取得し，取得した色を用いて配色パターンを表示させるなどのデザインの配色決定の簡略化を目指したものである．
telorain[6]は機械学習を使ってスマートフォンで撮った動画に手軽にキャプションを付けることができるアプリである．スマートフォンで撮った数秒～数十秒の動画を対象に機械学習を用いて音声認識を行い，分節ごとに読みやすい区切り文字でのキャプションの提案とフォントデザインの選択で手軽に撮影したその場でテロップ付きの動画を SNS に掲載することを目指したものである．
本提案では，数分程度の動画を対象として，ユーザがパソコンを使って色やフォントを試行錯誤しながら可読性の高い，配色の良いデザインを素人が手軽にデザインできることを目指した．

3

提案システム提案システムは Processing で実装した．ウィンド
ウを二つに分け，キャプションの文字情報を制作する画面と表示する時間を指定する画面に分けた．これらの二つの画面に分けて手順を述べる．
3.1 キャプションの文字情報の制作
文字情報の制作画面を図 1 に示す．右上のテキス
ト入力で制作したい文字を入力すると，下の枠内のWISS 2020

図 1. 文字情報の制作画面

図 2. 表示時間の指定画面

リストに追加され，リストから編集したい文字を選択することが可能である．選択した文字が左上の枠内に表示され，その表示を見ながら制作する．別のウィンドウで動画を停止すると，停止画面をキャプチャして文字情報の画面の左上にキャプチャされた画像が表示されるようになり，キャプションを入れる画面と照らし合わせながらの制作を可能にした．
中央の「Size」「Font」「Position」で文字のサイズ，フォント(日本語は 2 種類)，座標（X 座標：左・中央・右，Y 座標：上・中央・下）を指定することが可能である．
中央下の 3 種類の色のうち，上の色はキャプチャ画面の最多色を表示する．キャプチャする範囲は変更することができ，キャプチャ画面上でドラッグした時にクリックした位置と現在のマウス位置を対角線とする四角形を範囲とし，キャプションを挿入する付近のみをキャプチャしたい場合，キャプチャ画面の色が分散している際のために用意した．中央と下の色は上の最多色からの色彩調和論[2]に沿った提案色の表示を行う．
システムでは，色彩調和論に沿って 4 種類の配色パターンを用意し，同一色相配色(Identity)，類似色相配色(Analogy)，対照色相配色(Opornent)，補色色相配色(Complementary)の 4 種類と黒・白の配色を指定することが可能である．また，色相環にマウスを近づけることで色相の変更，明度と彩度もバーを移動させることで変更が可能である．文字デザインが完成した後，右上のリスト内の作成を押すことでもう一つのウィンドウに文字情報が送信されるため，そちらの画面で表示時間等の指定を行う．

文字を選択でき，編集している文字の番号が隣に表示される．水色と桃色のバーで表示時間を編集することができ，水色が選択状態でキーボードの A と S
で表示開始時間の変更，K と L で表示終了時間の変更が可能である．
表示時間の編集を終えたら保存ボタンを押すことで，右中央の保存済みのリストに追加され，文字と表示時間が表示される．右下の視聴ボタンから保存されたキャプションを反映した動画を流し，キャプション付きの動画を確認することが可能である．

3.2 キャプションの表示時間の指定
表示時間の指定画面を図 2 に示す．作成した文字が右上のリストに追加され，表示時間を編集する際に選択したい文字を選択することが可能である．左下の選択ボタンを押すことで表示時間を編集したい4

YouTube 投稿用キャプションファイルへのエクスポート

本システムでは単体での利用の他，動画投稿に一般的に使われる YouTube を対象に動画投稿用キャプションファイルとしてエクスポートする機能を備えた．YouTube に動画投稿する際，キャプションを付ける方法は二通りあり，文字起こし機能を使用する方法とキャプションファイルをアップロードする方法がある．文字起こし機能では使用できる機能が少なく，「文字色は白固定」「背景は黒固定」「フォント固定」「サイズ固定」「同時表示できるキャプションは一つ固定」等のように設定可能なものが限られる．一方キャプションファイルを利用する場合は，ファイル形式によって異なり，主に使用されるファ
イ ル 形 式 は ，「 SubRip(.srt) 」「 SAMI(.smi) 」「WebVTT(.vtt)」である．SubRip 形式は，同時表示できるキャプションが複数になる機能が増え，キャプションファイル形式の中では簡単に記述することが可能なため，初心者向けのファイル形式である．
SAMI 形式は，「文字色を一つ指定」「影文字指定」「太字指定」「イタリック指定」「下線指定」等の機能が増え，WebVTT 形式は，「同時表示できるキャプションが複数」「表示座標指定」「太字指定」「イタリック指定」「下線指定」といった機能が増えるため，キャプションに変化を付けることが可能である．

WISS2020

表 1. pen 要素の引数<?xml version="1.0" encoding="utf-8" ?><timedtext format="3"><head><!--文字情報--><!--文字色：赤--><pen id="0" fc="#FF0000" /><!--太字＆背景色：白--><pen id="1" b="1" bc="#FFFFFF" /><!--座標情報--><!--左上--><wp id="0" ap="0" ah="0"<!--中央-->av="0" /><wp id="1" ap="4" ah="50" av="50" /></head><body><!—0~3 秒間に左上に赤色で赤と表示--><p t="0" d="3000" p="0" wp="0">赤</p><!—3~6 秒間に中央に太字白背景で色と表示--><p t="3000" d="3000" p="1" wp="1">色</p></body></timedtext>

図 3. YTT 形式の記法例

また，YouTube の公式ヘルプには明記されていな
いが，全機能を使用可能なキャプションファイル形式があり，拡張子を「.ytt」とするキャプションファイル（以降 YTT 形式とする）である．このキャプションファイルは TTML を基準にして構築されたYouTube 専用のキャプションファイルであり，コーデックは UTF-8 である．
書き方の例を図 3 に示す．
ヘッダに「pen」「ws」「wp」とよばれる要素を作成し，ボディにヘッダで作成した要素や文字，表示する時間等を指定する．pen 要素(表 1)は文字スタイ
ル，色，背景，影・縁，フォント等を指定することが可能である．また，ws 要素は(表 2)は文字整列や縦書き横書きの指定，wp 要素(表 3)は文字の座標を指定することが可能である．ボディ(表 4)には「p」「s」という要素があり，p は表示開始時間～継続表示時間を指定し，ヘッダで作成した要素の id を指定することで効果を加えることが可能である．s は文字を区切り，要素を指定することが可能である．
提案システムから，YTT 形式のキャプションファイルをエクスポートすることで，システム内で編集したキャプションを付与した動画を YouTube へ手軽に投稿可能とした．
3 章で述べたように，提案システムを使ってキャプションをデザインした後，字幕ファイル作成ボタンを押すことで YTT 形式のキャプションファイルが作成され，「元動画のタイトル名.ytt」でプログラムの data フォルダに保存される．作成されたキャプションファイルを YouTube 上でアップロードする際は，キャプションを入れたい動画の視聴画面か引数

説明id(int)pen 番号b(0～1)

太字

i(0～1)

イタリックu(0～1)

下線

fc(#FFFFFF)

文字色

fo(int(0～255))

文字色の不透明度

bc(#000000)

背景色

bo(int(0～255))

背景色の不透明度

ec(#000000)

影・縁色

et(int(0～4))

影・縁色タイプfs(int(0～7))フォント

sz(int)フォントサイズrb(int(1,4,5))

ふりがなof(int(0～2))

上・下文字

表 2. ws 要素の引数
引数

説明

ju(int(0～2))

水平方向の文字配置

pd(int(0～3))

縦書きの文字回転

sd(int(1～3))

縦書きの回転角

表 3. wp 要素の引数
引数

説明

ap(int(0～8))

アンカーポイントah(int(0～100))X 座標

av(int(0～100))

Y 座標

表 4. body 内の引数
引数

説明

t(int)

表示開始時間d(int)

表示時間

p(int)

pen の読み込み

ws(int)ws の読み込み

wp(int)wp の読み込み

ら「動画の編集」「字幕」「言語を追加」「編集」「オプション」「ファイルをアップロード」という流れで

WISS 2020

作成したキャプションファイルを選択することでキャプションが反映される．
ただし，キャプションの文字設定における，Effect 機
能で「太字」「背景」「影・縁(4 種類)」の指定をすることが可能だが，背景と影・縁は YouTube アプリで動画を視聴する場合には効果が反映されないといった制限がある．フォントに関しても，ブラウザで視聴する場合とアプリで視聴する場合にはフォントが反対に反映されるため，注意が必要である．

5

まとめと今後の課題

本稿では YouTube 投稿用のキャプションファイ
ルについて着目し，色彩調和論の配色デザインを考慮し，様々なオプションを付加可能なキャプションファイルの制作支援システムを提案した．本システ
ムを利用することで，HTML 形式のコードを記述することに抵抗がある人でも手軽にキャプションファイルを制作することができるよう，動画編集ソフトのような制作方法を目指した．今後は，本稿では実装できなかったオプション機能を増やし，より効果的なキャプション制作が可能なシステムを目指す．

参考文献[1] Adobe premiere，
https://www.adobe.com/jp/products/premiere.html(2020/11/10 確認)[2] iMovie，https://www.apple.com/jp/imovie/(2020/11/10 確認)[3] Aviutl，http://spring-fragrance.mints.ne.jp/aviutl/(2020/11/10 確認)[4] 日本色研事業株式会社，2007，
http://www.sikiken.co.jp/colors/colors12.html(2020/11/10 確認)[5] 安達悠斗，五十嵐悠紀，色彩調和論による配色デザイン支援システム，第 27 回インタラクティブシス
テムとソフトウェアに関するワークショップ(WISS2019) デモポスター発表，2019[6] Telotrain，https://telorain.com/(2020/11/10 確認)[7] 名取和幸，色彩調和研究から PCCS の誕生まで，日本色彩学会誌 24(4)，251-261, 2000
[8] 南條聖，三末和男，PCCS を用いた情報可視化の配色
作 成支 援ツ ール の開発 ，情報 処理 学会 研究 報告2017-HCI-172(12), 1-8, 2017.
[9] 酒巻隆治，小池宏幸，益子宗，色弱者に対する実世界
カラーピッカーの検討，情報処理学会インタラクシ
ョン 2012, pp.287-292.
[10] Qiita，YouTube の字幕機能の限界に迫る，2020，

https://qiita.com/yuudai1973/items/898c368af8832
443a874 (2020/11/10 確認)