するferret編集部:2015年8月6日に公開された記事を再編集しています。バナーくらい短時間でできる!と意気込んだものの、思った以上に時間をとられることはありませんか?簡単な作業だと思っていたはずが、何回も似たような作業の繰り返しをしているとイライラしてきたり、モチベーションも保てずと負のサイクルへ陥ってしまいます。そのような問題を解決するためには、バナー作成のための各工程を分解して、何にどれくらい時間がかかっているのかを知り、効率よく作成する方法を知る必要があります。今回は、30分でバナーを作るための方法として、作業工程と効率化が図れるポイントを順序立てて解説します。制作全てに言えることですが、最短距離でゴールまで走るというのが一番の理想型です。バナー制作においても同様です。そのためにも、ゴールまでの筋道を立てる必要があり、ステップを1つひとつ踏むことで、時間短縮が可能になります。※今回ご紹介する方法は、バナー制作をする上で必要な最低限の知識があることが前提条件です。30分でバナー制作を行うための具体的な8つのステップ整理するための方法として、アナログな方法が効果的な場合があります。今回の手順の中には、紙とペンを使う工程がありますので、紙とペンのご用意をお願いします。制作するバナーによって、何を盛り込むかが変わってきます。やること・やらないこと(できること・できないこと)を先に決めてしまうことで、後々の工程で迷うことが減ります。バナー作成で時間がかかってしまう場合、最適な回答を探すため何回も似たような作業を繰り返し行う結果、無駄な時間を浪費している場合があります。それを防ぐために、最短距離の道のりを始めに作ります。このステップで何をバナーの主役にするのかを決めてしまいましょう。文字をメインにして写真を添えるのか。写真を魅せるようにして文字を添えるのかなど。STEP2:必要な素材を書き出す【アナログ作業】バナーに盛り込む素材をリストアップします。・キャッチコピーならメインのものだけにするのか・メインコピーを補うためのサブコピーを用意するのか・画像素材を使用するならばどういったものを使用するか・テーマカラーは何にするかなどになります。商品名や会社ロゴも盛り込む場合もあります。※写真や文字を加工する場合、複雑なものであればそれだけで時間が取られてしまうので、簡単な加工をする(もしくは全くしない)というのを前提で今回は進めています。STEP3:キャッチコピーやサブコピー案を出す【アナログ作業】キャッチコピーに関しては、バナー作成者に一任されている場合もあれば、逆にコピーライターが用意してくださるものもあります。訴求ポイント、もしくはメインターゲットが興味を持つコピーを考えましょう。文章が中々出てこなかったり、メッセージが弱かったりする場合は、単語を入れ替えることによって補強することができます。※バナー作成する際にその商品やサービスが全くわかっていなく、伝えたいターゲットも不明な場合、バナー制作は30分では不可能に近い(作成できたとしても伝えたいことが的外れな場合もあります)ので、今回はそれがわかっている前提で進めています。STEP4:要素を構成し、優先順位付けをする【アナログ作業】キャッチコピーやサブコピー、写真など伝えたいものに優先順位を付けます。STEP5:「手書き」でレイアウトする(ラフの作成)【アナログ作業】バナーのラフを作成する際、手書きで行うことによって注釈を入れることができます。キャッチコピーのフォントは何にしようか加工はどうしようか。画像をどういった形で入れて、どういった加工をするのだろう?など、メモ書きを実際に入れることでバナーの設計図ができ上がっていきます。これを元に、デジタル作業へ移行していきます。STEP6:ラフを元に配置する。作成したラフを元に、素材を配置していきます。文字はそのまま入れてしまう場合、体裁が悪いのでカーニングの設定などを行って整えます。画像や文字の入れ方など全体的に調整します。文字間の空間が空いたりズレが生じてしまっている場合、人は違和感を感じます。いった細かい点を自然に魅せるのがクオリティを高める要因です。STEP7:配色を確定させ、素材を加工する。基本的に配色は、ホームページのイメージに合わせるようにしましょう。実際に誘導先のホームページで使用されているような色を使うことで時間短縮にもなります。モノクロにして視認チェックも行う【デジタル作業】バナーが完成したら一度モノクロにして、視認チェックを行いましょう。モノクロにして読みづらい場合は、完成したバナーも読みにづらい場合もあるため、最終調整を行います。実際に8つのステップを辿ったバナー制作ferretのホームページのバナーを実際に今回取り上げたステップで作成してみました。STEP1:サイズの確認とやること・やらないことの整理[作業時間:約2分]バナーのサイズを確認して、やること、やらないこと。盛り込むこと、何を伝えるかを書き出しました。STEP2:必要素材の書き出し[作業時間:約2分]バナーを作成する際に必要なものを書き出しました。STEP3:キャッチコピー作成[作業時間:約8分]キャッチコピーの元になるような単語や語句を書き出しました。それを元にキャッチコピーやサブキャッチコピーとして使用できるような短文を作成しました。STEP4:要素の書き出しと優先順位付け[作業時間:約1分]見せ方を決定するために、要素ごとの順位付けを行いました。STEP5:バナーのラフを作成[作業時間:約2分]バナーを作成していく上で必要な情報をまとめて、ラフ画を作成します。そこにどのような入れ方をしていくのか、メモ書きもしていきます。ここまでで約15分です。STEP6:ラフ画を元に単色で配置する[作業時間:約3分]ひとまず先に単色で配置してしまい、レイアウトのみを完成させます。カーニング(文字間の調節)を行い体裁も同時に整えます。STEP7:全体のデザイン・配色を確定させ、調整を行う[作業時間:約10分]最初に青系統の色をメインカラーとして活用するとありましたが、今回は写真を活用するため、文字色を白で対応しました。それに加え、強調したい文字だけをブルーにしてみました。それであとは全体のバランスなども調整し、一通りを完成させます。STEP8:最終チェック[作業時間:約2分]最終工程としてチェックを行います。ここで、文字のみの伝わりが薄い場合は色を変えたりします。薄い場合は配色を変え、最終チェックを行いましょう。まとめ今回取り上げたのは一例ではありますが、共通して言えることは、途中の作業で迷ってしまい、何回も同じことを繰り返していくと時間を浪費してしまいます。ご紹介したステップを参考にしつつ、要点を抑えた作業を行い、必要なバナー制作を最短で終わらせましょう。時間があるならば、クオリティをアップさせるために様々な加工を施してみてはいかがでしょうか。簡単!ロゴ作成やフライヤー作成にオススメのツール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ピクセルが一般的です。静止画像だけでなく、アニメーションを用いたバナーもあります。するおすすめ記事ADマーケティングオートメーション(MA)「Pardotユーザー会」参加者が、Pardot創業者と語る。参加者同士の“深い”つながりから生まれる価値とはマーケティングオートメーション(MA)ADSEO(検索エンジン最適化)記事を作っているのにサイト流入が足踏み・・・・・・。そんな状況を打開する「正しい努力」の仕方SEO(検索エンジン最適化)ADカスタマーサポート・カスタマーサクセスあえて初仕事で「チャットボット導入」を。今年の新人をたくましく育てる「逆説の育成術」カスタマーサポート・カスタマーサクセスBtoBマーケティングのノウハウ資料をダウンロード!基礎から4ステップで実践まで!BtoBマーケティング実践ガイド(無料)BtoBマーケティング実践ガイドは、BtoB事業のマーケティングのノウハウを網羅的かつ体系的にまとめたものです。基礎から応用まで4つのステップでマーケティングが実践できるBtoBマーケターの永久保存版です。株式会社SoLabo「0→1」「1→10」がどちらも叶う。株式会社ベーシック【求人】サービス価値を高め市場を創造。編集部厳選!最新情報をお届けもう一度読みたい記事をブックマーク実務に役立つ資料をダウンロード無料会員登録会員ログインこの記事を書いたライターferret編集部ferret編集メンバーが不定期で更新します。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはAD記事を作っているのにサイト流入が足踏み・・・・・・。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。