--- version: alpha name: Playful Pastel Anniversary Museum LP description: 白地にパステルのぼかし玉と金色の紙吹雪を散らした、明るい周年記念 LP。写真はひし形やしずく形に切り抜いて浮かべる。企画紹介はライム色のグラデーションカードに番号タグを付けて縦に並べる。見出しは太い欧文と小さな和文の2段組み。差し色は青のボタンと虹色の文字。 colors: primary: '#1068C9' background: '#FFFFFF' background-alt: '#F7F8FC' accent-1: '#EAF98E' tint-1: '#CAF1FC' text: '#212121' text-muted: '#909090' cta: '#1169CA' on-cta: '#F1FEFF' accent-2: '#E86AA6' accent-3: '#A57BE8' secondary: '#EBFC3C' surface: '#F4F4FA' line: '#A9C6EA' accent-2-accessible: '#DA2279' typography: display: fontFamily: Rubik fontSize: 46px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.01em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Rubik fontSize: 11px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em accent: fontFamily: Rubik fontSize: 26px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 6px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 22px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px button-arrow: backgroundColor: '{colors.background}' textColor: '{colors.primary}' rounded: '{rounded.full}' height: 50px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 90px feature-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 560px number-tag: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 34px news-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 320px diamond-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 320px date-row: textColor: '{colors.text}' typography: '{typography.note}' height: 24px banner-link: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 100px --- # DESIGN.md — ライム×虹色パステルの周年記念施設 LP（Playful Pastel Anniversary Museum LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: ポップ・元気、かわいい、清潔・爽やか、やさしい・柔らかい - **キーワード**: 周年記念・パステルぼかし・ひし形写真・紙吹雪・ライムカード・虹色ロゴ - **地の質感**: 白地に水色・桃色・橙のぼかし玉をにじませる。金色リボンの紙吹雪を重ねて祝祭感を出す - **形**: ひし形と角丸カードが基本。写真は有機的なしずく形にも切り抜く。セクション境界は大きな円弧 - **温度感**: 明るく暖かい。冷たい水色と黄緑で清潔感も出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1068C9` | ブランドの青（ボタン・強調文字） | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地色 | 30% | 画素の実測 | | `background-alt` | `#F7F8FC` | 企画セクションの淡いグレー青地 | 16% | 画素の実測 | | `accent-1` | `#EAF98E` | 企画カードのライム色 | 21% | 画素の実測 | | `tint-1` | `#CAF1FC` | 沿革セクションの水色グラデ地 | 10% | 画素の実測 | | `text` | `#212121` | 見出しと本文の黒 | 4% | 画素の実測 | | `text-muted` | `#909090` | 見出し下の和文サブ・日付 | 1% | 画素の実測 | | `cta` | `#1169CA` | 一覧を見るボタン | 0% | 画素の実測 | | `on-cta` | `#F1FEFF` | ボタンの文字 | 0% | 画素の実測 | | `accent-2` | `#E86AA6` | 番号タグのピンク | 0% | 推定 | | `accent-3` | `#A57BE8` | 番号タグの紫 | 0% | 推定 | | `secondary` | `#EBFC3C` | SNSアイコンの黄緑丸 | 0% | 画素の実測 | | `surface` | `#F4F4FA` | ニュースのタグ・ひし形の白 | 0% | 画素の実測 | | `line` | `#A9C6EA` | 沿革の点線 | 0% | 推定 | | `accent-2-accessible` | `#DA2279` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いグレー青を交互に使い、水色・桃・橙のぼかし玉を端に置く - 企画カードは淡い黄から黄緑へのグラデにする - 青はボタン・リンク・強調語だけに使う - 番号タグはピンクと紫を交互に使う - 欧文の英字見出しの一部は青・橙・緑の多色にする - 金色の紙吹雪は装飾専用で、文字には使わない - `number-tag` は文字 `#F1FEFF` × 背景 `#E86AA6` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DA2279`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字見出し | 欧文サンセリフ | Rubik | 600 | 46px | 1.1 | 0.01em | | `headline-lg` | ファーストビューのひし形内の主メッセージ | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.02em | | `headline-md` | 企画カードのタイトル | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.5 | 0.03em | | `headline-sm` | 英字見出し下の和文サブ | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `body-md` | カード本文・リード文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.04em | | `note` | 日付・コピーライト | 欧文サンセリフ | Rubik | 400 | 11px | 1.5 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.0 | 0.08em | | `accent` | 多色の欧文告知（近日公開など） | 欧文サンセリフ | Rubik | 600 | 26px | 1.2 | 0.02em | - 見出しは大きな英字の下に小さなグレーの和文を中央揃えで組む - リード文は中央揃えで行間を2.0前後と広めにとる - カード本文は左揃えで行間1.9 - 強調語は青い太字にする - 英字の一部を3色に塗り分けて楽しさを出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ニュースは横スクロールカルーセル - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 22px（375px 幅換算） - 企画カードは写真を左右どちらかにずらし、背面のライム面からはみ出させる - カードのずらし方向は1枚ごとに左右交互にする - セクション頭に大きな英字見出しを置き、上に動物イラストを添える - カード同士の間隔は約32px - 沿革は点線で写真をつなぐ蛇行レイアウト ## Elevation & Depth - 影はほぼ使わず、色面とぼかしで奥行きを出す - ひし形パネルとカードはごく淡い拡散影まで - 紙吹雪とイラストを手前に重ねて立体感を出す ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: FVは角丸のひし形、カードは角丸長方形、沿革はしずく・不定形の円 - **セクション境界**: 大きな円弧で地色を切り替える - ひし形は45度回転の角丸正方形にする - 主ボタンはピル型、矢印ボタンは円形にする - 番号タグは下端がとがった旗形にする - 鋭い直角は使わない ## Components - **一覧ボタン**（`button-primary`）: 青いピル型で、右に矢印が付く - **カルーセル矢印**（`button-arrow`）: 白地に青い枠線の円形ボタン - **英和2段見出し**（`section-heading`）: 太い英字の下に小さなグレーの和文を置く - **企画カード**（`feature-card`）: ライムのグラデ面に、ずらした写真・タイトル・本文・日付を載せる - **番号タグ**（`number-tag`）: 写真の角に付ける旗形の2桁番号。ピンクと紫を交互に使う - **お知らせカード**（`news-card`）: 角丸サムネ、青いタイトル、2行の抜粋、日付、グレーのカテゴリタグで構成する - **ひし形メッセージ**（`diamond-panel`）: 淡いグラデか白のひし形パネル内に、中央揃えの主メッセージを置く - **日付行**（`date-row`）: 青いカレンダーアイコンと期間の文字 - **関連サイトバナー**（`banner-link`）: 青枠の角丸ボックスに、ロゴ・2行タイトル・外部リンク用の丸アイコンを入れる ## Do's and Don'ts **Do** - 写真はひし形やしずく形に切り抜き、余白に浮かべる - パステルのぼかし玉と金の紙吹雪を各セクションに散らす - 企画カードは写真をずらして重ね、左右交互にする - 動物などのフラットなイラストを見出し周りに添える - 英字見出しは大きく太く、和文サブは小さく灰色にする **Don't** - 暗い背景や濃い面を広く使わない - 写真を四角いまま全幅で並べない - 青をボタン・強調以外に多用しない - 明朝体や細い書体を見出しに使わない - 紙吹雪を本文の上に重ねて読みにくくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（周年の祝祭感を一目で伝える）: 多色のロゴ数字を中心に置き、周囲にひし形写真を散らす 2. **周年メッセージ**（節目の告知）: 淡いグラデのひし形内に主文を置き、透かしの年号と英字を重ね、SCROLL表示を添える 3. **リード文**（歩みと想いを語る）: 中央揃えの短い行を広い行間で積む 4. **お知らせ**（最新情報）: 英和見出しの下に横スクロールカード、ピルボタン、円形矢印を置く 5. **記念企画一覧**（企画を紹介する）: 円弧で地色を切り替え、番号付きライムカードを縦に5枚並べる 6. **沿革**（歴史を振り返る）: 水色グラデの円弧地に、点線でつないだしずく形の写真と中央の文章を置く 7. **近日公開**（期待感を高める）: 白いひし形に多色の英字告知を入れる 8. **フッター**（関連リンク）: ロゴ、黄緑丸のSNS、関連施設ロゴ、青枠バナー、住所を並べる ## Imagery - 写真は明るく彩度高めで、生きもの・展示・人の笑顔を撮る - 動物はフラットな塗りのイラストで、輪郭はなし - 金と銀のカールしたリボン紙吹雪を、ややぼかして配置する - 背景に大きなパステルのぼかし円を重ねる - 建物は簡略化した白いイラストで見出し上に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも中央約50%幅の1カラムで、SPと同じ構成にする - PCではひし形写真をより広く散らし、余白を増やす - ニュースはPCで3枚以上が見えるカルーセルにする - 円弧の地色切り替えは全幅で保つ - フッターはPCでロゴとSNSを横一列にする ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-e74cbd65`（元 LP の URL から採番） - **元 LP**: https://www.nifrel.jp/10th_anniversary/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。