内容が似ているランディングページを複数作るときにどうすると効率が良いですか？

現在、ある店舗のキャンペーン用のランディングページを作成しています。

今までは、一社だけで1ページ縦長のページを作っていたのですが、
今度各店舗（15店舗）も同じキャンペーンをするとのことで、
ほぼ同じ内容のページを作ってほしいと依頼を受けました。

レイアウトは全く同じでよいとのことですが、
掲載内容は各店舗で微妙に異なります。
具体的には
店舗名・住所・電話番号・商品価格（掲載商品は同じですが店舗ごとに違う）・キャンペーン期間です。
キャッチコピーや写真・商品スペックなど共通の部分が大半で、
かつ、同じレイアウトなので、できれば効率よく展開して作成したいと思いますが、
どのような方法があるのかが、わかりません。
かなり何度も細かい修正が入るので、メンテナンスも簡易にしたいです。
こういった場合は、どのように皆さんは作られているのでしょうか。
もしよろしかったら教えていただければ幸いです。
よろしくお願いいたします。

※先方の都合上、wordpressなどのCMSは導入できません。
※私はHTMLとCSSで簡単なページなら作れるのですが、javascriptは見よう見まねでしか設置できません。

行動規範の内容に同意します

回答3件

ベストアンサー

CMSなしのHTMLとCSSとjavascriptsのみでの実装の前提でお答えします。（もし、使用が可能ならテンプレートエンジンなどを使うほうが早いと私を思います。）

店舗毎の固有情報（データセット）を用意しておきます。（全店舗分の情報をHTMLに書いておいてもいいですし、外部ファイルを利用してもかまいません。サンプルはHTMLに直接書いています。）

javascriptで読み込みURL等を判定し、URLによって上記のデータセットのどれを用いるかを選択するようにしておいて、読み込んだデータセットの変数をHTML内にJavascriptの変数で引き当ててHTMLへはめ込みます。

html
1<html>
2<head>
3<script>
4window.onload=function(){
5  if(document.URL.match("/001")) {
6    var address1="東京都千代田区ほにゃらら"
7    var tenpo_mei="千代田店"
8  }else if(document.URL.match("/002")){
9    var address1="東京都港区ほげほげ"
10    var tenpo_mei="港店"
11  }
12  document.getElementById("tenpo").value=tenpo_mei;
13  document.getElementById("address").value=address1;
14}
15</script>
16</head>
17<body>
18<textarea id="tenpo">ここが店舗名にさしかわる</textarea>
19<textarea id="address">ここが住所にさしかわる</textarea>
20</body>
21</html>
22