伝わるデザインにするために「文字」を強調する6つの方法

「プレゼンのためにスライドを作成することになった」「デザイナーではないけどバナーを作ることになった」などの機会は、たびたびあるかと思います。

スライドやバナー広告の役割は、情報を「伝える」ことです。

しかし実際に作ってみると、必要な情報をすべて単調に並べるだけになってしまったり、逆に「あれもこれも」と色を付けすぎてしまったり、どこに注目すればよいのかわからないデザインになってしまうことも少なくありません。

大切なのは「どこに注目させたいのか」を考えて、強弱（コントラスト）をつけることです。優先順位を決めて、文字の見せ方を変えるだけでも「伝わる」デザインにできます。

今回は、わかりやすく情報を「伝える」強弱のポイントについて具体例を6つ紹介します。

POINT1｜サイズ

スカイツリーのように、周りよりも大きいものは目立ちます。

一番目立たせたい文字を、単語や意味の区切りの部分で大きくしましょう。

フォントサイズは20px→22pxのように少しだけ大きくしても差がわかりにくいので、1.5～2倍以上に大きくすると差がわかりやすくなります。

「て・を・に・は」や「ですます」、秒や％などの「単位」は小さくすると横幅を節約しながらメリハリを付けることができます。

POINT2｜明るさ

暗い中でスポットライトが当たったときのように、明るさに差がある部分は目立ちます。

目立たせたい文字と背景色の明るさに差がつくようにしましょう。重要度の低い文字を薄くして調整するのも効果的です。

もし背景色や文字に色があり明るさの強弱の判断がしにくい場合は、モノクロにするとわかりやすくなります。スマートフォンのカメラ機能でモノクロフィルターを使用すると、その場でサッと確認できるのでオススメです。

事前に使用する色が決まっている場合は、作成前にコントラストチェッカーを活用するのも有効です。

POINT3｜色

白いシャツについたカレーのシミのように、色がついている部分は目立ちます。

目立たせたい「ここぞ！」という文字に色を付けましょう。色選びのコツを4つ紹介します。

①鮮やかすぎる原色は避ける

コントラストが強すぎる原色は、目がちかちかしてしまうのでテキストを読む気が下がってしまう可能性があります。彩度を少し落として使用するのがおすすめです。

②使用する色は3色程度に絞る

たくさん色があるとその分、配色の難易度が上がります。

③スポイト機能を活用する

バナーのリンク先で使われている色や、バナー内で使用している写真の色などから色をスポイトすると、雰囲気を統一しやすいです。

④配色ツールを活用する

下記のサイトはテキストや画像が組み合わさったときの画像のイメージを見ながら配色を選ぶことができます。どちらも英語表記ではありますが、直感的に操作が可能です。

参考：Happy Hues

参考：palettemaker.com

※palettemaker.comの方は、ページ上部の中央にある目のアイコンからWeb / Mobile UIを選択したうえで確認するのがわかりやすいです。

もっと詳しく配色について知りたい人にはこちらの記事がおすすめです。

【こんな配色はNG】いつもの業務からバナー広告まで使える配色の基本を事例付きで紹介

POINT4｜マーカー

教科書で重要な部分に下線があるように、線のある部分には目が行きます。

下線、帯、波線、筆線、点線、二重線など……線があるだけで「ほかのテキストと違う」ことが直感的にわかります。

線を引きすぎて「全部大事！」の状態にならないように注意しましょう。

マーカーがある分、窮屈な印象になることがあります。その場合はマーカーの下の行間を少し広くすることで読みやすさを確保することができます。

POINT5｜記号

丸、四角形、吹き出し、メダルなど、一部が囲まれていると他と違うので目を引きます。

「鍵括弧」や“引用符”も同じような効果をねらうことができます。囲む以外にも記号を文字の上に置くことで強調もできます。

上下のテキストにかぶらないよう行間を空けると、要素が被らずテキストが読みやすくなります。

POINT6｜文字装飾

文字にフチ取り線をつけたり、周りに光や影を付けるような文字装飾は6つの中でもインパクトの大きな強調です。

スライドなど会議用の資料であれば背景が単色であることが多いので、1～5のポイントで十分強調できます。どちらかというとバナー向きの装飾かもしれません。

縁取りの文字はテレビのテロップのように、背景に写真があり可読性を確保しつつ、インパクトを出したい部分に使うのが有効です。

文字周りの光や影は、背景に写真を使っており文字が読みにくい場合に可読性を確保するときに有効な手段です。この時、光や影はくっきりつけてしまうとポップな印象になるので、ポップな印象を避けたい場合は控えめにつけましょう。

どちらも外側の色と文字の色、それぞれの明るさの差がつくように注意して作成しましょう。

まとめ｜強弱をつけること＝優先順位を視覚的に見せること

テキストの中の優先順位を決めて複数組み合わせると下図のようになります。

目安として、装飾している範囲がテキストの3割以下に収まるくらいがベストです。

制作が終わったら、自分の意図した優先順位で内容が目立っているか、読みにくいと感じる部分がないか確認しましょう。

作ってる間は同じものを見続けることになるので、頭をリセットして見る手段として下記をオススメします。

強調は他の部分と差をつけるものなので、最後は必ず全体のバランスを確認しましょう。デザインのメリハリを作ることで意図の伝わりやすさがぐっと変わってくるので、6つのポイントをぜひ試してみてください。

ー－－－－

バナーやスライド制作では下記の記事も参考になります、あわせて読むとより制作がしやすくなるかと思います。

今すぐ活用できる！「レイアウトの4原則」を使った報告資料のデザイン術

3STEPで完結！運用型広告のバナー制作を円滑に進めるための情報整理術

「なんとなく」のフォント選びから卒業！ バナー広告やスライドに使えるフォントの基本を事例付きで紹介