フレームの作り方

このマニュアルは、フレームを自分で作りたい・改造したい人向けの詳しい資料です。HTML・CSS・JSON が読める方を想定しています（PHPは書きません。表示はCMS本体が行います）。

※簡単な手順だけ知りたい場合は、別の入門マニュアルをご覧ください。

フレームとは

サイト全体の「枠（デザインのテンプレート）」です。フレームを切り替えても、ページの中身（パーツ）やメイン画像はそのまま引き継がれます。1つのフォルダが1つのフレームで、frames/<フレームID>/ に置きます。フォルダを置くだけで、管理画面の「デザイン（枠・色）」に選択肢として出ます。

ファイル構成

frames/<フレームID>/
  frame.json      … フレームの定義（必須）
  layout.html     … サイト全体の骨組み（必須）
  mainimg.html    … トップのメインビジュアル（必須）
  mainimg-slideshow.html / mainimg-video.html … タイプ別のメインビジュアル（任意。置くと管理画面でタイプを選べる）
  css/style.css   … レイアウト・装飾
  css/theme.css   … テーマカラー（色の変数）
  js/main.js      … フレーム固有のスクリプト（任意）
  images/         … 同梱画像（メイン画像の初期素材など）
  thumb.webp      … デザイン選択画面のサムネ（任意）

frame.json

{
  "name": "フレーム名（管理画面に出る）",
  "description": "説明文",
  "mainvisual_type": "static"
}

• mainvisual_type は "static"（静止画1枚）／"slideshow"（複数枚スライド）／"video"（動画）のいずれか。
• 任意で次も指定できます（例）。

{
  "mainvisual_type": "static",
  "menu_breakpoint": 1000,
  "menu_hide_when_hidden": true,
  "menu_dropdowns": ["header nav"]
}

• menu_type を書くと、メニューの型をまとめて決められます："hamburger"（常にハンバーガー）／"sidebar"（左の列にメニュー）／"two-menu"（PC用とスマホ用でメニューを2つ持つ。{{{NAV_PC}}} を使えば自動でこれになります）。書かなければ横並び（狭い画面ではハンバーガー）です。

差し込み口（プレースホルダ）のルール

CMSが値を入れる場所を {{ }} で書きます。

