情報の優先順位を変えるのはNG！サイズ違いのバナーを制作するときにデザインで気をつけたい6つのポイント

バナー広告は、配信面によってアスペクト比（横幅と高さの比率）や推奨サイズが異なるため、バナーのサイズを変更する「リサイズ」と呼ばれる作業がたびたび発生します。

たとえば、1080×1080pxのバナーを600×600pxにリサイズしたい場合、アスペクト比はどちらも1:1なので、全体のサイズを縮小するだけで対応可能です。

しかし、これが9:16の縦型バナーのようにアスペクト比が異なるサイズへ変更したい場合、レイアウトを変更しないと不自然な余白ができたり、可読性が悪くなることがあります。また、たとえアスペクト比が同じだとしても、小さいバナーをそのまま拡大すると画質が低下してしまうこともあるため、リサイズにはさまざまな配慮が必要です。

本記事では、バナーをリサイズするときに違和感が出ないよう、デザインで気をつけたい6つのポイントを事例を交えながら解説します。

まずは各要素の優先順位を整理する

バナーをリサイズする際に変更するのは、主にレイアウトと各要素のサイズです。まずは、バナーの構成要素を確認しましょう。

構成要素には「メインコピー」「サブコピー」「CTA（コール・トゥ・アクション）」「写真・イラスト」などがあります。写真を大きく配置して商品のビジュアルを伝えるバナーや、メインコピーを1番目立つように配置したテキストメインのバナーなど、各要素の優先順位はバナーの目的によって異なります。

リサイズにおいて重要なのは、各要素の優先順位を整理したうえで、「どのように配置すればオリジナルのバナーと同じように情報が伝わるか？」を考えることです。

こちらのバナーを例に、各要素の優先順位を考えてみましょう。

オリジナルのバナーではメインコピーが1番目立っていますが、×の例はメインコピーよりもイラストやサブコピーが目立ってしまっていますね。また、CTAが1番上に来ているのでコピーよりも先にCTAが目に入ります。

〇の例のように、アスペクト比が変わっても情報の優先順位が変わらないようにデザインすることを意識しましょう。

リサイズ作業を効率的に進めるために、元のデザインデータを用意する

優先順位を整理したら、デザインツールを使って実際にリサイズしていきます。

オリジナルのバナーをもとにレイアウトや各要素のサイズを変更していきますが、このとき注意したいのは、完成したバナーを保存したJPEG・PNG・GIFといった拡張子のファイルではなく、元のデザインデータを用意することです。

元のデザインデータとは、たとえばPhotoshopで制作したバナーであればレイヤーありのPSDファイル（拡張子が「.psd」）、Illustratorで制作したバナーであれば未アウトラインのAIファイル（拡張子が「.ai」）のことです。その他のツールで制作した場合でも、「テキストや使用素材など、各要素が選択・変更できる状態のデータ」を用意するようにしましょう。

元のデザインデータがあると、1から素材やテキストを追加しなくても、要素のサイズを調整したり配置を変更するだけでリサイズできるので、効率的に進められます。

リサイズにおいて気をつけたいポイント

デザインデータを用意したら、いよいよリサイズ作業です。どのような点に注意すればよいか、見ていきましょう。

配信時の表示の仕方を確認し、セーフゾーン内に配置する

まずはじめに、制作予定のバナーがどんな風に掲載されるのかを必ずチェックします。

広告フォーマットによっては、バナー画像とは別に見出しやCTAなどが表示されるため、セーフゾーンが設けられているものがあります。セーフゾーンとは、要素が切れたり隠れたりせずに表示されるスペースのことです。

画像引用元：ストーリーズ広告とリール動画の広告のテキストオーバーレイとセーフゾーンについて | Metaビジネスヘルプセンター

たとえば、Meta広告のリールやストーリーズの場合、上記画像のイエローの領域にはプロフィールアイコンやいいねボタン、CTAなどバナーとは別の情報が表示されています。

広告フォーマットのセーフゾーンを事前に確認した上で、テキストやロゴなどの重要な要素は、セーフゾーン内に収まるように配置しましょう。

