Webサイトのデザイン変更作業

Webサイト http://ai11.net のデザインを変えたときの記録。


前のデザインは

あまり細かく作りこんではいないデザインだった。


今回どんなデザインにするかと考えて、「緑色がいいな……LISMOのリス http://www.kddi.com/lismo/ みたいな」

とイメージしていた。そこへ偶然、はてなブックマーク


デザインやファッションに取り入れたい、2009年 夏のトレンドカラー | コリスhttp://coliss.com/articles/build-websites/operation/design/most-popular-color-for-summer-2009.html


のページが紹介されていた。

紹介されている色 使うことにした。


まずはプロフィールページを修正する。このページは他の記事と連動せず独立しているので修正しやすいのと、あと単に求職活動の自己PRに使うためにこのページを優先で更新したかったのだ。


最初に画面上部のヘッダ画像を作成した。屋号の「きりんシステム」をwebページのタイトルに使う。Fireworksを使用して、さきほど紹介されていた色をパレット代わりにそのまま使って、こんな色になった。

ほんとはもっと新緑っぽい色にしようと思っていたけど、灼熱サバンナ的な色になった。キリンだし、この色でもいいか。


マスコットキャラがヘッダにほしいなと思い、キリンの絵柄を使うことにした。Flashタブレットでいくつかキリンのラフ画を描き、ベジエでなぞり、キャラ絵は完成。

FireworksMXではFlashのファイルをそのままでは読み込めないので、AdobeIllusrator形式で書き出す。そのとき必要ないレイヤは削除して、キャラは1枚のレイヤにまとめて、ステージのサイズも小さくする。


それをFireworksに配置して、あと文字も組み替えて、ヘッダ画像は完成した。ナビゲーション背景やフッタも作成して、以下のようになった。

Fireworksで画像をスライスして書き出す。そのあとはHTML/CSS作りを開始する。


HTMLの構造は、HTML5 (http://www.thinkit.co.jp/article/48/1/) に合わせて、大きく 5つの部分(division)に分けることにする。

  • header
  • navi
  • article
  • aside
  • footer

しかしこのwebサイトにはあまり内容がないので、naviは使わない。これらを使用して、ほかにも必要な division を追加して、HTMLを記述した。正直、HTML記述は使い慣れたテキストエディタのほうが早い。


次にCSSを記述する。
まずはリセット用のCSSを適用して、ブラウザごとの見え方が異なるのをなるべくなくすようにする。Yahoo UI LibraryのResetCSS (http://developer.yahoo.com/yui/reset/) を使う。

HTMLの該当箇所のHTMLコードをクリックして、Dreamweaverの「CSS新規ルールを追加」ボタンをクリックしてCSS要素を指定していく。CS4はさすがに使いやすい。


ある程度できたあとでIE6で表示させると、IE6ではすきまがあいたり画像が読み込まれなかったりした。ググってひとつひとつ解決していった。

このようなデザインになった。



Fireworksで知ったこと

  • 画像の四隅を丸める方法。矩形オブジェクトを作り「角丸の半径」15くらいにする。それを「編集-カット」して、次に丸めたい画像を選択してから「編集-マスクとしてペースト」


CSSで知ったこと

  • IE6では、ul li { width:550px)とするとリストの点がずれる。li にはwidthを指定せず、ul { width:550px) とすれば期待の結果になる。
  • IE6では max-width:550px しても効かない。スターハックでIE6だけ width:550px することで解決した。
  • 以前は floatすると画面下があわなかったりしてfloatは使いたくない気持ちだったので http://mix-mplus-ipa.sourceforge.jp/ のページもfloatは使ってないんだけど、最近では clearfixという方法でfloat使った副作用をなくすことができるようだ。しかし大げさな気もするので、【CSS】clearfixを使わずにfloatを解除する http://c-brains.jp/blog/wsg/08/03/25-210042.php のサイトに書かれた方法を使った。


Dreamweaver CS4 (V10.0) 日本語版 Windows版

Dreamweaver CS4 (V10.0) 日本語版 Windows版

  • 出版社/メーカー: アドビシステムズ
  • 発売日: 2008-12-19
  • メディア: DVD-ROM

  • 完全なるプロフェッショナル向けになった