WEBデザイン

ネットショップ用バナーの作り方!現役ネットショップオーナー直伝!

バナーを作らないといけないけどデザインセンスが無さすぎてバナーが作れない。どこから手を出せばいいの?

バナー作成にデザインセンスは不要!作り方さえ知っていれば当てはめるだけで作る事が出来ます。

本記事はこんな方におすすめ

  • デザイン初心者だけどバナー作りを任された人向け
  • ネットショップ専用のバナーの作り方を知りたい人向け
  • 売るためのバナー作りをしたい人向け

 

 

この記事を書いたのはこんな人

元デザイン音痴。色々なデザインセミナーに通った結果、楽天本社のデザインアドバイザーからお墨付きを貰えるレベルに成長!

現在は自社ネットショップのデザインを全て管理している現役ネットショップオーナー。

 

読者への前置きメッセージ

本記事はデザインセンス0の超初心者向けに書いています。

本記事を読む事で、どんなデザイン音痴でもプロ級のバナーを作成できるようになります。

 

実際に私自身が超ど級のデザイン音痴で、「デザインって何?かっこいいの定義が分からない」なんて言うデザイナーとして致命的なデザイナーです。

そんな私が3年間デザインを必死に勉強して見つけた『ド素人でもココさえ抑えとけばプロ並みのデザインになる方法』をまとめました。

このポイントを使ったデザインは大企業のプロのデザイナーからも好評で、実際にデザイン系の案件なども頂けるようになりました。

そんな私が使っているデザインセンス0でもWEBデザイナーとして活動できるコツをお伝えします。

 

バナーとは

バナーとは、ショップへ訪れたお客さんにとって必要な商品を知らせる広告画像。

例えば【ドッグフード】で検索してショップへたどり着いた場合、そのお客さんの特徴は『犬を飼っている』わけなので

  • 新作もありますよ
  • 犬用の食器もありますよ
  • ブラシもありますよ
  • シャンプーもありますよ

みたいな事を伝えてあげるとお客さんにとって役に立ちますよね。

 

勘違いしたショップがやってしまうのは『自分たちが売りたい商品』をバナーにしてしまう事。

 

当然ビジネスなので利益率が高い商品を売りたいのは分かります。

しかし、自分達が売りたい商品とお客さんが欲しい商品は違う。

 

心理学的にも『人は売り込まれるのを嫌う』っと言われています。

売り込みが強すぎるとお客さんって逃げちゃうんですね。

 

なので、バナーを作る時にはショップへ訪れてくれたお客さんにとって『何を伝えれば役に立つのか?』『何が必要なのか?』を考えた上で必要になりそうな物を紹介してあげるんです。

これがネットショップにおける本来のバナーの意味となっています。

 

バナーのサイズはいくつがいいの?

バナーサイズに関しては視認性が良くショップの雰囲気を壊さない程度であれば正直いくつでもOK。

なぜかと言うと、『バナーが大きいから売れる』『バナーが小さいから売れない』と言う物ではなく、バナーはあくまで商品の存在を知らせるためのもの。

売れるか売れないかはバナーで飛んだ先の商品ページの力によります。

 

なので300×200でも150×720でも、サイトの雰囲気を壊さない程度に目につくサイズであればOK。

 

なんでもOKって言われても具体的な数字が分かった方が作りやすいんだけど

って人もいると思うので参考までに一般的なサイズをまとめました。

 

パソコン画面用バナーサイズ

  • 728×90
  • 350×240
  • 336×240
  • 300×250

パソコン用のバナーは基本的に横長、縦長の物が比較的多いです。

パソコンの画面自体が大きいので視認性を重視して長くなりがちなんですね。

 

スマホ画面用バナーサイズ

  • 350×250
  • 336×336
  • 300×250

スマホは縦スクロールで見ていくので、正方形もしくは正方形に近い横長サイズが主流。

画面j自体が小さいのである程度画像の高さがないと何を書いてるのか分かりません。

困った時には正方形で作っておくと視認性の高いバナー画像を作る事が出来ますよ。

 

バナー作成に必要なツール

バナーに限らずデザインをするには必ずデザインツールと言う物が必要になります。

ここでは代表的なデザインツールをご紹介します。

デザイナーには必須なので必ずどれかを入れておいた方が良いですね。

 

Windows・Macで使えるデザインツール

WindowsやMacなどパソコン用に作られたデザインツールがこちら

Adobe Photoshop & Adobe Illustrator(有料)

