たった30分!?イケてるバナーを作るための8ステップ大公開
ferret編集部:2015年8月6日に公開された記事を再編集しています。
バナーくらい短時間でできる!と意気込んだものの、思った以上に時間をとられることはありませんか?
簡単な作業だと思っていたはずが、何回も似たような作業の繰り返しをしているとイライラしてきたり、モチベーションも保てずと負のサイクルへ陥ってしまいます。
そのような問題を解決するためには、バナー作成のための各工程を分解して、何にどれくらい時間がかかっているのかを知り、効率よく作成する方法を知る必要があります。
今回は、30分でバナーを作るための方法として、作業工程と効率化が図れるポイントを順序立てて解説します。
広告バナー制作の全体像
短時間でバナーを作成する前提条件
制作全てに言えることですが、最短距離でゴールまで走るというのが一番の理想型です。バナー制作においても同様です。そのためにも、ゴールまでの筋道を立てる必要があり、ステップを1つひとつ踏むことで、時間短縮が可能になります。
※今回ご紹介する方法は、バナー制作をする上で必要な最低限の知識があることが前提条件です。
30分でバナー制作を行うための具体的な8つのステップ
整理するための方法として、アナログな方法が効果的な場合があります。
今回の手順の中には、紙とペンを使う工程がありますので、紙とペンのご用意をお願いします。
STEP1:サイズを確認し「やること・やらないこと」を決める【アナログ作業】
制作するバナーによって、何を盛り込むかが変わってきます。
やること・やらないこと(できること・できないこと)を先に決めてしまうことで、後々の工程で迷うことが減ります。
バナー作成で時間がかかってしまう場合、最適な回答を探すため何回も似たような作業を繰り返し行う結果、無駄な時間を浪費している場合があります。それを防ぐために、最短距離の道のりを始めに作ります。
このステップで何をバナーの主役にするのかを決めてしまいましょう。例えば、文字をメインにして写真を添えるのか。写真を魅せるようにして文字を添えるのかなど。
STEP2:必要な素材を書き出す【アナログ作業】
バナーに盛り込む素材をリストアップします。
例えば、
・キャッチコピーならメインのものだけにするのか
・メインコピーを補うためのサブコピーを用意するのか
・画像素材を使用するならばどういったものを使用するか
・テーマカラーは何にするか
などになります。商品名や会社ロゴも盛り込む場合もあります。
※写真や文字を加工する場合、複雑なものであればそれだけで時間が取られてしまうので、簡単な加工をする(もしくは全くしない)というのを前提で今回は進めています。
STEP3:キャッチコピーやサブコピー案を出す【アナログ作業】
キャッチコピーに関しては、バナー作成者に一任されている場合もあれば、逆にコピーライターが用意してくださるものもあります。
訴求ポイント、もしくはメインターゲットが興味を持つコピーを考えましょう。文章が中々出てこなかったり、メッセージが弱かったりする場合は、単語を入れ替えることによって補強することができます。
※バナー作成する際にその商品やサービスが全くわかっていなく、伝えたいターゲットも不明な場合、バナー制作は30分では不可能に近い(作成できたとしても伝えたいことが的外れな場合もあります)ので、今回はそれがわかっている前提で進めています。
STEP4:要素を構成し、優先順位付けをする【アナログ作業】
キャッチコピーやサブコピー、写真など伝えたいものに優先順位を付けます。
STEP5:「手書き」でレイアウトする(ラフの作成)【アナログ作業】
バナーのラフを作成する際、手書きで行うことによって注釈を入れることができます。
例えば、キャッチコピーのフォントは何にしようか加工はどうしようか。背景色は何色だろう。画像をどういった形で入れて、どういった加工をするのだろう?
など、メモ書きを実際に入れることでバナーの設計図ができ上がっていきます。これを元に、デジタル作業へ移行していきます。
STEP6:ラフを元に配置する。文字は単色で入れ、全体を調整する【デジタル作業】
作成したラフを元に、素材を配置していきます。文字はそのまま入れてしまう場合、体裁が悪いのでカーニングの設定などを行って整えます。そして、画像や文字の入れ方など全体的に調整します。
文字間の空間が空いたりズレが生じてしまっている場合、人は違和感を感じます。そういった細かい点を自然に魅せるのがクオリティを高める要因です。
STEP7:配色を確定させ、素材を加工する。色のイメージは、サイトやサービスに合わせる【デジタル作業】
基本的に配色は、ホームページのイメージに合わせるようにしましょう。実際に誘導先のホームページで使用されているような色を使うことで時間短縮にもなります。
STEP8:最終確認作業。一度モノクロにして視認チェックも行う【デジタル作業】
バナーが完成したら一度モノクロにして、視認チェックを行いましょう。モノクロにして読みづらい場合は、完成したバナーも読みにづらい場合もあるため、最終調整を行います。
実際に8つのステップを辿ったバナー制作
ferretのホームページのバナーを実際に今回取り上げたステップで作成してみました。
STEP1:サイズの確認とやること・やらないことの整理[作業時間:約2分]
バナーのサイズを確認して、やること、やらないこと。盛り込むこと、何を伝えるかを書き出しました。
STEP2:必要素材の書き出し[作業時間:約2分]
バナーを作成する際に必要なものを書き出しました。
STEP3:キャッチコピー作成[作業時間:約8分]
キャッチコピーの元になるような単語や語句を書き出しました。それを元にキャッチコピーやサブキャッチコピーとして使用できるような短文を作成しました。
STEP4:要素の書き出しと優先順位付け[作業時間:約1分]
見せ方を決定するために、要素ごとの順位付けを行いました。
STEP5:バナーのラフを作成[作業時間:約2分]
バナーを作成していく上で必要な情報をまとめて、ラフ画を作成します。そこにどのような入れ方をしていくのか、メモ書きもしていきます。
ここまでで約15分です。
STEP6:ラフ画を元に単色で配置する[作業時間:約3分]
ひとまず先に単色で配置してしまい、レイアウトのみを完成させます。カーニング(文字間の調節)を行い体裁も同時に整えます。
STEP7:全体のデザイン・配色を確定させ、調整を行う[作業時間:約10分]
最初に青系統の色をメインカラーとして活用するとありましたが、今回は写真を活用するため、文字色を白で対応しました。それに加え、強調したい文字だけをブルーにしてみました。
それであとは全体のバランスなども調整し、一通りを完成させます。
STEP8:最終チェック[作業時間:約2分]
最終工程としてチェックを行います。ここで、文字のみの伝わりが薄い場合は色を変えたりします。薄い場合は配色を変え、最終チェックを行いましょう。
まとめ
今回取り上げたのは一例ではありますが、共通して言えることは、途中の作業で迷ってしまい、何回も同じことを繰り返していくと時間を浪費してしまいます。
ご紹介したステップを参考にしつつ、要点を抑えた作業を行い、必要なバナー制作を最短で終わらせましょう。
時間があるならば、クオリティをアップさせるために様々な加工を施してみてはいかがでしょうか。
このニュースを読んだあなたにおすすめ
いくらでも持っておきたい無料のパターン素材60選
簡単!ロゴ作成やフライヤー作成にオススメのツール22選
Photoshop初心者必見!Photoshopを使いこなすために知っておくべき情報まとめ
このニュースに関連するカリキュラム
LPOに関するカリキュラム
LPOに関して、カリキュラム形式で学びましょう
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- サイクル
- サイクルとは、スタートしてゴール、そしてまたスタートと、グルグルと循環して機能する状態のことを言います。まわりまわって巡っていく、といった循環機構をさすことが多いです。水の循環サイクルというように、実は繰り返しになってしまう使われ方もすることもしばし。また、自転車に関する事柄として、サイクルスポーツなどという使われ方をされることもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- キャッチコピー
- キャッチコピーとは、商品などの宣伝の際に使用される文章のことです。 宣伝をする対象のイメージや特徴を簡潔にまとめつつ、見た人の印象に残る必要があります。一言で完結するものから数行になる文章など、実際の長さはバラつきがあります。 キャッチコピーの制作を職業とする人のことを、「コピーライター」と言います。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- キャッチコピー
- キャッチコピーとは、商品などの宣伝の際に使用される文章のことです。 宣伝をする対象のイメージや特徴を簡潔にまとめつつ、見た人の印象に残る必要があります。一言で完結するものから数行になる文章など、実際の長さはバラつきがあります。 キャッチコピーの制作を職業とする人のことを、「コピーライター」と言います。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- キャッチコピー
- キャッチコピーとは、商品などの宣伝の際に使用される文章のことです。 宣伝をする対象のイメージや特徴を簡潔にまとめつつ、見た人の印象に残る必要があります。一言で完結するものから数行になる文章など、実際の長さはバラつきがあります。 キャッチコピーの制作を職業とする人のことを、「コピーライター」と言います。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- キャッチコピー
- キャッチコピーとは、商品などの宣伝の際に使用される文章のことです。 宣伝をする対象のイメージや特徴を簡潔にまとめつつ、見た人の印象に残る必要があります。一言で完結するものから数行になる文章など、実際の長さはバラつきがあります。 キャッチコピーの制作を職業とする人のことを、「コピーライター」と言います。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- バナー
- バナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。また、静止画像だけでなく、アニメーションを用いたバナーもあります。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング