この文字のあしらい、どっちが正解？バナーの文字デザインのセンスを磨こう

1．文字は読みやすさを意識する

まずは1問目の振り返りです。

このクイズの題材は、学習塾のサイトへ誘導するバナーでした。

どちらもフォントや文字の大きさは同じですが、Bは写真に文字が紛れてしまい、「読めなくはないが、ちょっと目を細めてしまう」というレベルです。

もちろん、Bのようなあしらいが正解になるデザインもありますが、今回、Aを正解にしたのは「バナーのデザイン」ということがポイントとなっています。

「バナーは見てもらえない」という前提でデザインしよう

Webサイトのバナーは、例えば、ニュースサイトの記事ページやECサイトのトップページなどに設置され、「今いるページから他のページへ誘導する」ためのものです。

そのため、ユーザーにとっては「本来の目的（ニュースを読むなど）の妨げ」になりがち。

そんな状況の中で「これは！」と興味を引くのはカンタンではありません。

そもそも「不要だと感じられやすいもの」を、時間をかけてじっくりと見てくれる人は少ないでしょう。

だからこそ、じっくり読ませるのではなく、一瞬で「目に飛び込んでくる」視認性の高さが必要です。

2．大事な情報を引き立たせるために「数字や記号」を調整する

続いて、2問目の振り返りです。

このクイズの題材は、飲食店のお得な情報に誘導するバナーでした。

AとBはレイアウトや色味は同じですが、数字や記号には細かな違いがあります。

どこが異なっているか、わかりましたか？

正解は、「9周年の数字」「1,280円のカンマ」「11/23のスラッシュ」の3つです。

なぜこのような加工を施したか、詳しく解説します。

英数字は少し拡大して漢字と大きさを揃えよう

和文フォントは、漢字に比べ「かな」や「英数字」が一回り小さく作られています。

英数字は形がシンプルなため、漢字との視覚的なバランスを取るなどがその理由と言われています。

なお、このサイズの差（バランス）はフォントによって異なり、漢字とかなの差が大きいものもあれば、差が小さく見えるものまで様々です。

今回のバナーでは、以下の理由から「9周年」の「9」を一回り拡大し、「周年」と大きさを揃えています。

• 冒頭が数字で、一回り小さいとバランスが悪く見える
• 「9」周年というのがアピールしたいポイント

文章中の一部の文字を大きく、あるいは小さくしたいときは、「文字」パネルでフォントサイズ（px）を変更するのではなく、「垂直比率／水平比率」を使うのがオススメです。

なぜなら、フォントサイズ（px）自体を変更するのと違い、相対的な数値で管理できるため、後からのサイズ変更にも柔軟に対応できるからです。

ただ「9」を大きくするだけでは、他の文字とベースラインが揃っていないように見えるので、次に続く「周年」に揃うようにベースラインシフトで調整します。

3．「アピアランス」の重ねがけで、写真の世界観を残す

最後に、3問目を振り返ります。

このクイズの題材は、春のレシピのページへ誘導するバナーでした。

このバナーの主役はおいしそうな桜のモンブランですが、背景のピンクの雰囲気も春を感じさせる重要な要素です。

そのため、なるべく背景を隠しすぎずに文字も目立っている「A」を正解としました。

文字の効果は「複数使い」で可読性を上げよう

このバナーでは、「春のレシピ」というタイトルを、遊び心のあるランダムな配置にしています。

そのため、1問目の解説でご紹介した「背景にシェイプを作る」方法ではなく、文字に対してIllustratorの「アピアランス：光彩（外側）」を適用する方法を選びました。

しかし、文字の読みやすさを確保しようとして「光彩（外側）」を1つだけで明るくしようとすると、Bのように効果が強すぎて不自然な印象になります。

そこで今回は、以下の2つの光彩を組み合わせることで、自然さと可読性を両立させました。

• 「春」と「のレシピ」それぞれの周りに濃いめの小さい光彩（外側）
• 「春のレシピ」全体に薄めの大きな光彩（外側）

文字だけを抜き出してみると、このような違いがあります。

「色」と「重ね方」で世界観を守ろう