• {{key}} … 値を入れる（記号は自動でエスケープ）
• {{{key}}} … HTMLをそのまま入れる（メニューや本文など、HTMLが入る場所）
• {{#key}}…{{/key}} … 値があるときだけ表示（配列なら繰り返し）
• {{^key}}…{{/key}} … 値がないときだけ表示

layout.html（サイトの骨組み）

最低限、次の差し込み口を含めます（既存フレームをコピーして直すのが安全です）。

• {{META_TITLE}} / {{META_DESCRIPTION}} … タイトル・説明
• {{BASE}} / {{FRAME}} … CSS・JSの読み込みパスに使う
• {{{HEAD_CSS}}} … CMSが足す <head> 内CSS
• {{#IS_HOME}}…{{/IS_HOME}} … トップだけ（メインビジュアルの出し分けなど）
• {{HOME_URL}} … トップへのリンク
• ロゴ … {{#HAS_LOGO}}<img src="{{LOGO_URL}}" alt="{{SITE_NAME}}">{{/HAS_LOGO}}{{^HAS_LOGO}}{{SITE_NAME}}{{/HAS_LOGO}}
• {{{NAV}}} … メニュー
• {{{MAINVISUAL}}} … メインビジュアル（トップのみ）
• {{{CONTENT}}} … 各ページのパーツ
• {{{FOOTER}}} … フッター
• {{{SCRIPTS}}} … 共通スクリプト

このほか、開閉ボタン（ハンバーガー #menubar_hdr）、メニューオーバーレイ #menubar-overlay、ページ上部へ戻る .pagetop を規約どおり置きます。

書いたときだけ管理画面に欄が出る差し込み口もあります（受付時間 {{HEADER_HOURS}}、ヘッダー上の一行 {{HEADER_TEXT}}、メニューのサブ表記 .nav-sub、キャッチの背景 {{MV_TEXT_BG}}、画像の明るさ {{MV_DIM}}、ヘッダーをメイン画像に重ねる .hdr-overlay）。書き方は業者向けマニュアル（2026年10月版）をご覧ください。

mainimg.html（メインビジュアル）— 3タイプ

テキスト・ボタンの差し込み口は3タイプ共通です。

{{#HAS_TEXT}}
<div class="text {{MV_TEXT_CLASS}}">
{{#HAS_CATCH}}<h2>{{{MV_CATCH}}}</h2>{{/HAS_CATCH}}
{{#HAS_SUB}}<p>{{{MV_SUB}}}</p>{{/HAS_SUB}}
{{#HAS_BTN1}}
<div class="btn-container">
<div class="{{MV_BTN1_CLASS}}"><a href="{{MV_BTN1_URL}}">{{MV_BTN1_TEXT}}</a></div>
{{#HAS_BTN2}}<div class="{{MV_BTN2_CLASS}}"><a href="{{MV_BTN2_URL}}">{{MV_BTN2_TEXT}}</a></div>{{/HAS_BTN2}}
</div>
{{/HAS_BTN1}}
</div>
{{/HAS_TEXT}}

静止画（static）・スライド（slideshow）

画像を {{#MV_IMAGES}}…{{/MV_IMAGES}} で繰り返します（静止画は1枚、スライドは複数枚で、同じ仕組み）。

<div class="mainimg">
{{#MV_IMAGES}}
<div class="slide img{{n}}">
  （ここに上のテキスト・ボタンブロック）
  <picture>{{#HAS_SP}}<source media="(max-width:900px)" srcset="{{MV_SP}}">{{/HAS_SP}}<img src="{{url}}" alt=""></picture>
</div>
{{/MV_IMAGES}}
</div>

スライドにするときは、<div class="slide-indicators"></div> を足し、CSS・JSでスライド動作を付けます。HTMLの骨格は静止画とほぼ同じです。

動画（video）

<div class="mainimg video-zone">
{{#HAS_VIDEO}}
<div class="slide img1">
  （ここに上のテキスト・ボタンブロック）
  <video class="bgVideo" autoplay muted loop playsinline preload="metadata">
  {{#HAS_VIDEO_SP}}<source src="{{MV_VIDEO_SP}}" media="(max-width:800px)" type="video/mp4">{{/HAS_VIDEO_SP}}
  <source src="{{MV_VIDEO}}" type="video/mp4">
  </video>
</div>
{{/HAS_VIDEO}}
</div>

スクロール連動の映像（応用）

スクロールに合わせて映像（連続写真）が進むフレームも作れます。frame.json に次の2つを足します。

{
  "mainvisual_type": "static",
  "mainvisual_no_image": true,
  "mainvisual_sequence": { "path": "images/frames/", "frames": 120, "ext": "webp" }
}

• mainvisual_sequence … フレームに同梱するコマ画像の場所・枚数・拡張子（＝はじめに出る映像）。これを書くと、管理画面「トップの大きな画像」に動画からコマ画像を作る欄が出ます。
• mainvisual_no_image … 管理画面の画像の入力欄を隠します（映像は上の欄で差し替えるため）。
• images/mainimg1.webp のような初期画像を必ず1枚入れてください。画像が1枚も無いと、キャッチコピーごとメインビジュアルが出なくなります。

layout.html 側は、次の差し込み口を使います。

<div class="seq {{SEQ_TEXT_CLASS}}" data-frames="{{SEQ_FRAMES}}" data-path="{{SEQ_PATH}}" data-ext="{{SEQ_EXT}}" data-scroll-length="350">
  （canvasなどの映像エリア）
  {{{MAINVISUAL}}}
  {{{CONTENT}}}
</div>

• お客さんが自分の動画に差し替えると、{{SEQ_PATH}} などが差し替え後のコマ画像を指すようになります。
• ⚠️ 映像の上を包む外側の div に mainimg / mainimg-container という名前を使わないでください。管理画面の「文字色」がその中の見出し・本文すべてに効くため、パーツの文字色まで変わってしまいます。
• {{SEQ_TEXT_CLASS}} には、その「文字色」の選択（mv-text-light / mv-text-dark / 空）が入ります。映像の上に乗るパーツの文字にも同じ色を効かせたいときに、フレームのCSSで使ってください。
• data-scroll-length は、映像が最後のコマに着くまでのスクロール量（画面の高さを100とした値）です。

新しいフレームを作る手順

1. frames/<新ID>/ フォルダを作る。
2. frame.json を置く（name・description・mainvisual_type）。
3. 既存フレームの layout.html・mainimg.html をコピーして直す（差し込み口は残す）。
4. css/style.css・css/theme.css を整える。
5. 管理画面「デザイン（枠・色）」で選んで適用する。

既存フレームを変えたいとき

• 色だけなら、管理画面「デザイン」のテーマカラーで足りることが多い（コード変更不要）。
• レイアウトを変えるときは style.css や layout.html を直接編集。差し込み口（{{…}}）は消さない。

困ったとき

• ロゴやメニューが出ない → 差し込み口を消していないか確認。
• メインビジュアルが出ない／崩れる → frame.json の mainvisual_type と mainimg.html の型が合っているか確認。