AviUtlでテキストの色を1文字ずつ指定する方法

AviUtlのコメントテキストの挿入と調整

AviUtlで動画にタイトルや字幕を入れたとき、「ここの1文字だけ赤く強調したい」と思ったことはありませんか。標準のカラー設定では全文字が同じ色になってしまいますが、AviUtlの「制御文字」を使えば、テキストの色を1文字単位で自由に変更できます。

本記事では制御文字 <#〜> を使って1文字だけ色を変える基本手順から、縁取り色の同時指定、便利なカラーピッカーの使い方、よく使うRGBカラーコード一覧までを順を追って解説します。

「AviUtlで字幕を入れているのですが、特定の単語だけ色を変えたいです。テキスト全体の色を変える方法は分かりますが、一部分だけ色を変える方法が分かりません」

Yahoo!知恵袋動画/映像 2024年5月の相談

本記事で習得できる3つのスキル

制御文字 <#カラーコード> で 1文字単位で色を変える基本構文
縁取り色も同時に指定する応用テクニック
制御文字の他の使い道(サイズ・太字・表示速度)と RGBカラーコード140色一覧

1文字単位の色制御はAviUtl制御文字の真骨頂ですが、もっと自由なグラデーション/レイヤースタイル組み合わせまで踏み込むなら、After Effectsの7日間無料体験も視野に入れておくと選択肢が増えます。

結論:1文字だけ色を変える書式

結論から書くと、AviUtlで部分的に色を変えたい範囲を <#カラーコード> と <#> で囲むだけです。HTML/CSSのカラー指定と同じ16進数表記なので、Webサイト制作の経験がある方には馴染みやすい構文です。

<#ff0000>こ<#>んにちは

↑ 「こ」だけが赤色(#ff0000)で表示される

「制御文字」とは:テキスト装飾のためのコマンド

制御文字は、テキストオブジェクトの入力欄に直接書き込むことで、文字の見た目や表示方法を制御できる 特殊なコマンド です。HTMLタグのように特定の記号で範囲を囲むことで、その範囲内のテキストに様々な効果を適用できます。

制御文字は色変更以外にもサイズ変更・表示速度調整・スクリプト実行など、多岐にわたる機能を持っています。応用範囲が広いため、覚えておくと表現の幅が一気に広がります。

色指定以外の主な制御文字

制御文字	機能	リセット
`<W2>`	表示速度設定時に2秒の空白時間を入れる	不要(単体使用)
`<r1>`	1秒1文字でタイピング風に表示	不要(全体に適用)
`<s200>`	これ以降の文字サイズを200に	`<s>`
`<s,,B>`	これ以降を太字に	`<s>`
`<#ff0000>〜<#>`	範囲内の文字色を変更(本記事のメインテーマ)	`<#>`

https://www.fu-non.net/wp-content/uploads/2022/07/funon_teacher_80.jpg

制御文字はHTMLのように「開始タグ」と「終了タグ」で囲むのが基本ですが、一部は開始タグだけで効果が持続するものもあります。効果をリセットしたい場合は、値なしの終了タグ（例: <#>や<s>）を使用します。

【実践】1文字だけ色を変える基本手順

ここから実際の手順を見ていきます。基本構文を押さえれば、複数文字や複数色の組み合わせにも応用できます。

基本書式:範囲を `<#〜>` で囲む

色を変えたい部分を <#カラーコード> と <#> で挟みます。例: <#ffffff>ここがテキスト<#> で囲んだ範囲が白(#ffffff)で表示されます。

色の指定は 16進数RGB表記 で行います。例えば「ffffff」は白、「ff0000」は赤を表します。制御文字で囲んだ範囲だけが指定色に置き換わるため、1文字だけ色を変えたい場合はその1文字だけを囲みます。

【書式の注意点】HTMLで色を指定する書式と非常に似ているため、ウェブコーディングの経験がある方には馴染みやすいでしょう。入力するアルファベットは必ず半角小文字で入力してください。大文字で入力すると色が反映されない場合があります。

3色の使用例

<#ff0000>こ<#>んにちは

こんにちは

赤(red)

<#00ff00>こ<#>んにちは

こんにちは

緑(green)

<#0000ff>こ<#>んにちは

こんにちは

青(blue)

AviUtl標準機能で指定しているカラーを上書きする形で、制御文字で指定した色に文字が置き換わります。部分的に色を変えたい場合は、この制御文字を活用するのが最も効率的です。

応用:縁取り色も同時に指定

文字色だけでなく 縁取り色も同時に変えたい 場合は、書式を少し変更します。

<#文字色,縁色>テキスト<#>

↑ 文字色のカラーコードの後にカンマで区切って縁色を指定(縁色には「#」不要)

【縁取りを使う前提条件】この機能を使うには、テキストオブジェクトの設定ダイアログで「縁取り文字」または「縁取り文字(細)」を有効にする必要があります。これを忘れると縁取りの色は反映されません。

カラーピッカーで色を探す3つの方法

🎨

オンラインカラーピッカー

Google検索で「カラーピッカー」と入力すると、直感的に色を選んでコードを取得できるツールが表示

📋

カラーコード一覧サイト

「HTML カラーコード一覧」で検索すれば、定番色のコードが網羅されたサイトが多数あり

🔌

「カラーコード追加」プラグイン

AviUtlのカラー選択ダイアログに直接カラーコード入力欄を追加するプラグイン

Webサイト制作経験者なら馴染み深い16進数RGBカラーコードですが、初めての方も心配いりません。専用ツールを使えば簡単に目的の色を見つけられますよ。特に「カラーコード追加」プラグインは、AviUtlでの作業効率を格段に上げてくれるのでおすすめです。

💡 別の選択肢として: AviUtlの制御文字は強力ですが、コードを覚えてテキストに埋め込む必要があるため、慣れないうちは試行錯誤が必要です。Premiere Proの7日間無料体験なら、変えたい文字をドラッグで選択してカラーピッカーをクリックするだけで部分色変更ができ、グラデーション・縁取り・影もパネル操作で完結します。

RGBカラーコード一覧表(代表40色)

制御文字 <#カラーコード> に入れる16進RGBの参考一覧です。動画の雰囲気に合わせて選んでみましょう。詳しい全色一覧は外部のカラーピッカーサイトを併用すると便利です。

モノクロ・グレースケール系

black
#000000

darkgrey
#333333

gray
#808080

silver
#c0c0c0

white
#ffffff

暖色系(赤・オレンジ・黄)

red #ff0000	crimson #dc143c	hotpink #ff69b4	orange #ffa500	tomato #ff6347
gold #ffd700	yellow #ffff00	moccasin #ffe4b5	saddlebrown #8b4513	sienna #a0522d

寒色系(青・水色・紫)

blue #0000ff	navy #000080	royalblue #4169e1	dodgerblue #1e90ff	skyblue #87ceeb
cyan #00ffff	darkcyan #008b8b	purple #800080	blueviolet #8a2be2	magenta #ff00ff

緑系

green #008000	darkgreen #006400	forestgreen #228b22	limegreen #32cd32	lawngreen #7cfc00
lime #00ff00	yellowgreen #9acd32	olivedrab #6b8e23	olive #808000	mediumseagreen #3cb371