ホームページのバナーデザインを作成する全手順【参考サイト&作り方】

この記事では参考サイトも交え、ホームページにおけるバナーデザインの作成手順を解説します。

ホームページのバナーデザインに関する基礎知識

バナーとは、ホームページ上で視覚的に目立つ広告や宣伝の役割を持った画像を指します。通常は広告として用いられ、他にもサイト内での情報や開催中のキャンペーンをアピールするためにも使われているのがバナーです。

はじめに次のトピック別で、ホームページのバナーデザインにおける基礎知識を解説します。 

バナーデザインとは？

バナーデザインとは、広告や宣伝のために作成されるバナーを視覚的にデザインすることです。広義では、視覚的なビジュアルを作ることだけではなく、バナーに記載するメッセージを考えることなども含みます。

そもそもバナー（Banner）は、英語から日本語に翻訳すると「旗」という意味です。街中の店舗でも、店頭や少し離れた場所にのぼりや看板を置いてあり、店内への誘導やどのようなサービスがあるのかを外のお客さんに向けて告知しています。

バナーデザインも店舗ののぼりや看板と同様です。Web上のホームページに誘導するため、他のホームページやSNSにてユーザーにアピールするための画像を作成します。サイト内キャンペーンをより目立つように、画像をデザインすることも該当するでしょう。

バナーデザインは、画像を作成しユーザーを呼び込むきっかけとなる制作物です。

ホームページにおけるバナーの役割

バナーデザインの重要な役割は、いかにユーザーの目を惹き、ホームページにアクセスしてもらうかということです。

バナーはホームページ自体、またはキャンペーンなどの「告知」をしています。ユーザーはこの告知であるバナーを見て、「実際に利用したい」と感じ、ホームページにアクセスするという行動を起こします。

この行動を起こすきっかけがバナーの役割です。ではバナーの役割として、具体的にどのようなポイントを押さえてWebデザインされているのか、細かく確認しましょう。

このようなポイントを意識してバナーからホームページに誘導するための告知が、ホームページにおけるバナーの役割です。

バナーデザインの種類

Webデザインのバナーは大きく分けて静的バナーと動的バナーの2種類があります。静的バナーと動的バナーの違いは次の表を確認してください。

静的バナー	画像やテキストを使用したシンプルなバナー。ユーザーの目を止めアクセスしてもらうための視線誘導が重要となります。
動的バナー	アニメーションやスライドを活用して動きを加えたバナー。動きがあることで注目を集めやすく、情報量を多くできるのが特徴です。

静的バナーの方が作りやすく一般的です。ただ、最近は動きによってより注目を集めやすい動的バナーも増えています。デザインツールのテンプレートを使用すれば動的バナーも作りやすいため、動的バナーが必要となった際には挑戦してみましょう。

最終的にはバナーの設置個所や伝えたいメッセージを確認して、静的バナーと動的バナーのどちらが合っているのか判断することが重要です。

一般的なバナーサイズ

Webデザインのバナーを作成する際には、サイズを事前に確認することが重要です。バナーサイズにはある程度決まったパターンがあります。

最近はInstagramなどのSNS広告に合う正方形のバナーも多いですが、やや横長のパターンが一般的です。代表としてここではGoogleとYahoo!の広告のバナーサイズを紹介します。

Googleで使用されている主なサイズは、次のようになります。

引用：Google広告ヘルプ

Yahoo!では公式のガイドラインとして、次のいずれかのサイズでの入稿が必須です。

引用：Yahoo!広告ヘルプ

バナーサイズを確認しないと、情報を入れる量やユーザーに見せたいイメージが確認できず、再度作成しなくてはいけない場合もあります。必ず事前にサイズを確認するようにしましょう。

ホームページのバナーデザインを作る方法

基礎知識を確認したら実際にバナーを作成してみましょう。ここから紹介するのはホームページのバナーを作成したい場合、大きく分けて次の2つの作成方法があるということです。

よくみかけるホームページのバナーは、一見すると作成が難しいと感じる人も多いのではないでしょうか。しかし、しっかり手順とポイントに気を付ければ、初心者でもおしゃれなWebデザインのバナーが作成できます。