掲載する媒体やフォーマットによっては、上図のようにCTAを別途選択する欄があるため、バナー内での記載は省略しても良いでしょう。

掲載された時の全体像をしっかり描いて、構成を考えることが重要です。

レイアウトは視線誘導を意識する

オリジナルのバナーとアスペクト比が大きく異なる場合は、レイアウトを変更する必要があります。このときに押さえておきたいのが、視線誘導を意識することです。

人の視線は基本的に「上から下」へ移動し、同じ種類の情報が均等に配置されている場合は、「左上から斜め下方向」に向かってZの形で移動する傾向があります。

縦長サイズ（例：728×90）の場合は上→下、横長サイズ（例：300×1050）の場合は左→右に視線の流れができるようにすると自然です。

視線誘導については、こちらの記事で詳しく解説しています。

【視線誘導とは？】バナーやLP、資料に活かせる！目線の動きを意識したレイアウトパターン

要素の比率を変えない

各要素を拡大・縮小するときには、要素の比率を変えないようにします。

上記画像のオリジナルバナーは、イラストよりもメインコピーが大きく配置されていますが、×の例ではイラストの方がメインコピーよりも目立ってしまっています。これでは情報の優先順位が変わってしまうので、〇の例のように、配置が変わっても要素の比率は変えないように意識しましょう。

テキストも、文字間や行間で印象が変わるため、間隔はなるべくオリジナルバナーと変えないようにします。

テキストサイズ・可読性を担保する

リサイズ後も可読性を維持できるよう、テキストのサイズ感に注意が必要です。

サイズが小さくて見づらいかも……と、すべての文字を同じサイズにしてしまうと、かえって読みづらくなったり、情報の優先順位が変わってしまうので、ジャンプ率を保つようにします。ジャンプ率とは、文字や画像などのデザイン要素で、大きい要素と小さい要素の大きさの比率です。

ジャンプ率は保ったまま、配信面でテキストが小さくて読めない、または大きすぎてバランスが悪くならないように調整しましょう。

サイズが小さいバナーで見出しと本文が別途表示される場合は、省略するのも一つの手です。

余白のバランスが取れた配置にする

要素間の余白のバランスを保って配置することも重要です。

余白が狭すぎると情報が詰まりすぎて視覚的な圧迫感を与え、窮屈な印象になってしまいます（意図的にそういったデザインの場合は除きます）。

どうしても要素が入りきらない場合は、各要素の大きさを調整したり、なくても支障がない要素を削除することも検討してみてください。

逆に余白を空けすぎても、不自然になってしまうので注意しましょう。

画質の低下に注意する

元のデザインデータで一度小さくした写真・イラスト・ロゴなどの素材をリサイズ後のバナーサイズに合わせて拡大すると、画質が落ちてしまうことがあります。

そのような場合は、改めて画質の良い元の写真・イラスト・ロゴ素材をダウンロードし直し、追加するなどの対応を行いましょう。

Photoshopの場合、対象の素材のレイヤーをスマートオブジェクトに変換すると、拡大縮小を繰り返しても画質の劣化を防ぐことができます。オリジナルのバナーを作る際にリサイズを見越して対策しておけるとベストです。バナーの背景画像の幅が足りない場合は、「コンテンツに応じる」機能を使って画像を伸ばし、レイアウトを補うこともできます。

バナーの一部の要素が荒くなっていないか、制作後に改めて確認しましょう。

まとめ

これらのポイントを押さえれば、バナーのリサイズはスムーズにできると思います。

PhotoshopやIllustratorでバナーをリサイズするときは、同じデザインデータのファイル内（psd、aiなど）で元データを複製し並べて作業すると、元データと比較しながら作業できるのでおすすめです。

たとえサイズが大幅に変わっても、1番伝えたいことが一目でわかるようなバナーを制作できるかはデザイナーの腕の見せどころです。ぜひ今回伝えたポイントに注意しながら、リサイズに挑戦してみてくださいね。