サイトリニューアル進捗状況（10/20現在）

もう１０月も下旬ですね。なかなか進まず、すみません。
＃２ｃｈのスレで、できもしないリニューアル、なんて中傷を書かれましたが、遅れてもきちんと計画通りやります！

昨夜は爆睡してしまいましたが、昨日昼間と一昨日の夜は（無駄に）ほぼ夜通しで起きていて、サイトリニューアルを進めたので、その分の進捗を報告します。

目次ページ、ＴＯＰページとも、重くなり過ぎないように、ＨＴＭＬ本体＋画像部品類のファイルサイズの総量を３００ｋＢ程度を上限にするようにしました。内訳としては、大雑把に、９６０×７２０ｐｘサイズのＪＰＥＧ画像（１枚約１００ｋＢ前後）×２枚＋文字類ＧＩＦ画像（５０ｋＢ）＋ＨＴＭＬ本体（５０ｋＢ）となります。
今時はＰＣ環境ならば殆どの場合、ＡＤＳＬか光回線（アナログモデム９６００ｂｐｓの方は殆ど居ない）だろうという前提で、それでも基地局から遠いＡＤＳＬの方や混雑時のトラフィックも踏まえ、なるべく軽くはした方が良いだろうと思い、考え中のサイトリニューアル案の仕様も踏まえ、基本は３００ｋＢとしました。

この仕様と別に、万が一回線が重いという苦情が多いことを踏まえ、軽量版の仕様も一応考えました。この場合、９６０×７２０ｐｘサイズのＪＰＥＧ画像（１枚約１００ｋＢ前後）を２枚のところ、１枚にする仕様です。これにより、１００～１５０ｋＢ程度減の計１５０～２００ｋＢ程度になるようにしています。

ただし、この軽量版は、回線的には軽くなっても、表示の際の画像処理でＰＣのＣＰＵの負荷が高くなってしまい、ＨＴＭＬやＣＳＳ、ＪａｖａＳｃｒｉｐｔのコードが複雑になってしまうため、一長一短と言えます。なるべく性能の低いＰＣ環境でも軽快に動作するようにしたく、どちらにするかは、今後試しながら考えてゆきます。まずは前者で行きたいと思います。


また、画面のデザイン仕様として、目次ページの各メニュー項目へのボタン類の画像の大きさを今まで考えていたものの縦横とも３分の２のサイズにすることにしました。
これにより、横９６０ｐｘ×縦７２０ｐｘ前提の中に、上部のタイトルバーを除いては、ボタンを従来２×４＝８個入れられていた（それ以上は別ファイルまたは別ページ）のを、３×６＝１８個入れられるようになります。

これにより、今のところ考えているボタン数全１８個が一つの９６０×７２０のＪＰＥＧ画像に収まることになり、画像ファイル容量の削減になります。これを活かして、９６０×７２０ＪＰＥＧ画像を２枚用意することにし、２枚目は、ロールオーバー時のボタン画像とすることで、上述の３００ｋＢの範囲内で、それなりの凝ったデザインが可能になります。何より、この方法だと、コードが簡素化され、作成と保守が簡単になることが利点です。
参考までに、サイズ変更前後のボタン画像の例を載せておきます。改めて見て思うのは、むしろ、小さい方が文字の大きさも含め、丁度良いかなぁと。：

あと、タイトルバーの文字部分は、先日述べた仕様のように、背景は別のＪＰＥGファイル、文字部分はＧＩＦファイルとすることにしました。ＪＰＥＧ画像に収めてしまうと、小さい文字は潰れてしまうので、このようにしました。
試したところ、ＪＰＥＧファイルも、文字が無くなると、圧縮率が高くなるようで、ファイルサイズが小さくなり、ＧＩＦファイルと合わせても、文字一体型のＪＰＥＧファイルと殆どファイル容量が変わらないので、このようにしました。

細かいところで、文字のぼかし影（画素単位での半透明指定が必要）は、ＰＮＧを使わない方針の元では、背景画像と一体でＪＰＥＧファイルにするしかなく、そのようにすることにしました。
手持ちのフリー高性能画像処理ソフト・ＧＩＭＰ２を使って、文字のぼかし影部分のみ作り、それをＰｏｗｅｒ　Ｐｏｉｎｔ上で重ねてＪＰＥＧ画像化する予定です。
（前後の比較画像をサンプルを添付しようかと思いましたが、この記事が重くなってしまうので、止めます。）

最後に、蛇足ながら、上のボタン画像は、ボタン数が１８個と多くなるので、分かりやすさとデザイン性のため、メニューのジャンルごとにボタンをなるべく同じ行に並べ、行によってロールオーバー時のボタン背景色を変えようと思っています。

引き続き、上の仕様で、ボタン画像の作成とコード記述を続けます。
長くなりましたが、今日のはとりあえず以上です。