この記事で2つの作成手順を紹介しますので、確認し自分に合う方法でホームページのバナーを作ってみてください。

0から自作する

0から自作する方法はWebデザインやテキストのフォント選択、レイアウトなどをすべて自分で考えて、ホームページのバナーを作る方法です。自作するといってもPhotoshopやIllustratorといったデザインツールは使用します。

Webデザインをテンプレートなど使用せず作成するため、デザインイメージの参考として、バナーデザインを紹介しているギャラリーサイトなどをチェックします。それを参考に自分で画像やフォントのレイアウトを考えていく方法です。

また、デザインツールのAdobe PhotoshopやIllustratorは有料ですが、操作性は自由度が高いものとなります。そのため自分でイメージしたWebデザインを反映しやすい作成方法です。

デザインツールで作成する

CanvaやVistaCreateなどデザインツールのテンプレートを使用する方法です。

デザインツールのテンプレートはプロのWebデザイナーが作成しているものも多く、綺麗でおしゃれに整ったものが多数公開されています。そのテンプレートの中から使用するものを選択し、目的に合うように内容を編集して作成する方法です。

例えばCanvaでは、有料版も含めると約61万点ものデザインが出来上がっているテンプレートが公開されています。

0から作成するよりも編集箇所が少なく時間も多くかかりません。Webデザインを始めたばかりの初心者でも、デザインされたテンプレートを使用して完成度の高いバナーを作成できます。

0からホームページのバナーデザインを自作する6ステップ

０から自作する方法は前述のとおり、自分でビジュアルのデザインやテキストのフォントを選択し、それらを組み合わせてレイアウトしていく方法です。

ただし単にその作業を進めれば良いというわけではありません。作成を始める前の事前準備などがポイントとなります。

ここからは、バナーデザインを自作する方法を6つのステップに分けて紹介します。

各ステップで作成手順を詳しく解説しているため、順を追って確認してみてください。この手順に沿って作成を進めれば0からホームページバナーが自作できるようになります。

STEP1 目的を明確にする

はじめに、作成するバナーデザインの目的を明確にしましょう。

作成するホームページのバナーでどのような内容を掲載するのか確認する必要があります。また、対象となるターゲット層もイメージをしましょう。

何を伝えたいのか明確にしなければ、バナーデザインにどのようなテキストが必要で、画像もどういったものを用意すればよいのかわかりません。また、対象となる人もバナーの意図を伝わりやすくするために考えることが重要です。

例えば、対象が若い人であればPOPで明るいイメージ、年齢が高い人であれば落ち着いて洗練されたバナーが注目を集めやすくなります。

この後のWebデザインにも大きく影響するため、目的と対象は明確にしましょう。

STEP2 広告のサイズと設置場所を確認する

目的の明確化をしたあとにもう一点事前に確認をした方が良いのは、作成したバナーが掲載される設置場所です。

掲載されるバナーは設置場所によってサイズが決まります。また、設置場所の周りは文字が多いのか画像が多いのか、配色なども確認をしましょう。

それによりどのようなバナーがユーザーに注目されやすいかイメージしてみてください。

次の図はYahoo!のページで、赤枠で囲った部分がバナー広告です。

 文字が多いため、画像が入ったバナーが目立ちます。またフォントの大きさも周りの文字よりも大きく読みやすいです。配色に関しても全体的に青い周りの色に比べて、赤色で目立つようになっています。

このように設置個所の周りと比較してユーザーの注目を集められるかどうか、確認することが必要です。

STEP3 メッセージを絞り込む

次は、キャッチコピーなどのメッセージを絞り込みます。メッセージは長くなりすぎないことが重要です。そのため、しっかりと考え短く作成できるようにしましょう。CTA（Call To Action）という行動喚起も確認をこの段階で行います。

次にバナーデザインに使用する各メッセージについて、解説をしますのでご確認ください。