光彩（外側）の色選びと重ね方も、AとBでは大きく異なります。

Aは、桜の雰囲気を活かすため、光彩（外側）の色を「薄いピンク」にし、「描画モード：スクリーン」で重ねています。

一方でBは、光彩（外側）の色を白にし、「描画モード：通常」で重ねています。

そのため、背景をベタッと隠してしまい、少し重たい印象です。

さらに、1問目のテクニックと同様に、光彩の影響でケーキの一部まで明るくなってしまわないよう、「ケーキだけの切り抜き写真」を一番上に重ねることで、主役がパッと引き立つように仕上げています。

このように、バナーの重要な部分を視覚的に強調しつつ、写真がもつ世界観を損なわない工夫をすることで、ユーザーの心を掴む「伝わるデザイン」へと仕上がります。

まとめ：バナーの文字デザインセンスを磨くポイント

今回はバナーの文字デザインに関するクイズと、デザインテクニックを取り上げました。

最後に今回のノウハウのまとめです。

1．「目に飛び込んでくる」視認性を最優先に

バナーは、何かをしている最中の人の目にパッと入るものです。

背景を少し明るくしたり、写真とのコントラストを調整したりして、文字がストレスなく目に飛び込んでくる工夫をしましょう。

2．数字や記号を整えて「情報の主役」を明確にする

伝えたい数字を他の文字に合わせて大きさを調整し、補足的な記号を控えめに整える。

この細かな配慮が、洗練された印象を生みます。

Tips：Illustratorの生成AIでイラストを作る

3問目のバナーのように、文字の一部をイラストに変える「あしらい」は、季節感や雰囲気を伝えるデザインによく用いられます。

「イラストを作るのがむずかしそう…」という方でも、Illustratorの生成AI機能「ベクターを生成」や「生成塗りつぶし（シェイプ）」が強い味方になってくれます。

ゼロからイラストを作るなら「ベクターを生成」

特定のモチーフを新しく作りたいときは、「ベクターを生成」機能が便利です。

以下で基本的な手順をご紹介します。

1. 大きさの目安となるシェイプ（四角など）の図形を描く（色は生成されるイラストに影響しません）
2. 図形を選択した状態で、コンテキストタスクバーの「ベクターを生成」をクリック
3. 作りたいイラストのイメージをプロンプト欄に入力し、「生成」ボタンをクリック

これで、一度に3つの案のイラストが生成されます。

ベクターデータとして作られるので、後から色を変えたり、形を微調整したりするのもカンタンにできます。

バランスを見ながら文字と組み合わせれば完成です。

「立体的にしたい」「コミック風にしたい」など、イラストのテイストを指定するには、コンテキストタスクバーの歯車アイコンをクリックし、「効果」からイメージに近いものを選択しましょう。

形にこだわりたいなら「生成塗りつぶし（シェイプ）」

「夏」の文字のデザインでは、最後の「はらい」を水の流れのようにしたいと考えました。

このように、具体的な形を指定してイラストを生成したいときは、「生成塗りつぶし（シェイプ）」機能が便利です。

先に紹介した「ベクターを生成」がゼロからイラストを作るのに対し、この機能は「あらかじめ描いた図形の形を活かして、その中身を描き変える」という点が大きな違いです。

それでは、基本的な手順をご紹介します。

1. 形の目安となるシェイプを作成する
2. 図形を選択した状態で、コンテキストタスクバーの「生成塗りつぶし（シェイプ）」をクリック
3. 塗りつぶしたいイメージをプロンプト欄に入力し、「生成」ボタンをクリック

なお、「生成塗りつぶし（シェイプ）」では、作成したシェイプの形をどれくらい厳密に守るかを、3段階から選ぶことができます。

シェイプの形を厳密に守りたいときは「高め」に、大まかな形だけ参考にしたいときは「低め」に調整してみるのがコツです。

デザインに気軽にイラストを取り入れられる「ベクターを生成」と「生成塗りつぶし（シェイプ）」。

表現の幅を広げるツールとして、ぜひ活用してみてくださいね。

Illustratorの「ベクターを生成」機能について詳しく見る

お相手はウェブデザイナーのすぴかあやかでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。

※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。