長期間の運用にも耐えられる!Webサイトの長寿命化を支えるHTMLコーディングの3POINT

Webサイトは、作って終わりではありません。公開した後に継続して運用・更新していくことで、情報の鮮度を保ち、ユーザーにとっても有意義なサイトとなるのです。

今回は、小規模から大規模までさまざまなWebサイトを制作しているエスケイワードがサイトの長寿命化を支えるために、コーディングする際に普段から意識しているポイントをご紹介します。

デザイン通りに再現するだけであれば、これらのことは考えなくてもサイトは出来上がりますが、せっかく作ったサイトが次のリニューアルまでの間、長期間壊れずに運用を続けられるものであって欲しいという思いから日々様々なことを考え制作を行っています。

これから紹介する3POINTを実践することで、サイトが運用フェーズに入った時に発生する更新・変更に耐えられる強いサイトにすることができます。

POINT1. 文書構造を意識する

Webサイトのコーディングをするにあたって「ブラウザで表示が崩れない」ことだけをゴールとした場合、一番意識が向かなくなるのがHTMLの文書構造だと思います。

仮にすべて「div」を並べてHTMLコーディングを行ってもCSSで装飾すればデザイン通りの見た目は保たれます。

しかし適切なタグを適切に使用しない場合に正しく文書の意図が伝わらない、環境によってはサイトの操作ができない問題が発生します。

  • Googleのクローラーなどによって機械的に処理がされる場合
  • 音声読み上げブラウザなどCSSが適用されない環境で閲覧される場合
  • RSSリーダーなどの環境で閲覧される場合
  • 回線の事情等でCSSが読み込めない環境の場合

そのため、デザインを再現するためにHTMLを書くのではなく、あくまでHTMLは文書構造を伝えるための言語であることを意識した上で、伝えたい情報を適切な順番、適切なタグで記載することが必要です。

POINT2. モジュール化を意識する

Webサイトは「ヘッダー」、「フッター」、「サイドバー」、「見出し」、「リスト」などたくさんのパーツの組み合わせによって作られています。

これらのパーツを適切な粒度で分割することを「モジュール化」と呼んでいます。

仮にページごとにCSSを分け、その都度必要なパーツを作り続けてもサイトは完成します。ただそのようにした場合は以下のような問題が発生します。

  • HTML、CSSが肥大化し、サイトの読み込みスピードに影響する
  • 運用に入ってコンテンツを追加する際にHTML・CSSをコピー&ペーストする必要がある
  • コピー&ペーストを繰り返すうちに微妙に違うパーツが増えることで、サイト全体で統一感が保たれなくなる

そのため、その都度必要なパーツを作り続けるのではなく、以下のような「モジュール化」を意識したコーディングが必要です。

  • デザインから個別のパーツに分割する
  • パーツがレイアウト(サイト全体に関わるもの)、モジュール(サイトで共通で使えるもの)、ユニーク(1ページでしか使用しないもの)のどれに該当するかを考える
  • パーツごとにHTMLを作成し、合わせてCSSを作成する

POINT3. 共通のルールで制作する

Webサイトをコーディングするにあたって、サイト内でルールが統一されていることはとても大切です。

エスケイワードでは随時更新されている「社内のコーディングガイドライン」を社内で共有し、そのルールに基づいてコーディングを行っています。

そのため、先に挙げた「文書構造の意識」、「モジュール化の意識」を共通認識とすることができ、構築中に複数のエンジニアで協業することや運用に入った際の円滑な引き継ぎが可能となっています。

コーディングガイドラインの一部

  • 共通の初期セットを使用する
  • レイアウト、モジュール、ユニークの3つに分類する
  • 分類を示すプレフィックスを使用する
  • モジュールパーツではidを使用しない
  • モジュールパーツはサイト内のどこに置いても使用できるようにする
  • JavaScriptを適用する場合はdata属性に対して適用する

まとめ

今回は、Webサイトの長寿命化を支えるためのポイントについて以下の3つご紹介しました。

  • 文書構造
  • モジュール化
  • 共通のルール

これらはいずれも決まった正解があるわけではなく、案件の要件やその時の技術によって、正解は常に変わっていきます。エスケイワードでは新しい案件の度に最適を考え、案件を終えた後に振り返り、その中で良かったものをチーム内で共有し、次に繋げています。

今回挙げたポイントはデザインと違い見た目には表れないところではありますが、サイトが運用フェーズに入った時の更新しやすさ、つまりは新鮮な情報をユーザーに伝えるためにその工夫が生きてきます。

この記事を通してエスケイワードのフロントエンドエンジニアが日々何を考え、作っているのかが少しでも伝われば幸いです。