キャッチコピー	広告のメインとなり短くインパクトのあるものにします。
サブメッセージ	商品やキャンペーンの詳細な情報を記載します。簡潔に必要事項をいれましょう。
CTA（行動喚起）	「今すぐ購入」「詳細はこちら」など行動を促す言葉を含めると効果的です。デザインにより入れない場合もあります。

あらためて、メッセージは長くなりすぎないことが重要です。しかし、あまりにもインパクトを重視して誇大広告や、必要な情報が記載されていないという状態は避けましょう。

STEP4 ビジュアルを作成する

続いてはバナーデザインの要ともなるビジュアルの作成です。文字のみのデザインもありますが、写真やイラストを用いたホームページバナーが一般的です。

画像を選定し、バナーデザインに合うように編集する手順となります。画像の選定には次のポイントに注目しましょう。

ここでいかにバナーデザインに合う画像を選定できるかが重要です。無料サイトだと上記のようなポイントを満たしたものが見つからない場合があります。

必要画像を有料のものから探すことや、必要に応じて切り抜いたり、色の調整を行ったりと加工することも重要です。

画像加工には写真などの編集に向いているPhotoshopなどを使用して作成を行います。また、イラストを作成する場合はIllustratorがおすすめです。

レイアウトを決める

次に用意したテキストとビジュアルを、PhotoshopやIllustratorなどのデザインツールを使用しレイアウトします。

バナーのレイアウトには一般的な型があり、その型を使用することで視線誘導と呼ばれるユーザーの読みやすさに繋がります。このレイアウトの型に沿ってテキストやビジュアルを配置をし、ユーザーの注目を集めやすいバナーを作成しましょう。

次の項目では一般的なレイアウトの型を紹介します。

F型	テキストを左側に寄せ、右側に画像を置く型。情報量が多い場合使用することが多い型となります。
Z型	左上から視点が始まりＺを描き、右下が視点の終わりとなる型。
N型	右上から視点が始まりＮの文字をなぞり、左下を視線の終わりとする型。縦書きのテキストを配置する場合に使用します。
フッター型	バナーの下部（フッター）にテキストを配置する型。下にテキスト情報が集まるため、バナー全体を占める画像が重要です。

上記のような型を使用して視線誘導を意識した配置をすることが、テキストとビジュアルのレイアウトには重要です。

STEP6 デザインの最終確認

最後には作成したバナーのWebデザインを確認します。仕上げとなる段階のため細かい部分もこだわって作成し確認しましょう。

文字の間違いがないかといった基本的なことから、バナーのデザインに統一感はあるかなど全体的な目線で確認することも重要です。

細かい部分では、デザインの4大原則ができているかなども確認します。デザインの4大原則は次に記載をしました。

上記は主にテキストや画像の配置や、フォントの大きさなどを確認する際に重要です。

また、自分一人で確認を行うと自身にとって都合よく考えてしまいます。できれば最後に他の人に見せ、アドバイスをもらうようにしましょう。

ツールを活用したホームページバナーデザインの作り方

0から作るのはハードルが高い、効率よくホームページのバナー作成をしたいという方におすすめの方法があります。それは、デザインツールのテンプレートを中心に進める作り方です。

ここからは5つのステップに分けて手順を解説します。

デザインツールにあるテンプレートはプロがデザインしたものが多く用意されています。そのテンプレートをベースにテキストや画像を変えてバナーデザインを完成させる作成方法です。

各ステップでデザインツールのテンプレートを使用して作成する手順を細かく説明していきます。 

STEP1 目的や対象を分析する

最初に、目的や対象を確認し分析することが重要となります。これはホームページのバナーを0から自作する場合のSTEP1と同じです。

テンプレートを使用する場合、ついテンプレートの中から何となく気に入ったもの、やおしゃれと感じたものを選んでバナー作成を始めてしまいがちです。そのようにするとWebデザインは綺麗だけれども内容が伝わらないものや、テンプレートに収まらず必要な情報が欠けているバナーになってしまいます。

そのため、事前に狙うべき目的・対象を確認し、綺麗なだけではない、内容がユーザーにしっかり伝わるバナーデザインにしましょう。

