--- version: alpha name: Pop Riso Illustration Corporate Brand LP description: 濃紺を軸に、オレンジ・ターコイズ・ピンク・黄のビビッド色を組み合わせた企業ブランドLPです。手描きの質感があるフラットイラスト、ゆがんだ有機形の色面、太い角ゴシックの見出し、横に流れる英字ローマ字ロゴで、遊び心と親しみやすさを出しています。 colors: primary: '#242081' background: '#FFFFFF' accent-1: '#EE7022' accent-2: '#01CEB5' accent-3: '#F778AD' cta: '#F4EA03' on-cta: '#242081' on-dark: '#FEF3FD' surface: '#EDFEFF' tint-1: '#FEECFE' secondary: '#0C6AC1' line: '#261A6D' text-muted: '#19257C' accent-1-accessible: '#C4540F' accent-2-accessible: '#018272' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 400 lineHeight: 1.1 accent: fontFamily: Rubik Mono One fontSize: 48px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: M PLUS 1p fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.04em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: M PLUS 1p fontSize: 14px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' ring-nav: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' rounded: '{rounded.full}' height: 160px topics-board: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 220px marquee-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 56px slider-card: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 200px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 70px article-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 290px vote-bar: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px top-button: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px --- # DESIGN.md — 紺×ビビッド多色のポップな鉄道企業ブランドLP（Pop Riso Illustration Corporate Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、力強い・インパクト - **キーワード**: ビビッド多色・手描き線・有機形の色面・極太見出し・流れる英字・TAPバッジ - **地の質感**: リソグラフ風のかすれた輪郭線と、ベタ塗りのフラット面。紙の印刷物のような手触りがある - **形**: 波打つ帯、角丸の大きな有機ブロブ、太い枠の円リング、ゆがんだ吹き出し - **温度感**: 暖色と寒色を同じ強さで混ぜる高彩度でにぎやかな配色。白地で抜けをつくる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#242081` | ブランド濃紺・暗いセクションの地・見出し文字 | 13% | 画素の実測 | | `background` | `#FFFFFF` | ページの白地 | 46% | 画素の実測 | | `accent-1` | `#EE7022` | オレンジ（事業ブロック・リング・TAPバッジ） | 11% | 画素の主要色に補正 | | `accent-2` | `#01CEB5` | ターコイズ（クチコミブロック） | 8% | 画素の実測 | | `accent-3` | `#F778AD` | ピンク（読み物ブロック） | 8% | 画素の実測 | | `cta` | `#F4EA03` | 黄色のピル型ボタン・波帯 | 3% | 画素の実測 | | `on-cta` | `#242081` | 黄ボタン上の文字 | 0% | 画素の主要色に補正 | | `on-dark` | `#FEF3FD` | 色面の上の白文字 | 1% | 画素の実測 | | `surface` | `#EDFEFF` | 記事カードの淡いミント面 | 1% | 画素の実測 | | `tint-1` | `#FEECFE` | 流れる英字の淡いピンク | 2% | 画素の実測 | | `secondary` | `#0C6AC1` | 青（暮らし系の見出し影・TAP） | 1% | 画素の実測 | | `line` | `#261A6D` | 写真枠・カード枠の紺線 | 0% | 画素の実測 | | `text-muted` | `#19257C` | コピーライト等の補足文字 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#C4540F` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#018272` | AA を満たす補正値（計算） | | 計算 | - 上部は白地、中盤以降は濃紺地に切り替え、セクション境界は黄色の波帯で区切る - 濃紺地の上にオレンジ・ターコイズ・ピンクの大きな有機ブロブを置き、セクションごとに色を変える - 4つのアクセント色は、ナビのリング・ドット・TAPバッジと各セクションで対応させる - 主ボタンは黄色地に紺文字で統一する。投票ボタンだけ、選択肢の色（ターコイズ／黄）に合わせる - 見出しは紺文字に、セクション色の影をずらして重ねる - グラデーションは使わず、ベタ塗りだけで構成する - `ring-nav` は文字 `#EE7022` × 背景 `#FFFFFF` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#C4540F`、4.54:1）を使う。 - `speech-bubble` は文字 `#01CEB5` × 背景 `#EDFEFF` のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#018272`、4.56:1）を使う。 - `vote-bar` は文字 `#242081` × 背景 `#EE7022` のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#C4540F`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の極太カタカナ見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 56px | 1.1 | 0.0em | | `accent` | 横に流れるローマ字の装飾見出し | 欧文サンセリフ | Rubik Mono One | 400 | 48px | 1.0 | 0.02em | | `headline-lg` | 縦書き・横書きの影付きセクション見出し | ゴシック | Dela Gothic One | 400 | 32px | 1.2 | 0.02em | | `headline-md` | 色面上の白い白抜き見出し | ゴシック | M PLUS 1p | 900 | 26px | 1.3 | 0.04em | | `body-lg` | 中央揃えの太めのリード文 | ゴシック | Noto Sans JP | 700 | 15px | 1.9 | 0.03em | | `body-md` | 吹き出し・カードの本文 | ゴシック | Noto Sans JP | 700 | 12px | 1.6 | 0.02em | | `label-button` | ボタンとTAPバッジ | ゴシック | M PLUS 1p | 800 | 14px | 1.2 | 0.04em | | `note` | 日付・コピーライト | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.02em | - 本文もすべて太字（700）にして、紙面を力強く見せる - 見出しの影は右下に3〜4pxずらし、セクションの色を使う - ローマ字の装飾見出しは画面幅を超える大きさで置き、左右を切って流す - リード文は中央揃えで、短い行で改行する - 縦書き見出しは写真スライダーの横に添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。事業紹介は写真＋縦書き見出しの左右交互配置。ナビは2×2のリング - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 事業ブロックは見出しの位置を左右・縦横で交互に変える - 有機ブロブは画面幅の約90%で中央に置き、上下に大きな余白をとる - スライダーの左右に細い矢印、下に横長バーのページネーションを置く - イラストは余白に散らすように配置し、グリッドに合わせない - 白地と濃紺地の間に黄色の波帯を入れる ## Elevation & Depth - 影はぼかさず、ずらした色ベタで表現する（ハードシャドウ） - お知らせボードは紺の太枠に、斜線模様の影を付ける - カードやボタンはフラットにし、細い白線や紺線で縁取る ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 大きめの角丸四角で、紺の細枠付き。一部は角の丸みが不揃いな手描き風 - **セクション境界**: 黄色の手描き風の波帯と、ゆがんだ有機ブロブの輪郭 - 円リングのナビはかすれた太い枠線で描く - TAPバッジは写真の右下に重ねた正円にする - 吹き出しは輪郭を少しゆがめ、尻尾を付ける - VSは星形バーストで表す ## Components - **円リングナビ**（`ring-nav`）: 色ごとに太いリングを作り、中央に紺文字のラベル、上に『TAP』と放射線を付ける。2×2で並べる - **お知らせ吊り看板**（`topics-board`）: 英字が流れる紺の帯から2本の柱で吊るした、紺の太枠の白ボード。最新のお知らせを1件表示する - **流れる英字帯**（`marquee-band`）: 紺地に白い装飾英字が横に流れる帯。ページの最上部と最下部に置く - **写真スライダー＋TAPバッジ**（`slider-card`）: 角丸の写真に円形のTAPバッジを重ねる。左右に矢印、下にバーのドットを置く - **黄色ピルボタン**（`button-primary`）: 黄色地に紺の太字、細い白の縁取り。一覧へ誘導するボタン - **クチコミ吹き出し**（`speech-bubble`）: 白・青・オレンジの手描き風吹き出し。互い違いに重ねてクチコミを散らす - **読み物カード**（`article-card`）: 淡いミント地のカードに日付、タイトル、画像、紺のピルボタンを縦に並べる - **投票結果バー**（`vote-bar`）: 白い線の角丸枠の中に、2色で塗り分けた割合バーを置く - **TOPへ戻る**（`top-button`）: 紺の正円に白い英字 ## Do's and Don'ts **Do** - イラストは太い輪郭線とベタ塗りで描き、色ずれした版ズレ感を出す - セクションごとにアクセント色を1つ決め、ブロブ・影・バッジに使う - 装飾英字は画面からはみ出させて動きを出す - タップできる要素には『TAP』の表示を添える - 本文は太字で中央揃え、短い行にする **Don't** - グラデーションやぼかしたドロップシャドウを使わない - 細い明朝体や繊細なフォントを使わない - 色面を正確な矩形で区切らない（有機形・波形にする） - 彩度の低いくすみ色を主役にしない - 写真を角丸なし・枠なしで置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの多面性を一目で伝える）: 白地にロゴ風の極太見出しと、かっこ付きのサブコピーを置く。周囲に事業を表すイラストを散らす 2. **英字帯とお知らせ**（最新情報を知らせる）: 紺の英字帯から吊るした太枠のボードに、日付とリンク付きの1行を入れる 3. **コンテンツナビ**（4つのコーナーへ誘導する）: 4色の円リングを2×2で並べ、上にTAPラベルを付ける 4. **事業紹介**（事業カテゴリを順に紹介する）: 流れる英字見出しのあと、影付きの縦書き・横書き見出しと写真スライダーを左右交互に置く 5. **クチコミ**（利用者の声で共感を集める）: 濃紺地にターコイズのブロブを置き、多色の吹き出しを散らす。下に黄色ボタン 6. **読み物**（小ネタ記事で親近感を出す）: ピンクのブロブに白い見出しとリード、記事カードのスライダー、黄色ボタンを置く 7. **投票企画**（参加型コンテンツで交流する）: オレンジのブロブに2択の写真とVSバースト、投票ボタン、割合バーを置く 8. **フッター**（関連チャネルへ誘導する）: 黄色の波帯で白地に戻す。バナー、SNSボタン、ロゴ、コピーライト、英字帯を並べる ## Imagery - 日用品や乗り物を、太い黒紺の線とビビッドなベタ塗りで描いたフラットイラスト - イラストは斜め・アイソメ風の角度で描き、少しかすれさせる - 写真は明るい実写を角丸で切り抜き、紺の細枠を付ける - キャラクターはゆるい手描きタッチ - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではリングナビを4つ横一列に並べる - PCでは事業紹介を2カラムのジグザグ配置にする - PCではブロブを横長にし、吹き出しを左右に広げる - PCでは読み物と投票のスライダーで前後のカードをはみ出させて見せる - ファーストビューのイラストは見出しの周囲を囲むように配置する ## 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-0a4e7bee`（元 LP の URL から採番） - **元 LP**: https://iroirometro.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。