最も有名なデザインツールとしてAdobe製の『Photoshop』や『Illustrator』があります。

  • Photoshop・・・写真加工が得意
  • Illustrator・・・アイコンなどのベクターイメージが得意

基本的にバナー作成にはIllustratorを使用するのですが、企業や学校によってはIllustratorでやるような作業をPhotoshopでやっていたりします。

費用面でIllustratorを導入出来ない場合などもあるので、企業でバナー作成をする時には一応Photoshopでも作れる方が重宝されます。

 

Adobe製品も現在は月額制になっており、PhotoshopやIllustratorがだいぶ安く利用できるようになりました。

企業間でのデータ受け渡しがある場合にはAdobe一択ですので、Adobe製品を買っておくのが間違いないです。

Adobe公式URL:https://www.adobe.com/jp/

 

Affinity photo & affinity designer(有料)

「Adobe製品は高いよ!買い切りが良いよ!社内でしかデータは使わない!」って人にはこちら『Affinity』がおすすめです。

別名Adobeキラーと言われており、AdobeのPhotoshopやIllustratorの対抗馬として開発されたツールです。

  • Affinity Photo・・・Photoshopと同性能
  • Affinity designer・・・Illustratorと同性能

PhotoshopやIllustratorで出来るような事はほぼ出来るけれど使い勝手がかなり違います。

例えばAdobe製品のスポイトはAdobe内の色しか取得出来ないのに対し、Affinityだとブラウザ内や別のアプリに表示されている色をそのまま吸い取る事が出来ます。

他にもPhotoshopでは文字にアウトラインをつけるのに手間がかかりますが、Affinity photoでは右クリックで『レイヤエフェクト』を選択すると簡単にアウトラインをつける事ができます。

 

買い切り6,100円でアップデートも無料なのでお財布にやさしい本格派のデザインツールになります。

Affinity公式URL:https://affinity.serif.com/ja-jp/

 

 

GIMP(無料)

昔からある無料デザインツールの定番『GIMP』です。

フリーソフトなので機能面ではAdobeやAffinityに大きく劣ります。

 

GIMPが必要な人と言うのは、「デザインソフトなんて年1回くらいしか使わないから無料でいい!」って人くらいでしょうか。

本格的な事をやろうとするのなら有料ソフトは必須なので、デザイナーとして活動するのなら優先的に選ぶようなツールではないですね。

無料で使えるのでデザインの体験として導入される場合にはこちらからどうぞ

 

GIMP公式URL:https://www.gimp.org/

 

バナープラスV2

とにかく簡単にクオリティが高いバナーを作りたい時にはバナープラスが役立ちます。

株式会社ウェブライダーと言うWEBマーケティング、SEOの世界で有名な松尾茂起さんが代表を務める企業が作ったソフトウェアで、初心者でも簡単に華やかなヘッダーやバナーを作れるのが特徴。

4,400個の素材や文字装飾、さらには独自のキャラクターも作る事が出来てバナー制作に役立つ機能が豊富の取り揃えられてます。

 

バナー作りの構成に役立つバナーサンプルやデザイン基礎マニュアル、プロが作ったデザインプロファイルもついてるのでデザイン作りの参考資料としても活用できます。

専用フォーラムではプロのWEBデザイナーからデザインアドバイスを貰える特典付き。

デザイン初心者にはありがたい機能が満載ですね。

 

バナープラスV2公式URL:https://rider-store.jp/banner-plus/

 

iPad・iPhone・androidで使えるデザインアプリ

最近はタブレット端末やスマートフォンでも利用出来るデザインアプリが増えてきました。

ここではスマートフォン用のデザインアプリを紹介します。

 

Canva

SNSを中心に話題になっているデザインアプリが『Canva』になります。

最初から色々なテンプレートが用意されていて、画像や文字を差し替えるだけでオリジナルヘッダーやバナーが作れたりする優れもの!

自分で最初からデザインを考える必要がないのでお手軽におしゃれなデザインを作る事ができます。

 

機能が少ないので本格的なバナーを作るのには向いていませんが、スマートフォン1台で簡単に作る事が出来るのでいま人気のアプリとなっています。

欠点としてはテンプレートをベースに作っていくので、似たデザインになってしまう所ですね。

Canva公式URL:https://www.canva.com/

 

バナー作成のコツ

ここからはバナーを作る時のコツについて紹介します。

バナーのデザインがうまくいかない時にご活用ください。

 

 

下準備

