石崎力也のコンサルティング「いしこん」

インターネットビジネスのコンサルタントです。英語圏のマーケティングに関するWebサービス、決済ツール、システムについての情報を提供しています。年間300日以上は家族と海外で旅行しています。

You are here: Home / Photoshop / Photoshopでバナー広告を作る方法（Envato Elementsのテンプレートを利用）

Photoshopでバナー広告を作る方法（Envato Elementsのテンプレートを利用）

投稿日： 最終更新日： By

サイトに掲載するかっこいいバナーを作りたい。だけどPhotoshopのスキルが高いわけでもない。そんなあなたに朗報です。Envato Elementが提供しているバナーのテンプレートを使えば、高速で、しかも簡単にバナー広告を作ることができます。あなたのやることは、訴求文章を考えることだけ。

#01. Envato ElementsのUnlimitedプランを購入しよう

011

例えばカテゴリー「Udemy」に属している記事があるとします。例題のタイトルは「石崎式！Udemy講師になってオンラインコースを販売する方法」です。この記事は説明するまでもなく、Udemyに関して書かれた記事です。で、この記事を下にスクロールしていくと・・・

参考：http://rikiyaishizaki.com/udemy/how-to-earn-as-udemy-instructor

012

下にスクロールすると、UDEMY FREE GUIDEがあります。マーケティングオートメーションの基本は、見込み客のニーズにマッチした無料プレゼントを用意することです。つまりUdemyのカテゴリに属しているUdemyに関する記事の直下では、Udemyのオファーをする必要があるわけです。このUDEMY FREE GUIDEは、Photoshopで作りました。しかも超高速で。

全てのオンラインクリエイターはenvato elements（$29）を購読すべき

013

使ったのはこれ。envato elementsです。月々$29を払えば、先ほどのバナーテンプレートはもちろん、ブログの冒頭に挿入するサムネイル写真から、Keynoteやパワーポイントのテンプレートまでダウンロードし放題です。

参考：僕が使ったバナーテンプレートはこれ

014

これはPhotosです。コンテンツマーケティングを実施している、米国のちゃんとした企業は必ずブログの冒頭にキャッチの写真を挿入しています。彼らもきっとこういったストックフォトの会社と契約しているのでしょう。魅力的な写真がたくさんあります。その数、10万以上！

Envato Elementsに含まれているテンプレートの種類

015 

BROWSEボタンをクリックすると、ドロップダウンメニューが降りてきます。見てください、いろいろなテンプレートや写真、イラストが用意されています。Web Temeplatesまで用意されているんですね。

  • Photos
  • Graphics
  • Add-ons
  • Fonts
  • Graphic Templates
  • Presentation Templates
  • Web Templates 
  • CMSTemplates
  • 3D 

#02. Envato ElementsでLandscape（横長）のテンプレートを探す

021 

今回、Photoshopで使うテンプレートが欲しいわけですね。シンプルに「banner」で検索をかけてみましょう。

022

いくつか候補が見つかりました。ではFlat Line Web Bannersをダウンロードしようと思います。いくつかパターンもあるので、複数のバナーが作れそうですね。

023 

PROJECT NAMEには適切な名前を用意してください。名前を記入してダウンロードします。 

#03. Envato Elementsでダウンロードしたファイルをフォトショップで開く

031 

先ほどEnvatoからダウンロードしたテンプレートをFinderで開きます。Photoshopを使うので、拡張子が .psd のファイルを選びます。イラストレーターが得意な人は .ai ファイルでもOKです。

032 

.psdファイルの上でダブルクリックをするとPhotoshopが開きます。envatoにはこういうタイプのファイルがたくさんあります。データ容量を小さくするためなのかな？僕はこの3つ繋がっているバナーの一箇所だけを使いたいので、後でクロップする必要がありそうですね。 

#04. 広告訴求の文章に関するテクニックと作成方法

04-1. フォトショップのレイヤーを理解する

041 

まずPhotoshopのレイヤーについて。Layer2には文字やロゴなどのデータが格納されていて、Layer1にはバックグラウンドカラーが格納されています。Layer1の目玉のマークをクリックすると、 背景が消えましたね。

04-2. レイヤー2を展開する

042

まずLayer2を展開します。

04-3. テキストを変更する

043 

展開されたレイヤーの中から、左側の編集画面と文字が呼応している箇所を探します。HEALTH PLAN MANAGEMENT SOLUTIONSの文字が呼応していますね。実際に目玉のアイコンをクリックしてみてください。対応しているのがわかります。

044

キーボードのTを叩くか、左側のメニューから横書き文字ツールを選択します。

045

編集したい文字の上にカーソルを合わせて、文字ツールのアイコンが入力モードに変わったことを確認して、訴求文章を書きましょう。

04-4. 文字の大きさを変更する

046

今回は「無料eBookと無料コースで学ぶ Udemyでオンラインコースを販売する方法」という訴求文章を作りました。上のGIFでは文字のサイズを変え、フォントや太さを調節しながら、画面いっぱいに文字を広げています。文字が読みにくいと広告として機能しないので、見やすいように調節してください。無料や0円という言葉は、僕を含めて怪しい人たちが使う常套句なんだけど、一方でHubSpotのようなニューヨーク証券取引所に上場している企業ですら使っている（FREE！）キーワードです。なぜ今だに訴求文章にそれを使うのかというと、一言で、反応率が上がるからです。だから仮にあなたが無料/0円でプレゼントを提供しているなら、素直に「無料」あるいは「0円」という単語をタイトルに入れるようにしてください。

#05. フォトショップ 切り抜きツールの使い方

051

3つのバナーが連なっているので、切り抜きツールを使って必要な部分だけをクロップします。最後にエンターを叩いて切り抜き完了！

#06. フォトショップで広告バナーをPNGとしてクイック書き出しする

061

ブログに戻ります。chromeブラウザを使っています。右クリック > 検証 で、ボディ部分のWidth（横幅）を確かめます。1058pxだそうです。じゃあ書き出しサイズもこの大きさになります。

062

Photoshopに戻り、イメージ > 画像解像度を選択。幅を1058pixelに変更してOKします。

063

書き出しましょう。ファイル > 書き出し > PNGとしてクイック書き出し > 名前をつけて保存します。例題では udemy.png としました。

064

Finderで書き出されたデータを確認します。udemy.pngは、大きさ1058になっています。よし、完成。

#07. WordPressのウィジェットでバナー広告を挿入する設定方法

071

完成図はこんな感じ。ブログ記事直下にバナーを挿入したい。実際にバナーを作りました。さて挿入していきましょう。

072

少し先回りしてお話をします。WordPressのダッシュボードから、外観 > ウィジェットに移動します。

073

左側の利用できるウィジェットから「テキスト」を選びます。ブログの記事直下ですから、After Entryにテキストを配置します。After Entryのウィジェットがあるかどうかは、WordPressのテーマによりけりです。僕はGenesis FrameworkのNews Proというテーマを使っています。

074

さて、最後のプロセスです。長いですが、集中して聞いてください。

  1. メディア > 新規追加
  2. ファイルを選択 > 選択 > 開く
  3. アップロードした画像の「編集」をクリック
  4. ファイルのURLをコピーする
  5. テキストウィジェットをAfter Entryに追加する
  6. command + Vでバナーを貼り付ける

はい、以上でバナーの作成と、記事直下での表示が完了しました。