「読みにくい」と伝えるだけで直った。AIの文字が写真に負けた日の話
note.comでも読む
スマホで見返したら、自分が作った動画の文字がほぼ読めませんでした。 パソコンで作っているときは「いい感じ」と思っていたのに、です。
その日から、テロップの「直し方」についての考え方が変わりました。
前回の記事の続きにあたる話ですが、前回を読んでいなくても大丈夫です。出てくる言葉は、この記事の中で説明し直します。
スマホで見返したら、文字が消えていた
X（旧Twitter）を見ていると、「スマホで見返したら自分の動画の文字が思ったより小さくて読めなかった。作っているときのパソコン画面ではちゃんと見えていたのに」という声を見かけます。
これ、まったく他人事ではありませんでした。
私が作っているのは、HyperFramesというツールで制作した講座動画です。HTMLで画面を組んでいくタイプのツールで、テロップや背景をコードで指定できます。非エンジニアの私が使いこなせているのか、それ自体が怪しいくらいですが、ともかく全6回の講座をこれで作っているところです。
問題が起きたのは、その3回目を作っているときでした。三行のテロップを写真の上に重ねた場面で、一行目だけがぼんやりと消えかけていたんです。写真の暗い部分にテロップが重なって、背景に溶け込んでしまっていました。
原因はあとで分かりました。前回作った「スタイルメモ」に「文字は焦げ茶」と書いてあったんです。
スタイルメモというのは、「文字の色はこれ、書体はこれ、動きの速さはこれ」という自分だけの見た目ルールを、AIと共有するためのメモです。一度作っておくと、次の動画でも同じ見た目を再現しやすくなります。前回の記事で作ったものを、そのまま引き継いで使っていました。
ただ、そのメモはクリーム色の背景を前提に書いたものでした。写真の上にテロップを乗せる場面なんて、書いたときには想定していなかったんです。そこへ「少し暗くして」という自分の指示まで重なって、暗い茶色の上に暗い茶色が乗る、という状況になっていました。
色を変えようとして、詰まった
最初に思ったのは「文字の色を変えれば解決するんじゃないか」でした。
「文字に縁取りを入れたら、背景に沈んでいた字が読めるようになった。それまでは色を変えることばかり考えていた」という声も、Xで見かけたことがあります。縁取り、確かに有効そうです。白い縁取りをつければ、どんな背景でも浮き出るはず。
でも、そこで手が止まりました。
どの色にすれば「読みやすい」のか、私には判断できなかったんです。白にする？ 明るいクリーム色にする？ 縁取りの太さは？ 色を番号で指定するカラーコードというものがあるのですが、その番号を自分で選んで、書いて、試して、また見直して……。デザインの知識がない私には、どこにゴールがあるのかすら見えませんでした。
しかも仮に直せたとして、そのやり方をどこかに残しておかないと、また次の動画で同じことが起きます。直し方を自分で探すことと、それを記録に残すことを、同時にやらなければいけない。
そこで思いました。自分で解決しようとするのは、筋が悪いんじゃないか。
「読みにくい」と伝えるだけで直った
自分でカラーコードを選ぶのをやめました。
代わりに、AIへの頼み方を変えました。
一行目の文字が、写真に負けて読みにくいです。
どの行も、はっきり読めるように直して。それだけです。何色にするか、縁取りをつけるか、位置を変えるか——そういう「手段」は一切指定しませんでした。見たままを言葉にしただけです。
今回使ったAIでは、「読みにくい」と伝えると、原因に合った直し方が返ってきました。こちらが「白にして」と手段を指定するより、結果的に良い直り方でした。
「どの行も」という言葉を入れたのは、あとから効きました。一行目だけを直してもらうのではなく、写真の上にテロップが乗る場面そのものに対応してほしかったからです。
AIがやったのは「色替え」ではなかった
直し方の中身を見て、少し驚きました。
文字の色を変えたわけではなかったんです。
写真を暗くしたわけでもありませんでした。AIがやったのは、文字を置いている側にクリーム色の淡い明かりを重ねることでした。 写真はそのまま、文字の側だけを持ち上げる。それで文字と背景のあいだに差が生まれた、ということです。
自分で考えたときは「縁取り」か「色替え」しか思い浮かびませんでした。AIは、まったく別の解き方を出してきたわけです。
大事なのはカラーコードを覚えることではなく、「何が問題か」を言葉にすることなんだと思いました。
「まるごと作り直し」にはならない
ここで一つ、よく聞く疑念に答えておきたいと思います。
「AIに全部おまかせすると、文字と背景が一枚に焼き付いて出てくる。あとから文字だけ直したくても、まるごと作り直しになる」という声を見かけることがあります。
気持ちはよく分かります。画像を1枚に統合してしまったあとで直したくなったときの、あの徒労感です。
ただ、HyperFramesの場合は事情が違います。HTMLで画面を組んでいるので、文字と背景は別々のまま残っています。「一行目だけ直して」という頼み方が通るのも、この作りがあるからです。文字の指定だけを変える、背景の明るさだけを変える、という部分的な直しが、言葉で頼めます。
今回は、言葉で指定した部分だけを直せました。まるごと作り直しにはなっていません。
直したことをメモに書き足すと、次から起きない
文字が読みにくかった問題は直りました。でも、ここで終わりにするともったいない。
同じことが4回目以降でも起きないように、AIにもう一つお願いしました。
いまの直しかたを、メモにも書き足して。
写真の上に文字を置くときは、どうすればいいか。するとスタイルメモに「写真の上に文字を置くとき」という節がひとつ増えました。次に同じ場面が来たときは、このメモを渡すことで、同じ対応を頼みやすくなります。
一度直して終わりにせず、メモに残す。いまのところ、これがいちばん効いているやり方です。
前回の記事で「メモは自分で書かず、AIに書かせて育てる」と書きました。今回のこれが、まさに「育った」瞬間でした。作ったときには想定していなかった場面が来て、そこで一行増える。最初から完璧なメモを作ろうとしなくていい、と思えたのはこの経験からです。
ついでに覚えておくと迷わない3つのこと
テロップで迷いがちなポイントを3つまとめておきます。これから動画を作る方や、「なんとなく置いているけど基準がない」という方の参考になれば嬉しいです。
その1｜いつ出して、いつ消すか
消すまでの目安は「10文字で1秒」です。15文字のテロップなら1.5秒、20文字なら2秒。ここを起点にすると、「なんとなく短い気がする」という迷いが減ります。出すタイミングは、声とそろえるか、ほんの少しだけ後です。声より先に文字で答えが見えると、音声へ向いていた注意が途切れることがあります。
その2｜どこに置くか
画面の端から上下左右に5%くらいの余白を取ります。ギリギリに置くと、スマホやテレビで切れてしまうことがあります。
その3｜どう目立たせるか
目安として、強調は一画面にひとつに絞ります。色を変える、大きくする、マーカーを引く、丸で囲む——道具はいくつもありますが、複数の方法を重ねると、かえって目立ちにくくなります。どこを強調するか迷ったら、自分が声に出して読んだときに強く言う場所を選ぶと、だいたい合っています。
この3つも、スタイルメモに書いておけば毎回考えなくて済みます。
📺 この記事の内容を動画で見る
ここまでの話を、実際にAIとやりとりしている画面で見られるようにしました。講座の第3回です。
「読みにくい」と伝えてから直るまでの流れは、文字だけだと伝わりにくいところです。直す前と直したあとを並べているので、どのくらい変わるのかは動画のほうが早いと思います。
https://www.youtube.com/watch?v=usNackyJtjE
まとめ
今回の話をひと言でまとめると、「色を自分で選ばなくていい」です。
- 写真の上に出した三行のテロップのうち、一行目だけが暗いところに重なって沈んだ
- 原因は、前回作ったスタイルメモが「クリーム色の背景」を前提に書かれていたこと
- 直し方は自分で決めず、「読みにくい」とだけ伝えた
- AIは色を変えるのではなく、写真はそのままに、文字の側へ明かりを重ねた
- そのあと「メモにも書き足して」と頼んだら、メモに一節増えた
「読みにくい」と見たままを言葉にするだけで、AIは原因から考えて直してくれます。縁取りか色替えか位置移動か——そういう手段を、こちらが探す必要はありませんでした。
そして直したあとに「メモにも書き足して」と一言添えるだけで、次の動画にその経験が引き継がれます。一回の失敗が、次から使えるものに変わります。
今日ひとつだけ持って帰るなら、これです。
「読みにくい」と伝えるだけで直る。
まず次の1本だけ、色を決める前に「読みにくい」と伝えてみてください。専門知識がなくても、問題を見たまま言葉にするところから始められます。
試してうまくいかなかったところがあれば、コメントで教えてください。次の記事で拾います。フォローしておくと続きが届きます。