ひとり広報

  • プロフィールProfile
  • 100%再現できるデザインのコツ100% Design
  • ひとり広報の仕事って何?Hitori Koho
  • お問い合わせContact
menu

記事カテゴリー

  • 100%再現できるデザインのコツ
    • デザイン初心者講座
    • ロゴデザイン
  • Adobeソフト 使いこなし
    • Illustrator 使い方
    • Photoshop 使い方
  • ブロガー向け
    • Wordpress カスタム
    • STORK(ストーク) カスタム
    • ブログで使える写真テクニック
    • ブログ運営
  • フリーランス向け
    • 企画・アイデア
  • 写真加工のコツ
    • 画像合成のコツ
    • HDR写真
    • Nik Collection
    • 360°カメラ
    • 赤外線写真
  • カメラ選び
    • デジカメレビュー
    • 仕事で使えるデジカメ
    • 写真のある生活
    • パパママ カメラ レビュー
    • わかりにくいぞ! カメラ用語
  • ライフスタイル
    • 働き方
    • ストレングスファインダー
    • Mac iPhone
    • 書評
    • 子供とお出かけ 静岡

運営者プロフィール

写真、カメラ、デザインがちょっと得意な静岡県民。のんびりした性格は「これぞ静岡人」といったところ。
将来はフィンランドに移住し、オーロラを撮影したいと本気で思っている2児の父。

▶︎ 詳しいプロフィールはこちら

▶︎ Line@でこんなことやるよ!!

↓ コチラをポチッと

友だち追加

ひとり広報 yamaって誰? Line@も始めました!
  • HOME
  • 100%再現できるデザインのコツ
  • ロゴデザイン
  • タイトルロゴ作りに役立つ文字装飾パターン5選 チラシやアイキャッチに使い回しできる!

ロゴデザイン 2018.04.05 2018.04.11 yama

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

  • ツイート
  • シェア2
  • はてブ
  • Google+
  • Pocket1

こんにちは、yamaです。

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

印刷物作成やブログ運営をしていると、 タイトルロゴ・見出し・アイキャッチを作ることは非常に多くなります。
言葉は良くないですが、間に合わせ、特にコンセプトなどがないけど、装飾(デザイン)された文字を使いたい時もあると思います。

そんな時に役立つのが 使いまわせる文字装飾パターンです。

ここでは、Illustratorを使ったチラシタイトルやブログのアイキャッチにも使える装飾パターンを5つ紹介します。

目次

  • 再現できるパターンを持とう!
  • Illustratorのアピアランス機能を使おう!
  • ① 袋文字
  • ② パキッとしたグラデーション
  • ここまでの、まとめ
  • ③ ドロップシャドウで雰囲気をあげる
  • ④ 枠の中におさめる
  • ⑤ 罫線で囲んでみる
  • 最後に、今回のまとめ

再現できるパターンを持とう!

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

文字装飾の元

タイトルロゴや見出し、アイキャッチは、できるだけ目立つデザインにしたいところ。
でも、毎回毎回違うデザインを考えて作るのも大変ですよね?

特に宣伝物のタイトル文字・ブログのアイキャッチは、作成スパンが短いので毎回新しいデザインで作るのは難しいと思います。

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

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

使い回しできる!文字装飾パターン5選
  1. 袋文字
  2. パキッととしたグラデーション
  3. ドロップシャドウ
  4. 枠の中におさめる
  5. 罫線で囲む

 

Illustratorのアピアランス機能を使おう!

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

袋文字のアピアランス設定

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

アピアランスって便利!

 

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

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

yama
一度は「あれ?」って思う箇所なので、覚えておくと対処しやすいですよ
  1. 初期設定の塗りを「なし」にする
  2. アピアランスの順序を確認する

 

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

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

うっすらと黒が見えてる?

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

薄く見えていた色を消す

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

黒が消えました!

 

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

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

アピアランスの順序がおかしい

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

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

アピアランスの正しい表示

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

 

① 袋文字

折り込みチラシ等で良く見かける文字装飾が袋文字です。
フチ取りした文字で、とりあえず目立たせる・背景上の文字の可読性を上げる などの効果があります。

また、袋文字のフチを太くすると元気で活発なイメージになります。

袋文字
yama
親やすい・コミカルなイメージにもなりますよ!

 

袋文字の作り方

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

yama
文字とフチの色、フチの線幅で様々なバリエーションを作ることができますよ!

 

袋文字のパターン

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

袋文字のパターン

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

画像の上に乗せた白文字

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

 

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

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

グラデーションの例01

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

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

 

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

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

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

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

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

 

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

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

パキットしたグラデのサンプル

 

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

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

パキッとした作例

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

 

ここまでの、まとめ

袋文字、グラデーションと紹介してきましたが、どうですか?
いずれも頻繁に使うテクニックなので、覚えてしまうと使い勝手が良いです。

yama
うん。わかったけど、面倒くさい

という方もいると思います。

kanna
もっと簡単なのないですか?

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

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

 

③ ドロップシャドウで雰囲気をあげる

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

ドロップシャドウの設定

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

ドロップシャドウの基本設定
  • 不透明度…シャドウの透明度。100%の影は透明効果のない影が付きます。ボクは30~70%くらいで使うことが多いですね。
  • X軸オフセット、Y軸オフセット…影の方向です。数字が大きくすると影が伸びていきます。
  • ぼかし…シャドウのぼかし幅です。
  • カラー…シャドウの色です。

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

 

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

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

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

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

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

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

 

④ 枠の中におさめる

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

ワクにおさめる

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

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

 

