ぼちぼちとホームページをリニューアル
2015/7/19

Webクリエイティブ科で勉強しているのを機に、自分のホームページのリニューアルに取り組んでいる。Webの知識が増すにつれ、ちょっとどうかという箇所が自分のホームページにいくつもあることに気づき、学んだことの実践の意味合いもあり重い腰を上げることにした。

ホームページを開設したのが2002年なので、もう10年以上が経過している。その間のWebの世界の変化にもかかわらず、基本的なところでの改変はほとんど行わなかった。文章を主体とするサイトだからデザインをあまりいじることもないし、新しいコンテンツを追加するほうが大事だと考えていたからだ。何しろベースは一太郎で作って、具合の悪いところをDreamweaverでちょっと修正するという方法で済ませてきたぐらいだから。

現在公開中で過去の溜まりが膨大にあるサイトをリニューアルするのは大変だ。梅田の阪急百貨店の改築が難渋したのを目の辺りにしたが、あれと同じ。従来のものを併存させつつリニューアルという作業を進めるのは一苦労。デザインが白紙見直しとなった新国立競技場のように、更地にして全く新しく作り直すことのほうが容易かも知れない。ただ自分のサイトについては動かし続けることのほうが大事、スクラップ・アンド・ビルドの考え方は採れない。

旧トップページと移行後のトップページを示す。サイドメニューの場所が逆になり、文字色などを変更しているが、サイトの基本構造やデザインの大枠については変えていない。ただ、細かな点ではかなり手を加えている。それは、次のような点だ。

【HTML5/CSS3に移行】

外観では判りにくいのだが、従来はhtmlソースについては一太郎が勝手に生成するものをほぼそのまま使っていた。早い話が、htmlタグをコーディングするなんて非生産的なことに時間を費やすつもりがなかったからだ。そうは言っても、レイアウトが崩れたりブラウザによっての見え方の違いがあったり、気になることが多かった。

今回、体裁はcssで規定し、htmlでは基本構造とコンテンツ、という分離を行ったから、外目には出ないところは大変更。その甲斐あって、ずいぶんすっきりとしたhtmlとなった。もちろん、SEOを特に意識するわけではないが、meta構文のdescriptionもきっちり入れた。従来のフレーム構造を止めるかどうか大いに悩んだが、結局はhtml5でも残った<iframe>タグで対処した。ここを抜本的に変えると新旧記事混在が困難になるという現実的な問題があったからだ。

もともと、大型コンピュータでassemblerやcobolなどでプログラムを組んだ経験がある自分としては、見た目にも汚い生成htmlソースを見るとゾッとして、これが美しいコーディングになったらなあと思っていた。それで一念発起、いきなり最新の体系でのリニューアルに突き進んだというわけだ。

コードを書いてみて驚くのは、htmlというものが、いい加減と言うか、融通無碍と言うか、所謂プログラム言語の感覚では信じられないことばかりということ。”/”を入れても入れなくても同じとか、閉じタグを忘れても平気とか、かと思うと、”;”をひとつ忘れると立ち往生だったりする。ルールがあってそれに準じて製作するのではなく、製作現場の創意工夫がルールに反映されるという側面さえある。ルール後追いで発展してきた世界、html5にしてもまだスタンダードとして確定した訳ではない。

【フォントの変更】

WindowsマシンではなくMacを使う最大の理由は文字の美しさにあると、私は思っている。Macを使い出すとWindowsの汚い文字には嫌悪感が増す。メイリオの登場でWindowsにもようやくまともなフォントが入ったので、今後の状況は変わって行くにしても、Windowsディフォルトのフォントではポイント数の小さい文字でアンチエイリアスが効かないという甚だしい不都合がある。サイトを作る以上はWindowsを無視するわけにもいかず、悩ましいところだ。htmlソースはひとつなのに、WindowsとMacではこれほどの違いがある(下図：旧ホームページの場合)。

今回、思い切ってフォントはメイリオとディフォルトのみの設定にした。MacだとMicrosoft Officeをインスールしておればメイリオ、なければヒラギノ、WindowsならVista以降ではメイリオで表示されるはず。まともなフォントで表示されるケースが大半だろうと想像する。

同時に、ロゴやナビゲーション、さらにボタンなども含め、”ことり文字フォント”で統一した。手書きの味が気に入っていて、開設以来ずっと利用させていただいているフォントだ。ついでに、製作者のとてもすっきりとしたサイトからロールオーバーのやり方などのアイディアを借用した。

【更新と再構築の併存】

これが一番やっかいな点だ。先述のとおり、通常の更新はストップせずに、改築を進めるので、一斉の切替は困難だ。とりあえず、自分のMacのローカルサイトとして骨組となるページと最近分の記事でミニサイトを作り、そこで組替とテストを繰り返して、完成分を公開済のサイトに上書きした。もちろん、全体からすればまだ一部に過ぎない。メニューに相当するページは移行済だけど、個別記事の書き直しは順次ということになる。早くとも今年いっぱいはかかるのではないだろうか。ファイルの数が半端じゃない。ついでに、昔に行ったオペラやコンサートの記事も、メモや資料など残っているものもあるから追加してみようと思っている。

なお、移行済かどうかは、ジャンプボタンの色が従来のピンクからイエローになっているかどうかで判断できるようにしている。そして、移行済の記事の背景は無地からテキスタイルに変更しているので、そこでも判別可能だ。

【細部仕様の変更】

この際ついでにと、実施した変更は次のようなものがある。
・　各サブメニューのページ外観に統一感を持たせた(ロゴ、配色、位置など)。
・　ページ内検索機能を追加した(これは自分が一番使いそう)。
・　リンクの割愛(リンク切れ回避、Google全盛という状況を勘案)。
・　ブラウザの中央配置、ページ幅の固定(ユーザーPCの環境差を考慮)。
・　山のリストをEXCELシートからhtmlのテーブルに移行しヘッダーを固定。
・　マウスセット時の画像切替(Java ScriptおよびCSS)。
・　カウンター画像の変更(リニューアル後の画面との調和)。
・　画像に関しpng形式の採用を拡大(Illustrator やPhotoshopの活用に伴う)。

(追記)
・　jQueryを導入し、パノラマ写真の拡大・自動スクロールなどに使用
・　2000年以前の音楽関係記事のインデックスを一覧ページとして追加
・　サイトマップを追加(ほぼ全てをCSS3.0の機能で作成)
・　最新記事リスト背景のメインビジュアル画像のサイズと体裁を固定
・　Photoshop、Lightroomによる一部の画像加工(結合や汚れとり)
・　記事見出しからのテキストリンクに変更(ボタンを背景画像化)
・　jQuery正規表現によるコーディングの圧縮(ナビゲーションメニュー)
・　スマートフォンへの対応(メニューの変更など、かなり大掛かりなもの)
・　動画の掲載(You Tubeを利用、表示形式を少しカスタマイズ)

いちおうリニューアルの方向性は確立し、これからは新しい記事の追加と過去分の修正を並行して行っていくことになる。リニューアル版の公開前にご意見をお聞かせいただいた読者に感謝したい。まだ追加で手直しなんてことも考えられるし、ずいぶん気の長い話になりそうだ。これから再就職するかどうかは何とも言えないが、定年後のボケ防止に恰好の材料であることは間違いない。