LPを量産するための、データベースを
使わないCMS「LPツクレール」

何を解決するために作ったのか

LPは 「速く作って、速く公開して、効果がなければ捨てる」 ものです。 ところが既存のCMSは、1サイトを長く運用する前提で作られています。 LPを10枚作ると、データベースが10個増えます。

必要だったのは、次の3つを同時に満たすものでした。

• 設置が軽いこと — データベースの作成も、移設時のダンプも要らない
• 1枚ごとに違ってよいこと — LPは宛先も電話番号もページごとに違う
• LPページが壊れないこと — 編集する人がHTMLを知らなくても、レイアウトが崩れない

既製品を組み合わせるより、作ったほうが速いと判断しました。 外部ライブラリは1つも使っていません（composer も npm も使いません）。 依存が増えるほど、納品後に「動かない」が増えるためです。

LPツクレールとは

このツールで作った3枚です。骨格から作り分けています。 色を変えただけの使い回しではありません。枠の中はスクロールできます。

LPツクレールの管理画面

ブロックを上から積むだけです。HTMLもCSSも書きません。 1枚の画面に、ページの中身・ヘッダー・構造化データ・公開設定がすべて収まっています。

ブロックそのものも折り畳めます。畳むと 「入力項目4件（お名前 / メールアドレス / …）」のような要約が出るので、 開かなくても中身が分かります。並べ替えと削除は畳んだままでも使えるため、 長いページの構成を組み替えるのが速くなります。「すべて閉じる／すべて開く」も付けました。

編集者が壊せる余地を、意図的に狭くしています。 余白は「なし・小・中・大」から選ぶだけで、数値は入力させません。負の値を1つ入れられるだけで レイアウトは破綻します。色も5色のプリセットからで、カラーピッカーは付けていません（装飾の一部は、許可した範囲でCSSを直接指定できます）。

量産の入口

新規作成すると、まずテンプレートを選びます。白紙を含めて11種類（白紙・シンプルLP・ サービス紹介・商品販売・セミナー/イベント告知・資料請求・採用・お問い合わせ・会社概要・ キャンペーン・よくある質問）。 既存のページをそのままテンプレートとして登録することもできます。

装飾は迷わせない、最低限を実装

装飾の選択肢は、意図的に絞っています。選べる項目が多いほど、作る人は迷います。 そのうえで、実際にLPを組んで「これが無いと成立しない」と分かった2つだけを足しました。 飾りを増やすためではなく、枚数を作ることに集中できるようにするためです。

画像の上に文字を重ねる

写真編集ソフトで文字を焼き込む方法は採りませんでした。 焼き込むと、検索エンジンにも読み上げにも社名が伝わらず、スマートフォンで縮んだときに読めません。 ここで入れた文字は本物のテキストとして出力されます。

位置と明暗を両方持たせたのは、3枚とも条件が違ったからです。 ジムは左が明るく、喫茶店は右の壁が暗く、歯科は中央に余白がありました。 固定値にすると3枚のうち2枚が読めなくなります。読みやすさのため、文字の側にだけ薄い幕をかけています。

スクロールでふわっと出す

なぜデータベースを使わないのか

代わりに、データベースが面倒を見てくれていた部分を自分で作る必要がありました。

• 書き込みの競合 — flock() で排他し、一時ファイルへ書いてから差し替える（書きかけのファイルが残らない）
• 同時編集 — ページごとに版番号を持ち、古い版での上書きを拒否する。3人で同時に編集する検査を入れています
• 履歴 — 保存のたびに世代バックアップを取る

HTMLを保存しない

本文を「自由なHTML」として持っていません。種類と値だけの構造化データとして保存し、 表示するときに組み立てます。

{ "type": "heading", "level": 2, "text": "料金", "deco": "band", "color": "green" }
{ "type": "image",   "src": "hero.jpg", "over": "STUDIO ARC", "over_pos": "left" }

保存されるのは値だけです。編集者が <script> と入力しても、 そう表示されるだけでスクリプトにはなりません。

見た目の調整は3つに限定しました。表の列ごとの配置のような意味のある属性、 設定ファイルで許可したクラス名だけを選ぶバリエーション、 比率がプリセットで入れ子が1段までのカラム。自由なCSSは受け取りません。

色と内側の余白だけは、ブロックごとに直接指定できます。ここも position・margin・@media・url()・ !important・負の値は拒否します。13項目の検査で確かめています。

ログインと権限

ユーザーの追加はメール招待です。保存するのはトークンのハッシュだけで、 招待リンクを再発行できる状態にはしていません。

お問い合わせ

管理者へ通知し、送信者へ控えを返します。迷惑送信への対策は、 送信の挙動と本文の両面を、複数の条件で見て判定しています。 判定の一部は、設置先の事情に合わせて管理画面から調整できます。

特商法・規約のページ

LPで物やサービスを売るなら、特定商取引法に基づく表記・ 利用規約・プライバシーポリシーが要ります。 ところが「何をどう書けばいいか」で止まりがちです。 入力欄そのものを書式にして、白紙から書かせないようにしました。

規約は別ページとして作らせません。LPに入力すると、 /<LPのURL>/terms/ のような専用URLが自動でできて、 フッターのリンクから新しいタブでその規約だけが開きます。 LPを複製すれば規約もついてきますし、LPを消せば規約も一緒に消えます。 ページ一覧が規約で埋まることもありません。

特定商取引法のページには、所在地の地図も出せます。 住所は会社情報から取るので、入力し直す必要はありません。 地図を出すページだけ、外部の枠内表示を許可する指定 （frame-src）を足します。出さないページでは閉じたままで、 スクリプトの許可には一切触れていません。

納品後について

FTPを触れない人でも設定を変えられるようにしています。

問い合わせは保存日数を過ぎると自動で消えます（サーバーの定期実行）。 取扱説明書はHTML1枚で同梱し、更新時に data を上書きしてはいけないことを 赤枠で書いています。ここを間違えると、ページも問い合わせも消えます。

自動テスト 631項目

画面を目で見て確かめるのは、回数が増えると必ず抜けます。 コマンド1つで631項目を通すようにしました。実際に本番へ上げる前に、毎回これを通します。

構成と規模