デザイン サブスク デザイン定額サービスデザインサブスク・デザイン定額サービス センゾクデザイナー

トップ > お知らせ・コラム > 横長のバナーデザイン|必要なシーンやレイアウト、クリックされるポイントを解説

お知らせ・コラム

横長のバナーデザイン|必要なシーンやレイアウト、クリックされるポイントを解説

横長のバナーデザインとは


横長のバナーデザインは、以下のサイズがあります。

728 × 90(px)のビッグバナー
320×100のスマートフォン向けのモバイルバナー

大きいサイズなら表現に幅を出しやすく、テキストやイメージ画像が入り乱れた構成を採用する場合も珍しくありません。
小さなサイズのバナーはECサイトやオウンドメディアのコラム記事などのサイドバーでよく見かけます。とくにオーバーレイ形式はスクロールしても追従して表示され続けるため、認知の獲得や集客に効果的です。

 

横長のバナーが必要なシーンは?


横長のバナーはディスプレイ広告で使われます。Webサイトを閲覧中にサイドカラムやコンテンツの中部、下部に表示されるデジタル広告で、アプリの画面下部にも表示されます。
ディスプレイ広告の主要な広告媒体であるGDNやYDNでは、入稿可能なバナーサイズに細かな規定があり、ルールに沿ったサイズのバナーが求められます。600×500のサイズを選択すれば、必然的に横長のバナーが必要です。

自社やクライアントのWebサイトに設置するバナーでも、720×400、200×160のように横に長い広告バナーが使われます。たとえばECサイトのTOPページに大きく目立つビッグバナーを配置し、個別の商品ページや特集ページで小さなサイズのバナーを散りばめるパターンが一つです。

 

横長のバナーデザインレイアウト例

バナーのデザインがはじめての方は、いち早く慣れるためにも、型に当てはめる形で数をこなすのがおすすめです。横長のバナーで採用されやすいレイアウトを紹介します。

 

テキストのみ

スペースが狭くデザインで趣向を凝らしにくい横長のバナーではテキストのみの構成も一つの手段です。ユーザーに単調だと感じさせないために、文字色やサイズ、フォントにこだわり、コントラストを出すのがおすすめです。

 

テキスト+イラストや写真

出典:BANNER LIBRARY

テキストにイメージ画像を合わせるデザインはオーソドックスで無難です。デザイン初心者でも比較的取り組みやすく、自分なりの個性を出すこともできます。画像の配置を決めた後、テキストの場所を決めると効率的です。

 

ドロップキャップ

1文字目を大きく目立たせるドロップキャップは文字のみの構成でもインパクトを出しやすいデザインです。短いキャッチコピーと相性が良く、情報量が少なくても「もっと知りたい!」と感じさせやすいのが利点です。

 

斜め文字

出典:バナー広場

テキストを斜めに配置すると、途端にスピード感や勢いが増します。可読性が落ちない程度に文字を途切れさせ、スピーディーな印象を抱かせることができます。大きさの違うテキストをちりばめて全体の流れを出すのもポイントです。

 

出典:BANNER LIBRARY

シンプルなメインテキスト+補足テキストのレイアウトと差をつけたいときは帯がおすすめです。メリハリが生まれてコントラストが引き立ち、簡単に印象的なバナーができあがります。帯はテキストの内容は同じなのに差を感じさせる使い勝手の良い方法です。

 

クリックされる魅力的なバナーを作るポイント

バナーは作って終わりではなく、CTRを高められるからこそ価値があります。ユーザーを惹き付け、クリックにつながるバナー作りのポイントを紹介します。

1.可読性を高める

バナー広告では短時間の接触でユーザーの興味や関心を高める仕掛けが必要です。テキスト間でメリハリをつけたり、横幅を揃えたりなどの工夫が求められます。強弱のつけ方が弱く幅がバラバラだとユーザーにちぐはぐな印象を抱かせるため、文字のバランスも整えましょう。

 

2.ユーザーの視線の動きに配慮する

