PNGを使ったデザインに変更

2007年4月1日

日曜日の休みを利用してサイトのデザインを少し変えてみました。今回はPNGを利用して画像を重ねるデザインに挑戦してみました。せっかくなので少し解説してみます。

上部背景の青い空はbodyの背景で幅1ｐｘの画像で横方向にリピートしています。その上にヘッダー部にbottom付け、右寄せに背景を指定しエラスティックレイアウトにも対応しています。画像はPNGを利用してbodyの背景画像と重なってもグラデーションがきっちり表現できるようにしています。オブジェクトは盛り上がりのある丘と、月か太陽かわからない球体。奥行き感を出すために丘を登るビジネスマンのシルエットを配置しました。

一応IE6でもPNGがきっちり表示される仕掛けはしているのですが、僕のPCはIE6をIE7にアップデートしちゃったので確認してません。上からおりてくるメニューもPNGなんですが、IE6でPNGを表示する仕掛けを使ったら画像がめちゃくちゃになったのでそのまんまです。これPNGがきっちり表示されなかったらかなりぐちゃぐちゃなんだろうな…

デザインコンセプトは僕自身が最近デザイナーからスーツを着るディレクターというポジションに移動したということもあり、自分自身の気持ちを投影したような感じにしてみました。なんというか、先も見えずにどこに向かっているかもわからないけども、上ってみなければわからない道を突き進むといったような感じです。

デザインは結構気分ですぐ変えるので、また数ヵ月後には変わっていると思いますが、デザインをコロコロ変えるのっておもしろいですね。やっぱりデザインは仕事じゃなくプライベートでするのが一番やってて楽しいと思いました。日曜デザインおすすめです！