タイトルロゴ作りに役立つ文字装飾パターン5選 チラシやアイキャッチに使い回しできる!

こんにちは！
静岡県沼津市在住、ブロガー&デザイナーのyama(@ひとり広報)です。

この記事では、タイトルロゴの文字装飾パターン を紹介します。

チラシ等の印刷物やホームページ等のWEB制作では、 タイトルロゴ・見出し・アイキャッチを作ることが多くなります。

言葉は良くないですが、とりあえず装飾(デザイン)された文字を使いたい時もあると思います。
そんな時に役立つのが今回紹介する 使いまわせる文字装飾パターンです。

ここでは、illustratorの基本的な機能を使ったタイトルロゴのパターンを5つ紹介します。

使いまわせる！タイトルロゴパターン

次のタイトルロゴに装飾を加える時、どのようにデザインしますか？

タイトルロゴや見出し、アイキャッチは、できるだけ目立つデザインにしたいところ。
でも、毎回毎回違うデザインを考えて作るのも大変ですよね？
特にチラシなどの印刷物は作成スパンが短いため、毎回新しいデザインで作るのは難しいと思います。

ボク自身、ブログのアイキャッチに使うタイトル文字、チラシの見出しタイトルなど作成頻度が高いものはある程度のパターンを用意して対応しています。

今回は、その中でも再現性が高く使い回ししやすいパターンを紹介します。

文字装飾は、illustratorのアピアランス機能を使おう!

アピアランス機能が便利なのは、テキストに直接装飾できるところ。
こんな感じで設定します。
↓↓↓↓↓↓

入力したテキスト内容を変更してもアピアランスの設定も反映されます。

アピアランス設定のチェックポイント

設定したアピアランスの表示がおかしい時は次をチェックしましょう。

一度は「あれ？」って思う箇所なので、覚えておくと対処しやすいですよ

1. 初期設定の塗りを「なし」にする
2. アピアランスの順序を確認する

初期設定の塗り設定を「なし」にする

アピアランスで塗りを設定した時、うっすらと違う色が見える時があります。
こんな感じです。
↓↓↓↓↓↓

このような時は、文字ツールでテキスト全部を選択してみましょう。
アピアランスメニューに「うっすら見えている塗り」の設定がされているはずです。

塗りの設定を「なし」にしてあげれば、綺麗な表示になります。

アピアランスの順序を確認する

次もアピアランス設定でよくあることです。
こんな感じになったことありませんか？
↓↓↓↓↓↓

塗り部分が極端に細く見えているときは、アピアランスの順序がおかしくなっています。
順序はメニュー内でドラッグすることで移動可能です。

表示順序はメニュー内の上から最前面となります。

では、アピアランス機能を使って文字装飾をしていきましょう!

① 袋文字を使ったタイトルロゴ

折込みチラシのタイトルで良く使う文字装飾が袋文字です。
フチ取りした文字で、とりあえず目立たせる・背景上の文字の可読性を上げる などの効果があります。袋文字のフチを太くすると元気で活発なイメージになります。

親しみやすい・コミカルなイメージにもなりますよ！

袋文字の作り方

作り方は簡単です。
最初に「塗り」の赤を設定した後、「新規線を追加」して線幅6pxの白フチを付けました。
もう一度「新規線を追加」を行い、今度は11pxの黒フチをつけました。

文字とフチの色・線幅でバリエーションを作ることができますね。

袋文字のパターン

塗り・線(6px)・線(11px)のアピアランス設定です。
一例を紹介しましょう。

③の「白・赤・黄色」のパターンは可読性が低く感じますが、背景に画像がある場合、とても見やすくなります。
こんな感じです。
↓↓↓↓↓↓

タイトルロゴの場合、使用する状況(背景色、商品などのイメージ)によって、文字・線の色を変える必要があります。
ですが、先ほどの①〜④のパターンはチラシ広告には使いやすいカラーパターンです。

② パキッとしたグラデーション

タイトルにグラデーションをかけると、リッチで立体感のあるデザインになります。
アピアランスの「塗り」にグラデーションを設定しましょう。

オレンジから赤へ、なだらかに変化していますね。
オレンジと赤のグラデーションは見やすく使い勝手の良い組み合わせです。

今回紹介するのは、もう一工夫したグラデーションです。

パキッとしたグラデーションの作り方

塗りにグラデーションを設定するのは同じですが、グラデーションの変化を極端にしています。