ユーザーの目線の動きを意識して、情報の伝え方やレイアウトを考えるのも重要です。左上→右上→左下→右下の順番で内容を確認するのが基本です。左上に最も重要で目立ちやすい情報を配置し、終点となる右下にはCTRのボタンリンクやテキストを置くのが効果的です。

 

3.フォントに統一感を出す

バナー内のテキストは統一感のあるフォントを選択すると、全体がスッキリした印象になります。一般的には力強いゴシック体はキャッチコピーに、薄いながら洗練した印象がある明朝体は本文に適しています。フォント以外にも文字のサイズや色にも気を配り、統一したデザインを追求しましょう。

 

4.テキストに合った画像を採用する

出典:バナー広場

クリック率は画像に登場するキャラクターやモデルによっても変化します。商品やデザインのイメージに近い画像を選択しましょう。またバナーは興味や関心を惹き付けるのが主たる目的なので、個性的でインパクトがある素材が適しています。

 

5.カラーは使い過ぎない

出典:バナー広場

デザインに慣れていない段階では何色ものカラーを取り入れず、2~3色にとどめるのがおすすめです。ベースカラーとメインカラーの2色構成、またはアクセントカラーをあしらった3色構成などが考えらえます。カラー選びでは地味な色と鮮やかな色のように対照的な構成にするとコントラストが引き立ちます。

 

6.レイアウトに沿った図形を選択する

図形を使用する場合は、横長のレイアウトを意識して素材を選定しましょう。たとえばサークル型は正方形のレイアウトにははまりますが、横に長いバナーでは余白が多く、うまくマッチしない傾向があります。横にボックスが配置された図形に変えると、一気にデザイン性が高まります。

 

7.伝えたいメッセージに優先順位をつける

限られた枠内でメッセージを明確に伝えるには情報の取捨選択が必要です。テキスト量が多過ぎたり、装飾が過剰だったりすると見づらくなって逆効果です。

 

デザインの参考になるギャラリーサイト

デザインに慣れていない方はギャラリーサイトで参考になる事例を見つけ、模倣することが第一歩です。おすすめのギャラリーサイトや各媒体の特徴を紹介します。

 

BANNER LIBRARY

BANNER LIBRARYはトレンドを押さえたデザインが多数見つかる国内でも屈指のギャラリーサイトです。ハッシュタグ機能つきで、参考にしたい画像を一覧形式で表示できます。更新頻度も多く、先進的なデザインを取り入れてオリジナリティあふれるバナーを作りたい方におすすめのサイトです。

 

バナー広場

バナー広場はデザインの数が豊富で、他のサイトと比較せずに十分なサンプルが手に入りやすいギャラリーサイトです。絞り込み検索機能が充実し、サイズやカラー、業種などさまざまな項目から選べる利便性を備えています。ディスプレイ広告で入稿サイズが決まっていても、同サイズのデザインを抽出して、効率的にレイアウトを見比べやすくなっています。

 

Bannnner.com

Bannner.comはクオリティが高いデザインが多数寄せられ、広告クリエイティブに携わる職業に就く方も参考になるギャラリーサイトです。カテゴリの種類が非常に豊富で「反復」や「gifアニメーション」などユニークな区分けがあります。状況に応じて細かな検索が可能なのはプロ向けのギャラリーサイトならではです。

 

Pinterest(ピンタレスト)

Pinterestは画像投稿型のSNSで、バナー専用のギャラリーサイトではありません。広告に限らず、幅広い観点で参考にしたいデザインを探したい方におすすめです。キーワード検索機能をフルに活用し、キーワードのかけ合わせを色々と試すうちに気に入った画像が見つかる場合もあります。

 

まとめ

スペースが小さい横長のバナーでは表現や伝え方を工夫して、一目で際立つデザインを作成しましょう。本記事でポイントをお伝えしましたが、実際に作業すると「うまくいっているか分からない」と悩む方もいます。横長のバナーデザインでお悩みならぜひセンゾクデザイナーにお問い合わせください。

一覧へ戻る >

お問い合わせ・資料請求

詳しい資料をダウンロードいただけます。
その他 お気軽にお問い合わせ・ご相談ください。