2018年4月16日

バナー制作のポイントを知ろう

思わず押したくなる!?ユーザーの心理を刺激するバナーを作りたい方へ

思わず押したくなる!?ユーザーの心理を刺激するバナーを作りたい方へ

バナーを作ってみたものの「まとまり感が出せない」「作ってみたけどピンとこない」とお悩みの方はいませんか?バナーを1つ作るために、サイズやデザイン、テーマなど決めなければならないことは多いです。そこで、今回はバナー制作について語られている記事を集めてみたので、ぜひ参考にしてみてくださいね。

 

(1)広告用バナー、こうやって考えてつくってリサイズしてます


『福岡のホームページ制作会社・株式会社マグネッツ』に開設されているブログに、バナー制作の参考になりそうな記事を見つけたのでご紹介します。

記事のタイトルは《広告用バナー、こうやって考えてつくってリサイズしてます(実演付)》
ここではデザイナーのかわさきさんが、通常お仕事で携わる広告用のバナー制作について、その一連の流れを解説しています。
まず、着手する前の確認事項として挙げられているのは、以下の5点。

・出稿先
・バナーの必要サイズや規定
・誘導先のページ
・納期
・バナーに掲載する情報やデザインテイスト

例えば、バナーの必要サイズや規定を確認する場合は、規定書やサイトからバナーサイズや容量、形式などを確認しておく必要があるそうです。
その他の項目についても詳細が綴られているので、なぜこの事前確認が必要なのかを記事で確認してみてくださいね。

そして、かわさきさんは実例を用いてデザイン制作やサイズパターンなどのテクニックもしっかりまとめてくれていましたよ。
記事には視覚的に比較できるようにいろんなパターンが載せてあるので、実際にバナーを見比べてみてはいかがでしょう。

また、サイト内にはクリエイター魂を揺すぶられる制作事例も多数アップされているので、こちらも覗いてみることをオススメします。

【参照元】https://magnets.jp/web_design/2192/

 

(2)新人Webデザイナー必見!脱初心者できるバナーづくり


『まめろぐ』は、アパレル店員からWebデザイナーに転身した堀内麻未さんのブログです。
未経験からWeb業界に飛び込んだ彼女は、同じような経験をしている人に向けて、仕事のかたわら自身の体験を伝えるイベントやセミナーを運営。
また、ブログを通してデザインや転職のノウハウも発信しています。

今回紹介するこちらの《新人Webデザイナー必見!脱初心者できる5つのバナーづくりのコツ》も、堀内さんが執筆したもの。
ここでは、デザイン初心の方を対象に、バナー制作における以下の5つのポイントについて語ってくれています。

・文字の可読性を上げる
・画像や文字をザックリ切り抜く
・画像をダイナミックつかう
・分割レイアウトをつかう
・テクスチャーを使う

いずれの項目もバナーの参考例をあげながら丁寧に説明してくれているので、抵抗なく読むことができますよ!

堀内さん曰く、バナーはとにかく作りまくるのが一番なのだとか。
また、バナー作りの引き出しを増やすためには、お気に入りのデザインをマネすることも有効なのだそうです。
誰もがクリックしたくなるバナーを目指して、ぜひいろいろな手法を取り入れてみてくださいね!

【参照元】http://mame-webdesigner.com/banner/

 

(3)新米のwebデザイナーが作るバナー制作時のあれ、これ


『ポケットラボ』は、Webデザインのコツをはじめ、IllustratorとPhotoshopの使い方などを発信しているサイト。
Webデザインのアイデア、スキル向上に役立つ記事が満載なので、デザイン力を高めたい方は要チェックですよ!

そんな読み応えのある記事の中から、今回ピックアップしたのが《新米のwebデザイナーが作るバナー制作時のあれ、これ》

ここで触れているのは、バナーの制作手順とデザインのポイント。
「春」をテーマにしたバナーの見本が添付されており、制作時における大事な着眼点やレイアウトに困ったときの対応などがまとめられています。
1つ1つの手順と共にわかりやすく説明されているので、バナー制作初心者の方はぜひ参考にしてみてはいかがでしょう。

人の目を惹くバナーを作るには、アレンジのバリエーションを増やすことが大切です。
サイトには、勉強になるデザインが多く紹介されているので、自分の糧になりそうな情報を探してみてくださいね。

【参照元】http://nh-lab.com/newcomer-web-designer-banner-tutorial/

 

(4)デザイン初心者必見!魅力的なバナー作りに必要な3つの工程


株式会社ロックウェーブが運営している『MOBILE FIRST MARKETING LABO』は、スマートフォンやPCといった情報処理端末機器に対応したレスポンシブECサイトに関することを発信しているブログですが、技術カテゴリーの中にはバナー作りの工程にフォーカスした記事もありました!

