[リニューアル]小見出し用のバナーを作る
あれこれ見比べながら作った見出し画像。いざ掲載してみるとなんかしっくりこなかったので微調整を施してようやくできあがりました。最終的にできた見出し画像がコチラ。
![]()
全体的に眺めてみたところ、どうも白が多くて寂しい感じだったので、ラインの色を青系に、背景も薄い水色を入れてみました。これでなんとなく締まった感じがしたので、今度はその下に配置する小見出し用の画像を作成することに。
この小見出し用の画像、どんな感じにするかかなーり悩みました。だって、すぐ上にくる見出しが文字だけで作られてるんですよ。しかも、小見出しが付くのはこのサイトの中心であるレビューのタイトル。実際に小見出しもテキストだけで作ってみたんですが、どうもレビューが目立たないというかパッとしません。
そこで、こんなん作ってみました。



見出しってゆーか、バナーですね。右側にレビューしたそれぞれのHDDの画像を配置して重みをつけてみました。ちょっと文字のインパクトが薄いような気もするんですが、その辺は後で微調整することにして、実際掲載するとどうなるかってゆーと、こーなりました。

ただ見出しを画像化して、小見出しに写真を入れただけなんですが、当初のデザインより格段に華やかになりました☆また、小見出しに入れたHDD写真があることで、どんなHDDをレビューしているのかというのがパッと見て分かるように。うん、我ながらいい感じ。
ちなみに、HDD写真を枠からはみ出させたのはノンデザイナーズ・デザインブックに書いてあったテクニックのひとつ。全般的なデザインのお勉強にと購入した本なんですが、いろんなところで参考になってます^^
でもまだなんか寂しい感じがするんですよねぇ。せっかく3種類18件ものレビュー記事があるのになんとなく寂すぃ.....。ということで、次はこの辺に手を加えてみたいと思います。
ウェブデザイン奮闘記 関連記事
ウェブデザイン奮闘記関連
- [リニューアル]HDDサイトのレイアウト再考
- [リニューアル]デザインの基礎知識を学ぶ
- [リニューアル]サイトの内容を整理する
- [リニューアル]レイアウト案を作る
- [リニューアル]レイアウト2パターンの比較
- [リニューアル]レイアウト決定
- [リニューアル]Photoshopで画像作成
- [リニューアル]見出し画像の作成
- [リニューアル]見出し画像のフォント
- [リニューアル]小見出し用のバナーを作る
- [リニューアル]記事タイトルを画像にしてみる
- [リニューアル]全体のコントラストを見る
- [MT]HTMLからMTテンプレートへ(ヘッダー編)
- [MT]HTMLからMTテンプレートへ(記事リスト編)
- [MT]HTMLからMTテンプレートへ(まとめ)
- [リニューアル]リニューアル完了
