🖨 印刷 / PDF 保存

🎨 COCOPiTA トップページデザイン納品チェックリスト

このチェックリストは、Figma で COCOPiTA のトップページデザインを納品いただくデザイナーさま向けのガイドです。
すべて満たしてご共有いただくと、デベロッパー側でスムーズに HTML/CSS 化 → 公開反映が進みます。

① Figma 共有設定

共有メニューから 「リンクを知っている全員」に「閲覧権限」を付与
右上の 「Dev Mode（開発モード）」を ON にしてシェア（CSS と寸法が見えるよう）

共有 URL を運営またはデベロッパーへ送信

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

② デザインフレームの構造

下記のセクションに対応するフレームを用意してください（既存サイトの構造を維持できると、運用機能が引き続き動作します）。

フレーム名（推奨）	用途	必須/任意
Header / ヘッダー	ロゴ + グローバルナビ（PC/SP両対応）	必須
Hero / ヒーロー	3 連写真バンド or メインビジュアル	必須
News / お知らせ	最新お知らせリスト	任意
Ranking / ランキング	応援ランキング	任意
Reservations / 予約	支援予約セクション	任意
Active Support	支援中の団体	任意
Certified / 認定	認定済み団体	任意
Coupons / クーポン	クーポン	任意
Partners / パートナー	応援パートナー紹介	任意
Orgs Intro / 団体紹介	支援先団体のご紹介	必須
CTA Band	フッター直前の CTA	任意
Footer / フッター	サイトマップ + コピーライト	必須

ヘッダーのナビ項目は 9 項目固定（ココピタとは / 応援パートナー募集 / 一覧 / 支援先団体募集 / 一覧 / 掲載申請 / よくある質問 / PTA を探す / 支援を予約する）。
増減がある場合は事前にすり合わせをお願いします。

③ レスポンシブ

PC（1280px 以上） のフレームを用意
SP（375px 標準） のフレームを用意
中間サイズ（タブレット 768px）が崩れないか確認
モバイル時のヘッダーナビ（ハンバーガーメニュー）デザイン

④ 画像アセット

必須

ヘッダー用ロゴ logo-header.png — 推奨 150 × 41 px（@2x で 300×82 推奨）
フッター用ロゴ logo-footer.png — 推奨 240 × 66 px

任意

ヒーロー画像 — 横長 3 連写真（既存サイズ 3524×754 と近い縦横比推奨）
その他装飾画像（PNG / WebP / SVG）
OGP 用画像（1200 × 630 px）

形式

写真は JPEG または WebP（容量を抑えるため）
ロゴ・イラスト・アイコンは PNG（透過背景）または SVG
1 ファイル 5MB 以下を目安に圧縮

⑤ タイポグラフィ

使用フォント名（日本語フォント・英字フォント）を明記
Web フォント使用の場合はサービス名（Google Fonts / Adobe Fonts 等）と URLを共有
有償フォントの場合はライセンス確認済みであること
各見出し・本文・キャプションのサイズ・行間・字間を Dev Mode で確認可能に

⑥ カラーパレット

メインカラー（ブランドカラー）の HEX コード
サブカラー / アクセントカラー
テキストカラー（見出し・本文・キャプション）
背景色 / 区切り線
ボタン色（通常 / ホバー / 押下）

Figma の Local Styles または Variables を活用してパレットを定義していただけると、CSS 変数化しやすいです。

⑦ インタラクション

ボタンの ホバー / クリック / フォーカス 状態
リンクのホバー時の見た目
アコーディオン・タブなどの展開アニメーション（あれば）
スクロールアニメーション（あれば）

⑧ 必須機能の維持

下記の動的機能は管理画面と連動しているため、デザイン変更後もセレクタやスクリプト読み込みを維持してください。

.site-header・.site-footer のクラス名を維持
各セクションの id（#news、#ranking 等）を維持
<script src="./content-overrides.js?v=..." defer></script> を必ず head 内に
ロゴ画像には HTML 属性 width="150" height="41" + inline style style="width:150px !important..." を必ず付与

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

⑨ 納品方法（推奨）

① Figma URL（閲覧権限）を運営宛に送信
② 上記チェックリストを満たしているかセルフチェック
③ 質問・確認事項があれば事前にすり合わせ
④ デベロッパーが HTML/CSS 化 → ZIP 化（1〜3 営業日）
⑤ 動作確認 → 本番反映

📞 連絡先
運営事務局: information@onelilisted.com
このチェックリストの URL: https://cocopita.com/admin/figma-checklist.html

— Figma 納品チェックリスト v1.0 / 2026-05-09 / COCOPiTA —