バナーでデザイナーの力量が分かる

小さな面積でデザインを行うバナーは、それだけでデザイナーの力量が分かると言って過言ではありません。

就活でも見られてる

制作業務では、バナーの制作が圧倒的に多いです。
それだけに、面接の実技試験としてバナーの製作をさせる会社もあります。

わたしも学生時代にバナーをたくさん作りました。
実際の試験課題としては出ませんでしたが、ここで練習したことは後の業務に役立っています。

バナー制作で稼げる

きれいなバナーを作れるようになると、クラウドソーシングでちょっとしたお小遣い稼ぎも期待できます。

バナーから派生してブログヘッダーのデザインや、LP画像の作成などの案件も。
高いところは１枚8,000円から価格設定をしていますね。すごい。

誰でも作れる

バナー制作は、しかるべき手順を覚えると、誰でも作れるようになります。
以下に作業工程を記録しました。

５分の閲覧で制作スキルが身につくので、ぜひ最後までお読みください。

１.下準備

昔のデザイン会社はphotoshopが主流でしたが、最近はIllustratorと同時使用している会社が大半です。
今回はイラレ で作ります。Photoshopでの作り方はまた次回の記事で。

①境界線を引く

線のみにした矩形をアートボードの上に載せます。WEBサイトとバナーの領域をわけるためです。

②素材の用意

今回はビューティーサロンのバナーを作ります。
こんな感じのバナーです。
「脱毛サロン　バナー」の検索結果

写真はこの女の子で。

フリー写真素材「ぱくたそ」さんから借りています。

出来上がった写真レイヤーの上に、白黒レイヤーを載せて、色を抜いておきます。

2.写真・文言を全て入れる

与えられた文言をとりあえず全部入れてしまいましょう。
その理由は、過去の記事でご紹介したとおりです。

【WEBデザイン】学習が捗るバナートレース方法

女の子を白黒にした理由

色を入れるより文字を先に組みたいので、女の子を白黒にしました。
全部組み上がってから色や装飾をほどこしてゆくと、きれいに仕上がることが多いです。

3.文字のメリハリをつける

２の段階でやってますが、「何を売りにしたいのか」を考えます。

このバナーでは「美白美肌脱毛」であることと「4,900円」の安価であることを
主張したかったので大きくしました。

「全身脱毛」「白玉注射」「トラネキサム酸＋ビタミンC」はコース内のメニューなので均等にしてます。
WEBでいうところのh1〜h5の見出しを考える感じです。

4.文字を組む

白黒のまま文字を組んでいきます。

数字は半角英数の方がきれいに見える気がするので和欧混植をよくやります。

今回は明朝で組みましたが、
欧文フォントで困った時は「helvetica」にしとくと安心。
Adobeフォントでは、「Nimbus Sans」が「helvetica」に似てます。大人の事情でたぶん言っちゃダメなネタです。

できあがったバナーはこちら

うーん、女の子の身をかがめている部分に空きができちゃったので、
花とか入れて埋めときます。

5.カラーにして素材で装飾

といっても吹き出し入れて、背景画像を入れたくらいです。

女の子の空いたスペース部分は、女性向けデザインの伝家の宝刀「謎の筆記体」でごまかしてます。
これを入れると一気にガーリーになるからすごいですよね。
流行がいつまで続くのかわからないんですが、女性向けのデザインにたいてい入ってます。
考えた人しゅごい。

そして、完成したバナーがこちら

文字組みをしっかりやったので、色を変えてもそんなに違和感ない感じです。

使用したフォントは以下

• 小塚明朝 Pr6N
• ヒラギノ明朝 ProN
• Times
• Snell Roundhand
• Apple Chancery

その他にデザイン上達する方法

デザインスキルを高めるには、他の人のデザインを見ることも大事です。
わたしがこの業界に入って、いろいろな人に教えてもらった上達方法をまとめていますので、
下記の記事もぜひ読んでみてください。

【デザイン力】dribbbleって知ってる？【絶対UP！】

爆速でデザインレベルが上がります。

wordpressの自作テーマを作る

デザインスキルを上げていくことは確かに大事ですが、
同時にプログラミング出来るアピールをしておくと就職の手助けになります。

wordpressのテーマデザインは簡単に覚えられますので、こちらの記事もぜひ。