--- version: alpha name: Pop Geometric Aquarium Exhibition LP description: 生成りと白の地に、マゼンタ・シアン・黄緑・橙などの多色幾何図形を散らした、子ども連れ向け水族館の企画展 LP。紺色の文字を基本にし、アーチ型の背景と吹き出し型の切り抜きで、遊び心のある展示空間の雰囲気を出している。 colors: primary: '#1A1E4C' accent-1: '#C40D6B' background: '#FFFFFF' background-alt: '#F3EFE6' secondary: '#00ADB5' dark-section: '#1B245C' accent-2: '#4881C6' accent-3: '#B24E8E' tint-1: '#FEC4AC' tint-2: '#E9F6F6' cta: '#0A9EAD' on-cta: '#FFFFFF' marker: '#D7E829' line: '#1F2A5C' cta-accessible: '#08818E' typography: display: fontFamily: Zen Maru Gothic fontSize: 60px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Josefin Sans fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 4px md: 16px lg: 200px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px button-outline: textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px ribbon-label: backgroundColor: '{colors.dark-section}' typography: '{typography.label-button}' height: 44px skill-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 420px product-card: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 640px rainbow-band: backgroundColor: '{colors.background}' typography: '{typography.display}' height: 80px info-label: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px badge-dotted: backgroundColor: '{colors.background}' textColor: '{colors.primary}' rounded: '{rounded.full}' height: 56px slider-arrow: backgroundColor: '{colors.background}' textColor: '{colors.primary}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 多色ポップ図形の水族館企画展 LP（Pop Geometric Aquarium Exhibition LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: ポップ・元気、かわいい、クール・先進的 - **キーワード**: 多色幾何図形・アーチ型背景・紺色の文字・生成りの地・フラットイラスト・斜めのリボン見出し - **地の質感**: フラットな単色面に、うっすら水彩風のグラデーションと網点を重ねる - **形**: アーチ、雲形、星形の吹き出し、円形写真、波形の下端 - **温度感**: 明るく軽快。色数は多いが、白と生成りの地で整理されている ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1A1E4C` | 見出し・本文の紺 | 3% | 画素の実測 | | `accent-1` | `#C40D6B` | 強調語・小見出しのマゼンタ | 2% | 画素の実測 | | `background` | `#FFFFFF` | ページの白地 | 28% | 画素の実測 | | `background-alt` | `#F3EFE6` | アーチ内の生成り地 | 20% | 画素の実測 | | `secondary` | `#00ADB5` | ターコイズのアクセント面 | 5% | 推定 | | `dark-section` | `#1B245C` | 斜めリボン見出しの濃紺 | 1% | 画素の実測 | | `accent-2` | `#4881C6` | カフェ商品カードの青 | 3% | 画素の実測 | | `accent-3` | `#B24E8E` | グッズカードの紫 | 2% | 画素の実測 | | `tint-1` | `#FEC4AC` | カード紹介帯のピーチ | 4% | 画素の実測 | | `tint-2` | `#E9F6F6` | スキル導入のミント | 5% | 画素の実測 | | `cta` | `#0A9EAD` | チケットボタンのグラデーション | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `marker` | `#D7E829` | SNSアイコンの黄緑 | 0% | 推定 | | `line` | `#1F2A5C` | 区切り線・枠線の紺 | 0% | 推定 | | `cta-accessible` | `#08818E` | AA を満たす補正値（計算） | | 計算 | - 地は白と生成りを交互に使い、セクションごとにアーチ型の生成り面を敷く - 文字は紺を基本にし、強調語だけマゼンタにする - 多色はシアン・マゼンタ・黄緑・橙・紫・赤を幾何図形の装飾に使う - 4つのカテゴリにそれぞれ固有色（マゼンタ・青・橙・ターコイズ）を割り当て、見出しアイコンと吹き出しを同じ色で塗る - 区切り帯の文字列は1文字ずつ色を変えて虹色に並べる - CTAはターコイズから青へのグラデーションで、ピル型にする - `button-primary` は文字 `#FFFFFF` × 背景 `#0A9EAD` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#08818E`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインビジュアルの手書き風大見出し | 丸ゴシック | Zen Maru Gothic | 500 | 60px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 500 | 30px | 1.4 | 0.12em | | `headline-md` | カテゴリ名の縦書き見出し | ゴシック | Zen Kaku Gothic New | 700 | 34px | 1.1 | 0.05em | | `headline-sm` | 生きもの名・カード見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.06em | | `body-lg` | カテゴリの説明文（太字） | ゴシック | Noto Sans JP | 700 | 15px | 1.9 | 0.04em | | `body-md` | 一般本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.04em | | `accent` | 英字見出し（INFORMATION・Review など） | 欧文サンセリフ | Josefin Sans | 700 | 24px | 1.2 | 0.08em | | `label-button` | ボタン・リボンのラベル | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.08em | - 見出しは字間を広めにとり、中央揃えにする - カテゴリ見出しは縦書きにし、上に小さなルビを付ける - 強調したい語だけマゼンタにし、残りは紺で書く - 難読語には小さなルビを付ける - 英字見出しは太めのジオメトリック書体を大文字で使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC も中央に SP 幅のカラムを置く - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 各セクションは上が半円のアーチ型の面で始める - 図版は左右交互に置き、縦書き見出しを反対側に配置する - 説明文の下に区切り線を引き、生きもの名と解説を中央に置く - セクション間に色違いの文字列の帯を挟み、画面からはみ出させる - 写真は全幅で置き、下端をアーチ状に丸める ## Elevation & Depth - 影はほぼ使わず、フラットな面の重なりで奥行きを出す - 図形の一部にだけ立体的な側面の色を付けて疑似3Dにする - 写真の上に半透明の色面を重ねる ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 200px。ボタンはピル型。 - **写真の切り抜き**: 円形・アーチ型・雲形・下端が波形の切り抜き - **セクション境界**: 半円のアーチ、または下端を大きく丸めた面 - 商品カードは上部をアーチ、下端を3連の波形にする - 見出しのリボンは斜めに傾け、端をギザギザに切る - 小さな注記は点線の円で囲む - スライダーの矢印は白地に紺の細い枠の円形ボタンにする ## Components - **チケット購入ボタン**（`button-primary`）: グラデーションのピル型。上に小さなコピー、下にメイン文言、右に外部リンクのアイコンを置く - **詳細ボタン**（`button-outline`）: 紺の細い枠のピル型で、外部リンクのアイコン付き - **斜めリボン見出し**（`ribbon-label`）: 濃紺の帯を傾け、白文字で短いコピーを入れる。端はギザギザ - **カテゴリ紹介ブロック**（`skill-block`）: 色付きの吹き出しにフラットイラストを入れ、実物の円形写真と縦書き見出しを添える - **商品カード**（`product-card`）: アーチ型の写真の下に、波形の下端を持つ色面を付け、名前・説明・価格を白文字で載せる - **多色文字の帯**（`rainbow-band`）: ひらがなを1文字ずつ違う色にして、大きく横に流す区切り - **情報の見出しバー**（`info-label`）: 生成り地の上に白い帯を置き、太字の紺文字を中央に入れる - **点線丸の注記**（`badge-dotted`）: 白地の円を点線の枠で囲み、短い注記を入れる - **スライダー矢印**（`slider-arrow`）: 白い円に紺の枠と矢印 ## Do's and Don'ts **Do** - 地は白と生成りに抑え、色は図形とイラストに集中させる - カテゴリごとに固有色を決め、アイコン・吹き出し・名前を同じ色で揃える - セクションは毎回アーチ型の面から始める - フラットな幾何図形を画面端からはみ出させて散らす - 本文は紺で、行間を広めにとる **Don't** - 黒の文字や黒の地を使わない - 四角い硬いカードを並べない - 重いドロップシャドウを付けない - 本文まで多色にしない - 写真を直線の矩形のまま並べ続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画展のテーマを印象づける）: 白地に多色の幾何図形と生きものの切り抜き写真を散らし、中央に雲形と手書き風の大見出しを置く。下にキャッチを2行で中央揃え 2. **会場写真スライダー**（空間の雰囲気を伝える）: 全幅の写真スライダーに、左右に円形の矢印を置く 3. **カテゴリ紹介の導入**（4つの分類を予告する）: ミントのアーチ面に、斜めリボン、2色の見出し、短い本文を置く 4. **カテゴリ別の紹介**（分類ごとに代表の生きものを紹介する）: 色付きの吹き出しのイラスト、円形写真、縦書き見出し、太字の説明、区切り線、名前と解説を4回繰り返す 5. **観察の提案**（体験の楽しみ方を案内する）: 水色のアーチ見出しの後に、子どもの観察写真と吹き出しを置き、下をアーチ状に丸める 6. **解説コーナー**（スタッフ解説とオリジナルの配布物を紹介する）: ラベンダーのアーチ見出し、写真に白文字の注記と矢印、ピーチ帯で花形カードを紹介する 7. **カフェ・グッズ**（限定商品を紹介して物販を促す）: アーチ写真と波形下端の色面カードをスライダーで見せ、周囲に図形を散らす 8. **コンセプト**（企画の思想を伝える）: 白地に左揃えの大見出し、マゼンタの小見出し、長めの本文を置き、円形のリンクボタンを添える 9. **SNS口コミ**（来場者の投稿で信頼性を出す）: 英字見出しとタブで投稿サムネイルを横スクロールさせる 10. **インフォメーション**（料金・時間・チケットを案内する）: 生成りのアーチ面に建物写真、白い見出しバー、料金表、グラデーションのCTAを置く 11. **アクセス**（行き方を示す）: 地図、交通と住所の本文、枠線のピル型ボタンを並べ、下端を丸める 12. **フッター**（運営情報とSNSへ誘導する）: ロゴ、黄緑の丸いSNSアイコン、関連施設のバナー、コピーライトを置く ## Imagery - 生きものはフラットな幾何学イラストにし、単色の吹き出しの中に置く - 実物の写真は円形に切り抜いて、イラストに添える - 装飾にはパズル片・L字・半円など太い幾何図形を使い、網点とグラデーションを一部に入れる - 会場写真は明るい白い空間と、子どもが観察する姿を中心にする - 商品写真は白背景や芝生の上で、明るく撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでも中央にSP幅のカラムを固定し、背景はターコイズで塗る - PCでは左側にロゴと日付のバッジ、右側にページ内ナビを固定表示する - PCの背景上部にも幾何図形を散らして、続きの雰囲気を出す - コンテンツの構成はSPと同じまま変えない ## 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-d89aa4c2`（元 LP の URL から採番） - **元 LP**: https://www.nifrel.jp/dokunifrel/?utm_source=instagram&utm_medium=social&utm_campaign=ig_dokunifrel&utm_id=120248123597260467&utm_content=120248123597270467&utm_term=120248123597280467&fbclid=PAYW9leATWcgpwZG9mAmV4dG4DYWVtATAAYWRpZAGrNQhU3cRTc3J0YwZhcHBfaW - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。