こんにちは。あいりです。
デザイン初心者も簡単におしゃれなバナーが作成できるコツがあります。
ブログ、ホームページにバナーを貼りたいけど、自分で作成できない。
デザインセンスはないし、デザイナーさんにどうやって頼めばいいのか分からないので自分で作成したいと考えている方はいらっしゃいますでしょうか。
そんなあなたでも、作成ポイントを押さえて、無料ツールを使用すれば自分でバナーを作成することができます。
バナーの種類によりますが、早くて10分くらいで作成できてしまいます。
これからバナーの作成のポイントについてご紹介します。
目次
バナーのコンセプトを決める
バナーを作成する前に、訴えたいターゲット像を決めていきます。
ターゲットをもとにバナーのデザインを行っていきます。
ターゲット像の決め方：
１．ブレークダウンを行う
思いついた言葉から、ツリーのように関連する言葉をどんどんあげていきます。
２．ブレイクダウンした言葉をマトリックス図に置いてみる
マトリックス図を使用することで、ターゲット像を選定しやすくします。
バナーの作り方の基本コツ
バナーを作成する基本のコツがあります。
１．文字が主役
あくまでイラスト、画像は脇役なので、文字は見やすく、できるだけ大きくしましょう。
背景画像はぼかすなり、色を薄くするなり、文字を目立たせる工夫をしましょう。
２．文字数が少なく、端的に伝えられている
キャッチコピーで訴求しましょう。
文字数が多いとバナーを見るユーザは離れてしまいます。
３．余白のバランスに気を付ける
余白の左右上下が合っていないとレイアウトのバランスが崩れてしまいます。
※なるべく余白は埋めるようにしましょう。
無駄な余白は寂しい印象を与えてしまいます。
４．自分がこうしたいイメージの参考を見つけること
頭のなかでイメージするのではなく、実際に世に出回っているバナーを見ながら、自分がこうしたいイメージにあった色、雰囲気のものを見つけましょう。
参考になるバナーを見つけたら、ストックしましょう。
文字の色を決める時などに参考のバナーで使用されている色のカラーコードを調べて、そのまま利用するとよいです。
画像からカラーコードを抽出する「配色見本帳」というブラウザツールがありますので、こちらを利用してみましょう。
５．目でぱっと見たとき、すぐにどんな内容のバナーであるか分かること
６．バナーを見て自分が当事者である意識を高める訴求であること
訴求コピーを考える上で、当事者である意識を持つことが大切です。
７．バナーのターゲットにあったデザインであること（配色、テイスト）
８．左から右への視点の流れを意識している
人の視線の動きは左から右へ流れていくので、重要な箇所は左側に入れるようにしましょう。
９．バナーの遷移先（ホームページ、ランディングページ）と内容、テイストが合っている
1０．訴求する要素に優先順位があり、重要度が高いものから強調している
バナーの広告サイズ
PC版のGoogleに掲載されるバナー広告サイズが大体決まっており、以下でございます。
既定の広告サイズでバナーを作成しましょう。
サイズ一覧：
スクエア 横250×縦250
スクエア（小）横200×縦200
バナー 横468×縦60
ビックバナー 横728×縦90
レクタングル 横300×縦250
レクタングル（大） 横336×縦280
スカイスクレイパー 横120×縦600
ワイド スカイスクレイパー 横160×縦600
ハーフページ広告 横300×縦600
ビッグバナー（大） 横970×縦90
モバイルビックバナー 横320×縦50
簡単！無料！バナーデザインの作り方
簡単にバナー作成が無料でできる方法がありますのでご紹介します。
無料で簡単作成できるサイト「バナー工房」のバナーの作り方
オススメ度★★
オススメな点：
・商用として無料で使用できるほか、デザインにクレジット表記がない
・カテゴリ、色別のサンプルバナーを選択し、サンプルバナーを編集するだけ
「バナー工房」サイトの表示方法：
Googleなどで「バナー工房 無料で使えるバナー作成素材」と入力し検索して頂くとバナー工房で無料で使えるバナー作成素材のページが表示されます。
やり方：
１．カテゴリ、カラー、サイズの中から、お好みのデザインを選択
「このバナーを加工する」を選択し、画像に入れたい文字を入力します。
デザインの種類はかなり多めです。
２．文字の設定
・文字の大きさ
・文字色
・影
・文字枠
・文字の間隔
などを設定していきます。
設定しましたら、「STEP① 文字設定を変更・反映」を選択すると、設定した内容が反映されます。
３．上部のタブにある「保存」を選択
あらかじめテンプレートがあるので、あとはテキストを入れるだけでバナーが作成できました。
無料おしゃれなテンプレート、画像沢山！「canva」サイトでの作り方
オススメ度★★★
オススメな点：
・無料でcanvaが用意しているテンプレートを使用して作成するか、canvaが用意している画像または自分で撮影した写真を使用して作成することができる
・テンプレート、画像のクオリティが高いので、短時間で質の高いデザインを作成することができる
canvaを使用する際は無料アカウント登録が必要です。
また、素材、テンプレートの一部が有料になっているところもあります。
やり方：
１．お好みの画像を選択
左横にある「素材」を選択する。
選択すると３つのタブから「写真」を選択します。
無料の写真から表示されますので、画像を選びます。
選択すると白い作業スペースに選択した画像が挿入されます。
２．画像のサイズを決める
画像の端をクリックして、移動させるとサイズを変更することができ、サイズの数値（幅、高さ）も確認できます。
３．画像を編集
画像をクリックすると、上部のバーに画像を編集する用の以下の機能が表示されます。
それぞれお好みで調整しましょう。
・フィルター
セピア、モノクロ、青みがった色などに編集できます。
・調整
明暗、ぼかし、色合い、彩度の調整ができます。
・切り抜き
・反転
４．テキストを挿入
左横にある「テキスト」を選択します。
「テキストボックスの追加」を選択すると、テキストが挿入されます。
５．テキストを編集
テキストを選択すると、上部のバーにテキストを編集する用の以下の機能が表示されます。
・テキストのサイズ
・文字間隔
・フォントスタイル
・文字色
・大文字設定
・文字の配置
※文字を強調させるのに有効な影を出す機能はありません。
自分で作成する必要があります。
作成方法は後ほど、ご紹介します。
６．図形、イラストを挿入
左横にある「素材」を選択する。
選択すると３つのタブから「グラフィック」を選択します。
図形、イラストが表示されます。選択すると挿入されます
７．作成が完了したら「ダウンロード」を選択
これでお好みで選択した画像でテキストや図形を挿入し、編集することでバナーを制作することができました。
※canvaには文字を強調させる方法として「文字に影をつける」という機能がないので、自分で文字を編集して作成する必要があります。
canvaで文字の影を出す方法
canvaで文字の影を出す方法をご紹介します。
やり方：
１．同じ大きさの文字を二つ用意する
（文字の大きさ、フォントスタイルを同じにすること）
２．文字を重ね合わせていく
文字を完全に重ねるのではなく、少し重なるぐらいでよいです。
そうすると、文字に影がついているように見えます。
おすすめバナー参考デザイン集サイト
オススメのバナー参考デザインが多く掲載されているサイトをご紹介します。
Retrobanner
オススメ度★★
・サイズ別、業種別、色別に参考バナーを検索できる
・バナーで使用されている配色コードが確認できる
・9420種類ほどの参考バナーが掲載されている
・バナーデザインのクオリティが低いものがあるので、参考にする際は注意が必要
Banner Matome
オススメ度★
・21300種類ほどの参考バナーが掲載されている
・業種別、色別、テイスト別に参考バナーを検索できる
・掲載されているバナーは300×250のスクエアタイプのバナーがメイン。他のサイズのバナーを探すには不適
Banner Design Archive
オススメ度★★
・サイズ別、業種別、色別に参考バナーを検索できる
・バナーデザインのクオリティが低いものがあるので、参考にする際は注意が必要
最後に
無料ツールを使用して、簡単に高品質はバナーを作成することができます。
私もcanvaで使用してバナーを作成したら２０分で完成しました。
こんな便利ツールを使わない手はありません。
バナー作成を楽しんでくださいね。
