画像を使ったデザインの手順を教えます！ : アフィリエイターに告ぐサイトデザイン術

1.　最終的な完成形を何となく頭でイメージする

僕の場合、

まずは簡単にイメージをすることから入ります。




イメージといっても別に大層なことはしてなくて、

完成形を大まかに思い描いているだけです。

もちろん、

思い描いたイメージと違うものを作ることだってあります。

2.　HTML・CSSで形を作る

まだ画像は使わず、

画像をはめこむための土台を先に作ってしまいます。

これ(↑)は、骨組みのHTMLです。




一気に作るのではなく、

2つの部分に分けて作ってから接着させます。

「タイトル記入部分」は、<div class="box_title"></div> の箱

「本文を書く部分」は、、<div class="box_honbun"></div> の箱




次に飾り付けのCSSを書きます。

そして、骨組みと飾り付けがどのように反映されるか…

これ(↑)でも十分にありなんですけれど、

画像を使うともっとオシャレに仕上げれるので。

3.　画像をはめ込む部分のサイズを測る

どうしてサイズを測るかは

なんとなくわかると思います。




体の大きい人がSサイズの服を着ると

違和感がありますよね？




逆に体の小さい人がダボダボの4Lサイズの服を着ると、

違和感がありますよね？




サイズにあったものを着ないと

違和感があるということです。




それは、画像でも同じこと。




HTMLやCSSで骨組み、飾り付けしたものにあったサイズの画像を

用意する必要があります。






じゃあ、どうやってサイズを測るんですか？




…という話の流れになるわけです。




測り方は色々と方法がありますけれど、

僕はFirefox(ファイヤーフォックス)のアドオンを使います。




▼ MeasureIt(メジャーイット)

http://www.kevinfreitas.net/extensions/measureit/




これで、対象物の縦横のサイズを測ります。




タイトル部分に画像をはめ込むとして、

サイズを測ってみましょうか。

縦 (height) : 598px

横 (width) : 30px

…となりました。




なので、

そのサイズで画像を作れば良いわけです。




ただ、画像によっては工夫すると

サイズに合わせずに小さいサイズでも問題なくなります。




ここでは難しい話はせずに、

素直にサイズに合った画像を作りましょう。

4.　サイズに合った画像を作る

いよいよ画像作りですね。

オリジナル画像を是非作ってみてください。




僕が作った画像(↓)は...

かっこいい画像が作れないと悩んでいるのであれば、

個人的に「WEBバナー指南書」がオススメです。




▼ 「WEBバナー指南書」で学べるのは!?




僕が書いた教材ではないですけれど、

僕が伝えたいことがそのまんま載っています。




主旨がズレてしまうので、

ここでは画像の作り方の手順は省略です。

5.　画像をはめ込む

さっきのCSSの「.box_title {  }」に、

画像をはめ込むための記述を書きます。

何を追記したかわかります？




background-image: url();

background-repeat: no-repeat;




この2つ(↑)を追記しました。




すると、

こんな感じ(↓)の仕上がりになります。

ちょっと難しく思うかもしれませんけれど、

形を作って、サイズを測って、画像をはめ込む




これだけなんです。




僕はいつも、

この流れでデザインをしています。




画像が上手くマッチしなかったら、

画像を作りなおしたり、修正したりします。




どうでしょう。

参考になりましたか？