バナーを作る時に重要なのは下準備をしっかりする事です。

下準備が出来ていればバナー作成はほぼ8割は完成です。

 

伝えたい事を決めておく

バナー作成では『誰に』『何を』伝えるかを最初に決めておく必要があります。

なぜかと言うと、高齢者向けのバナーだと文字を大きく見やすくしたり、女性向けのバナーだとおしゃれでキレイな配色にしたりとターゲットによってバナーの作り方が変わってきます。

最初の時点で『誰に』『何を』伝えるかを決めておけば全体的なデザインの構成も浮かんでくるからです。

 

バナーのサイズを決める

バナーサイズを最初に決めるのは必須です。

例えば投稿する予定のサイトの横幅が900pxなのに1100pxで横長バナーなんて作ったらサイトのレイアウトが完全に崩れてしまいますね。

設置する場所を決めたら横幅が何pxで縦幅が何pxかをしっかりと測ってから作らないと完成した後に作り直すような事になってしまいます。

 

pxの計算をする時にはChromeでF12を押してみてください。

Chromeの開発機能画面が表示されますので、そこで近場のバナーや画像などのpxを見て計算する事が出来ます。

他にもpx定規って言う物があってパソコンの画面上にpxを測る定規を表示させる事が出来ます。

Chromeの拡張機能にあるので大雑把な目安として活用しています。

拡張機能:「Edge:The Web Ruler

 

素材を集める

バナーで必要な素材を集めます。

商品写真だったりアイコンだったりバナーで使う素材を集めておく事でバナーを作っている時に迷う事が無くなります。

バナーを作っている時に素材集めをしてしまうと他にも良いのがあるような気になり目移りしてしまいます。

バナー用の素材は最初の時点で集めておいた方が結果的に早くて質の高いものを作る事が出来ます。

 

フォント

フォントの種類や大きさによって見やすさや伝わりやすさが大きく変わってきます。

ここではバナーで使いやすいフォントのポイントをお伝えします。

 

ゴシック体を基本にする

バナーや商品画像などWEBデザインでは基本的にゴシック体を中心にデザイン設計をしていきます。

なぜかと言うとバナーや商品画像に必要なのはオシャレなデザインではなく、必要な事を必要な人に伝える事です。

ゴシック体は認知力が高く、誠実なイメージを与える事が出来ます。

バナーのように読んで貰う事を前提に作る画像にはゴシック体がぴったりなんです。

 

違うフォントを使う時は思いっきり違うフォントを使う

ゴシック体以外のフォントも使いたい時には思いっきり違うフォントを選びます。

なぜかと言うと、メインで使っているゴシック体に似たフォントを使ってしまうと見ている側から

「あれ?フォントミス?」と言うようにただ間違ってフォントを使っているように見えてしまいます。

フォントに気づかなかったとしても微妙に違うだけのフォントの場合には無意識に気持ち悪さと言うのが出てきてしまうのです。

違うフォントを使いたい時には、誰が見ても一発で分かるような全然違うフォントを使った方がバランスが取れます。

 

フォントの大きさに強弱をつける

フォントの大きさに強弱をつけて主張したい部分を引き立たせます。

フォントの大きさについては広告だけに限らず、テレビや雑誌、新聞紙などでもよく使われている技術なので馴染みがあるかと思います。

目立たせたい所はフォントの文字を大きくする事で注目を集める事が出来ます。

 

配色

デザインが苦手な人が最も苦戦するのが配色です。

私も相当悩まされました。

その経験を生かして配色の事をお伝えします。

 

配色の基本

配色には3つのカラーが存在します。それが下の

  • メインカラー・・・バナー内で一番面積の多い色
  • サブカラー・・・メインカラーの反対あたりにある色
  • アクセントカラー・・・メインカラーの反対付近にある色でサブカラーとは違う色

の3つのカラーです。

 

そんな事言われても使い方がわからないよ~

 

安心してください。

この配色に関しては秘伝技があります。

それは、『自然界に存在する配色をパクる!

 

例えば、『てんとうむし』から色をパクってみましょう。

『てんとうむし』の配色は『赤』と『黒』ですね。

もう1色ほしいので『草に止まっているてんとうむし』をイメージすると『緑』が出てきます。

これで配色が出来ました。

 

基本的に自然界に存在する配色は人の目から見てキレイと感じるような配色で出来ている事が多いです。

『花に止まる蝶』『南国の海』『森林』これらをイメージしたり、実際にフリー画像から配色をパクってみても良いです。

