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

バナーを簡単に作成する行程

今回は、以下の様なバナーを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に特化したものを扱っている以下のサイトが便利です。

...詳しい情報・続きはこちら >>
http://www.aiship.jp/knowhow/archives/24387
─情報元：モバイルファーストラボサイト様─