うかブログ »

ウェブデザイン »

[リニューアル]小見出し用のバナーを作る »

あれこれ見比べながら作った見出し画像。いざ掲載してみるとなんかしっくりこなかったので微調整を施してようやくできあがりました。最終的にできた見出し画像がコチラ。

HDDレビューサイト見出し画像

全体的に眺めてみたところ、どうも白が多くて寂しい感じだったので、ラインの色を青系に、背景も薄い水色を入れてみました。これでなんとなく締まった感じがしたので、今度はその下に配置する小見出し用の画像を作成することに。

この小見出し用の画像、どんな感じにするかかなーり悩みました。だって、すぐ上にくる見出しが文字だけで作られてるんですよ。しかも、小見出しが付くのはこのサイトの中心であるレビューのタイトル。実際に小見出しもテキストだけで作ってみたんですが、どうもレビューが目立たないというかパッとしません。

そこで、こんなん作ってみました。

小見出し用バナー(1)

小見出し用バナー(2)

小見出し用バナー(3)

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

現時点のHDDレビューサイト

ただ見出しを画像化して、小見出しに写真を入れただけなんですが、当初のデザインより格段に華やかになりました☆また、小見出しに入れたHDD写真があることで、どんなHDDをレビューしているのかというのがパッと見て分かるように。うん、我ながらいい感じ。

ちなみに、HDD写真を枠からはみ出させたのはノンデザイナーズ・デザインブックに書いてあったテクニックのひとつ。全般的なデザインのお勉強にと購入した本なんですが、いろんなところで参考になってます^^

でもまだなんか寂しい感じがするんですよねぇ。せっかく3種類18件ものレビュー記事があるのになんとなく寂すぃ.....。ということで、次はこの辺に手を加えてみたいと思います。

「ウェブデザイン奮闘記」関連記事

△ページトップに戻る

この記事に関連情報

同一カテゴリ内の新着記事

関連カテゴリ一覧

△ページトップに戻る

トラックバック

トラックバック先URL:

△ページトップに戻る

この記事に関するコメント・クチコミ情報

2007/09/06
ちあき.

こんにちは♪
先日からのウェブデザイン講座、ものすごく興味深く拝見してますっ!!!
見出し画像一つ作るのにも、こんなにいろいろ試行錯誤されてるなんて、やっぱりスゴイですよねぇ……(。´Д⊂)うぅっ。

実は、ウチのサイト、作っていただいたタイトル背景画像、ちょっといじって変えてみたんです。クローバーワンポイントのライン、見やすくて気に入ってたんですが、私のつけるタイトルが長すぎて、1行に納まりきらないことも多くて……(;´▽`A``。そうなると、ラインとかぶってしまって、読みづらくなるので、ちょっと幅を広げようかと……。でも、ただ、広げただけじゃ、1行タイトルの時に、白い隙間が多くて寂しげかと、ラインにグラデーションをプラスしてみたり……。

あれこれいじってみたんですが、私の今の画像作成技術と、素材作りに当てられる時間を考慮すると、もう、これが限界か。。。orz……ってかんじだったので、とりあえず、差し替えてみました。

……そ、そしたら、なんかめっちゃ印象濃ゆい!Σ(・`д・ノ)ノ とりあえず、すこしはあっさりするかと、右のサイドバータイトルの背景をオフにしたりしてみてるんですが、なんだかな~~(;-_-) =3……ってかんじです。デザインって、ほんと、奥が深くてムツカシイですよねぇ~~。。。。(。・ε・。)ムー ……まぁ、またそのうちに、少しずついじっていこうとは思ってますが……。そのためにも、この、ウェブデザイン講座、しっかり読ませていただきますねっっ!!!

超長文、失礼しましたぁ~~っm(_ _)m

2007/09/07
うか

>ちあき.さん
普段もあれこれ試しながら作ってるんですが、今回はブログにレポートを書いてるってんで普段以上に考えてます(笑)

ちあき.さんちの記事タイトルの背景画像、あれはもともとタイトル=1行を前提に作ったものなので、2行になるようであれば別のものの方がよろしいかと思います。少なくとも左側にワンポイントあるようなもの(今のようなもの)は複数行には向かないかもしれないですねぇ。

いっそのこと記事タイトル部の背景はなくしちゃって、CSSで下線を引く程度にした方がすっきりするような気がします。

△ページトップに戻る

コメントを投稿

上の情報を保存する場合はチェック

△ページトップに戻る