自然界に存在する色を3つパクってキレイな配色でデザインしていきます。

 

コントラスト

コントラストとは明るさと暗さの差の事、色と色の差のように対象物同士の差の事です。

いきなり初心者にコントラストの調整をしろと言っても無理だと思います。

そこで、誰でも出来るコントラストの使い方を言うと『はっきり分かれるまでコントラストの差を大きくする』

理由は、コントラストをしっかりとつける事でデザインが引き締まって分かりやすくなるからです。

その後に、目にきつすぎないくらいコントラストを下げていく。

 

何も知らない最初の状態から微妙に調整しようとするから迷いが出るんです。

知らないなら知らないなりに振り切ってしまった方がバランスが取れるようになります。

 

原色は使わない

バナーや商品画像の鉄則として原色は使いません。

原色って言うのは簡単に言うと『真っ赤』とか『真っ青』とか『真っ黄色』みたいな色の基本となるような色たちの事です。

 

原色をなぜ使ってはいけないのか?それは原色って言うのは非常に目に対しての刺激が強くてちょっと見てて辛いんですね。

現実世界で言うなら太陽をずっと見続けろ!って言われるような物です。辛いでしょう?

なので原色のように「見てて辛いな」って思う色は使わずに、『赤』でもちょっと黒を混ぜて黒っぽい赤にするとか色を落ち着けて使います。

 

レイアウト

何気にデザインで一番簡単なのはレイアウトです。

レイアウトはすでにある程度決まりがあってテンプレート通りに当てはめるだけで「それっぽく」見えます。

ここではレイアウトについて説明します。

 

余白でデザインする

レイアウトで一番重要なのは余白です。

余白って言うのは主張させたい事を強く主張させる事が出来るデザインなんです。

真っ白な紙の真ん中に文字を書いてみてください。

 

余白デザイン

 

どうでしょうか?真っ白な背景の中にある文字だけに視線が釘付けにされると思います。

余白を使う事で自分の見せたい物へ視線を誘導させる事が出来るんですね。

 

1面

デザインレイアウト

バナーではほぼ使われる事はないけれど、商品画像ではたまに使うのが1面を使ったレイアウトです。

着用した商品画像を真ん中に置いてキャッチコピーも商品に重ねるように置く事でちょっとおしゃれに見えるレイアウトですね。

キャッチコピーで商品が隠れるし使い所の難しいレイアウトになります。

 

2分割法

デザインレイアウト2分割法

画像を2分割して片方に写真、もう片方にキャッチコピーを入れるようなレイアウトテンプレートです。

使い勝手もいいし、正方形バナーや商品画像などではかなり使います。

とりあえず初心者はこの2分割法から使っていくのが良いです。

 

3分割法

画面を3つに分けるレイアウトテンプレートです。

使い方としては『商品写真』『日付やページ誘導の導線』『キャッチコピー』のような分け方をします。

細長のバナーでよく使われるレイアウトテンプレートですね。

情報を細かくわける事が出来るので見やすいバナーが作れます。

 

キャッチコピー

バナーに入れる文章の作り方を紹介します。

使用シーンをイメージさせる

キャッチコピーで重要なのは自分がその商品を使用しているシーンをイメージさせる事です。

人が行動するのは『共感した時』なので、自分が使っているイメージが出来ないと行動してくれません。

例えば「○○配合のプレミアム香水をつけるだけで異性にモテモテに!」なんて言葉を使われると自分がモテてるイメージをしてしまって買ってしまうんですね。

このように具体的にイメージさせるキャッチコピーがあれば人を誘導する事が出来るんです。

 

実績をアピールする

実績があれば必ずアピールします。

人は実績に弱く、「権威への服従」と言う心理学的にも実証されている方法です。

よくテレビに『○○の専門家の先生をお呼びしました』なんて言ってどこの誰か知らない人が出てくると思います。

実際にその筋の人に聞くと「そんな専門家はいない」って言われたりしますね。

 

このように人は実績とか先生とかランキング1位とか、何かしらの権威に対して弱いので使える物があれば使っていった方が誘導しやすくなります。

 

比較する

商品やサービスを他の物と比較させる文章を入れます。

人は購入前には必ず比較検討をするので、先に比較対象を与えて次に進みやすくさせます。

とはいえ、競合商品を比較に出すのって難しいですよね?

そんな時には一般的にイメージ出来る物で比較させます。

 

実際に私がやった例ですが、ボディバッグの重さを比較させる時に『羽毛布団』を比較対象として出しました。

