【有料級】Photoshopを使ったオリジナルバナーの作り方を解説！Webデザイナー向け

今回はバナー制作を仕事にしたいWebデザイナー初心者向けに「プロレベルの売れるバナーを作る方法」をご紹介します！

最近では、Canvaのようなデザインツールが登場し、誰でも簡単にクオリティの高いバナーを作れるようになりました。

すごく便利ですが、それでもなお、プロのWebデザイナーにバナー制作を依頼する人は多いです。

その理由は、Canvaなどでは、どうしても「テンプレート感」が出てしまい、どこかで見たことがあるデザインになりがちだからですね…

また、ビジネスで使うバナーだと、ただ綺麗なだけじゃなくて、クリック率向上など「成果につながる」デザインが求められるので、そういったスキルが重要になってきます。

だからこそ、バナー制作を仕事にしたいなら、

これらをしっかり身につけることが大切です！

この記事では、これらすべての知識やスキルをマスターできる内容になっています。

【前提】デザインソフトの基礎があるデザイナー向けです

前提としては、今回はPhotoshopの具体的な使い方の解説はありません。

すでにPhotoshopをある程度使いこなせる方を対象にしています。

ただし、基礎レベルで操作ができるなら問題ありません！

例えば、以下のツールをサクサク使えるレベルなら大丈夫です。

Photoshopの習得がまだの方は、以下を参考にしてください。

こんなバナーが作れるようになります！

今回紹介する作り方をマスターすれば、バナー案件で稼げるレベルのスキルが身に付きます！

具体的にいうと、バナーデザインアーカイブにあるようなバナーです。

バナーには色んなテイストやサイズがありますが、今回はどんな場面でも役立つ「バナー制作の基本」をお伝えします。

この基本が分かれば、どんなジャンルのバナーを作る際にも応用できますよ。

Photoshopを使ったオリジナルバナーの作り方5ステップ

今回は、実案件と同じ流れでバナーを作っていくので、お題を用意しました。

私が過去に受注した案件を元に、少し内容を変えたお題です。

ただし、実際の案件では、ここまで詳しく条件が提示されることは少ないです。

時にはデザイナーがテキストを考えたり、テイストを提案することもあります。

今回は分かりやすく進めるために、この条件をもとにバナーを作っていきますね。

全体のステップは以下の通りです。

一つ一つ詳しく解説していきます！

STEP1:方向性を決める

ソフトを開いて作り始める前に、まず方向性を決めることが大切です。

具体的には次のようなポイントを考えます。

特にデザインイメージ（信頼性やカジュアル感）に関しては、人によって持つ印象も異なります。

例えば、50代の男性が感じる「おしゃれ」と、20代の女性が感じる「おしゃれ」では、イメージが全然違うことがありますよね。

そんなズレを防ぐためにも、まずはネットで検索してみるのがおすすめです。

「信頼感がある　バナー」「ビジネス英語　バナー」などで検索し、おおよそのデザインの方向性がブレないようにします。

また「どのテキストを目立たせるべきか？」については、後半で解説している「バナー制作で役立つコピーライティングの基礎知識」をチェックしてみてください！

STEP2:見本となる参考探し

次は、見本にするバナーを探すステップになります。

デザインを作る際は、全てをゼロからオリジナルで考える必要はありません。

特に、センスに自信がない方や実践経験が少ない方は、必ず参考になるデザインをいくつか見つけてから制作に入るようにしましょう！

バナーの場合は、次の2つの参考を探しましょう。

①配置の参考

まず配置（レイアウト）の参考を探していきます。

配置は特に、デザインのクオリティを決める重要な要素です。

自分の頭で考えるのではなく、参考バナーの配置をそのまま取り入れるのがコツです！

参考を探す場合は、以下のポイントを基準にしましょう。

参考バナーは、以下のサイトから探すのがおすすめです。

レイアウトのルール

ここで補足として、有名なレイアウトのルールをご紹介しておきます。

レイアウトのルール	説明
デザイン4原則	デザインの基本原則（近接、整列、反復、対比）
FとZの法則	ユーザーの視線動線を意識したレイアウト法則
グリッド	ページを均等に分割し、要素を整然と配置するためのルール
黄金比	美しいといわれる黄金比（1:1.618）をデザインに応用した法則

バナー制作で特に重要なのが、デザインの基本となる「デザイン4原則」と「FとZの法則」です。

どんなレイアウトを作るときでも、頭の片隅に置いておくべきポイントになります。

2つについて、少し詳しく解説しますね。

デザイン4原則

デザイン4原則は、デザイン初心者がまず最初に覚えるべき基本ルールで、どの入門書にも紹介されています。

具体的には、以下の4つです↓

この4つの原則を守るだけで、デザインのクオリティはぐっと上がります。

逆に、これをおろそかにすると、素人っぽいダサいデザインになってしまうので要注意ですね。

FとZの法則

ユーザーがバナーやWebサイトを見るときに「Z」字型と「F」字型に視線を移動するというものです。

具体的にいうと、以下のような感じです↓

