ホームページデザインテクニック(バナー編)

バナーデザインのコツ②「困ったときは素敵な女子を横に置いて指ささせとけ!」

バナーデザインのコツ②

困ったときは素敵な女子を横に置いて指ささせとけ!

キャッチコピーはあるけど、それだけじゃ寂しい。

バナーを作成するときに、背景を何にするか、困ったことはありませんか?

新商品がでました!とか、イベントのお知らせバナー!とかだと、
なんとなくこの写真(商品の写真とかね)横に置いとくかで、割と簡単に思いつきますが、

「無料キャンペーン実施中!」とか「お問い合わせはこちら」とかの
ちょっと、どーやって背景を飾ろうかな?文字だけで別にいっか~みたいになるときがあると思います。

そんな時は、

shutterstock_65837143_s

こんなのとか

shutterstock_95096260_s

こんな写真をGETして、
横に置いときましょう。
上記写真は有料素材(お金を払って使用する写真)です。

無料でも、今はいろんな写真が使えたりするので
探してみてくださいね☆

kiji_2_1

■写真素材なら「写真AC」無料(フリー)ダウンロードOK
http://www.photo-ac.com/

 

kiji_2_2
■ぱくたそ-フリー写真素材・無料ダウンロード
https://www.pakutaso.com/

▼このおもっくそよく見かけるバナーの人、大川竜弥さんはこの「ぱくたそ」ですね☆
 この人もタダでやらせてくれます。
PAK141221220I9A4947_TP_V

 

それでは、実際に写真を使ってバナーをそれっぽくしてみましょう。(=゚ω゚)ノ

【注1:あくまで素材を使うときはどうしても横に置きたいけど置きたいもんがないとき。を推奨しています。できるならばオリジナル(自社に関連する人物の許可をとって、やってもらう)でいきたいところです】

 

コピー内容は、

”アスタワークスのホームページ制作 無料キャンペーン!”
(↑嘘ですからね。勘違いして問い合わせしてこないよう。)

まずは写真をチクチクとパスで抜いていきましょう。

kiji_2_6

バックカラーは、アスタワークスのイメージカラーが緑なのでそれでいきたいです。

※ちなみに最近、尊敬する先輩から、アスタワークスのサイト見て、「アメブロみてーな色だな」と言われ、ガーンってなりました。この色はアメブロみたいだね!が、この色はアスタワークスみたいだね!と言われるよう頑張ろうと思います(棒読み)。

効果的な配色の考え方、方法などは、またいずれ記事で書きたいと思います。

はいパス抜き完了したものがこちらになります~。

kiji_2_3

ちょっと暗い気がするんで、色調補正で少し明るくしてみます。

ほい!

kiji_2_4

やっべえ。
やりすぎた。

えい!

kiji_2_5

こんなもんか。

こういった汎用的に使えそうなものはこの時点で別で保存しておきましょうね☆

 

さて、それではこちらにあらかじめ用意しておきました、
背景緑にコピーを入れておいたバナーサイズ(今回は640px×120px)のデータに、抜きたてほやほやの女の子の写真を入れてみましょう。

 kiji_2_7

ほい(=゚ω゚)ノ

kiji_2_8

 

いかがでしょうか。
できあがりこんな感じです。

kiji_2_9

 

なんも無いよりは、それっぽくなった気がしますね☆


最近では、Wixなどの無料ホームページ作制ツールで簡単なページならつくれるようになりましたね!ホームページが欲しいけどお金はかけれないという方には、嬉しい時代になったものです。 でも実際使ってみてどうですか?本当に「いい感じのホームページ」になりましたか?”なんだか思い通りじゃないな~”、”もっとそれっぽくなると思ってたけど”、”なんかダサい”。 こんな風に思っていませんか?

ホームページを作るうえで、Wixを使おうが、Jimdoを使おうが、メモ帳でhtml書こうが、ホームページ制作のプロは画像の使い方、写真の魅せ方、効果的なバナーの魅せ方をとても気にしています。

そんなホームページ制作の現場でプロが「すごく簡単な事だけど、素人はあんまやってないよね」というような、例えばちょっとしたことでバナーの見栄えがグッと良くなるとか、そんなようなことを、いざ今自分でホームページを作りだしてみたけど、結局どーしたらキレイに出来たり、目立つようにしたりとかできるのか分からない方に向けて、少しずつでもお伝えしていければと思います。