無料のウェブSEOテンプレートを取得し、その素晴らしいテンプレートに自分なりのカスタマイズを施してみました。

参考イメージ

ウェブZYCO'Sサイト サムネイル

私自身が感銘と影響を受けたウェブZYCO'Sの白地に水色を基調とした透明感のあるページデザインを参考イメージとして、テンプレートのカスタマイズをおこなうことにしました。

現在はデザインを変更しているかもしれませんので、当時(2006年12月現在)のサイトのデザインをサムネイルで表示しています。

カスタマイズ箇所の洗い出し

既存(修正前)テンプレート

私なりに自分のサイトイメージに近づけるために、既存のテンプレートにいろいろ手を加えるために、まず修正を加える箇所の洗い出しをおこないました。

(画像は既存のテンプレートで作成されたマニュアルのサムネイルですが、画像を参照しながら記事を見る場合には別ウィンドウで開いてください。)

機能的には抜群に優れていますので、カスタマイズはデザインの変更を中心におこなうことにしました。

ページレイアウトデザイン

  • 背景
    背景色は透明感を演出するため既存のグレーから白に変更します。
  • 外枠
    既存の外枠は黒いラインで引き締まって見えますが、既存のテンプレートのデザインで唯一気に入らなかったのが、この外枠の所々に見えるグレーのグラデーションです。
    そこで、透明感を演出すると同時に広がりも感じさせられる水色のグラデーションにすることにしました。
    また、枠の角(コーナー)は丸くしたいと思います。
  • 内枠
    既存の内枠は内枠内の背景の水色と同じなので、右側のサイドメニューと同じような感じにした白色の背景にしたい思います。
    特に画像を扱う場合は、その画像の直前(直後?)の背景色が白色だと何かと都合がいいのも理由の1つです。
  • ヘッダー
    ヘッダー全体をサイトバナー的な感じに捉えるのであれば、既存のサイズでもいいのですが、スポーツカーの画像をヘッダーの半分くらいに配置したかったため、ヘッダーの高さを既存の倍以上にしたいと思いました。
  • フッター
    これも既存の濃い青色では浮き出てしまうため、全体的に他の色と合わせて水色にしたいと思います。

テンプレートのカスタマイズ - ZYCO'S無料テンプレート使用レビュー[2]

テンプレート修正時のコツ

ページのトップへ


ホームページデザイン
inserted by FC2 system