バナーを簡単に作成する行程
今回は、以下の様なバナーをPhotoshopを使用して実際に作成し、完成するまでの行程を3工程に分けて説明させていただきます。
デザインの知識が無くてもバナーが作成できるようにまとめました。
また、役に立つサイトを多く紹介しているので、デザインの勉強を積んだ方にもぜひ参考にしていただければと思います。
Photoshopは、古いバージョンのものを無料で入手する事が可能です。以下の記事を参照下さい。
無料でAdobe CS2が手に入る!?Photoshop CS2のダウンロード方法｜フォトショップの参考書 [sitebook]
バナーには国際規格が定められています。
国際規格にのっとって、横300px 縦250px (Medium Rectangle：ミディアムレクタングル)のものを使用します。
バナーの国際規格については、以下のページにまとめられています。
webディレクターズ/WEB制作を効率化させる、国際標準バナーサイズ
【手順】
１．コンテンツを決める
1-1 何のためのバナーなのか
今回の場合「安く売っている事を認知してもらい、クリックしてもらう事」が目的です。
1-2 構成する要素
1-1の内容を踏まえ、バナー内必要な要素を棚卸しします。
今回は、以下の4点です。
「10％OFF」
「SALE」
「期間限定」
「ギターのセールだとわかるもの」
1-2-1コピー
あらかじめコピーを決めておきます。
最低限の文面で効率よく引きのある言葉を選びましょう。
今回は、以下の2つを採用しました。
メイン文言「SALE 10％OFF」
サブ文言「10/1～10/31限定！」
1-2-2イメージカラー
サイトの色と調和したものが良いでしょう。
また、以下の記事も参考にしていただけます。
モバイルファーストマーケティングラボ/5分で学べる配色デザインの基礎！ web制作者が色彩を操るためのコツ
今回の配色図は以下の通りです
1-2-3 画像
写真を撮るか、フリー素材を使用するか。
フリー素材だと、ECに特化したものを扱っている以下のサイトが便利です。
ECサイト・ネットショップ素材を無料でダウンロードできる「EC design（デザイン）」ズ
ネットショップ専用の、商用利用可フリー素材サイト「EC予備校」
２．手書き
2-1 紙にコンテンツを書いていく
PCで作業すると、どうしても悩んでしまうので、まず紙に具体的な下書きをして、作業のみをPCで行う事で効率が大幅に良くなります。
1-2で決定したコンテンツをチェックしていき、以下の様な形でおおまかな位置を決めましょう。
３．本作成
3-1 ある程度おおまかに作成する
冒頭でも説明したとおり、今回はPhotoshopを使用してバナーを作成します。
まずはおおまかに設置していきます。
ここで、見た感じで足りない部分を補っていきます。
コツは以下の３点。
・とにかく余白を埋める
・他のバナーを参考にする
・見難い部分にはフチやシャドウをつけてみる
です。
他のバナーを参考にする際は、以下の様なバナーを多く紹介しているサイトで、自分が作ったものと近いものを照らしてみると余白などの打開策が生まれやすいです。
バナーデザインDB
Retrobanner
3-2 チェックポイント
3-2-1文字間等、統一感はあるか
綺麗なバナーでこその訴求力です。
・文字間
・行間
・オブジェクト間
等、微妙な距離を確認し、最終調整をしましょう。
文字のカーニング等は、photoshopを利用している場合、以下のページが参考になります。
カーニング、字送り、文字ツメの違い/adobe
3-2-2デバイスをまたいでの可読性
バナーでもスマホ対応は必須。
レスポンシブWebデザインなど、複数デバイスで同じバナーを仕様するのであれば
PCで見る事ができても、スマートフォンで閲覧時に文字がみれるかどうかが重要になってきます。
実際にスマートフォンで（可能ならブラウザを使用して）画像を閲覧し、可読性を確認します。
必要であれば、3-2-1に戻って、もう一度確認します。
以上のチェックが完了したら完成となります。
いかがでしょうか。
訴求力のあるバナーを作成して、ショップをより良いものにしましょう。