こちらの《デザイン初心者必見!魅力的なバナー作りに必要な3つの工程》という記事です。
この記事はバナーの国際規格にのっとり、"Photoshop"を使ってデザインをしていく過程を3つのステップに分けて紹介してくれています。
また、各ステップには、抑えておきたいポイントや効率よくデザインをするときに役立つサイトも記載されているので、デザイン未経験者はもちろんのこと、経験者にもオススメの内容ですよ。

バナー作りは、限られたスペース内に訴求力のあるデザインをする必要があり、コツを抑えていないと作業は捗りません。
クライアントに満足してもらえるようなバナーを時短で制作するためにも、ぜひフリー素材を上手く活用したり、デザインのキモになる部分を抑えたりして、作業を円滑に進めていきましょう!

【参照元】http://www.aiship.jp/knowhow/archives/24387

 

(5)バナーやアイキャッチ制作の参考にしているサイト6選と心得


『Life is bitter』を運営するカワラさんは、これまで500個以上、世に出なかった案も含めると750個以上ものバナーを制作してきました。
苦悩を乗り越え、努力を重ねてきた筆者は、バナー制作についてなかなか奥が深いと語っています。
今回は、そんな筆者がバナー制作時に参考にしているサイトや心がけなどをまとめた記事をピックアップしてみました。

タイトルは《バナーやアイキャッチ制作時に参考にしているサイト6選と心得》
ここにはバナー制作のビギナーにとって、バイブルとなりそうなバナーデザインの心得がまとめられています。
例えば、筆者の場合、クオリティを上げるために「いいと思った他のバナーのどこがよかったのか分析する」のだそうです。
それも、ただ参考にするのではなく、どんな点がどうよかったのかを具体的に紙に書き出すことで、デザインの引き出しが増えるのだと述べています。
その他、筆者の豊富な経験に基づいて知っておくべき事柄についても言及。
冒頭に紹介されている6サイトも筆者のコメントが添えられており、参考になるのではないでしょうか。

今回ご紹介した記事以外にも、カワラさんが更新するブログにはデザイン関連や制作に役立つ記事が満載!
ぜひスキマ時間を見つけて読み合わせてみてくださいね。

【参照元】http://www.life-is-bitter.com/entry/2016/10/08/135319

 

(6)PhotoshopでECサイトのバナーを作成するポイント


『WEB(K)Campus』は、Web制作会社に勤めるKc_fuji(ケーシー・フジ)さんが運営しているサイト。
主に制作の備忘録が綴られており、Webデザインの現場で使えるTipsが詰まっています。

その中から、ぜひ読んでほしいのが《(K)PhotoshopでECサイトのバナーを作成する時のレイアウト方法とかコツとかあれこれ》の記事。
ECサイトのバナーのレイアウトを大まかに4つのケースに分け、場面に応じたサンプルが掲載されています。
4つのケースは以下の通り。

・商品購入のページに誘導するタイプ
・割引や新商品のPRタイプ
・商品購入ページにある商品説明タイプ
・外部サイトへの自社サイトor自社商品宣伝タイプ

それぞれのレイアウトの特徴が述べられているので、用途に合わせたバナーの作り方を学ぶことができます。

そしてKc_fujiさんは例題として仮のテーマを作り、バナーを作っていく手順を公開しています。
1からバナー作りを習得したい方は、ぜひこちらを参考にして自分でデモ制作をしてみてはいかがでしょう?
制作のチェックポイントを把握できるだけでなく、自分に合ったやり方を見出すいいキッカケになるかもしれませんよ!

また、バナー作りでよく使う"Photoshop"のテクニックが紹介されているのも嬉しいポイント。
実践に役立つ内容なので、アクセスしてじっくり熟読してみることをオススメします。

【参照元】http://webkcampus.com/201404/480/

 

(7)バナー広告を作るときに参考になる11種類の型の表現方法


バナー制作をするときは、「商品やサービスを全面に打ち出す」とか「情報をできるだけ盛り込む」「とにかく目立たせる!」など、あらかじめコンセプトを決めてからデザインを行うケースが多いのではないでしょうか。
そこで、ここでは私たちが普段目にするバナー広告をコンセプトごとに分けて、訴求方法の違いを比較している《バナー広告を作るときに参考になる11種類の「型(テーマ?コンセプト?)」の表現方法》という記事に注目したいと思います。

この記事を執筆したのは、ブログ『tontotakumi.com』にWeb制作やWordpress、料理、書評などを綴っているtontotakumiさん。
彼は仕事でバナー広告の内容を考えることになり、そのコンセプトを決めあぐねていたのだといいます。
そこで、いろいろなバナーをチェックしたところ、コンセプト別に11種類のタイプに分別できそうだということに気づき、それを記事にまとめました。

