今回お届けするノウハウはこちら
サイトに掲載するかっこいいバナーを作りたい。だけどPhotoshopのスキルが高いわけでもない。そんなあなたに朗報です。Envato Elementが提供しているバナーのテンプレートを使えば、高速で、しかも簡単にバナー広告を作ることができます。あなたのやることは、訴求文章を考えることだけ。
#01. Envato ElementsのUnlimitedプランを購入しよう
例えばカテゴリー「Udemy」に属している記事があるとします。例題のタイトルは「石崎式！Udemy講師になってオンラインコースを販売する方法」です。この記事は説明するまでもなく、Udemyに関して書かれた記事です。で、この記事を下にスクロールしていくと・・・
参考：http://rikiyaishizaki.com/udemy/how-to-earn-as-udemy-instructor
下にスクロールすると、UDEMY FREE GUIDEがあります。マーケティングオートメーションの基本は、見込み客のニーズにマッチした無料プレゼントを用意することです。つまりUdemyのカテゴリに属しているUdemyに関する記事の直下では、Udemyのオファーをする必要があるわけです。このUDEMY FREE GUIDEは、Photoshopで作りました。しかも超高速で。
全てのオンラインクリエイターはenvato elements（$29）を購読すべき
使ったのはこれ。envato elementsです。月々$29を払えば、先ほどのバナーテンプレートはもちろん、ブログの冒頭に挿入するサムネイル写真から、Keynoteやパワーポイントのテンプレートまでダウンロードし放題です。
これはPhotosです。コンテンツマーケティングを実施している、米国のちゃんとした企業は必ずブログの冒頭にキャッチの写真を挿入しています。彼らもきっとこういったストックフォトの会社と契約しているのでしょう。魅力的な写真がたくさんあります。その数、10万以上！
Envato Elementsに含まれているテンプレートの種類
BROWSEボタンをクリックすると、ドロップダウンメニューが降りてきます。見てください、いろいろなテンプレートや写真、イラストが用意されています。Web Temeplatesまで用意されているんですね。
- Photos
- Graphics
- Add-ons
- Fonts
- Graphic Templates
- Presentation Templates
- Web Templates
- CMSTemplates
- 3D
#02. Envato ElementsでLandscape（横長）のテンプレートを探す
今回、Photoshopで使うテンプレートが欲しいわけですね。シンプルに「banner」で検索をかけてみましょう。
いくつか候補が見つかりました。ではFlat Line Web Bannersをダウンロードしようと思います。いくつかパターンもあるので、複数のバナーが作れそうですね。
PROJECT NAMEには適切な名前を用意してください。名前を記入してダウンロードします。
#03. Envato Elementsでダウンロードしたファイルをフォトショップで開く
先ほどEnvatoからダウンロードしたテンプレートをFinderで開きます。Photoshopを使うので、拡張子が .psd のファイルを選びます。イラストレーターが得意な人は .ai ファイルでもOKです。
.psdファイルの上でダブルクリックをするとPhotoshopが開きます。envatoにはこういうタイプのファイルがたくさんあります。データ容量を小さくするためなのかな？僕はこの3つ繋がっているバナーの一箇所だけを使いたいので、後でクロップする必要がありそうですね。
#04. 広告訴求の文章に関するテクニックと作成方法
04-1. フォトショップのレイヤーを理解する
まずPhotoshopのレイヤーについて。Layer2には文字やロゴなどのデータが格納されていて、Layer1にはバックグラウンドカラーが格納されています。Layer1の目玉のマークをクリックすると、 背景が消えましたね。
04-2. レイヤー2を展開する
まずLayer2を展開します。
04-3. テキストを変更する
展開されたレイヤーの中から、左側の編集画面と文字が呼応している箇所を探します。HEALTH PLAN MANAGEMENT SOLUTIONSの文字が呼応していますね。実際に目玉のアイコンをクリックしてみてください。対応しているのがわかります。
キーボードのTを叩くか、左側のメニューから横書き文字ツールを選択します。
編集したい文字の上にカーソルを合わせて、文字ツールのアイコンが入力モードに変わったことを確認して、訴求文章を書きましょう。
04-4. 文字の大きさを変更する
今回は「無料eBookと無料コースで学ぶ Udemyでオンラインコースを販売する方法」という訴求文章を作りました。上のGIFでは文字のサイズを変え、フォントや太さを調節しながら、画面いっぱいに文字を広げています。文字が読みにくいと広告として機能しないので、見やすいように調節してください。無料や0円という言葉は、僕を含めて怪しい人たちが使う常套句なんだけど、一方でHubSpotのようなニューヨーク証券取引所に上場している企業ですら使っている（FREE！）キーワードです。なぜ今だに訴求文章にそれを使うのかというと、一言で、反応率が上がるからです。だから仮にあなたが無料/0円でプレゼントを提供しているなら、素直に「無料」あるいは「0円」という単語をタイトルに入れるようにしてください。
#05. フォトショップ 切り抜きツールの使い方
3つのバナーが連なっているので、切り抜きツールを使って必要な部分だけをクロップします。最後にエンターを叩いて切り抜き完了！
#06. フォトショップで広告バナーをPNGとしてクイック書き出しする
ブログに戻ります。chromeブラウザを使っています。右クリック > 検証 で、ボディ部分のWidth（横幅）を確かめます。1058pxだそうです。じゃあ書き出しサイズもこの大きさになります。
Photoshopに戻り、イメージ > 画像解像度を選択。幅を1058pixelに変更してOKします。
書き出しましょう。ファイル > 書き出し > PNGとしてクイック書き出し > 名前をつけて保存します。例題では udemy.png としました。
Finderで書き出されたデータを確認します。udemy.pngは、大きさ1058になっています。よし、完成。
#07. WordPressのウィジェットでバナー広告を挿入する設定方法
完成図はこんな感じ。ブログ記事直下にバナーを挿入したい。実際にバナーを作りました。さて挿入していきましょう。
少し先回りしてお話をします。WordPressのダッシュボードから、外観 > ウィジェットに移動します。
左側の利用できるウィジェットから「テキスト」を選びます。ブログの記事直下ですから、After Entryにテキストを配置します。After Entryのウィジェットがあるかどうかは、WordPressのテーマによりけりです。僕はGenesis FrameworkのNews Proというテーマを使っています。
さて、最後のプロセスです。長いですが、集中して聞いてください。
- メディア > 新規追加
- ファイルを選択 > 選択 > 開く
- アップロードした画像の「編集」をクリック
- ファイルのURLをコピーする
- テキストウィジェットをAfter Entryに追加する
- command + Vでバナーを貼り付ける
はい、以上でバナーの作成と、記事直下での表示が完了しました。
