この文字のあしらい、どっちが正解？バナーの文字デザインのセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
ウェブデザイナーのすぴかあやかです。
今回、わたしは「バナーの文字デザイン」についてのクイズを出題します。
早速ですが、3問クイズを出します。
以下の3つの作例を見て、AとB、あなたはどちらのバナーの「文字のデザイン」がよいと感じますか？
1問目「メインコピーが伝わりやすいのはどっち？」（難易度★）
2問目「大事な情報が引き立っているのはどっち？」（難易度★★）
3問目「文字と商品のどちらも際立っているのはどっち？」（難易度★★★）
いかがでしたか？
わたしが考える答えは……
1問目の答え：A
2問目の答え：B
3問目の答え：A
以上がわたしなりの解答です。
あなたがよいと感じた「文字デザイン」は、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
1．文字は読みやすさを意識する
まずは1問目の振り返りです。
このクイズの題材は、学習塾のサイトへ誘導するバナーでした。
どちらもフォントや文字の大きさは同じですが、Bは写真に文字が紛れてしまい、「読めなくはないが、ちょっと目を細めてしまう」というレベルです。
もちろん、Bのようなあしらいが正解になるデザインもありますが、今回、Aを正解にしたのは「バナーのデザイン」ということがポイントとなっています。
「バナーは見てもらえない」という前提でデザインしよう
Webサイトのバナーは、例えば、ニュースサイトの記事ページやECサイトのトップページなどに設置され、「今いるページから他のページへ誘導する」ためのものです。
そのため、ユーザーにとっては「本来の目的（ニュースを読むなど）の妨げ」になりがち。
そんな状況の中で「これは！」と興味を引くのはカンタンではありません。
そもそも「不要だと感じられやすいもの」を、時間をかけてじっくりと見てくれる人は少ないでしょう。
だからこそ、じっくり読ませるのではなく、一瞬で「目に飛び込んでくる」視認性の高さが必要です。
文字を加工せず、背景を「明るく」してみよう
Aのバナーは、文字に「アピアランス：光彩（外側）」の加工をしているように見えますが、実は写真の上に「ぼかしたシェイプ」を置くことで、背景のごちゃごちゃした印象を抑え、スッキリと読みやすくしています。
その際のポイントは、白で隠してしまうと不自然な印象になるので、写真の中にある色を利用することです。
Adobe Illustratorで「ぼかしたシェイプ」を作る方法を、以下で解説します。
【手順1】背景から色を拾う
写真の背景からスポイトした色で、隠したい部分にざっくりシェイプを作成します。
写真から色を取得したいときは、［Shift］キーを押しながらクリックします。
【手順2】ぼかしを入れる
描いたシェイプを選択し、「アピアランス」パネルから「スタイライズ」＞「ぼかし」を選択し、境目がわからない程度に大きくぼかします。
【手順3】描画モードを調整
このままでは「隠した」感が強すぎるので、「透明」パネルで「描画モード：スクリーン」に設定します。
これで、先ほどまでベタッと隠れていた部分が、パッと光が当たったようになりました。
しかし、ここで問題が発生しました。
大きくぼかしを入れた影響で、手前の主役の女の子の顔にまで影響してしまいました。
主役を隠してしまっては元も子もないので、人物だけを切り抜いた写真を一番上に重ねて主役を立たせましょう。
バナーのような一瞬で目を惹くデザインでは、メリハリやインパクトを出すことが大事です。
どこを一番に目に入れてほしいのか、何を伝えたいのかを整理し、優先順位を付けて主役を立たせていくと、「目に飛び込んでくる」デザインに仕上がります。
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問目のテクニックと同様に、光彩の影響でケーキの一部まで明るくなってしまわないよう、「ケーキだけの切り抜き写真」を一番上に重ねることで、主役がパッと引き立つように仕上げています。
このように、バナーの重要な部分を視覚的に強調しつつ、写真がもつ世界観を損なわない工夫をすることで、ユーザーの心を掴む「伝わるデザイン」へと仕上がります。
ランダムな文字配置には「文字タッチツール」が便利
「春のレシピ」の文字のような遊び心のあるランダムなレイアウトを実装する際、文字をバラバラに打ち直したり、アウトライン化したりする必要はありません。
Illustratorの「文字タッチツール」を使えば、テキストデータの状態を保ったまま、配置を調整できます。
「文字タッチツール」の基本的な使い方を、以下で解説します。
【手順1】「文字タッチツール」を有効にする
まずは、「文字」パネルにある「文字タッチツール」をクリックします。
「文字」パネル内に「文字タッチツール」のボタンが見当たらない場合は、パネルメニューから「文字タッチツール」を有効にします。
【手順2】動かしたい文字を選択する
位置や角度を変えたい文字を直接クリックします。
すると、その一文字だけにバウンディングボックスが表示されます。
【手順3】レイアウトを調整する
表示されたボックスを操作して、以下の調整を行います。
- 移動： ドラッグして自由な位置へ調整
- 拡大・縮小： 角のハンドルを引いてサイズを変更
- 回転： 上部の丸いアイコンをドラッグして角度を調整
一見複雑な操作をしているように見えますが、内部的には「ベースラインシフト」や「カーニング」の数値を調整しているだけなので、後からのテキスト修正やリセットもカンタンです。
まとめ：バナーの文字デザインセンスを磨くポイント
今回はバナーの文字デザインに関するクイズと、デザインテクニックを取り上げました。
最後に今回のノウハウのまとめです。
1．「目に飛び込んでくる」視認性を最優先に
バナーは、何かをしている最中の人の目にパッと入るものです。
背景を少し明るくしたり、写真とのコントラストを調整したりして、文字がストレスなく目に飛び込んでくる工夫をしましょう。
2．数字や記号を整えて「情報の主役」を明確にする
伝えたい数字を他の文字に合わせて大きさを調整し、補足的な記号を控えめに整える。
この細かな配慮が、洗練された印象を生みます。
3．効果を重ねて「写真の魅力」と「文字の視認性」を両立させる
ひとつの効果に頼らず、役割の異なるエフェクトを重ねることで、写真の世界観を守りつつ、文字をくっきり立たせることができます。
バナーデザインの役割は、「美しいこと」だけではありません。
目に入らない、気がつかないバナーは「存在しないのと同じ」です。まずは目を留めてもらえること、そのためには「目に留まる工夫」「わかりやすさ」「読みやすさ」はとても大切です。
Illustratorの便利な機能を使いこなし、自分なりの「お客様に届くデザイン」をぜひ追求してみてください。
そのひと手間が、バナーのクリック率とクオリティを大きく変えるはずです。
ちなみに以下の記事では、バナーデザインの基本とコツを紹介しています。
Tips：Illustratorの生成AIでイラストを作る
3問目のバナーのように、文字の一部をイラストに変える「あしらい」は、季節感や雰囲気を伝えるデザインによく用いられます。
「イラストを作るのがむずかしそう…」という方でも、Illustratorの生成AI機能「ベクターを生成」や「生成塗りつぶし（シェイプ）」が強い味方になってくれます。
ゼロからイラストを作るなら「ベクターを生成」
特定のモチーフを新しく作りたいときは、「ベクターを生成」機能が便利です。
以下で基本的な手順をご紹介します。
- 大きさの目安となるシェイプ（四角など）の図形を描く（色は生成されるイラストに影響しません）
- 図形を選択した状態で、コンテキストタスクバーの「ベクターを生成」をクリック
- 作りたいイラストのイメージをプロンプト欄に入力し、「生成」ボタンをクリック
これで、一度に3つの案のイラストが生成されます。
ベクターデータとして作られるので、後から色を変えたり、形を微調整したりするのもカンタンにできます。
バランスを見ながら文字と組み合わせれば完成です。
「立体的にしたい」「コミック風にしたい」など、イラストのテイストを指定するには、コンテキストタスクバーの歯車アイコンをクリックし、「効果」からイメージに近いものを選択しましょう。
形にこだわりたいなら「生成塗りつぶし（シェイプ）」
「夏」の文字のデザインでは、最後の「はらい」を水の流れのようにしたいと考えました。
このように、具体的な形を指定してイラストを生成したいときは、「生成塗りつぶし（シェイプ）」機能が便利です。
先に紹介した「ベクターを生成」がゼロからイラストを作るのに対し、この機能は「あらかじめ描いた図形の形を活かして、その中身を描き変える」という点が大きな違いです。
それでは、基本的な手順をご紹介します。
- 形の目安となるシェイプを作成する
- 図形を選択した状態で、コンテキストタスクバーの「生成塗りつぶし（シェイプ）」をクリック
- 塗りつぶしたいイメージをプロンプト欄に入力し、「生成」ボタンをクリック
なお、「生成塗りつぶし（シェイプ）」では、作成したシェイプの形をどれくらい厳密に守るかを、3段階から選ぶことができます。
シェイプの形を厳密に守りたいときは「高め」に、大まかな形だけ参考にしたいときは「低め」に調整してみるのがコツです。
デザインに気軽にイラストを取り入れられる「ベクターを生成」と「生成塗りつぶし（シェイプ）」。
表現の幅を広げるツールとして、ぜひ活用してみてくださいね。
Illustratorの「ベクターを生成」機能について詳しく見る
お相手はウェブデザイナーのすぴかあやかでした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、それぞれのデザイナーが自身の感性で理想とするデザインを語っています。
クイズの答えはひとつの参考としてください。
執筆：すぴかあやか
株式会社キテレツ デザイナー・イラストレーター
1981年大阪生まれ。ウェブデザイナーとして制作会社でのアルバイトや社員を経て、2006年からフリーランスとして活動、2017年から株式会社キテレツに加入。イラストを取り入れたデザイン・ロゴやLPデザインなどを得意としている。
noteやXなどで、デザインの考えや日々の気づきを発信している。