• Skip to primary navigation
  • Skip to main content

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

年収1000万円以上のネットビジネス経営者を対象にデジタルコンテンツの販売方法とマーケティングオートメーションの導入方法に関する情報を発信するブログ。

  • いしこん 3.0
  • 無料ウェビナー
  • もう1本読む?
    • 【初心者でもわかる】失敗しないセールスファネル完全攻略ガイド:リード獲得から高額商品販売まで、売上を最大化する自動化戦略
    • 個人事業主のためのAIツール活用術|ChatGPTから始めるビジネスの自動化・効率化マスターガイド
    • ネット広告代理店を個人で開業!Facebook広告運用のスキルを身につけて成功する方法|ツールの設定、数値分析、営業、業務効率化まで
    • 【保存版】コンテンツマーケティングのネタ切れを防ぐ!ネタの見つけ方と戦略のコツ
    • 上級者をペルソナに設定し優良顧客だけを集める方法
    • Eメールマーケティングの基礎知識|開封率と成約率の向上、セグメンテーションまで
    • 30代フリーランスが家族と一緒にオランダに移住した体験を話します
    • Webマーケティングのやり方マスター講座|ブランディング戦略、SNS発信、スケジュール管理を解説
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • オンラインコース(講座)ビジネスの作り方・やり方
    • 会員制サイトの作り方とサブスクリプションの導入方法
    • 動画広告の作り方マスター講座|種類、活用方法から効果測定のコツまで
    • 短くて成約率の高いVideo Sales Letter(VSL)の作り方
    • エバーグリーンローンチとは?ツールの使い方を詳しく解説!
    • 個人でKindle電子書籍を出版して利益を得る方法
    • Teachable(ティーチャブル)の使い方・操作方法
    • ClickFunnels(クリックファネル)の使い方・操作方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • スクール
  • Show Search
Hide Search
現在の場所:ホーム / Photoshop / Photoshopでバナー広告を作る方法(Envato Elementsのテンプレートを利用)

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

Last updated on 2017年10月7日 By 石崎 力也

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

今回お届けするノウハウはこちら

  • #01. Envato ElementsのUnlimitedプランを購入しよう
    • 全てのオンラインクリエイターはenvato elements($29)を購読すべき
    • Envato Elementsに含まれているテンプレートの種類
  • #02. Envato ElementsでLandscape(横長)のテンプレートを探す
  • #03. Envato Elementsでダウンロードしたファイルをフォトショップで開く
  • #04. 広告訴求の文章に関するテクニックと作成方法
    • 04-1. フォトショップのレイヤーを理解する
    • 04-2. レイヤー2を展開する
    • 04-3. テキストを変更する
    • 04-4. 文字の大きさを変更する
  • #05. フォトショップ 切り抜きツールの使い方
  • #06. フォトショップで広告バナーをPNGとしてクイック書き出しする
  • #07. WordPressのウィジェットでバナー広告を挿入する設定方法

#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でバナーを貼り付ける

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

カテゴリPhotoshop

About 石崎 力也

石川県金沢市出身。モントリオール在住。専門スキル:競艇、コピーライティング、DRM、アニメーション。このサイトの運営責任者です。2013年3月に六本木と西麻布で会社を設立し、同年11月までに全てのメディア・広告事業を軌道に乗せる。現在は、家族と一緒に、3か月に1度、住む国を変えながら生活をしています。

「デジタルマーケティング完全ガイド」を無料プレゼント0円でダウンロード

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

Copyright © 2025 · Rikiya "Sales Funnel" Ishizaki