【スキルアップ・初級】デザイン力を磨こう! -第2回 文字装飾をうまく使おう!-

EARN

みなさんこんにちは。おいなり夫婦です。

スキルアップシリーズは、おいなり夫婦が日々の仕事の中で得たスキルや考え方、知っているとちょっと得するテクニックをご紹介する連載です。

デザイン力を磨こう!初級編」は、図解や例などを入れながらデザインの超基本を分かりやすくお伝えします。

今回のテーマは「文字装飾をうまく使おう」です!

第1回「揃えてみよう!」はこちら

文字装飾をうまく使おう!

さっそくですが、とあるコーヒーショップのチラシをみてみましょう。

みなさんはこの投稿の強調したいこと、言いたいことが何か分かりましたか?

例えば、投稿を見たときに最初に目に飛び込んできた言葉は何だったでしょうか?

いなり子
いなり子

コーヒーショップに置いてあるチラシなんだけど、どんな印象を受けた?

いなり
いなり

うーん…ちょっと見づらいなあ。

チラシやポスターは、ひと目で興味を引いたり、こちらの伝えたいことが瞬時に分かるのが理想です。

特別な技術や有料のサービスを使わなくても、実は文字装飾を工夫するだけで、これらの効果を得ることができます。

文字装飾は、文や単語の一部を様々な方法で強調することで内容を分かりやすくするものです。

効果的な文字装飾の3ステップ

それでは先ほどのチラシを、文字装飾を使っておしゃれで分かりやすい見た目に変えていきましょう!

文字装飾を行う場合、まず完成している文言や文章に対して、以下の順番で作業をしていきます。

効果的な文字装飾の3ステップ

 1.ベースの文字色を決める
 2.文字装飾する場所を決める
 3.文字を装飾する

それぞれ詳しく解説していきます。

1 ベースの文字色を決める

1ステップ目は、「ベースの文字色を決める」です。

文字装飾はたくさん入れるものではなく、ここは絶対目立たせたい!というキメどころで使う切り札です。

チラシ全体を見た場合、基本的に文字装飾を施した文章よりも、ベースの文章の方が量が多くなります。

つまりベース色のチョイスは見やすさに直結しますので、まずは文字の大半を占めるベースの文字色を決めるというのが大きなポイントです。

自分にとって大事な、強調したい文字から色を決めたくなってしまいますが、ぐっと我慢。

そしてベースの文字色は、背景色との兼ね合いで選ぶのをオススメします。

背景が白っぽい場合は濃い(黒に近い)色、背景が黒っぽい場合は薄い(白に近い)色を選ぶと良いです。

今回題材にしているチラシは、背景がコーヒー豆で暗いので、ベースの文字色は白にしました!

いなり
いなり

おお!見やすくなったね!

いなり子
いなり子

文字は見やすいけど、大事なところは瞬時には分かりにくいね。ここからが文字装飾の出番です!

2 文字装飾する場所を決める

2ステップ目は、「文字装飾する場所を決める」です。

チラシで特に伝えたいこと、強調したいことを洗い出す作業です。

いなり子
いなり子

このチラシ、いなりだったらどこを強調したい?

いなり
いなり

うーん僕だったら、有機栽培と、マグ購入でプレゼントがあることと、臨時休業日があることの3つかなあ(写真赤枠)。

いなり子
いなり子

私は追加で、オリジナル販売中(写真青枠)も可愛く目立たせたいな♪

文字装飾をする位置を決めたら、もう一度全体を見てみましょう。

一か所に装飾が偏っていたり、ほとんどが装飾箇所になってしまうような場合は、文章の並びを変えて装飾を分散させたり、本当に装飾が必要な箇所かをもう一度検討しても良いでしょう

3 文字を装飾する

3ポイント目は、いよいよ「文字を装飾する」についてです。

2で決めた場所に、文字装飾を入れていきます。

文字装飾には本当に様々な手段がありますが、シンプルで読みやすい装飾をいくつかご紹介します!

それぞれを組み合わせてもOKです!

①文字色を変える

最もオーソドックスな手法とも言えるのが、文字色を変えることです。

文字の大きさやフォントはそのままで、色を変えるだけで簡単に強調ができます。

装飾する色は背景色とのバランスを見て何パターンか試してみると良いですが、背景色の補色を選ぶと間違いなく目立ちます。

また、色を選ぶときは、以下のことに注意しましょう。

文字色を選ぶときの注意点

 ・赤は慎重に使う
 ・色の種類は多くしすぎないように
 ・色でのグループ分けに注意

赤はとても目立ちますが、危険な時や重大な事柄によく使われる色なので、多用は避けましょう。

また、たくさんの色が使われていると大事な部分が埋もれてしまうので、文字装飾に使う色は2色程度にするとすっきりします。

そして最も気を付けたいのが、色でのグループ分けです。

少しわかりづらいので例を出すと、

 チューリップたんぽぽうさぎさくらネコ

これらは、植物はピンク、動物は青で色付けされていますね。では、

 まぐろせんべいチョコレートカニサバ

この場合はどうでしょうか。魚介類が緑、お菓子がオレンジ…と思いきや、ごちゃまぜになっていますね。

言葉を読む前に、同じ色のものを同類と視覚で無意識に判断してしまうので、読み手を混乱させてしまいます。

複数の色を使う時には、使用した色と単語のグループがちぐはぐになっていないか注意しましょう。

②線を引く

2つ目の手法は、線を引くことです。

こちらも、シンプルながら様々な場面で使われていますね。

教科書に線を引いていたらマーカーだらけになってしまった…という話はよく聞きますが、線の引きすぎに注意するのはデザインの世界も同じ。

文字色と同じように、使う色にも注意しながら試してみてくださいね。

③文字そのものにエフェクトをつける

3つ目は、文字そのものにエフェクトをつけることです。

エフェクトとは、文字に縁取りや影などの効果をつけることで、使用するアプリケーションによって様々なエフェクトが用意されていると思いますので、是非試してみて下さい。

そして気になる今回のチラシは、こんな風に改修されました!

文字色には、黄色とオレンジをチョイス。線を引いて強調する効果も合わせました。
「オリジナルマグ販売中」は、縁取りのエフェクトを使い、白いベース色のまま強調させてすっきりした印象になりました。
いなり子
いなり子

見やすくなったね!

いなり
いなり

少し変えただけでこんなに違うんだね!

まとめ

デザイン力を磨こう!第2回は「文字装飾をうまく使おう」をテーマに、チラシやポスターなどを見やすくするコツをご紹介しました。

すぐに取り入れることができて、パワーポイントやアイキャッチでも使えるポイントばかりですので、ぜひ参考にしてみてください。

次回は、「余白」をテーマに記事をお届け予定です!

コメント

  1. みけねこ より:

    はじめまして、みけねこといいます。
    Twetterフォロワーさんのブログを巡っています。

    ブログにおいて文字装飾って大事ですよね。

    コーヒーショップの画像がとても分かりやすかったです。
    色々なところにユーザーの目を引く仕掛けがあるんですね。
    参考にさせて頂きます。

    ブログ運営がんばって下さいね(^^)/

    • みけねこさん
      コメントありがとうございます!
      コーヒーショップの画像、一生懸命作ったのでわかりやすいと言っていただけてよかったです!
      デザインは短時間でたくさんの情報や印象を伝えることができるので素晴らしいですよね。
      みけねこさんたくさんの記事を上げられていて尊敬します!