『羽毛布団』って聞くと軽そうに聞こえるけど、実際には軽くても1kg以上あるので結構色々な商品で重さ比較する時に使えます。

比較対象を出す事で商品の魅力ってより伝わりやすくなるんですね。

 

テンプレート化

一度作ったデザインはテンプレート化させて時間短縮にのため再利用する

バナーを作るごとにデザインを1から考えていると時間がいくらあっても足りません。

過去に1度作ったデザインのレイアウトや配色、フォントの設定などをテンプレート化させておく事で次回使う時に画像やキャッチコピーを入れ替えるだけで簡単にバナーが作れるようになります。

効率化的にバナーを作るために1度作ったバナーって言うのはテンプレート化させて再利用します。

 

実務練習

デザインは実務練習が最も成長します。

「デザインの勉強をしっかりして出来るようになってから・・・」っと思われるでしょうが、勉強は実務の中でやった方が成長速度が上がるし効率的です。

それに、実際の依頼って本当に初心者的な物とかも多いので意外と簡単に出来たりするんですね。

 

依頼を受ける時におすすめなのがクラウドソーシングです。

副業とかフリーランサーとして稼ぐための入門として便利なサイトで、色々ある中で私は「クラウドワークス」で依頼を受けていました。

簡単に依頼を貰う事が出来るのですが、デメリットとしては単価が安いんですよね。

でも続けていると依頼者の中から直接取り引きの話しになって単価が跳ね上がったりします。

経験を積みたい、実績がほしい時にはおすすめのサイトです。

 

PR

高くて納期の遅いデザイナーにお金を払い続けたいですか?

自社にデザイナーがいれば季節ごとのバナーも商品画像も思いのままに作れるのに・・・。

そんな願いをたった30日で叶えてくれる方法があります!

パソコン音痴でもプロに負けないデザインスキルを手に入れる講座はこちら↓

詳しくはコチラ

↑こちらからの申し込みで5つの特典をGET↑

 

バナー作成の手順

ここからは実際に私がバナーを作る時の手順を説明します。

 

WHY・WHAT・HOWを決める

バナーを作る時には必ず『WHY』『WHAT』『HOW』を考えてから作ります。

ビジネスは常に『WHY』『WHAT』『HOW』の順番で構成されていて、この3つさえ抑えておけば失敗する確率を大幅に減らす事が出来るのです。

 

WHY(理由):顧客はなぜこのサービスを求めているのか?

WHYとは顧客が商品・サービスを利用する理由(キャッチコピー)の提示です。

「なぜ貴方にとってこの商品が必要なのか?」っと言う理由を気づかせて上げる事で商品に対して興味を持ってもらえます。

分かりやすい例で言うとダイエット商品などでよく使われています。

  • 飲むだけで痩せる
  • 着るだけで細く見える
  • 一日5分で脂肪が燃える

よくあるキャッチコピーですね。

 

このキャッチコピーには「楽して痩せれますよ」と言うWHYが隠されています。

つまり顧客には、「辛い思いをしたくないけど痩せたい」っと言う商品を求めている理由があるので、『楽して痩せれる』と言う提案をしてあげると興味を惹けます。

 

WHAT(物事):なんのバナーを作るのか?

WHATは商品・サービスの事です。

バナーを作るためにはメインとなる商品を1つ選びます。

なぜ1つかと言うとバナーの中に情報が2つ3つ存在してしまうと何を伝えたいのかが分からなくなるため、誰にも刺さらないバナーになってしまいます。

1バナー1商品でしっかりと情報を絞ってバナーを作る事で、伝わりやすいバナーを作る事が出来ます。

 

HOW(方法):どのような方法で伝えればいいのか?

HOWでは『WHY』と『WHAT』を元にどのように表現すればいいのかを決めます。

おそらく初心者からするとこの表現方法、デザインに関してが一番むずかしいと思います。

そこで、ド素人でも簡単にそれっぽいデザインを作るための方法を説明しますね。

 

GOOGLE検索を開いて【バナー】で検索、検索結果の最上部にある『画像タブ』をクリックして画像一覧へ切り替え。

いろんなバナーが表示されるので、その中から気に入った画像を2~3つ見つけます。

あとは見つけたバナーを合成させて完成です。

 

具体的にはAのバナーからはキャッチコピー(WHY)の配置場所、Bのバナーからは商品画像(WHAT)の配置場所、Cのバナーからはレイアウトを各々パクって1つにします。

