Webサイトをメンテナンスするためのテクニック

オンラインメディアは印刷物とは異なり、公開後にも更新や変更、拡張などを実施できる。そこがオンラインメディアの強みでもあるが、難しいところもである。逆に公開後になにも更新しなければ、時間とともに相対的に使いにくくなり、セキュリティに問題が発生し、時代遅れになってしまう。Webサイトは構築したあとのメンテナンスもかなり手間がかかる。

Louis Lazaris氏がSmashing MagazineにおいてWebsite Maintenance Tips for Front-End Developersのタイトルのもと、Webデザイナとフロントエンドプログラマ向けにWebサイトをメンテナンスするためのテクニックを紹介している。紹介されているテクニックは次のとおり。

コンテンツをクリーンに、そして最新に保つ

ポリシーページや利用規約、契約文書のページの内容が、その企業の最新の状態を反映しているかをチェックし、最新のものへ更新するようにする。またソフトウェアのドキュメントなどは、新しいプロダクトがリリースされるごとにチェックして反映させる。ブログに関しては、定期的にコメントをチェックして怪しいサイトへアクセスを誘導しているコメントを削除したり、タグが適切なものであるかのチェックなどをおこなう。

バグやエラーの修正と更新

ブロークンリンクをチェックし正しいものへ修正する。このチェックはオンラインサービスにせよスタンドアロンアプリケーションにせよ活用できるツールが提供されている。オンラインサービスであればDead Linksなどが、スタンドアロンアプリケーションであればXenu’s Link Sleuthなどがある。CMSを使っている場合には、CMSやそこで使っているプラグインを最新版へ更新するようにする。古いバージョンにはセキュリティ上の問題や効率の悪い処理、間違った動作をするなどの問題があることがある。

ブラウザ互換テスト

IE6/7/8やFirefox2/3などをチェックするのみならず、Opera/Chrome/Safariなどのブラウザもチェックする。また可能であればPCのみならずレンダリングの関連からMac OS Xでも動作をチェックした方がいい。Webアプリケーションテストの自動化にはSelenium Web Application Testing Systemが、大量のブラウザのレンダリングチェックにはBrowsershotsやAdobe BrowserLabが活用できる。

Webスタンダードへの準拠と検証

新機能が追加されたりコンテンツがアップデートされるごとにWebスタンダードへ準拠しているかどうかをチェックし修正する。まず、不要なdiv要素を使っていないか、不要な属性を指定していないかをチェックし、不要なものは削除する。JavaScriptのコードをたくさん記述したのであればJSLintでソースコードをチェックしてクオリティの改善に取り組む。また何年間もCSSを使いつづけていると、肥大化しメンテナンスが困難になっている場合がある。W3C CSS Validation Service、Clean CSS、Dust-Me Selectorsなどのツールを活用して最適化とクリーンナップを実施する。

アクセサビリティの改善

コンテンツの検証が終わったら、スクリーンリーダやアシスト技術で利用できるものになっているかをチェックする。コンテンツが更新されるごとにチェックする必要がある。アクセサビリティのチェックにはWAVE – Web Accessibility Evaluation ToolやA-Prompt – Web Accessibility Verifierが利用できる。またモバイルデバイスからのアクセシビリティを手助けするツールとしてMobile Web Design by Cameron Mollなどもある。

CSS3およびHTML5の活用

すべてのブラウザでサポートされているわけではないものの、これから登場する新しいブラウザをサポートするにあたってCSS3とHTML5を適用できる。これらを使うことでどういった利点があるのかを明確に示し、サポートしていないブラウザに対してもスマートに対応していく必要がある。こうしたテクニックにはプログレッシブエンハンスメントが利用できる。

高速化にむけた最適化を実施する

メンテナンスの間に高速化にも取り組む。高速化にはHigh Performance Web Sites: Essential Knowledge for Front-End Engineersが情報源として役に立つほか、Even Faster Web Sites: Performance Best Practices for Web Developersも有益。ツールやアドオンに関する情報は6 Tools To Find Out Website Load Speedや15 Tools to Help You Develop Faster Web Pagesにまとまっている。

コードにコメントを追加する

コードをクリーンナップして整理したら、今度は将来のメンテナンスへ向けてコメントを追加する。対象はHTML、JavaScript、CSSなど。

SEOの改善

ちゃんと構造化され、論理的に整理されたコンテンツはそれだけでSEOの効果があるものの、特定のSEOメソッドを適用することでさらに検索結果のランキングを向上させることができる。

Webサイトの分析と改善

サイトのトラフィックやバウンスレート、トラフィックソースなどを分析して改善につなげていく。この作業は継続して実施していく必要がある。サイトアクセスを分析するサービスにはGoogle Analyticsなどがあるほか、関連するツールの情報がAnalytics Toolbox: 50+ More Ways to Track Website Trafficにまとまっている。

ユーザフィードバックを取り込んでいく

連絡先メールアドレスやコンタクトページなど、ユーザに対してフィードバックを実施するためのわかりやすい方法を提供する。またソーシャルネットワーク、ブログのコメントなどを通じてフィードバック情報を収集する。こうして受け取ったフィードバックをメンテナンスに活かしていく。直ぐに対処できるものはすぐに対処し、大きな変更が必要な場合には長期的なメンテナンス計画の方に項目として追加しておく。