同じく事前にメッセージを絞り込むことやサイズの確認も行うことで、よりユーザーに注目されやすく意図が伝わるバナーになります。

STEP2 デザインツールを選ぶ

次は実際にテキストや画像を配置していくためのデザインツール選びです。おすすめはWebデザイン初心者でも使用しやすいCanvaや、動的バナー作成にも使えるVistaCreateです。

Canva	直感的に操作ができ、初心者でも使いやすく無料のテンプレートが豊富にあります。AI生成によるデザイン補助機能も搭載。
VistaCreate	WebコンテンツやInstagramなどSNS向けのテンプレートが充実。動きがあるデザインも豊富で動的バナーも簡単に作れます。

どちらもテンプレートには無料と有料のものがあります。

最初は無料のテンプレートを使って操作に慣れるのが良いでしょう。使用しやすいと思ったら、よりデザイン性が高いテンプレートを使用できる有料プランに移行がおすすめです。

STEP3 テンプレートを選ぶ

デザインツールを選んだら、公開されているテンプレートの中から目的や対象に合うテンプレートを選定します。例えば「セール」や「新商品発売」といったキーワードで検索し、作りたい内容と近いものを選んでください。

デザインツールのテンプレートについて、選定ポイントを次のようにまとめましたので参考にしてください。

あくまでテンプレートは「土台」となるものです。この後のステップでデザインイメージや目的に合わせてカスタマイズすることが重要です。

テンプレートを上手に選択し、効果的なバナーデザインを作成に繋げましょう。

STEP4 テンプレートを編集する

選定したテンプレートをもとにカスタマイズして編集を行っていきます。テンプレートに頼りすぎず、目的にあった編集をすることが重要です。

次の点を編集のポイントとして確認してください。

テキスト	事前に考えたメッセージに変更します。フォントをデザインされているものから変更する場合は、全体のイメージが崩れないように選ぶことが必要です。
画像	紹介する商品やサービスの画像に差し替えが必要です。画像を変更すると全体の色味に影響がでるため、配色を変更する必要があれば対応しましょう。
レイアウト	テキストの長さや画像で、テンプレートのデザインとバランスが変わっている場合があります。レイアウトを調整しましょう。

テンプレートから目的に合わせてカスタマイズしていくことが必要ですが、注意点もあります。それはカスタマイズを繰り返すうちにテンプレートの元の魅力が損なわれてしまうことです。

編集を重ねているうちに、修正をしすぎてプロの考えたデザインを崩してしまう場合があります。その場合は元のテンプレートデザインを見直し、必要ならばテンプレートを変更することも検討するようにしましょう。

STEP5 デザインの仕上げ

最後にテンプレートから変更した箇所を中心に入力ミスがないか、デザインのバランスが崩れていないかを確認することが重要です。またデザインの見た目だけでなく、「伝わりやすさ」「使いやすさ」「目的に沿っているか」を意識して最終チェックを行います。

プロが作成したテンプレートであっても、改めて次の3つの点を確認しましょう。

テンプレートで作成した場合でも、他の人の意見が聞ける場合はデザインを確認してもらいましょう。特にターゲット層と近い人の意見は参考になります。

バナーデザイン作成の参考になるギャラリーサイト8選

ここからはバナーデザイン作成の参考になるギャラリーサイトを、厳選して8つ紹介します。

色やフォント、レイアウトなどバナーデザインをする際は迷うポイントが多いです。バナーデザインのギャラリーサイトでは公開されているまたは公開されていたバナーが集まっており、バナー作成にあたってとても参考になります。

各サイトでバナーがカテゴリ分けされていることも多く、確認したいポイントごとに検索して参考にできます。

BANNER LIBRARY

BANNER LIBRARYはバナーデザインに特化したギャラリーサイトです。

それぞれのバナーにタグ付けがされており、タグからカテゴリー、テイスト、季節、形などで検索できます。自分がイメージしているバナーが探しやすいサイトです。