視線が「Z」字型に動くので、重要なテキストは左上から右上に配置し、ボタンは右下に置くのが自然です。

また、バナーの定番レイアウトに、文字と素材を左右に並べることがあります。

もしテキストを読んでほしい場合は、文字は左に配置するのが良いです。なぜなら視線は左から右に動くので、先に左を注視するからです。

逆に、テキストを右に配置すると、ユーザーが素材に目を奪われるので、目立たせたい部分をしっかり決めた上で、左右の位置を決めましょう。

デザインルールが学べるおすすめ本

②色味・雰囲気の参考

次に色味・雰囲気といったデザインの参考を探していきます。

こちらに関しては、バナーに限らず、さまざまなデザインを参考にできます。

大事なのは、パッとみた一瞬に商品の世界観が伝わるようなデザインにすることです。

今回のお題では、

• カジュアル
• 信頼性がある
• 青系

この3つの指定があるので、頭に入れながら参考を探します。

ここで一つ注意点として、「信頼性がある」というイメージは、人によっては少しあいまいです。

依頼者が思い描く「信頼性」と、デザイナーが考える「信頼性」、そして一般的に「信頼性」とされるデザインが微妙に違うことがあります。

なので可能なら、依頼者から具体的な参考バナーを出してもらうのも良い方法ですね。

またデザイナー自身も「信頼感がある　ビジネス　バナー」といったキーワードで検索し、世間一般的に思われている信頼性のあるデザインを理解しておくといいです。

これによって、方向性がズレたデザインを作ってしまうリスクを避けられます。

色味の参考は一つに絞るのではなく、複数のデザインを少しずつ取り入れるのもOKです。

一つ目は、配色パターンのサイトになります。

他にもおすすめサイトや本がたくさんあるので、載せておきますね。

二つ目は、Pinterestで探したバナーです。ボタンの色を参考にしたいと思います。

STEP3:設計図を作成

参考がそろったら、次は設計図（ワイヤーフレーム）を作りましょう。

Photoshopで作成するのも良いですし、紙とペンでアナログに描く方法でもOKです。

配置の参考とデザインの参考を見比べながら、どの要素をどこに配置するかを考えます。

強調したいポイントなども、この時点でしっかりと書き加えておくと、後々のデザイン作業がスムーズになりますよ。

STEP4:ソフトを使って作成

次はいよいよ、Photoshopを開いてバナーの制作に取り掛かります。

設計図を手元に置きながら、それを参考にして進めていきましょう！

今回は、大まかな流れをザックリ説明しますね。

STEP5:最終チェック

完成したら、最後にしっかりチェックします。

まずは、もう一度依頼内容を読み返して、テキストや要望が依頼通りになっているか確認してください。

無料体験実施中！の部分は、目立つように文字組みを工夫しました。

あとは、男性の左右に少し余白が空いてしまったので、装飾をプラスしました。Freepikという素材サイトにあるこちらの素材を使っています。

バナー制作で役立つマーケティングの基礎知識

ここでは、バナー制作において欠かせない「マーケティング」について解説しますね。

まず、なぜバナー制作にマーケティングの知識が必要なのか？

それは、バナーには「目的」があるからです。

例えば、

こういった目的を達成するには、どこの誰をターゲットにするのか？、どんな点をアピールするのか？を考えた上で、それに応じたデザインを作る必要があります。

ここでマーケティングの知識が役に立ってくるわけです。

具体的にいうと、次の3点を考えることが重要です。

これらは、バナーを作り始める前の構想段階でしっかりと戦略を練っておくべきポイントになります。

なので、ぜひ重要なポイントだけでも知識としてインプットしておいてください！

では上記の3つについて、もう少し詳しく解説していきますね。

①どんな媒体に設置されるバナーなのか？

まず大事なのは、「自分が作るバナーがどの媒体に配信・設置されるのか？」を理解することです。

なぜなら、配信先によって、ユーザーの年齢や性別、属性、商品に対する認知度が大きく変わってくるからです。

こうした要素を考慮して、バナーの訴求ポイントやコピー、デザインを決める必要があります。

例えば、フォロワー数が10万人いる人気アカウント上でバナーを配信する場合どうでしょう？

バナーを見るユーザーはすでに商品に対して一定の認知度を持っていることが多いです。

となれば、直接的に商品購入を促すようなバナーでも効果が期待できると考えられます。

一方で、例えば「ネイティブ広告」と呼ばれるニュースサイトやブログ記事内でバナーを配信する場合はどうでしょう？

ここでは、ユーザーは記事を読むことを目的にサイトを訪れているので、いきなり商品を売り込むバナーだと反応が鈍いかと思います。

こんな時は、まずユーザーの目を引くようなバナーを作り、興味を持ってもらうことを狙うのが効果的です。

このように、バナーを作る際は、その商品に対する認知・関心度をしっかりと踏まえることが重要です。

こちらの図も参考にしてください↓

②誰をターゲットにしたバナーなのか？

①でターゲット層を把握したら、次に重要なのはそのニーズをさらに深く掘り下げることです。

実は、ニーズによってバナーの内容は大きく変わってきます。

ここでは「オンライン英会話スクール」を例に説明しますね。

オンライン英会話スクールのターゲットは「英語を学びたい人」ですが、そのニーズは人それぞれ異なります。

例えば、以下の3パターンを見てみましょう！

こんな感じで、ターゲットを絞るとそれぞれのニーズが見えてきます。

バナーを作る際には、どんなニーズを持つユーザーがそのバナーを目にするのかを理解することが大切です。

AからCそれぞれに対して、次のような訴求内容でバナーを作ると効果的だと言えます！

訴求とは、マーケティングにおいて、ターゲットに対して最も強く訴えるメッセージの方向性のこと

③遷移先のページはどんな内容なのか？

最後にお話しするのは、バナーのデザインを決める際に、遷移先のページも考慮する重要性についてです。

基本的には、バナーの訴求点やデザインは遷移先のページに合わせるべきです。

その理由はいくつかあります。

意外とよく見かける悪い例が、バナーには「初回無料！」と訴求しているのに、遷移先のページにその情報が見当たらないケース。

また、遷移先が単に自社のホームページになっていることも多く、もったいない感じがします。

できれば、バナーの内容に合った遷移先ページを用意するといいですね。

というわけで、Webデザイナーとしてバナー案件を受注する際には、必ず遷移先のページを確認するようにしましょう。

広告とバナーを学べるおすすめ書籍

バナー制作で役立つコピーライティングの基礎知識

ここでは、バナー制作において大切な「コピーライティング」について解説しますね。

コピーライティングとは、簡単に言うと「文章でお客さんに商品を買ってもらう」スキルのことです。
ユーザーの感情に訴えかけ、「気になる！もっと知りたい！」と思わせる技術が必要になります。

バナーに使う広告コピーは、案件によっては専門のライターさんが書くこともあります。

そのコピーの良さをデザイナーがしっかり引き立てられれば、よりクリック率の上がる、成約に繋がるバナーが作れるというわけです。

そこで今回は、コピーライティング分野で重要な3つのポイントを詳しく解説します。

①ベネフィットとメリットの理解

まず最初にお話しするのが、ベネフィットとメリットについてです。

バナーに入れるテキストの中で一番強調すべきなのは「ベネフィット」の方になります。

ベネフィット：商品やサービスを使うことでユーザーが得られる「嬉しい未来」や「体験」のこと
メリット：商品やサービスが持つ「特性」や「機能」に関する情報

いかがでしょうか？

ベネフィットはそれぞれ、①、②、①になります。

少し難しいかもしれませんが、次のように覚えるとしっくりくると思います。

メリットは、ベネフィットが叶う理由

バナーを作る際には、このベネフィットを強調したデザインで作ると効果的です。

広告コピーを学べるおすすめ書籍

②優先度の高いコピー

先ほど述べたように、バナーに入れるテキストが複数ある場合、まず優先すべきは「ベネフィット」です。

なぜかというと、ユーザーが知りたいのは

という点だからです。

初心者によくあるミスとして、商品名や会社名を大きく配置してしまいがちです。

でも、例えば次の2つのバナーを比べるとどうでしょうか？

明らかに後者の方がクリック率が高くなると思われます。

広告バナーは突然目に飛び込んでくるものなので、ユーザにとって有益な情報を瞬時に理解できるように作ることが大事です。

ダメな例で言うと、

これらが含まれていると、スルーされてしまう原因になります。

③消費者心理学

最後にご紹介するのが「消費者心理学」を用いたコピーです。

バナーの目的はクリックしてもらうことなので、そのために心理学を用いたテキストを使うことが多いです。

もし指定されたテキスト内に、心理学を用いたテキストがあれば、そこを目立たせることでクリック率の高いバナーが作れます。

具体的にいうと、以下のものがあります。

心理効果	解説	具体例
アンカリング効果	初めに提示された情報が、その後の判断や決定に影響を与える心理効果	通常価格10,000円が今だけ5,000円 他社の製品は20%オフ、当社は50%オフ
社会的証明	他人の行動や意見が、自分の行動や意見に影響を与える心理効果	5,000件の高評価レビュー！ 今週の売れ筋トップ10
希少性	商品やサービスの限られた供給や在庫が、商品の価値を高める心理効果	在庫残り3個！ 80％オフは24時間限定！
損失回避	人は利益を得るよりも、損失を避けることに強く反応する心理効果	無料トライアル終了間近 本日限定の半額セール
フレーミング効果	情報の提示の仕方によって、消費者の判断が変わる心理効果	90%の人が満足（10％の人が不満足とは言わない） 15%脂肪分カット（不健康なイメージの商品でも健康そうに思える）

消費者心理を学べるおすすめ書籍

【必見】バナー制作で役立つ本やブログ記事をご紹介

ここまで読んでいただき、ありがとうございました！

最後に、本記事で紹介した本や参考サイトも含めて、バナー制作に役立つ情報をまとめておきます。

ぜひこちらも参考にオリジナルバナー制作に取り組んでいきましょう！

バナー全般のおすすめ書籍