デザインが思いつかない理由はデザイン知識の引き出しが無いからなので、デザインセンスのあるプロが作ったバナーを合体させる方が遥かに簡単に質の高いバナーを作る事が出来ます。

 

レイアウトを決める

レイアウトにはすでにテンプレートが複数存在しています。

  • 1面
  • 2分割法
  • 3分割法
  • 4分割法

この分割法を元に他の人がどのように分割してバナーを作っているか調べます。

初心者のうちは2分割法、3分割法あたりで作っておくとキレイにまとまります。

 

キャッチコピーを配置する

レイアウトが決まったら次はキャッチコピーの配置です。

あとで微調整するので最初のうちはざっくりで大丈夫です。

「とりあえずこの辺にキャッチコピー置いとこう」ってくらいの気持ちで配置します。

 

画像を配置する

商品画像を配置します。

商品画像もこの時点ではおおまかに置いておきます。

最終的にキャッチコピーと商品画像のバランスをみながら微調整するので、画像もざっくりで配置しておきます。

 

フォントを調整をする

文字の大きさやフォントの種類を調整していきます。

とくにこだわりがなければゴシック体をおすすめします。

主張したい所を大きくします。

 

配色を調整する

配色調整します。

『メインカラー』『サブカラー』『アクセントカラー』を使いつつ、フォントの色だったり背景の色だったりを調整して見やすい配色を心がけます。

配色は近い色を使うとまとまりがあるように見えますが、主張ポイントがわかりにくくなるので全然異なる色を使った方がバナーとしては正解の配色になります。

 

全体的なバランスを調整する

フォント、キャッチコピーの配置、画像の配置などを最終的に調整します。

デザインには特に正解と言う物がないので、違和感を感じなければOKです。

とはいえ、初心者の間は何を作ったとしても必ず違和感と言う名の不安を感じます。

「違和感を感じるけれど、どこを直せばいいのか分からない」

そんな時には考えても仕方ないので、それで完成した事にします。

下手にいじり始めると泥沼にハマってしまい、せっかくまとまっていたバナーを壊してしまうので修正箇所の分からない違和感は放置でOKです。

 

画像へ出力する

最後に出力して完成です。

写真メインでない場合にはpng、写真メインのバナーならjpgで出力します。

 

バナー作成の時に参考にしたいサンプルデザインが見れるサイト

Banner Matome

Banner Matome

 

日本最大級のバナーサンプルサイト。

エステやゲームなどの業種別、テキストやイラストなどの表現別にサンプルバナーが検索できます。

21,300本と言う豊富なバナーサンプルを見る事が出来るので自分好みのデザインに出会う事が出来ますね。

 

バナープラス

バナープラス

 

サイズや業種毎に視認性の高いバナーサンプルを見る事が出来ます。

バナーサンプル以外にも、実店舗で使えそうな『のぼり旗』のようなデザインもあったり。

全体的に見るとフラットデザインが多めとなっています。

 

バナーデザインアーカイブ

バナーデザインアーカイブ

 

業種から選べるのはもちろんですが、色から選ぶ事が出来ると言うちょっと変わった検索方法が導入されてます。

有名な企業のバナーなども多数掲載されているので見てるだけでも楽しめますね。

ネットショップと言うよりはブログ広告みたいなバナーが多い印象でした。

 

バナー作成の時の役立つ写真素材サイト

写真AC

写真AC

 

ビジネスで使える写真が豊富に揃っている写真素材サイト。

ダウンロード制限付きですが会員登録するだけで無料で写真をダウンロードする事が出来ます。

20種類のカテゴリーから写真を選択できるので、写真ACで探せば大体の写真は手に入りますよ。

 

ぱくたそ

ぱくたそ

 

少しクセの強いモデルさんが多い写真素材サイト。

かなり色々なサイトで使われてるのを見るので差別化はしにくいかもしれません。

それで、インパクトの強い写真が多いので人の目を惹くのはダントツでしょう。

 

バナー作成の時に役立つ素材サイト

freepic

freepic

 

世界中の画像や素材が手に入る有料の素材サイト。

有料なので競合と素材がかぶりにくいのが利点ですね。

 

当ブログではこのfreepicさんの素材をよく使ってますが、使いやすい素材が多いので助かってます。

freepicだけで写真からアイコン素材まで何でも手に入るのでコストパフォーマンス高めですね。

 

いらすとや

いらすとや

 

無料でかわいいイラストが勢ぞろい。

