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

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

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

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

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

POINT1. 文書構造を意識する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

エスケイワードは、お客様の課題に対して最適と考えられるWeb施策をご提案いたします。課題がハッキリ見えていない方には、丁寧なヒアリングでモヤモヤをスッキリさせるところからお手伝いいたします。

ブランドイメージを見直したうえでのWebサイトリニューアルや、新規コンテンツの企画もお任せください。御社の魅力を最大限に伝える表現を一緒につくっていきませんか。