作例は、グラデーションバーの49%の位置に暗い赤(ロゴの下半分)、50%に明るい赤(上半分)を設定しています。
要は、グラデーションを49%から50%の狭い範囲で変化させているわけです。

暗い色と明るい色を組み合わせことで、明るい部分は光が当たったようなパキッとしたグラデーションになっています。

パキッとしたグラデーションのパターン

色の組み合わせによって、派手にもクールなイメージにもできます。

クールなパターンは袋文字の罫線を細くし、文字間隔も調整しています。
和文フォントより欧文フォントの方がハマると思います。

派手めなパターンは印刷物に使うと見栄えがします。
クールなパターンは無彩色に近いので印刷ではハッキリ印字できない可能性があります。
しかし、モニタ上では微妙な色の違いが立体感を感じさせるので、WEB用に使うと、クールなイメージのサイトに合います。

IT、コンサル系で見たことありませんか？
罫線が細く、無彩色を使ったロゴタイトルは落ち着いた雰囲気になるわけです。

ここまでの、まとめ

illustratorのアピアランス機能を使った袋文字、グラデーションを紹介しました。

Adobe Creative Cloud コンプリート|12か月版|オンラインコード版

created by Rinker

アドビシステムズ

• Amazon
• 楽天市場
• Yahooショッピング

いずれも頻繁に使うテクニックなので、覚えてしまうと使い勝手が良いです。

もっと簡単なのないですか？

という方もいるでしょう。

次に紹介するのが、最も簡単でデザインしたように見えるテクニック、ドロップシャドウです。

③ ドロップシャドウでタイトルロゴの雰囲気をあげる

簡単な設定で立体感のあるデザインにできるのが、ドロップシャドウです。
Illustratorでは、メニューバーから「効果」→「ドロップシャドウ」を選択します。

設定するのは主に4項目です。

プレビューにチェックを入れると効果を確認しながら設定できます。
簡単ですよね。

ドロップシャドウのパターン

平面的だったこれまでのロゴに立体感が出ましたね。
基本はX軸・Y軸オフセットを設定して右下にシャドウをつけます。

③、④のようにオフセットの数値を0に設定すると、ふわっと浮いたようなシャドウが付きます。
④は白い背景に白い文字ですが、ドロップシャドウの効果で文字として読めますね。

便利だけど使いすぎに注意!

ドロップシャドウは設定も簡単でデザインした風な印象があります。
ですが、それだけに頼ると「何も考えていない」のがバレますので、使うポイントを考えましょうね。

④ 枠の中におさめる

全体のバランスを整えたり、イメージを追加するのにおすすめなのが、枠の中におさめる方法です。
長方形・正方形・楕円・正円・三角形、多角形を使い、文字のバランスを考えて配置します。

扱いやすいのは、長方形・楕円・正方形・正円ですね。
文字の配置位置は、枠の中央が収めやすいです。

意図的に文字の配置位置をズラすこともしますが、基本は真ん中ですね。

⑤ 罫線で囲むタイトルロゴのパターン

ロゴ全体を罫線で囲むと、落ち着いたイメージになります。

背景色をつけた枠と罫線を組み合わせるパターンもあります。

罫線にドロップシャドウを加えると、立体感のあるリッチな雰囲気になります。

背景や罫線をつけることで、文字と罫線、全体の枠のスペース(空間)を意識したデザインができます。
言葉にすると少し難しいですが、感覚的にみなさんも使っているテクニックでしょう。

最後に、今回のまとめ

illustratorの基本的な機能を使ったタイトルロゴや見出しのパターンを紹介しました。

Adobe Creative Cloud コンプリート|12か月版|オンラインコード版

created by Rinker

アドビシステムズ

• Amazon
• 楽天市場
• Yahooショッピング

元気で活発なイメージにしたい時は、

• 文字カラーを赤やオレンジにする
• 袋文字のフチを太くする

大人しい、落ち着いたイメージにしたい時は、

• 袋文字のフチを細くする。またはフチ取りしない
• 彩度の低い色でグラデーションをかける
• 全体を罫線で囲む
• ドロップシャドウかける

といった感じが使いやすいでしょう。
今回紹介したパターンと 文字だけで簡単に作るロゴデザイン 「デザインテンプレート」を公開!!  のデザインテンプレートと組み合わせることで、使い勝手の良いデザインパターンをもつことができます。

デザインのコツ、アイデア方法などロゴマーク作成のコツをまとめました。

ロゴの作り方の全て。初心者に見てほしいデザインのコツ・考え方のまとめ

2021.03.29

それでは、今回はこのへんで。