CMSがなくたって！誰でも更新しやすいHTMLコーディングの方法
2019年05月31日
※この記事は、旧自社メディア『SK eye』に掲載されたものを当サイトへ移行したものです。内容は当時の情報に基づいており、最新の情報ではない場合もございます。
Webサイトをお客様が自社で更新したい場合、サイト制作時にCMS※を導入することが増えていますが、サーバーやセキュリティルール等、お客様の様々な事情で導入が難しい場合も意外と多くあります。
CMSが導入できない場合でも、いかにお客様が自社でWebサイトを更新しやすくするか、私たちの腕の見せ所です。
今回はあるプロジェクトで実施した、お客様にも更新しやすいHTMLコーディングのポイントをお届けします。
※コンテンツ管理システム（Content Management System）の略称。 Webページの記述言語であるHTMLやCSSを知らなくても、ホームページを構築して運用できるソフトウェア。
要件
- 月に4回程度の更新を行う
- 新規コンテンツの追加も検討している
- デザインや導線の都合上、各ページの独自性も保ちたい
今回のコーディングで特に重要視したのは、各ページの独自性を保つこと。それぞれのページには以下の独自性がありました。
- トップページ
- ヘッダーのロゴを非表示にしたい
- フッターデザインをトップページ用に変更したい
- 中ページ
- フッターに各ページへの導線を入れたい
- 中ページ（特殊コンテンツ）
- フッターのデザインを特殊コンテンツ用に変更したい
各ページの独自性と更新しやすさの両立
ただコーディングをするならば、各ページで表示する情報が異なるので全てのページをユニークな物として取り扱い、ヘッダーのロゴや、各ページへの導線のHTMLを記載します。
しかし、この方法ではWebサイトを運用していくなかで以下の問題が考えられます。
- 新規ページ作成時、各ページへの導線をすべてのHTMLで更新する必要があるため手間がかかる
- 既存ページのリンク変更や文言変更を行う際にも同様の手間がかかる
- 更新するファイル数が増えるほど、対応漏れの恐れも増える
これらの問題を解決する方法として、今回のプロジェクトではコーディング時に以下のような工夫をしました。
- コンテンツのエリアごとにHTMLをまとめて切り離し、インクルードパーツとして取り扱えるようにした
- ヘッダーエリア（header.php）
- 各ページへの導線エリア（navi.php）
- フッターコンテンツ、コピーライトのエリア（footer.php）
- 各インクルードパーツにはエリアに表示したい項目すべてを記載し、表示・非表示の切り替えはCSSでコンテンツに合わせて出し分けられるようにした
まとめ
このように、CMSを使用しないWebサイトでもコンテンツの更新が頻繁に行われる場合は、各インクルードパーツに切り分けてHTML読み込みを行うことで更新性を高めることができます。
おまけ
このプロジェクトでは、Webサイトの公開後にお客様からも喜びの声をいただくことができました。
『HTMLのデータも更新しやすい形で作っていただいて、作業効率も良く進められております！』
どうすれば更新しやすいか、試行錯誤しながら作ったので嬉しいですね。
エスケイワードでは、今後もお客様のニーズに合わせたWebサイト制作プロジェクトをご提案します。
著：高須