🎨 トップページデザイン差し替え案内

🎨 デザインの受領パターン

受け取り方によって対応手順が異なります。下記から該当するものをお選びください。

🎨 Figma で受領した場合のフロー

📋 デザイナー側にお願いすること

1. Figma ファイルを「閲覧者として誰でも閲覧可」または「リンクを知っている全員に閲覧権限」で共有設定
2. Dev Mode（開発モード）を ON にしてシェア（CSS / 計測値が見えるよう）
3. 共有 URL を運営またはデベロッパーに送信

   https://www.figma.com/file/XXXXXX/cocopita-design?node-id=...

4. 必要なら各セクションのフレーム名を一覧でメモ（例: ヒーロー / お知らせ / ランキング ...）
5. 使用フォント・カラーパレット・ブランドガイドのページ参照

🛠 こちら側で実施すること

1. Figma URL から各フレームの構造・寸法・カラー・タイポを読み取る
2. 既存の HTML 構造（セクション ID・ヘッダー・フッター）を維持しつつ、デザインを反映
3. 画像アセットを Figma からエクスポート（PNG / WebP）
4. ロゴは logo-header.png（150×41）と logo-footer.png（240×66） に書き出し
5. 動作確認後、差し替え用 ZIP を作成して納品
6. 運営側は受領した ZIP を 🚀 deploy.html にドロップして反映

📥 Figma 共有 URL を受け取ったら、まずチェックすること

• ✅ URL を開いて 編集権限なし（閲覧のみ）でアクセス可能か確認
• ✅ Dev Mode に切替えて CSS / 計測値が見られるか確認
• ✅ デザインの各セクションが既存の構造と対応するかを確認（下記の「セクション対応表」と照合）
• ✅ 必要な画像アセットがすべてエクスポート可能な状態か確認
• ⚠️ ヘッダー / フッターのナビ項目数が既存と一致しているかチェック（増減があれば事前にすり合わせ）

🗺 Figma セクションと既存 HTML id の対応表

デザイナーには下表を共有して、フレーム命名を合わせてもらうとスムーズです。

📄 デザイナーに送る独立チェックリスト

下記の URL をデザイナーに共有していただければ、納品時の準備項目が一覧で確認できます（印刷 / PDF 保存も可）。

🎯 デザイナーへの依頼テンプレート（コピー&ペーストで使えます）

📦 ZIP（HTML+CSS+画像）で受領した場合のフロー

制作チームが既に HTML/CSS/JS/画像をパッケージした ZIP を納品してくれた場合、そのまま deploy.html に投入できます。所要 30 秒〜1 分。

下記「🚦 反映の流れ」セクションへ進んでください。

🖼 画像（PNG/JPEG/PDF）のみで受領した場合のフロー

1. 受領した画像 / PDF を運営側で確認
2. こちら（デベロッパー）で内容を確認しながら HTML/CSS 化
3. 動作確認後、ZIP を作成して納品
4. 運営側は 🚀 deploy.html にドロップして反映

このページの目的

新しいトップページデザインのデータが届いたとき、Xserver を一切開かずに、ブラウザだけで反映するための完全ガイドです。

• 📦 デザイナーから受領した ZIP の中身を理解する
• 🛡 反映時に守られる本番データを把握する
• 🚀 デプロイ手順を順序立てて実行する
• ♻️ 万が一の場合のロールバック方法を確認する

🚦 反映の流れ（運営側）

受領したデザインが ZIP 形式（HTML+CSS+画像のセット）になったら、ここから始めます。

📁 トップページを構成するファイル

新デザインの ZIP に含まれるべきファイル一覧。デザイナー / 制作チームへの依頼書としてご利用ください。

必須 required

任意（新デザインで使う場合のみ）optional

含めない（自動でスキップされる）protected

下記のファイルが ZIP に含まれていても、サーバ側で自動的にスキップされます。安心して ZIP を準備してください。

🔧 デザイナー / 制作チーム向け：ZIP 作成ガイドライン

ZIP 構造

ZIP のルート直下に直接ファイルを置いてください（フォルダで括らない）。

cocopita-design.zip
├── index.html
├── lp-css/
│   └── style.css
├── lp-js/
│   └── common.js
├── lp-images/
│   ├── logo-header.png
│   ├── logo-footer.png
│   └── hero-photos.png
└── top-overrides.js

cocopita-design.zip
└── cocopita-design/   ← ラッパーフォルダ
    └── index.html ...

ヘッダー / フッター連携の注意点

新デザインの index.html には以下を必ず含めてください：

必須スクリプト読み込み

<script src="./content-overrides.js?v=20260509a" defer></script>

これを入れないと、管理画面の「FAQ管理」「固定ページ編集」「表示・サンプル管理」が公開ページに反映されなくなります。

必須セクション ID（管理画面の表示制御と連動）

下記の id を維持すれば、管理画面の「🎛 表示・サンプル管理」で各セクションを ON/OFF 切替できます。

ロゴ画像の寸法

• lp-images/logo-header.png → 150 × 41 px 推奨（最大 300×82 まで対応・retina 用は ./logo-header@2x.png）
• lp-images/logo-footer.png → 240 × 66 px 推奨

必須の HTML 属性

<img src="./lp-images/logo-header.png"
  width="150" height="41"
  style="width:150px !important;max-width:150px !important;height:auto !important;display:block !important"
  alt="COCOPiTA ロゴ">

CSS が読み込まれない / キャッシュが古い状況でもロゴが巨大化しない多重防御。

🆘 トラブル対処

♻️ ロールバック手順

反映後に問題が起きた場合：

1. 「🚀 ワンクリック更新」を開く
2. 画面下部「♻️ 過去のバックアップから復元」セクションへスクロール
3. 直前のバックアップ（タイムスタンプ付き）を選択
4. 「このバックアップに戻す」をクリック
5. 確認ダイアログ → 復元実行
6. 公開サイトで確認

📞 サポート

困ったら：

• 📖 管理画面マニュアル の「🚀 ワンクリック更新」セクション
• 📧 運営事務局: information@onelilisted.com
• 🛠 開発・技術サポート: 別途案内