ランキングもありバナーのトレンドを確認できます。お気に入りリスト機能もあるため、参考となるバナーを何度も見返したいときにも便利です。

retrobanner

retrobannerもバナーデザインに特化したギャラリーサイトです。

サイズ、色、テイストに加え業種ごとに検索ができます。作成したいWebデザインイメージに対して、同じような要素を持ったバナーの確認ができるため、参考になります。

Webデザインに使用されている色もカラーコード付きでわかるため、配色に迷った際にも参考にしたいサイトです。

Bannner.com

Bannner.comもバナーデザインに特化し、クオリティ重視の厳選されたバナーを紹介しているギャラリーサイトです。

サイズや、取り扱っている内容のジャンルごと検索の他、「反復」「顔切り抜き」「写真メインなど」の項目で分かれています。ある程度作りたいイメージが定まっている場合に、高クオリティのバナーを参考にできます。

バナー広場

バナー広場もバナーデザインに特化し、更新頻度が高く掲載されている数が多いギャラリーサイトです。

検索カテゴリーも充実していますが、お気に入り機能が便利です。他の人がどのくらいそのバナーをお気に入りしているのか一目でわかります。

月間閲覧数ランキングもあるため、最新トレンドを把握できることもポイントです。

Meta広告ライブラリ

Meta広告ライブラリは、InstagramやFacebookにバナーを掲載したい場合には特に参考になるサイトです。Meta社が運営しているInstagramやFacebookに掲載されている広告をキーワードごとに検索ができます。

広告主である企業名でも検索できます。Instagramで見たなどとピンポイントに参考にしたい広告がある場合におすすめです。

インスタ広告集めました。

インスタ広告集めました。はギャラリーサイトではなくInstagramのアカウントです。質の高いInstagram広告を集めて投稿されています。

Instagramのため検索などはできませんが、Instagram広告の最新トレンドをチェックしたい場合に良いです。

クラウドワークスバナー作成コンペの採用一覧

クラウドワークスバナー作成コンペの採用一覧はクラウドワークス内のコンテンツです。クラウドソーシングサービスである「クラウドワークス」のコンペ形式で行われて採用されたバナーが一覧で見れるページです。

検索などはできませんが、多くの応募の中から選ばれたバナーが掲載されています。同じくコンペ形式のものに応募したり、クラウドソーシングで依頼されたバナーを作成したりする場合に参考になります。

Pinterest

Pinterestはバナーに限らずWebデザイン全般の参考になるサイトです。「Webデザイン バナー」で検索するとバナーデザインを確認できます。

また、検索すると似たテイストのWebデザインが表示されます。バナーに限らず参考になるWebデザインを、総合的に見ることができます。

バナーデザインをおしゃれに作る3つのコツ

なかには、バナーは作成できたものの「デザインがいまいち…」と感じている人もいますよね。

バナーは、短時間で視聴者の目を引きつけ、メッセージを伝えるための重要なWebデザインです。しかし情報を詰め込むだけではなく、見た目にもおしゃれで洗練された印象を与えることがポイントです。

ここではバナーデザインをおしゃれに作るコツを、3つにまとめて解説します。

コツ1 余白を増やす 

1つ目は余白を増やすことです。情報がぎっしり詰まったバナーは読み取りづらく、洗練された印象になりません。

バナー作成において、余白は洗練されたデザインに欠かせないものです。そのため、余白とバランスを意識した作成を心がけましょう。

テキストや画像が収まらないという場合は、フォントや画像を小さくするということも検討してみてください。また、テキスト間の余白を確保することや、画像なども含めて要素同士が近くに配置されすぎていないか確認することも重要です。

コツ2 フォント選定 

2つ目はどのようなフォントを使用するか選定することです。

大きくわけてゴシック体と明朝体という違いだけでも、同じテキストの場合でもフォントによって印象は大きく変わります。ユーザーに伝えたいメッセージが伝わりやすいフォントを選びましょう。

太字や装飾文字を効果的に使うとユーザーの視線を集められます。しかし多くのフォントを使用しすぎて雑多な印象になってしまう場合もあるため、使用するフォントは最小限に抑えましょう。

コツ3 配色にこだわる

3つ目は配色にこだわることです。配色はバナー全体の印象を大きく左右します。

おしゃれに見せるためには、適切なカラーパレットを選びましょう。主なポイントを次に記載しました。

カラーツールでは参考になるカラーパレットや1色選ぶとそれに合う色の組み合わせを調べられます。またトレンドカラーについて最近は淡い色が人気です。毎年、発表されるWeb業界のトレンドカラーをチェックするのもおすすめです。

ホームページのバナー作成時に気をつけたい3つのポイント

 初心者はインパクトや情報の内容を重視しすぎるあまり、バランスの崩れたバナーを作成しがちです。

そこでここからはホームページのバナー作成時に気をつけたいポイントを、3つにまとめて紹介します。

ポイント1：情報量が多すぎる

ホームページのバナー作成において情報量が多くなりすぎることは、初心者が特にやってしまいがちなミスの1つです。ユーザーに情報の全てを伝えたい気持ちが強くなってしまうと、結果としてごちゃごちゃとしてしまいます。

情報が多くなりすぎないために次の点に気を付けましょう。

バナーがある程度できたら、そのバナーをもっとシンプルにできるか考えてみてください。最初のうちはいかに伝えたい情報を短く簡潔に伝えるかを目指しましょう。

ポイント2：文字サイズが合っていない

テキストについて綺麗で内容に合っているフォントを選んでも、文字のサイズの調整ができていない場合があります。そうするとWebデザイン全体のバランスが悪くなってしまいます。次の点について気を付けましょう。

バナーを作っている間にバナー全体の拡大や縮小を繰り返していると、適切な文字のサイズから外れてしまうことがあります。完成前の最後のチェックで実物大のサイズで表示し確認することが重要です。

ポイント3：デザインの一貫性がない

テキストをシンプルにし、画像を綺麗なものを選んでもなぜかまとまりがない…という場合があります。それはバナーデザインの一貫性が足りていないのではないでしょうか。

上記の点を意識してみてください。Webデザインの一貫性がないとおしゃれではない印象を受け、伝えるべき情報も伝わりにくくなってしまいます。最後には統一感があるか改めて見直しましょう。

独学でのWebデザインやバナー作成に行き詰ったら

ここまでホームページバナーの作成手順を解説しました。しかし、なかには

と不安な人もいますよね。

いざ独学でWebデザインを学び始めても、勉強の最中に挫折してしまっては学習にかけた時間を悔やむだけでなく「バナーを作成するのって思っていたよりも難しいんだな…」と制作自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、Webデザイナーへの就業や副業での収入獲得が実現できる実践的なスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER（侍エンジニア）」です。

料金	月分割4.098円~
実績	・累計指導実績4万5,000名以上 ・受講生の学習完了率98% ・受講生の転職成功率99%

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。具体的には

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境でWebデザイン学習を進められるといえます。

また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもWebデザイナーへの就職や転職に必要なスキルだけを効率的に習得可能です。

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なお、侍エンジニアでは最大80%OFFで受講可能な「給付金コース」を提供中。金銭面での支援を受けつつ、理想のキャリア実現に向けたスキルの習得から、転職活動・就業後のフォローアップ(※1)までを一貫してサポートしてもらえます。

※1：転職後の1年間、転職先での継続的な就業や転職に伴う賃金上昇などのフォローアップ

学習と金銭面をどちらもサポートしてくれる侍エンジニアなら、未経験からでも安心してWebデザイナーを目指すことができますよ。

公式サイトで詳細を見る

まとめ

今回はホームページのバナーに関する基礎知識と作成手順、参考になるギャラリーサイトを紹介しました。

 紹介した手順や参考ギャラリーサイトをもとにバナー作成を始めてみましょう。バナー作成はWebデザインの基本的なポイントが詰まっています。バナー作成がスムーズにできるようになったらホームページなどのWebデザインに進むと良いですよ。

ぜひこの記事を参考にバナー作成に挑戦してみてくださいね。

この記事の監修者