［サイトリニューアル］デザインの見直しその３

当サイトではアフィリエイト広告を利用しています。

デザインのベースになるレイアウトがまとまったので、ここから本当にサイトのデザインを進めていきます。サイト構築の中でこの作業一番楽しくて、時間がかかるんですよね（笑

しかも今回はしっかりとデザインを仕上げるので、結構時間がかかりそうな予感です。

そういったこともあって、いつもは完全オリジナルで作るところをとあるCSSテンプレートサイトにあったサンプルを参考にしてデザインを構築していきます。もっとも参考にしたのはデザインイメージだけで、CSSは一から組むことになりますけど・・・

※参考にしたのはこのテンプレート（Template Preview (sandpiper) – Free CSS Templates）

レアウトも詰めてあるし、テンプレートも見ているので、全体のバランスは見えているため、ヘッダーのデザインから始めることにします。

ヘッダーは左にロゴ＆サイトタイトルで、右がイメージ画像＆サイト運営者に関連する情報のリンク＆サイトコンセプトを入れていきます。

今まではロゴもサイトタイトルもイメージ画像もひとまとまりで表示していましたが、テンプレートを見て切り離すのもありなんだな・・・と素直に思い、離すことにしました（結構単純です）。

ジャンクワードの森のロゴは2004年の8月ごろの「もう少しでリニューアル」という記事で初登場して以来デザインを微妙に変えても、移転をしても使い続けていますし、名刺にもしっかりと使っているので、かなり思い入れのあるものです。

なので、今回のリニューアルでもロゴは今までと同じ物を使うことにしますが、位置的にロゴだけでは役割をなさないので、サイトタイトルも入れ込んで作りました。またサイズも微妙に違うので現状に合ったサイズに調整しています。

リニューアルにあたって、ロゴのデータを探したら最初に作ったデータがしっかり残っていました。このロゴはかなり作り込んだ記憶がある（データを見てもわかる）ので、これが残っていてほんと助かりました（笑

＜余談＞
このロゴの背景は「ジャンクワードの森」なので森のイメージしています。
で、その中で手を広げて光を一心に浴びているのは、実は多重人格探偵サイコ実写版で主人公の雨宮一彦（保坂尚輝）が雨が降っているときに両手を広げているシーンから取っています（ややマニアックな話です）。

正直なんとなく組み合わせただけですが、何気にはまっている感じがあって気に入っています。

これから夏になるというのに、この選択はどうかと思ったのですが、今までは白とか薄紫とかちょっと淡い印象の画像が多かったので、少し鮮やかな色合いを使っていいのかもと思い探していたところ、紅葉の鮮やかな赤が目にとまりました。

また、リンクをヘッダーの上に配置する関係で、この部分が多少ぼやけた感じなっていたほうがテキストが読みやすくなるので、手前にピントのあった画像を選択しています。もちろんリサイズやトリミングを行って最適だと思う位置に合わせています。

外側の縁取りはテンプレートサイトを参考にしていますが、こうするとベタ画像よりも画像の座りがいいように感じるから不思議ですね。

現状はこの画像で満足していますが、イメージ画像はいつでも変更できるので気が向いたら新しい画像に差し替えたりして遊ぼうと思っています。

ヘッダーにはサイトの説明を軽く入れたいと思っていますが、イメージ画像が強いのでテキストではインパクトが薄くなるので、現状では画像化して配置しようと思っています。

まあ、SEO的にはサイト説明はMETAタグにしっかり入れればいいので、ページ内では画像にしても問題はないと思います。

リンクテキストも入れて、最終形はこんな感じ

とりあえずこれでヘッダー部分が完成したので、その他の部分を作っていきます。