ウェブ

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

summer-banner

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

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

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

プル

自身はデザインを語れるほど経験と実力がまだまだですが、アウトプットの場として記事にしてみました。

書体の種類

書体の種類
書体の種類

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

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

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

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

ゴシック体の特徴と印象

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

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

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

明朝体の特徴と印象

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

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

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

強弱の文字組

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

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

上下に配置文字組

上下に配置
上下に配置

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

↓レイアウトについて学べる本(古い本ですが、ためになる良本です。)

デザイン&レイアウトの見本帳
デザイン&レイアウトの見本帳

▪デザイン&レイアウトの見本帳
雑誌を中心に最新レイアウトの実例330点を詳細に解説。実践的にエディトリアルデザインの現在がわかる、「デザイン見本帳シリーズ」の決定版。

基本から応用へ

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

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

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

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

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

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

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

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

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

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

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

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

夏イメージ
夏イメージ

↓より伝えたいことを、より伝えるために、余白を作ることを意識できる本です。

けっきょく、よはく。 余白を活かしたデザインレイアウトの本
けっきょく、よはく。 余白を活かしたデザインレイアウトの本

▪けっきょく、よはく。余白を活かしたデザインレイアウトの本
グラフィックデザイナーはもちろん、ノンデザイナーの方にも役立つ1冊。ポスター、チラシ、POP、DM、プレゼン資料、会社案内、名刺などさまざまな作例でデザインのNG/OKが紹介されています。「余白を作ること」を意識すれば、誰でも今より一歩垢抜けたオシャレなデザインができる!余白に注目したデザインレイアウトの本です。

book
created by Rinker
¥1,980 (2022/10/05 03:54:01時点 楽天市場調べ-詳細)

↓知るだけでデザインはずっとぐっと良くなります。

▪ノンデザイナーズ・デザインブック [第4版]
プロで無くても、読みやすいデザイン、伝わるプレゼン資料、わかりやすいレイアウトを作りたい。日本語版補足。日本語によるデザインサンプル、和文タイポグラフィ。18年ずっと売れ続けているロングセラーの本です。

book
created by Rinker
¥2,398 (2022/10/05 03:22:25時点 楽天市場調べ-詳細)

まとめ

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

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

プル

デザインで大切なことは、センスよりも何を一番伝えたいのかをしっかりと決めてそれにそって配置していくことだと考えています。少しでも参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA