ウェブ

書体・文字の強弱でしっかりとメリハリを付ける文字組バナー【テキストデザイン】

summer-banner

アイキャッチ画像やバナー広告で「読みやすい文字組」「見やすい文字」を意識して作ることが大切だと思っています。

情報を瞬時に認識できるように情報の優先順位を決めて、メリハリををつけると何を伝えたいのかハッキリとわかるようになり、文字の大小で差別化をしてから全体のバランスを整えていくとしっくりくるデザインになります。

ある程度、文字組はパターンをいくつか決めておいて作る。「センス」「経験」不要ですぐに真似が出来るような内容になっているので参考にしてください。

書体の種類

書体の種類
書体の種類

書体の種類は大きく下記の分類に分けられています。

  • 和文:ゴシック体 / 明朝体 / 漢字、ひらがな、カタカナ
  • 欧文:サンセリフ体 / セリフ体 / アルファベット、半角記号

書体によって見え方や印象が変わってきます。大まかに分けますがゴシック体はポップな感じ、明朝体はスタイリッシュな感じの印象を持っています。

制作物から受ける印象は使用する書体によって大きくかわる為、読み手に伝えたい内容や与えたい印象に応じて適切な書体を選択しましょう。

ゴシック体の特徴と印象

ゴシック・サンセリフ
ゴシック・サンセリフ

文字が小さくても高い視覚性があり「タイトル」や「見出し」によく使用されます。線幅が広い為、「男性的」「安定感」「力強さ」「インパクト」「元気な」印象を持っています。

視覚性:認識のしやすさがあり字の発見しやすさや目立ちやすい。

明朝体の特徴と印象

明朝・セリフ
明朝・セリフ

線の太さによって印象が異なります。細い書体は「女性的」「モダン」「品格」といった印象で、太い書体は「権威的」「高級感」「伝統」などの印象を与えます。

可読性:読まれやすさがあり長文の疲れにくさや読むスピードに影響しやすい。

強弱の文字組

強弱の文字組
強弱の文字組

メリハリを強調する場合は、ゴシック体を使用し文字の線幅がほぼ均等であるため、視覚性が高く安定感のある印象を与えます。

上下に配置文字組

上下に配置
上下に配置

%とOFFを上下に並べることによって一つの固まりとして視覚的認識がしやすいデザインになっていると思います。

基本から応用へ

文字と書体を分けて並べる

文字を並べる
文字を並べる

広告バナーを制作する場合、初めに文字をいったん整列させてからどの部分を強調するかを決めていきます。今回は300円OFFとクーポンプレゼントを一番伝えたいと思いこの2点を強調するデザインにしています。

作りながら考えるのではなく、必要な情報を先に出しておいてからデザインする事が大切です。

強調部分を仕分け
強調部分を仕分け

配置方法をいろいろありますが、今回は中央揃えに配置しました。

テーマはサマーセールなので海や夏をイメージさせる青を背景色に選択。

中央揃えに配置
中央揃えに配置

ここで、基本で紹介した文字の強弱です。300円OFFとクーポンプレゼントの文字を大きくして差別化する為に色分けも行っています。

イメージ素材を配置
イメージ素材を配置

ある程度、文字のバランスを見ながら配置調整し夏イメージのヤシの木の葉をまばらに配置します。

後は、海をイメージさせる波をイメージさせる模様をいれて完成です。

夏イメージ
夏イメージ

まとめ

文字組も大切ですが、文字自体に装飾と全体像をどのように表現するかがデザインのクオリティーアップにつながると思います。

更にキーワードを目立たせる事で、読者の目に止まった時に何の内容が書いてあるのか、反射的に察知しやすいというメリットがあります。