⑤ 罫線で囲んでみる

こちらも枠の中におさめる方法の一つです。

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

罫線で囲む

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

背景付き

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

罫線にドロップシャドウ

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

 

最後に、今回のまとめ

主にタイトルロゴや見出しで使える 文字装飾のパターンを紹介しました。

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

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

 

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

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

といった感じが使いやすいでしょう。

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

文字だけで簡単に作るロゴデザイン 「デザインテンプレート」を公開!!

2018.03.23

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

  • ロゴデザイン

ロゴデザイン

この記事が気に入ったら
いいねしよう!

最新記事をお届けします。

  • ツイート
  • シェア2
  • はてブ
  • Google+
  • Pocket1
  • feedly9




何でも聞いちゃってください!
ひとり広報 Line@

デザインのコツに関する質問・疑問、記事の「ここがわかりにくいぞ!」、デジカメの購入相談など。気軽に使ってください!

↓ コチラをポチッと

友だち追加

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


レンズの写真
LUMIX GX7MK2と組み合わせたいズームレンズはこれ! キットレンズの次に買うレンズの選び方
文字だけで簡単に作るロゴデザイン 「デザインテンプレート」を公開!!
文字だけでロゴデザイン

RECOMMENDこちらの記事も人気です。

  • 小さな子供の質問 ロゴデザイン
    2018.4.20

    ロゴマークに意味を込める! ロゴデザインで一番大切なこと

  • ロゴデザイン
    2016.10.6

    初心者でも簡単!! ロゴ作成のコツ プロのワークフロー紹介

  • ロゴデザイン
    2018.3.12

    ロゴ作成に何のフォントを選べばいい?書体選びのヒントと使い分け

  • ロゴデザイン
    2018.3.18

    プロ直伝! ロゴ作成から学ぶ文字レイアウトのコツは「揃える・強弱・整理」

  • ロゴデザイン
    2016.9.27

    自分でロゴ作成する前に知っておきたい シンボルマークとロゴマークの違い

  • 文字だけでロゴデザイン ロゴデザイン
    2018.3.23

    文字だけで簡単に作るロゴデザイン 「デザインテンプレート」を公開!!

  • ロゴデザイン
    2018.2.14

    簡単! 文字入力だけ! ロゴを自動作成する無料ツール MarkMaker

ABOUTこの記事をかいた人

yama

yama

写真、カメラ、デザインがちょっと得意な静岡県民。のんびりした性格は「これぞ静岡人」といったところ。
将来はフィンランドに移住し、オーロラを撮影したいと本気で思っている2児の父。
▶︎ 詳しいプロフィールはこちら
  • WebSite
  • Twitter
  • Facebook

NEW POSTこのライターの最新記事

  • 小さな子供の質問ロゴデザイン
    2018.4.20

    ロゴマークに意味を込める! ロゴデザインで一番大切なこと

  • レンズの写真カメラ選び
    2018.4.16

    LUMIX GX7MK2と組み合わせたいズームレンズはこれ! キットレンズの…

  • ロゴデザイン
    2018.4.5

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

  • 文字だけでロゴデザインロゴデザイン
    2018.3.23

    文字だけで簡単に作るロゴデザイン 「デザインテンプレート」を公開!!

記事カテゴリー

  • 100%再現できるデザインのコツ (15)
    • デザイン初心者講座 (6)
    • ロゴデザイン (8)
  • Adobeソフト 使いこなし (7)
    • Illustrator 使い方 (3)
    • Photoshop 使い方 (4)
  • ブロガー向け (16)
    • Wordpress カスタム (2)
    • STORK(ストーク) カスタム (2)
    • ブログで使える写真テクニック (4)
    • ブログ運営 (8)
  • フリーランス向け (2)
    • 企画・アイデア (2)
  • 写真加工のコツ (22)
    • 画像合成のコツ (1)
    • HDR写真 (14)
    • Nik Collection (5)
    • 360°カメラ (1)
    • 赤外線写真 (3)
  • カメラ選び (46)
    • デジカメレビュー (19)
    • 仕事で使えるデジカメ (7)
    • 写真のある生活 (7)
    • パパママ カメラ レビュー (2)
    • わかりにくいぞ! カメラ用語 (1)
  • ライフスタイル (40)
    • 働き方 (6)
    • ストレングスファインダー (4)
    • Mac iPhone (5)
    • 書評 (3)
    • 子供とお出かけ 静岡 (11)

サイト内検索

運営者プロフィール

写真、カメラ、デザインがちょっと得意な静岡県民。のんびりした性格は「これぞ静岡人」といったところ。
将来はフィンランドに移住し、オーロラを撮影したいと本気で思っている2児の父。

▶︎ 詳しいプロフィールはこちら

▶︎ Line@でこんなことやるよ!!

↓ コチラをポチッと

友だち追加

最新の投稿

  • 小さな子供の質問
    ロゴマークに意味を込める! ロゴデザインで一番大切なこと 2018.04.20
  • レンズの写真
    LUMIX GX7MK2と組み合わせたいズームレンズはこれ! キットレンズの次に買うレンズの選び方 2018.04.16
  • タイトルロゴ作りに役立つ文字装飾パターン5選 チラシやアイキャッチに使い回しできる! 2018.04.05

記事カテゴリー

2018年4月
月火水木金土日
« 3月  
 1
2345678
9101112131415
16171819202122
23242526272829
30 

アーカイブ

  • プロフィール
  • お問い合わせフォーム
  • プライバシーポリシー

©Copyright2018 ひとり広報.All Rights Reserved.