サイトリニューアルの裏話
2008-05-13
先日「錦帯橋の四季」の10周年を記念して(?)、全面リニューアルを行いました。
もっとも急に思いついたわけではなく、数年前から漠然とデザインを変更したいという気持ちはありました。しかし近年ページ数も増えているため、全体を変更するには相当な手間がかかることは容易に想像がつき、そのため長く躊躇しておりました。
今回、大きく変わった点を紹介しますと．．．
まず、メインコンテンツの写真ギャラリーが、以前は「錦帯橋風景」と「季節の映像」の二本建てでした。しかし今回分類を見直し一本化しました。また一部写真の差し替えや追加を行いました。それに合わせて、「Highslide JS」というJavaScriptライブラリを利用して、スマートに写真を見ていただけるようにしました。
次に、テーブルを使った古いレイアウト手法から、全面的にCSSデザインに変更し、合わせてエラスティックレイアウトを採用しました。エラスティックレイアウトとは、閲覧者がブラウザの文字サイズを変更した場合、それに合わせてサイト全体の幅が伸び縮みして、デザインはほぼ維持されるレイアウト手法です。その他、コンテンツの分類を一部見直して整理しています。
もちろん、いつまでも躊躇していたのでは、いつになってもリニューアルはできませんので(笑)、年明けから「Highslide JS」のカスタマイズに取り組みました。それの目処が比較的早くついたので、勢いがつき、全体のCSSデザインに着手しました。
しかし、わかってはいたことですが、ブラウザごとにCSSへの対応が相当違い、基本的な骨格ができた後の調整に相当な時間を要しました。もっとも、今回それによりCSSデザインのノウハウはかなり蓄積できたと感じていますので、無駄ではなかったと考えております。
以前の「錦帯橋の四季」はほとんどHTMLだけでレイアウトやデザインをしており、CSSはほんの補助的にしか使用しておりませんでした。また「岩国の観光.com」ではデザイン部分にCSSを大きく採用したものの、基本的な骨格部分はテーブルレイアウトで構成しております。
その理由のひとつはNetscape4にあると言えます。Netscape4はCSSの対応が非常に悪い旧世代のブラウザでありながら、意外と根強く使用されているため、このブラウザで閲覧する方があることを考慮すると全面CSS化に踏み切れないものがありました。
しかし、最近Netscapeは開発やサポートが終了し、完全に過去のブラウザとなりましたので、今回思い切ってNetscape4にはCSSを一切適用させないこととし、全面CSS化に踏み切りました。
新デザインで表示を確認しているブラウザは、WindowsはIE6、7、FireFox1.5、2、Opera6、7、8、9、Safari、Netscape7、9、またMacはIE5、Safariです。なお、WindowsのOpera6とMacIE5では「Highslide JS」が動作しませんが、オリジナルスクリプトの適用対象外ですから仕方ありません。
バージョン4の旧世代ブラウザにはCSSは一切適用されませんが、もちろんコンテンツは問題なく閲覧可能です。また、未だにある程度の利用者があると思われるWindowsのIE5.5は環境がなく、表示の確認できていないのがちょっと気になっているところです。
実は改装オープンした後も、一部のブラウザ (MacIE5とNetscape7(笑)) でのバグ対策を続けており、半月近くたって、やっとうまく表示されるようになったという事実もあります。(^^;
今回CSSでのレイアウトを採用したことで、近い将来XHTML化する必要が生じても、比較的簡単に対応可能となりました。
新しいデザインへのご意見やバグ情報などを掲示板やメールでお寄せいただけると嬉しいです。
投稿者 Matsumoto ： 2008-05-13 20:26