ただし、いらすとやさんは有名すぎるのでキャラクターの特徴が強すぎて一目見ただけでいらすとやの素材だと分かってしまうのがデメリット。

とは言え、最近では実店舗でもいらすとやさんの素材を使ったポップとかよく見るので商用としても不都合なく使えるようです。

 

バナー作成の勉強方法

私がバナー作成の勉強をしていた時に使っていた勉強法はこちら

初心者におすすめのオンラインスクール

バナーに限らずデザイン系のオンラインスクールでよく使っていたのがこちら

TechAcademy

学校のオンライン授業みたいな感じで1つ1つ勉強を積み重ねてデザインの勉強をする事が出来ます。

一人で勉強してると「ここどうするんだろう?」って疑問が生まれる事もあるけれど、TechAcadebyならパーソナルメンターがついているので、わからない所などを相談する事ができます。

一人で悩んでいる時間が無駄なのでわからない所は聞いてすぐ理解を深めた方が効率的ですね。

 

TechAcademyの公式サイトはこちら「TechAcademy

 

デジタルハリウッドSTUDIO

株式会社LIGが運営するWEBクリエイター育成スクールです。

WEBデザイナーを目指してる人が多く通っている学校で、実際にWEBデザイナーとして活躍しているプロのWEBデザイナーから教わる事が出来るのでより実践に近い形でWEBデザインを学ぶ事が出来ます。

デジタルハリウッドを卒業するとそのままLIGのコネを使ってデザイナーとして仕事を貰えたりするのでデザイナーになりたい人には良い環境が揃っていますね。

 

デジタルハリウッドの公式サイトはこちら「デジタルハリウッド公式

 

YOUTUBEで学ぶ

実はYOUTUBEにも多くのデザインの勉強動画があります。

【デザイン】【デザイン バナー】【バナー 作成】などで検索すると数多くの動画が出てきます。

無料で勉強出来るのは良いのですが、有料商材やスクールへの誘導用PV動画とかも多く混じっているので本当に勉強になる動画を探すのには苦労します。

誰でも投稿できてしまうため、動画のクオリティにもばらつきがあって良い動画を見つけるのはちょっと手間がかかりますね。

 

初心者におすすめのデザインが学べる書籍

私がおすすめするデザイン系書籍No.1は『ノンデザイナーズ・デザインブック

フォント・配色・レイアウト・コントラストの基礎をノンデザイナーでも理解出来るように書いてくれています。

初心者なら必ず読んだ方が良いおすすめ書籍となっています。

 

デザイナーとしての転職方法

デザイナーとして転職が出来る求人サイト一覧

 

デザインのお仕事

デザイン・グラフィックが中心の求人サイトになります。

正社員系が多いのですが、中には業務委託などもあったりするのでフリーのWEBデザイナーのお仕事探しにも使えますね。

聞いた事があるような有名企業なんかも求人だしてたりします。

 

デザインのお仕事の公式サイトはこちら「デザインのお仕事

 

doda

こちらは総合求人サイトになります。

デザイン専門の求人サイトではないのですが、一回登録すると営業マンがめっちゃ真剣に転職先を持ってきてくれます。

こちらから条件を言っておくと探してくれるのはいいのですが、近場にいいところが無いと隣の県の情報とか持ってきてくれるので「いや、通勤無理だろ」ってツッコみたくなる事もありますね。

それだけ真剣に探してくれてるのだと思います。

 

doda公式サイトはこちら「doda

 

クリエイターズNAVI

デザイナー・クリエイターに特化した求人サイトになります。

WEBデザインに限らず、ベビー用品のデザインとかイベントのブースデザインなど色々な求人が載っていて見ているだけでも面白い求人が載っているサイトですね。

 

クリエイターズNAVI公式はこちら「クリエイターズNAVI

 

バナー作成の外注化

企業へ依頼する

「おーいお茶」や「BLACK無糖」の商品開発にも関わってきたデザイン会社「株式会社アイディーエイ」と言う会社が実績もあり、企業案件としては安心出来るのではないでしょうか。

デザイン企業に依頼すると質は安定しているのですが、結構値段が高いので私はあまり依頼する事はないですね。

資金に余裕がある場合にはデザイン会社へ依頼した方が安定感はあるような気がします。

 

クラウドソーシングへ依頼する

バナーデザインを安く作ってもらいたいときにはクラウドソーシングへの依頼がおすすめです。

クラウドソーシングの案件を見ればわかりますが、本当に安い値段で受けてくれます。

