- バナーをデザイン！サイトのブランディングを成功させよう！
そもそもバナーとは？
そもそも、バナーとは何でしょうか。単純な役割でいえば、バナーを配置しているWebページから別のWebページに誘導するためのもので、画像ファイルとして作成します。正確には、画像ファイルだけでは成り立たず、クリック先のWebページと対になってはじめて「バナー」だと考えてください。
画像ファイルで伝えている内容はリンク先のWebページを表現していることが通例で、バナーをクリックすることで、ユーザーがどのようなサイトに移動するかを想像できるようにデザインするのが一般的です。視覚的にひと目で飛び先のWebページの内容が想像できるようなデザインができれば成功といえます。
視覚的にひと目見て飛び先のWebページの内容が想像できる魅力的なバナーを作ることで、飛び先のWebページへ読者を誘導することができます。文字だけの情報よりも視覚に訴えかけることで広告宣伝効果は高く、「バナー広告」という形の広告も今では一般的になりました。
視覚的にはすっきり読みやすく、強調するべき部分が強調されていて洗練されたデザイン、思わずクリックしてしまいたくなるデザインなど、移動先サイトのイメージを活かしたバナーを作りましょう。
バナーを作る目的を理解してデザインしよう
バナーを作る際は、そのバナーの目的を明確にし、理解してからデザインするとブレずに納得できるデザインに仕上がります。基本的に、バナーはリンク先のWebページへの誘導が第一の目的です。クリックしてもらわないと接地した意味がありません。
誘導先のWebページをイメージしてもらうためにも、あまり文字だけに頼らず、情報を詰め込み過ぎず、視覚的に分かりやすいデザインをまずは心がけてみましょう。
バナーを設置する第二の目的は、Webページ内の情報整理です。バナーを見て直感的に次のWebページに飛んでいく手助けをするナビゲーターとしての役割もあります。自分でバナーをデザインする場合は、バナーを設置するWebページとデザインに統一性を持たせ、バナーだと分かりやすくする工夫も大切です。
バナーの作り方とデザインのポイント
バナーを作成する際、デザインのポイントとして押さえておきたいことを、ここで確認します。
- 飛び先のWebサイト（Webページ）の特徴をできる限り表す
- Webページ全体のデザインとのバランスを考える
- バナーのデータサイズは可能な限り軽く作る（表示時間短縮）
1番目と2番目の内容は、バナーの目的を明確にする際触れた内容です。この2つはマストで押さえておきましょう。
3番目の画像データをできる限り軽く作る、というのもユーザビリティ（操作性、心地いい体験）からすると重要です。インターネット回線の通信速度はどんどん速くなっているとはいえ、バナー広告を数多く掲載する場合も多く、ユーザーの通信速度が貧弱な環境で接続せざるを得ないシーンはまだまだ多く残っています。
画像ファイルとして作成したら、データ量が多くなっていないか確認して、必要に応じてファイルサイズの調整を行いましょう。ただ、あとからリサイズするとあまりきれいにならないため、できる限り制作中からサイズ量が多くならないバナーを目指しましょう。
Canvaで人気のバナーデザインテンプレート トップ10
ここで、Canvaを日本でご利用いただいている方たちが最も使っているバナーテンプレートのトップ10を紹介します。おしゃれなバナーからかわいいバナーまで、人気のテンプレートから自分オリジナルのバナーを作ることができます。お気に入りのテンプレートがありましたら、クリックすればすぐにCanvaで自分だけのおしゃれなバナーがデザインできます。
1位. カーネーション背景のラグジュアリーなバナーデザイン
母の日のメッセージにも使えるカーネーション背景のラグジュアリーなバナーデザイン。背景写真とテキストを変えれば簡単にオリジナルバナーのデザインに変更できます。
2位. サーモンピンクベースのかわいいバナーデザイン
手書き風のピンク背景とかわいい花のイラストでポップな印象のバナーデザインです。
3位. シンプルでクリーンな印象のバナーデザイン
時計とノートパソコンの写真を使ったシンプルなバナーデザインです。
4位. 猫がテーマのキャッチーなバナーデザイン
動物の写真を使ったかわいいデザインのバナーデザインテンプレートです。
5位. ヨットの写真で爽やかなイメージのバナーデザイン
青基調のヨットの写真と白い円を活用してとても爽やかな印象のバナーデザインです。
6位. フルーツの写真が印象的なバナーデザイン
カラフルなフルーツの写真を大胆に使ってキャッチー雰囲気のバナーデザインです。
7位. サーモンピンクのリーフモチーフ背景でまとめられた印象のバナーデザイン
サーモンピンクとベージュの2色で落ち着いたイメージでかわいい印象を残せるバナーデザインです。
8位. 夜景写真を使ったクールな印象の不動産系バナーデザイン
夜景写真がかっこいいクールな印象の不動産系バナーデザインです。
9位. アートな雰囲気のバナーデザインテンプレート
ぼやけたカラーの背景が印象的なアートエキシビションに使えるバナーデザインテンプレートです。
10位. オイルペインティング背景のカラフルなバナーデザイン
オイルペインティング背景を使ってカラフルに表現されたバナーデザインテンプレートです。
バナーのお手本になるデザイン事例
バナーのデザイン事例として、Canvaのテンプレートからいくつかのタイプを取り上げて紹介します。 いずれも無料のテンプレートばかりなので、文字や写真素材などを入れ替えることで簡単に洗練されたバナーをデザインできます。
・写真を背景にして文字を入れているタイプ
どちらも、背景の写真は暗めにして、白抜きにした文字を際立たせるように工夫しています。飛び先のWebページに相応しいイメージ画像があるなら、もっともシンプルに落ち着いたバナーを作成できます。
こちらは、背景の写真を一部覆うように文字を入れる部分を四角く切り抜いています。このパターンも、手軽にセンス良くデザインをまとめられる事例です。
・白ベースですっきりとした清潔感や高級感を出しているタイプ
背景が白ベースは清潔感があるデザインです。この例では、上品なチューリップが印象的ですが、文字の部分もしっかり目立っていて伝えることが明確になっています。
・色数を3色以内に抑えてポイントを絞って伝えたいことを目立たせているタイプ
これらのバナーは、すべて色数が3色以内になっていながら、訴求したいことはしっかりと伝えているデザイン例です。バナーをデザインするときはついカラフルにして目立たせようとしがちですが、色数は多くても3色と考えてデザインすると、返って伝わりやすいバナーを作りやすくなります。
・写真や画像をタイル状に敷き詰めてインパクトを出しているタイプ
複数の写真をタイル状にレイアウトしても、インパクトのあるバナーになります。背景に敷き詰める際は、並べる写真を同系統の色味に揃えるとごちゃつかず、見やすいバナーになります。文字を写真に重ねない場合は、文字はシンプルにすることで写真をより際立たせることができます。
バナー作成時のQ&A
バナー作成でよくある質問をQ&A形式でご紹介します。
Q1
バナーがごちゃごちゃしてしまう。すっきりさせるコツは？
A1:バナーの事例集でも紹介しましたが、バナーで使用する色は多くても原則3色までにしましょう。
メインカラー、サブカラー、アクセントカラーを決めて、後は文字の大きさやレイアウト、画像素材をうまく組み合わせてみてください。使用フォントの種類があまり多いとごちゃつきますので、使用数は絞りましょう。
Q2
バナーを配置したけれどあまりクリックしてもらえない…
A2:バナーをあまりクリックしてもらえない場合は、バナー自身のデザインか、Webページのレイアウトに問題があります。
バナーのデザインに関しては、情報を詰め込み過ぎていて、飛び先のWebページについての情報をシンプルに訴求できているかどうか、今一度確認してください。Webページのレイアウトに問題がある可能性も考え、バナーの配置や大きさなど配置の検証もいろいろ試してみてください。
Q3
複数サイズのバナーを作りたいけど、リサイズしたらデザインが崩れた…
A3:Canva Proをお試しください。作成したバナーの画像ファイルを、美しくリサイズできるようになります。30日間お試しで使えます。
この記事で紹介しきれないサービスはこちらで紹介されています！
こちらのバナー関連記事もおすすめです
