テキストデザイン

テキストは情報を伝えるのに非常に重要な役割を担っています。ここではそのテキストの適切なデザインの仕方や例について示します。

まずは、、

※2021実戦化学重要問題集化学基礎・化学は©数研出版の書籍です。

概要でも見たと思いますが、こちらの画像のテロップ、非常に見にくいですよね。今からこれを直していきたいと思います。

まずは色#262626で太さ9のストローク(縁取り)をつけてみました。先ほどより圧倒的に見やすくなりました。

今度はテキストの色を#fbff14にしてみました。そしてストロークの太さは12にしました。

次は線形グラデーション(開始色#01af74 終了色#f79441)にしてみました。ストロークは#f4f4f4にしました。正直、緑からオレンジの色に変わるのに使うのはあまり上手いとは言えないでしょう。

次は、#01af74だけで。

今度は、#f79441でやってみました。この書籍はオレンジの色のイメージが強いのでこの色だけでやるのが良いと思われます。

このようにいろいろ試した後に最初のものを見ると見にくいことがわかります。

フォントを工夫すると、動画のユーザー受けが向上します。

厳格な雰囲気のところは固めの(角のとがった)フォントを使ったり、商品名や強調したい固有名詞では異なるフォントを使うなど、、、

まずはPCに入ってるデフォルトのフォントの中で遊んで、そこから様々なフォントを入れて使っていくといいと思います。自分は夏の安売りの時にフォントパックを買ってそれを使っています。すごく安いときだと中高生のお小遣い程度でも買えるので、デフォルトやフリーで足りない人はそれを狙ってもいいと思います。

先ほどの例でも試してみましょう、通常テキストはGothicDuex-E (有料)を問題集のところはWindows TV MaruGothic (フリー)を利用しています。

背景とテキストだけでもフォントを工夫すれば表現できるので、フォントはかなり重要です。

こちらはグラデーションを利用した例です。グラデーションを使うと文字自体は見にくくなるので必ずストローク(縁取り)をするようにしましょう。フォントはF66FudeSenkou(有料)を使っています。

メインフォントはGothicDuex-E (有料)で高校デビューはWindows TV MaruGothic (フリー)を利用しています。理想的にはキラキラのアニメーションをつけるとよいでしょう。

ストロークは背景の色と被ってしまっても文字を見やすくするのに非常に役に立ちます。しかし、文字色と近い色では意味がありません。基本的には白と黒のうち、文字色と遠いほうの色を使います。上の例では白や黄色では黒を使っているのに対し、オレンジや緑では白色を使っています。