デメリットとしては完成品の質が安定しなかったり、ほぼ初心者が実績作りのために登録しているので品質にばらつきがあります。

しっかりとコミュニケーションを取ってお互いに理解をした上で発注する事でトラブルになりにくくなります。

 

クラウドワークス

クラウドソーシングでの大御所といえばやはり「クラウドワークス

バナー作成の費用はおよそ3000~6000円で行って頂けるようです。

 

ランサーズ

クラウドワークスの競合として昔からあるのが「ランサーズ

バナー作成の費用はおよそ3000~5500円くらいです。

 

ココナラ

昔はワンコイン外注なんて言われていた「ココナラ」ですが、最近は値段を結構自由に設定出来るようになったようです。

バナー作成の費用は500~5000円くらいです。

ワンコインの時代は結構荒れてて直接取引からのトラブルが多いサイトでした。

いまは改善されてクラウドワークスやランサーズよりも使いやすくなっていますね。

 

バナー作成のコツまとめ

手っ取り早く簡単にバナーを作るコツは以下3点

  • ブロック体フォントを基本に強弱をつける
  • コントラストを意識した配色
  • 2分割法レイアウトを使う

この3つを意識するだけでもバナーの質がグンっと上がります。

さらにもっと上手なバナーを作りたい時には、再度この記事を上からじっくり読んで貰う事でよりバナーの質が向上します。

 

バナーデザインがどうしてもうまく作れない時には

デザインツールは自由度が高いため、しっかりとしたデザイン知識がないと「なぜか分からないけど作ったデザインが変だなぁ」って言う状態になります。

 

デザイン知識って言うのは日々の勉強の積み重ねや、デザインテクニックの引き出しをどれだけ持っているか?で決まるので一朝一夕に身に付く物ではありません。

 

デザインテクニックとは

  • フォントの使い分け
  • フォントの関係性
  • 整列
  • 目的にあった色の選択
  • 色同士の関係性
  • 色の選択
  • 色のコントラスト
  • 余白

をバランスよく配置する事でターゲットにした顧客を惹きつける画像を作る事が出来ます。

 

作ったバナーデザインに納得がいかない時にはこちらの本を推奨。

ノンデザイナーにも分かるようにデザイン知識が基本からまとめられています。

 

しかし、基本的なデザインの知識を覚えただけでは魅力的なバナー画像を作る事は出来ません。

なぜかと言うと、反応率の高いバナー画像は検証・分析を2年、3年行い少しずつコツを掴んでいく物だからです。

 

もし、この2年、3年必要なデザインノウハウを一瞬で埋める方法があるとしたら、目的にバナー作りに特化した専用ツールを使う事でしょう。

例えば、『超簡単!素人でもプロのようなバナーが作れるバナープラス!』にも「ダサいバナーはサイトの信用を大きく落とす」と書かれています。

 

そして、プロが作るバナーは見た目がオシャレなだけではなく、見た人がクリックしたくなる『心理テクニック』が使われているんですね。

 

素人がどれだけ頑張ってもプロに太刀打ちできない原因は、デザイン知識・デザインノウハウ・デザインの心理テクニック・実務経験。

だからと言って、プロに本当に効果の高いバナーを外注すると1パターンで90,000円以上の費用が!

 

ネットショップのバナーは毎月何パターンも作らないといけないので、どう考えても現実的な値段とは思えないですね。

 

しかし!『バナープラス』を使えば14,700円でプロ並みのバナーが作り放題!

 

さらに4つの特典付き!

バナープラス4つの特典

  • 動画マニュアル・オンラインマニュアル
  • デザイン基礎マニュアル
  • プロのデザイナーが作ったプロジェクトマニュアル
  • プロのデザイナーからのデザインアドバイス

↓こちらからの申込で4つの特典をGET↓

バナープラス公式サイト

 

ついでに、バナーにかわいらしいキャラクターアイコンを使いたいって時には

に登録されているイラストレーターさんが、人の目を魅了する魅力的なキャラクターアイコンを作ってくれます。

バナープラスと合わせる事でバナーの魅力が2倍にも3倍にも倍増する事間違いなし!

 

  • この記事を書いた人
  • 最新記事

井川 裕輝

ネットショップ総合管理職3年の経験を経て独立、現在は法人代表。小規模低予算少人数でのネットショップ立ち上げ経験が最も多い。

-WEBデザイン
-

© 2021 ネットショップ運営情報ブログ『WellMaga』