見てくれる人に伝わりやすい文字デザインとは
写真の上に文字を重ねた時、なんか見づらいな〜
とか
線を追加したり色を変えてみたりしたけどなんかしっくりこない！
そんな経験ありませんか？
そんな時、文字の周りに四角い枠をつけたり写真自体を少し暗く調整したり・・・
ブログや動画、商品画像のために撮った綺麗な写真はそのままの色味で使いたいですよね！
そこでふと思ったんです。毎日何気なく見ている「テレビ」は、画面も明るく背景も移り変わるのに「テレビのテロップ」はとても目立つし読みやすい。
テレビ局の編集者さんはさすがです！！
よーく観察して見ていると
可視性のこともしっかり考えられていて、見てくれる人に対してちゃんと伝わるテキスト装飾だなって思います。
まさにユーザーエクスペリエンス（UX）なテキストと言えます！
ブログや動画、商品ページなど土俵は違いますけど、見てくれる人・ユーザーに情報を伝えたいという目的は同じです。
「綺麗な写真」と「見やすいテキスト」の視覚的なアプローチで
あなたのコンテンツのクオリティをさらに向上させましょう！
今回は、テレビでよく目にするテロップのような文字デザインのチュートリアルをご紹介します。
いろんな場面で使い分けれるよう、5種類作成しました！
すべてイラストレーターの文字編集で完成しますので、グラフィックスタイルなどに登録しておくと今後の使い回しもできて便利ですよ！
旅番組で使われそうな文字デザイン
旅番組で使われそうな文字デザイン
文字の輪郭がはっきりしていて、さらに外側へ光彩がかかっているのでいろんな背景の上でも読みやすそうですよね。
ではさっそく作り方です。
写真の上に文字を配置する
まずは背景となる写真を用意して、その上に文字を配置します。
今回は背景を横780px * 縦520pxの画像を準備しました。
（画像をイラストレーターに配置して作業をすると完成イメージが湧きやすいのでおすすめです。）
その上にイラストレーターの文字ツール（T）で文字を配置します。
ゴシック系のフォントで文字サイズは72ptにしています。
今のところ塗りは何色でも構いません。
一度透明にしてから「塗り」を追加する
まずはここがポイントです。これをしておかないと以降の作業がうまくいきません。
なんとなくデフォルトの文字の要素をリセットしておくようなイメージですね。
1. 文字を選択した状態で「カラー」の塗りを透明にします。
2. そして、「アピアランス」タブの「新規塗りを追加」をクリックします。
「塗り」と「線」を追加する
次に「アピアランス」から塗りを線を追加していきます。
今回は、塗りを「黄色系 #faff43」、線を「黒」にしました。
このままだと文字は読めますが、線は細いしなんか安っぽいですね。
ここからアピアランスを駆使してリッチな文字デザインに仕上げていきます。
「塗り」と「線」の順番を入れ替えて、さらに「線」を追加する
上の画像の状態は、黄色い文字の「塗り」の上に黒の「線」が乗っている状態ですので
黄色の文字が痩せて見える状態となっています。
そこで、アピアランスの塗りと線の順番を入れ替えます。
すると「塗り」の下に「線」が配置されるので、黄色い文字がしっかり見やすくなります。
この状態にすれば、線をいくら太くしても黄色い文字には影響がないので、お好みの線幅を設定できます。
アピアランス上で「塗り」と「線」を入れ替えました。
文字サイズが72ptで作成してますので線幅を8ptにしてみました。
線幅は文字サイズやフォントの種類に合わせてお好みで設定してください。
文字も痩せることなく、少しずつ輪郭がはっきりしてきました。
さらに「線」を追加
さらに線を追加していきます。
ここで注意すべきは、「新規線を追加」をクリックしてください。
先ほどは「新規塗りを追加」をクリックしましたが、次は「線」です。
アピアランスの一番左下のアイコンをクリックです。
そして線の色を選択して、先ほどと同じように新規「線」を下へ移動させていきます。
このように、新規「線」を2つ追加しました。
ここのポイントは下へ移動した線の太さは、上の線よりも太く設定してください。
同じ線幅のままだと上に配置されている線に隠れてしまいます。
今回は以下のような設定にしました。
・塗り ： #faff43
・一番上の線 ： 線幅 8pt 黒
・真ん中の線 ： 線幅 16pt ピンク系 #ed267b
・一番下の線 ： 線幅 22pt 黒
するとこんな感じになります。
おお〜。だいぶいい感じになってきました！・・・・ん？
なんか「旅行」の「行」の上あたり・・・なんか出とる！！
気持ち悪いですね。超気持ち悪い。
線の「角の形状」を調整する
この現象の原因は「線」の角が「マイター結合」の状態となっているからです。
簡単にいうと、角張ってるって感じです。
これは線の「角の形状」を「ラウンド結合」に変更してあげると解決できます。
すると、
こうなります。
うん、しっかり収まりましたね。
さあ、ここから仕上げです。
この一工夫が文字デザインのクオリティを高めてくれます。
光彩（外側）のWパンチでプロっぽく仕上げる
これまでの作業で、現在こんな感じになっているかと思います。
この文字に「光彩（外側）」を加えて、さらに文字を読みやすくデザインしていきます。
まずは、文字を選択します。
そして、左上メニューから
「効果」＞「スタイライズ」＞「光彩（外側）」を選択。
光彩（外側）のパネルを以下のように設定。
光彩カラーは同じ黄色で合わせてます。（#faff43）
するとこんな感じに。
文字の周りにぼんやり光彩が掛かってますね。
このまま光彩（外側）の「ぼかし」のpx値を増やしても、どんどん文字の輪郭がボヤけていくだけでいい感じになりません。
そこで、さらにもう一回「光彩（外側）」を追加します。
手順は先ほどと同じ
「効果」＞「スタイライズ」＞「光彩（外側）」を選択します。
すると、メッセージが表示されますので、「新規効果を適用」をクリック。
またまた光彩（外側）の編集パネルが出てくると思います。
それを次は以下のように設定。（光彩カラーは変更してません）
すると、こうなります。
やりました！完成です！
光彩がボヤけすぎず、光彩カラーの輪郭を保持して、いい感じに文字を際立ててくれています。
写真の上から文字がはみ出ないようにお好みの位置に調整したりして、保存して完了です。
この文字の状態をグラフィックスタイルに登録しておくと、文章が変わってもこのスタイルを適用できるので便利です！
文字を選択した状態で「グラフィックスタイル」パネルの右下の「新規グラフィックスタイル」をクリックするだけです。
このように、いろんなテキストに適用して、文字デザインを楽しんでください。
あなたのブログや商品画像のさらなるクオリティアップに貢献できれば光栄です！
まとめ
ここまで読み進めていただきありがとうございます。
文字デザイン第一弾として詳しく説明してきましたが、結果的にアピアランスがどうなってるのか
画像を載せておきます。
こうなりました。
「塗り」の下に「線」を3つ重ねて、光彩（外側）をダブルパンチ です。
他にもあと4種類の文字デザインのチュートリアル記事をアップしていきます！
いろんな場面、いろんな写真の上で、見てくれる人にしっかり伝わる文字デザインを作成してます。
近日アップ予定ですので、ぜひまたデザインのご参考にご覧ください。
最後までお読みいただきありがとうございました。