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

バナーデザインのコツ① 「プロっぽいデザインの秘訣はズバリ「文字詰め」にあり!」

バナーデザインのコツ①

まずは文字詰め!

まずはadobeのイラストレーターでもフォトショップでもどちらでも構いません。
バナーに入れたいコピー、文字を入れてみましょう。
※写真はフォトショップCC使用

ban_1_2

 

上の写真はなんの指定もなくそのまま入れてみたものです。
バナー作成とか始めたばかりの人はこのままにしちゃう人が多いようです。
それでは、「文字詰め」をサクッとやっちゃいましょう!(=゚ω゚)ノ

書いた文章を選択して、
ウインドウ→文字→その中のV/AまたはVAで好みの文字間に一括調整!
(※イラレでも同じだよ!)

ban_1_3

ほい!

ban_1_4

 

上の写真はV/Aで”メトリクス”を選んでみました。
意味は知りません。別に知らなくていいから(=゚ω゚)ノ

バージョンの違いによりセレクトできる内容が違うかもしれませんが、基本的にこのV/AまたはVAで調整できるのでいろいろ触って試してみてください。

いかがでしょうか?ちょっと間延びしていたただの文章が少し「キャッチコピー」の形を帯びてきたのではないでしょうか。

さらに一文字単位で微調整を行い、プロの仕事を気取れ

さてここからもう1ランクレベルをあげましょう。
ここからはグラフィックデザイナーにとっては当たり前だけどWEBデザイナーはあまりやってないよねとよく言われていた”カーニング”です。
※最近ではWEBデザイナーもしっかりやりだしてるかな?
僕もこれについてはグラフィックの先輩から教えていただきました。

カーニングとは、フォトショップやイラストレーターなどのフォントは、文字によっては左右の隙間が違ってくるので、一文字ごとに調整します。

これを覚えると、後輩に1文字単位で「この文字とこの文字の隙間、気になんないの?ふーん。」と
プロを気取って偉そうにできます。
(※その結果、嫌われても責任は持ちません。)

 それではいってみましょう!(=゚ω゚)ノ

↓こんな感じで隙間を縮めたり空けたりしようと思います。

正直、文字詰めの時点で結構これでよくね?って感じになってくれたので、今回は、ほんまの微調整です。文章によってもっとあからさまに、ひらきすぎ!とか、くっつきすぎ!とか出てくるので、その時は自分でちょっと離れたところから見て、気持ちよく読める文字間を探してみてくださいね!
(※離れてみるのがコツです。最初はどこがおかしいか分からないと思いますが、離れて全体的に見てみるとけっこうどこがおかしいか気付けたりしますよ!)

↓やってみた

いかがでしょうか?
微妙?笑

↓一番最初のと比べてみましょうか。

ban_0

 

だいぶ変わりましたね☆

かたまり感を意識しながらやると見やすいキャッチコピーをバナーに入れることができますよ(=゚ω゚)ノ

 


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

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

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