「バナー広告のコンセプトがぼんやりしている」「どんな切り口でバナーのデザインを考えたら良いのかわからない」etc…。
そんなときにtontotakumiさんの記事を読むと、デザインの方向性を固めるときの参考になりますよ。
どんなバナーが、どんなコンセプトで作られているのかがわかると、お手本になるバナー探しもスムーズに行えそうですね!

【参照元】https://tontotakumi.com/marketing/banner-type/

 

(8)デザイン初心者でもできる?プロっぽいバナーのコツ


『April Design』は、ネットショップやホームページの制作を行っているサイトです。
サイトにはコンテンツの1つとしてブログも設置されており、ホームページ制作やWordPress、イベントレポートなどの記事が掲載されています。
その中から、今回のテーマにピッタリな《デザイン初心者でもできる?プロっぽいバナーのコツ》という記事をピックアップしてみました。

記事では、どういったポイントが初心者のようなバナーに見えるのか、ということについてスポットが当てられています。
例えば瞬時に相手に伝わらないアピールの仕方だったり、レイアウトに統一感がなかったり、多色使用といったさまざまなポイントがあるようです。
また、「他のバナーより目立たせたい!」というときについやってしまいそうなポイントも挙げられていましたよ。
いいバナーと悪いバナーの例や対策方法なども同時に記載されており、初心者でもわかりやすい内容となっています。

バナーは多くの人の目に触れるものであり、自分が提供しているサービスを一目で判断してもらうために大切なものです。
「たかがバナー」ではなく、どうすればそのバナーで多くの人を惹きつけられるか、興味を持ってクリックしてもらえるかを考えなければいけません。
「バナーを上手に作るコツを知りたい」という方や「まとまりのあるバナーを作りたい」という方は、ぜひ記事を参考にして自分らしいバナー作りのためのヒントにしてみてください。

【参照元】https://aprdesign.me/bigginer-banner-design/

 

(9)デザイン素人だけどバナー製作が好きだから語らせておくれ


『手芸のスギサク-手作り品のゆるPR部』内の記事《【バナー画像作りのコツ】デザイン素人だけどバナー製作が好きだから語らせておくれ》では、デザインは素人だというスギサクさんが、バナー作りの手順とポイントについて紹介してくれていました。

スギサクさんの場合、バナー作りはまずバナーのサイズを決定することから始まるそうです。
ちなみにサイズは基本的に「300×200」。
凝った仕様は素人だと時間がかなりかかるという経験から、基本的なサイズを決めているのだとか。
サイズが決まれば、あとはデザインを考慮していきますが、ここでも筆者なりのポイントが盛り込まれています。
例えば、バナーの中に入れる写真や文章などの素材は画像編集画面内にまとめておくことで、作業時間を短縮できるのだそうです。
その他、ユーザーが見やすいようなバナー制作の方法が記されているので、シンプルに仕上げたい方や、バナー作り初心者で制作方法に戸惑っている方の参考になりそうですよ。

また、ブログには手芸が大好きだというスギサクさんのハンドメイド作品や手作りおやつを作った様子などが豊富にアップされています。
スキマ時間にぜひ覗いてみてくださいね。

【参照元】https://sugisaku-s.com/web-design-171011

 

(10)ブラウザツールで誰でもバナー広告を作れる6つの手順


「自分でバナーを作ってみたい…でもどうすれば?」という悩める方が参考にできそうな記事を見つけました。
それがこちらの《まるで無料のPhotoshop!ブラウザツールで誰でもバナー広告を作れる6つの手順》

上記の記事では、バナー制作に使用されることの多い"Photoshop"ではなく"Pixlr"というフリーのブラウザソフトで作る方法が記載されており、"Photoshop"を持っていない方でも簡単にバナーが作れるのだそうです。
"Pixlr"の操作方法や制作手順はそれほど複雑ではないようで、バナーの土台の作成方法からレイヤーの細かな設定方法、装飾の使い方などが画像つきで1つ1つ丁寧に説明されています。
バナー制作が初心者の方でも、まずは制作手順と同じように作業を進めていくことによって、バナー制作の基本を身につけることができるでしょう。
そこから、どんどんと自分なりの手順やこだわりポイントを見つけていくといいかもしれませんね。

今回の記事が掲載されているのは、さいでっくすさんが運営する『DIGIHOWS』というブログ。
オススメ商品の紹介記事をはじめ、お仕事に関する記事やWebに関する記事などバラエティに富んでいます。
ぜひブログにアクセスしてみて、興味を惹かれる記事を見つけてみてはいかがでしょうか?

【参照元】http://www.digihows.com/entry/photoshop-muryou

役に立った/参考になったと思ったら、シェアをお願いします。

いきなり相談に行くのは不安な方へ

フリーランスになった時、どんな案件を提案されるのかメールでわかる!