わたしが知りたい!アイキャッチに困ったときに使える文字デザインアイデア

2022年07月26日

2024年07月10日

こんにちは!ASUE株式会社広報のN村です。

わたしは社会不適合者なので、え〜ブログのこと人に依頼するのダル……デザイナーさん忙しいし……自分でやろ……と言いながら、ASUE通信の改修(ブログでこういうことやりたい!ファイルいじろ!)とかアイキャッチも画像も自分で作ろ!!!とかやってしまう人間なのですが、デザインは本当に正解がわからなくて苦手です。

記事内の画像だけでなく、ブログのアイキャッチもほぼ自分で作るようになって早幾年(1年くらいです)、似たようなイラストで似たようなフォントで似たようなことをし続けていて、あ〜〜〜〜ネタ切れしてる!!!と思う日々。

ということで、困ったときに使いたい!文字の装飾・あしらい的なものをいろいろご紹介したいと思います。紹介したらわたしも使えるようになる……はず……。ならんかな……。なるといいな……。

まずは定番!文字を強調する方法

デフォルトの状態がこちら……上の日本語がメインタイトル・下のアルファベットがサブタイトルとしておきます。ウェイトは違いますが、フォントは全てヒラギノ角ゴシックです。

今回はこの文字の中から、「無情」を目立たせてみましょう。

まずは多分誰でもやったことがある基本3つから!

基本その1:大きくする

これはもう鉄板ですね。大きくなれば目立ちます。そらそう。

小さい部分をもっと小さくして、縦書きと横書きを組み合わせる……というパターンもあります。

基本その2:太くする

目立たせたい箇所だけ太字にするだけでも目立たせることができます。

「無情」の文字のウェイトをいろいろ変えてみるとこんな感じ。太い文字の方がインパクトがあって目立ちます。

広報のN村

あぁ、無情がゲシュタルト崩壊した

基本その3:色を変える

文字の色を一部変更すると、その箇所だけを目立たせることができ、ワンポイントにできます。やり方はわかると思うので割愛します。

全体の配色によっては、色を変えた部分がうまく目立たない場合もあるので、その辺りも考慮して配色を考えましょう。配色については下記の記事も参考にどうぞ!

デザインの配色はどう決める? 配色のキホンと困ったときに頼れるWeb配色ツール
配色の基本 1
 2022年2月15日デザインの配色はどう決める? 配色のキホンと困ったときに頼れるWeb配色ツール
それっぽい
配色の基本 2
 2022年3月9日それっぽい"適当な"例付き!ターゲット・商品に合わせた色選びとは?色から受ける印象

続いて、文字に飾りをつけることで目立たせるテクニックです!

下線を引く

教科書やノートみたいに、目立たせたい箇所にマーカー風の下線を引くのも目立たせるのに◎です。

文字と下線を重ねる場合は、明度の差がしっかりついた方が見やすいです。(見本は悪い例ですね……)

広報のN村

学生時代、大事なところに線を引くつもりがマーカーだらけになってしまった人いるよね。

文字にフレームや背景をつける

目立たせたい文字を囲んだり背景をつけても、強調できます。

普通に背景をつけたり、

1文字ずつ囲ったり、

背景を1文字ずつにしたり、

いろんな形にしたり……。ここでは、適当に丸を置きましたが、内容やデザインテイストなどに合わせていろんな形やイラストを背景にしても◎です! 春に桜の花とか、雲の形とか。

文字の周囲に視線を誘導する飾りをつける

最後に、目立たせたい箇所を強調するような、視線を誘導するような装飾をつける手もあります。

定番はドット?とか、

集中線みたいなやつとか。線は点線っぽくしてみたり、いろいろなパターンもありですね。

いろんな文字を強調したり目立たせるテクニックがあるので、困ったときはいろいろ試してみましょう!

広報のN村

やったことがあったりなかったり、ですが、知っておけばきっといつか使えると信じて……信じて……

ASUEくん

自信がなさそうだ……

文字をアレンジする

続いては、強調させるだけでなく文字に一手間を加えてデザインを工夫してみましょう〜的なお話です。

