LP制作の依頼は、似たような構造の繰り返しだ。
ファーストビューに強いキャッチコピーと画像。問題提起のセクション。サービスの特徴。お客様の声。料金。CTAボタン。この骨格は、水回り修理でも墓石清掃でもハウスクリーニングでも変わらない。
わかっていながら、毎回ゼロから作っていた。コーディング、画像の配置、カラー設定、電話番号の埋め込み。同じ作業を繰り返すたびに「この時間を別のことに使えるはずだ」という感覚が積み重なっていった。
最初のLP量産テンプレートが生まれたのは、ある水回り修理業者のLP制作がきっかけだった。
最初のLP制作中に気づいたこと
水回り修理業者向けのLPを作っていた。トイレ・浴室・排水管の修理を扱う地元業者のサイトだ。
構成を考えながら、ふと思った。「この骨格、次の案件でも使えるな」と。
LP制作の工数のほとんどは「デザインの骨格を作る部分」に集中している。セクションの順番を決め、余白を整え、フォントを選び、カラーをCSSに定義する。これが終われば、あとは「中身を差し替えるだけ」の作業になる。
だとすれば、骨格さえ1回作れば、あとは差し替えだけで別業種のLPが完成するはずだ。その発想から、lp-config.jsというファイルの設計が始まった。
lp-config.jsという解決策
設計のコンセプトは「HTMLもCSSも触らずにLP全体を切り替える」だ。
lp-config.jsというファイル1つに、LP全体で変わる要素をすべて集約した。具体的には以下のものが設定できる。
- カラーテーマ：red / blue / yellow / green / black / purple / orange の7色から選択。1行変えるだけでサイト全体の配色が変わる。
- ロゴ画像：ファイルパスを指定するだけ
- ヒーロースライド：3枚分の画像パスを設定
- 特徴画像：PC版・SP版それぞれ4枚ずつ
- お客様の声：写真・名前・コメントを3件分
- LINE URL・電話番号：クライアントごとの連絡先
これらを書き換えるだけで、デザイン・カラー・画像・連絡先がまとめて切り替わる。HTMLの構造もCSSのスタイルも一切変えない。
とびのおんがえしへの流用で効果を実感
次の案件は「とびのおんがえし」という三重県四日市市の事業者だった。墓石清掃とハウスクリーニングを手がける地域業者で、LPが必要というご相談だった。
業種はまったく違う。水回り修理と墓石清掃では、訴えかける悩みも、写真の雰囲気も、想定する読者も違う。しかし骨格は同じだ。
作業は次の手順だった。
- 水回りLPのフォルダをコピーする
lp-config.jsを開き、カラーテーマ・画像・連絡先を書き換えるindex.htmlのテキスト（キャッチコピー・お悩み文言・サービス説明・料金）を差し替える- FTPでサーバーにアップする
ゼロから作る場合と比べて、デザイン・コーディングの工数が約60〜70%削減された。クライアントへの納品スピードも上がり、修正対応も設定ファイルと本文テキストの変更だけで完結した。
ヘッダーロゴの比率問題という細かい落とし穴
テンプレートの横展開を進める中で、地味だが重要な問題に気づいた。ロゴ画像の縦横比だ。
最初のテンプレートはワイドロゴ（横長）を前提に設計していた。ところが正方形や縦長のロゴを使うクライアントに適用すると、ヘッダーのロゴが潰れたり異常に大きくなったりした。
原因はwidth指定でロゴサイズを制御していたことだった。正方形ロゴに幅指定をすると、比率を保ちながら高さが想定外に大きくなる。
修正はheight指定への切り替えだった。
.lv1-heading { height: 48px; width: auto; }
.lv1-heading img { height: 100%; width: auto; }高さを固定して幅を自動にすることで、どんな比率のロゴでも崩れずに表示できるようになった。小さな修正だが、テンプレートを量産する上では必須の対応だった。
量産テンプレートの本質的なメリット
LP量産テンプレートを運用してわかったことがある。コスト削減だけがメリットではないということだ。
品質が安定する。毎回ゼロから作ると、作業者のコンディションや経験によって品質がぶれる。テンプレートベースなら最低品質が保証される。「今回は時間がなくてデザインが粗い」という事態が起きにくい。
修正対応が速くなる。クライアントから「電話番号が変わった」「写真を差し替えたい」という連絡が来ても、設定ファイルと画像の差し替えだけで完結する。構造を理解していれば、誰でも対応できる。
横展開の判断が早くなる。新しい業種の依頼が来たとき、「テンプレートで行けるか」「カスタム要素がどれくらい必要か」を素早く判断できる。見積もりの精度が上がる。
向いている案件・向いていない案件
このテンプレートが最も力を発揮するのは「集客・問い合わせ獲得を目的とした実用型LP」だ。地域の業者、専門サービス、スクールや教室など、「問い合わせを集める」ことが明確なLPに向いている。
一方、独自のブランドイメージが強く求められる案件には向かない。高級ブランド、アート系のサービス、ファッション関連など、デザインそのものが訴求力になるケースだ。この場合はテンプレートの骨格を使いつつも、大幅なカスタマイズが必要になる。
「テンプレートで作れるか」の判断基準は「業種の骨格がこのパターンに収まるか」だ。収まるならテンプレートで速く安く高品質に。収まらないなら素直にカスタム制作を選ぶ。この判断を明確にすることで、無駄な時間と品質の妥協を両方防げる。
まとめ
LP量産テンプレートの出発点は、水回り業者のLP制作中に感じた「また同じことをやっている」という感覚だった。その感覚を設計に落とし込んだ結果がlp-config.jsという仕組みだ。
設定ファイル1つで業種・カラー・画像・連絡先を一括切替。次の案件への流用が劇的に速くなった。
LP制作の効率化・量産体制の構築に興味がある方は、graciautoにご相談ください。