public-domain-images-free-stock-photos-chicago-skyline-night

【Illustrator】文字をハッキリ見えるようにするデザインテクニック10選


ポスターやフライヤー、ホームページのPRなどで何かと必要になるフォントの主張。困るとあれこれと考えてしまいますが、文字をハッキリ見せる基本の方法はたった4つです。
【フォントサイズを調整する】【フォントを太字にする】【背景とフォントのテイストの差を大きくする】【文字を飾る】
ここでは基本の4パターンから派生して、更に効果的に文字を目立たせるテクニックをご紹介します。

メリハリ…フォントサイズを調整する

フォントを調整するやり方は、最もポピュラーで基本的な方法です。しかし単に文字を大きくする・小さくするだけではなく周囲との対比も考えられると、より効果的です。
具体的な例は三案です。

 

目立たせたい部分のフォントサイズを大きくする

目立たせたい部分のフォントサイズを大きくする
最もポピュラーな方法です。ただ、目立たせたい部分が途中で改行されてしまうと読みづらくなり、相手に十分に伝わりません。
フォントサイズをそのものを大きくする場合は
1.改行しない
2.フォントサイズは全体が画面(印刷面)の幅に収まる大きさにする
の2点に注意することで、効果的に強調できます。

 

 

単語の頭を大きくする
単語の頭を大きくする

これもポピュラーな方法の一つです。使用する時のポイントは「本当に伝えたい一行の中の単語」の最初の一文字を大きくする、ということです。文章全体や、文章の頭を強調できない場合は文中でも大丈夫です。気になるポイントが一つあることで行間も開き、目に止まりやすくなります。文字数が多い場合に効果的な方法です。

 

 

ひらがなを小さくする

ひらがなを小さくする
フォントサイズを大きくする、とは逆転の発想です。
そもそも文字のサイズを大きくするのは、目立たせるためです。ならば逆に周囲の文字を小さくすることで、同等の効果を得ることも可能です。
日本語のように漢字・かな・カナ・アルファベットが混ざっているような文章に適しています。ひらがなは小さくても読みやすく、またそうすることで上品な印象に見えます。サイズの最大値に上限がある場合などに便利なやり方です。

 

 

インパクト…フォントを太字にする

フォントの大きさを加減できず、かつ基本的に同じフォントサイズで粒を揃えたい場合は文字の太さの調整が効果的です。こちらも単純に太さを変えるのではなく、太さを生かしたニュアンスを入れると良いでしょう。

全体を太字にする

主張したい文言が短い場合は、思い切って全体を太字にすると強い効果が得られます(〜20文字程度)
長文には不向きですが、「この一言を覚えてもらいたい!」など強いメッセージ性を持たせる場合に有用な方法です。ただインパクト重視で文字が潰れてしまうと、読み手に画像として認識されてしまいます。その場合はカーニングをやや広めに取り、読ませるための太字ということを主張しましょう。

 

 

漢字など密度の高い字を太字にする

漢字など密度の高い字を太字にする

文章に緩急をつける方法です。太字には、太字そのものにインパクトがあります。ですが日本語には様々なパターンの文字が使われています。文章そのものにメリハリのあるリズムを持たせることで、読み終わった後に印象に残る仕上がりにできます。

 

コントラスト…背景とフォントのテイストの差を大きくする

基本的なことですが、コントラストを高くすると識字率が上がります。
そのため文字をハッキリ見せたい時は、サイズや文字の太さと合わせることでより高い効果を期待できるのです。
また、文字のサイズや太さを調節できない場合は、このコントラストで目立たせると良いでしょう。

背景と文字のコントラストを考える

背景と文字のコントラストを考える

背景と文字色が近似色、また明度が近い関係にあると、いわゆる読みづらい状態になります。
文字を目立たせる場合は明度の高い関係(例…黒背景に白色の文字)にするか、あるいは色味が効果的に見える関係(例…紺色の背景に黄色の文字)にすると印象が良くなります。
ただ、この方法は文字を警告色にしてしまうと危険を感じさせてしまうため、配色には気を付けましょう。

 

 

密度のコントラスト

密度のコントラスト
行数が多い場合、行間をコントロールして余白の密度を調整することが可能です。後述の文字同士の場合と異なり、行で魅せるため一文が長い場合に適しています。
20文字以上になる場合は2行に分け、まとめて前後に余白を入れると良いでしょう。

 

文字間隔のコントラスト

文字間隔のコントラスト

文字同士の隙間を広く取り、余白で文字を目立たせます。文字を調節していると見失いがちですが、カーニングは文章の調整に最も有効な手段の一つです。
文字サイズや太さが加減できない時は、スペースを利用することで見せたい文章を際立たせると良いでしょう。

 

 

アクセント…文字を飾る

文字の大きさ・文字の太さ・文字周りの環境を変えることができない状況。そんな時には、さりげなく文字のそばに視線を誘導させましょう。

 

下線やドットで注目を集める

下線やドットで注目を集める
古典的な方法ですが、見せたい文章のそばに下線(アンダーライン)を引くとニュアンスが効いて効果的です。
この時単純に線を引くだけでは雰囲気に障る場合がありますので、フォントの太さや印象に合わせてカラーや素材感を出すことも演出の一つとして良いでしょう。
ドットは単語につけると注目を集めやすく、下線は文章全体や一節に引くと効果的です。長いものは長文に、と覚えて使い分けると良いでしょう。

 

背景に工夫を入れる

背景に工夫を入れる

文字自体に工夫を入れることができない場合は、背景にさりげなく注目を集める工夫をしましょう。例えば背景のカラーを強めたり、柄を多めに入れるなどです。文字自体に工夫を凝らせない場合に限った工夫ではありますが、この時識字率が下がらないように気を付けましょう。背景は柄が入ってもフラットに、と意識するとまとまりが良くなります。

 

さいごに

いかがだったでしょうか。文字とデザインは切っても切れない関係にあります。ここぞという時アピールできるよう、小ネタを理論と結びつけて着実にスキルアップしていきましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


memeron

今年東京の美術大学を卒業したmemeronと申します。 大学ではデザインを専攻、在学中はイラストや雑貨の製作をしながら友人らと展示などで活動していました。 現在は引き続きデザインとイラストを学びながら、フリーランスで自立できるよう邁進中です。 元々文章を書くことも好きだったので、何か人のお役に立てることをできればと思い日々模索しております。 何事にも一生懸命取り組んでいきたいと思っています。 どうぞよろしくお願いします。

Next ArticlePDFやEPS形式のファイルから画像を取り込む方法