よくいろんなデザインで見かけるおしゃれな文字の感じを自分でもやってみよう!ということで……ここでは、文字を細かく調整する方法をいくつかご紹介します。

文字のマドを塗りつぶす

文字の中のマド……文字中の空いている箇所を別の色で塗りつぶされてるの、見たことあるのではないでしょうか。

文字を選択して、[アウトライン作成]→[オブジェクト] > [ライブペイント] > [作成] → キーボードの[K]を押してから、色を選択して塗りつぶしたい箇所を選択すると簡単に塗りつぶせます。

参考:「目を引くタイトル・ロゴデザインの方法:初級編」
https://helpx.adobe.com/jp/illustrator/how-to/original-type-font.html#part2

文字の一部だけ色を変える

文字の一部だけ、色を変更するのもポイントになります。やりすぎると変になるのと、書き順を意識して青くするといいそうです。

広報のN村

何度確認しても「無」の書き順が覚えられません。

文字の輪郭線を出す

文字を輪郭線にするのもワンポイントになります。ちなみに、輪郭線のみの文字を「袋文字」と言うそうです。

袋文字と違う色で、塗りのみ(輪郭なし)の文字をずらして重ねるのも◎です。

今回のように目立たせたい箇所だけ!など工夫をすれば、強調するのにもいいですね!

広報のN村

わたしはどうすれば良いかわからなくなると、とりあえずこれをやってしまう。

フォントを混ぜる

違うフォントを組み合わせる(=混植)と、メリハリがつきます。

使い方としては、ゴシック体の方が明朝体よりも視認性が高いため目立たせたい箇所をゴシック体にしたり、ひらがなや英字のような曲線の多い字体を明朝体・漢字をゴシック体にするのがおすすめです。

文字を一部カットする

どこをカットして隙間を入れるかが難しいですが、パーツを分解して隙間を作ることで文字がすっきりした印象を与えやすくなります。

文字に影をつける

よくやるやつです。

文字にワンポイントをつける

文字にモチーフを組み合わせるのも、アクセントになります。上では、ただの丸を文字のとめ・はねにくっつけています。

また、単純な図形だけじゃなく、文字の意味に合わせたモチーフを文字の中に入れるのもよく見ますね。

イラストは多用してしまうとくどくなると思いますが、大事な部分など目立たせたいワードにポイントで使うとアクセントになりますね!

ASUEくん

漢字のチョイスに何かの意図を感じる

広報のN村

へへっ……

タイトル+副題のデザインは?

さて、ここまで無意味に小さく書かれた「Les Misérables」の文字がようやく火を吹きます。10回くらい、これなくてもよかったな……って思ってました。

ということで、ここからは、目立たせたいメインタイトルと補足・補助的な役割の副題をどうする?というお話です。

とりあえずフォントを変える

手書きっぽいフォントにするなど、メインタイトルと違うフォントにしてみます。フォントの組み合わせはなんでもいいですが、バランスを見ながら全体のデザインテイストに合わせたものを選びましょう。

デザインの内容にもよりますが、こんなふうに複数のフォントを使用する場合は2-3種類までにまとめておくとごちゃついたりせず無難です。

これだけだと寂しいので、装飾をつける

副題を吹き出しに入れてみたり、

リボンとかでもいいし、

線やフレームを使うというパターンもあります。

まとめ?

今回ご紹介したアレコレはほんの一例です。デザインに合わせた素材などうまく組み合わせたり、強調や文字のアレンジテクニックを利用してターゲットの目を引くデザインをつくりましょう!

広報のN村

今回調べたアレコレでしばらく食べて(?)いきたい むずかしいことできない

ASUEくん

がんばって……

せっかく制作したLP、成果出てますか?

  • ブランディング色が強く訴求がおろそかに……
  • なんのサービスかがわかりにくい
  • ターゲットに刺さりにくいデザインになっている
  • CVRが低い・成果に繋がっていない

Web広告改善事例集見本

本資料では、上記のやりがちな失敗を踏まえて
売れるデザインにするための効果的な方法を分かりやすく紹介!

【無料】LP制作のポイント集をダウンロード