--- version: alpha name: Green Illustrated Corporate Culture Card LP description: 濃い緑の地に白いカードと手描き風の人物イラストを重ねた社内文化紹介ページ。黄色い見出しで親しみを出し、太い緑線のアーチ型カードで工程を見せる。後半は方眼紙の地に緑の帯見出しを置き、全体を信頼感のある緑の単色でまとめている。 colors: primary: '#358338' background: '#F2F2F2' surface: '#FFFFFF' background-alt: '#D9D9D9' accent-1: '#FCF63F' secondary: '#4EAA35' tint-1: '#6CA573' text: '#151515' text-body: '#525252' dark-section: '#B8C1C8' on-primary: '#FFFFFF' line: '#F2F2F2' typography: display: fontFamily: Noto Sans JP fontSize: 48px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Source Sans 3 fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-outline-pill: textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px title-board: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 210px heading-label-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 64px step-arch-card: textColor: '{colors.text-body}' typography: '{typography.body-lg}' rounded: '{rounded.full}' height: 290px band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 30px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 64px carousel-nav: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' rounded: '{rounded.full}' height: 32px link-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 130px point-card: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 150px --- # DESIGN.md — 緑×白の手描きイラスト企業文化紹介 LP（Green Illustrated Corporate Culture Card LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 親しみ・手作り感、信頼・誠実、ポップ・元気 - **キーワード**: 深緑の全面背景・手描き人物イラスト・札型カード・アーチ型ステップ・方眼紙の地・黄色い強調見出し - **地の質感**: ベタ塗りの緑と白、後半はうすいグレーの方眼グリッド。影はほぼ使わない - **形**: 大きな角丸の白カード、上部だけ半円のアーチ枠、ゆるい波型のセクション境界 - **温度感**: 明るく温かい。企業らしい誠実さに遊び心を加えたトーン ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#358338` | ブランドの緑・FV背景 | 18% | 画素の実測 | | `background` | `#F2F2F2` | ステップ部などの淡いグレー地 | 24% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード面 | 22% | 画素の実測 | | `background-alt` | `#D9D9D9` | 波で切り替わるグレー帯 | 12% | 画素の実測 | | `accent-1` | `#FCF63F` | FVの強調見出し（黄） | 1% | 画素の実測 | | `secondary` | `#4EAA35` | 明るい緑・波の裾や帯 | 4% | 画素の実測 | | `tint-1` | `#6CA573` | 淡い緑の帯見出し | 1% | 画素の実測 | | `text` | `#151515` | 見出しの濃い文字 | 1% | 画素の実測 | | `text-body` | `#525252` | 本文のグレー文字 | 2% | 画素の実測 | | `dark-section` | `#B8C1C8` | 関連リンク帯の青灰 | 5% | 画素の実測 | | `on-primary` | `#FFFFFF` | 緑地上の白文字・枠線 | 1% | 画素の主要色に補正 | | `line` | `#F2F2F2` | 方眼の罫線 | 2% | 画素の主要色に補正 | - 前半は緑を全面に敷き、白カードを浮かせる - 後半はグレー地と方眼の白地に切り替えて落ち着かせる - 強調見出しは緑地では黄色＋下線、白地では緑の帯に白文字 - 線とアイコンはすべて緑の単色で描く - 赤や青は外部ロゴ以外に使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVタイトル板の大文字 | ゴシック | Noto Sans JP | 900 | 48px | 1.2 | 0.05em | | `headline-lg` | FVキャッチ・セクション見出し | ゴシック | Noto Sans JP | 700 | 28px | 1.5 | 0.02em | | `headline-md` | 帯見出し・カードタイトル | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `body-lg` | リード文・ステップ説明 | ゴシック | Noto Sans JP | 700 | 15px | 1.8 | 0.02em | | `body-md` | 本文・リンク説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字ラベル・STEP番号 | 欧文サンセリフ | Source Sans 3 | 700 | 11px | 1.2 | 0.03em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 500 | 14px | 1.0 | 0.05em | - 見出しは太字ゴシックで、2行に分けて大きく出す - 見出しの上に小さな英字ラベルを中黒付きで添える - STEP番号は英字の小ラベルと大きな2桁数字の2段組 - 本文は太めのグレーで読みやすさを優先する - かるたの頭文字は白丸に黒の太字で入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、カルーセルは横スクロール - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは左右に約5%の余白を残して中央に置く - ステップのアーチ枠は幅約70%で中央寄せし、縦に積む - 目的・理由セクションは太い緑枠の大型コンテナで囲む - イラストは見出しの右肩やカードの角にはみ出させて置く ## Elevation & Depth - 影はほぼ使わず、面と線の色の差で階層を出す - かるた札だけ薄い影と傾きを付けて立体感を出す - 白カードはフラットで、緑地との色の差で浮かせる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: イラストは切り抜き。写真は角丸16pxの横長 - **セクション境界**: ゆるい波型カーブで緑からグレーへ切り替える - ステップ枠は上部が半円で下が直角のアーチ形、緑線4px - 大型コンテナは太い緑枠（約12px）と大きな角丸 - 吹き出しは角丸の枠線に小さなしっぽを付ける ## Components - **白枠ピルボタン**（`button-outline-pill`）: 緑地の上に置く白い枠線のピル型。右に矢印を付ける - **タイトル看板**（`title-board`）: 白い角丸の板の中に緑の二重枠。上段に英字名、下段に大きな日本語タイトル - **枠付きラベル見出し**（`heading-label-box`）: 緑地の角丸箱の内側に白線を引き、白文字で見出しを入れる - **アーチ型ステップカード**（`step-arch-card`）: 上部半円の緑線枠。STEP番号、短い説明、緑の線画アイコンを入れる - **緑帯見出し**（`band-heading`）: 番号の横に緑ベタの帯を置き、白い太字で要点を入れる - **吹き出し**（`speech-bubble`）: 白地またはグレー線の角丸吹き出しに短い補足を入れる - **カルーセル操作**（`carousel-nav`）: 白丸または緑丸の矢印ボタンと、ドットインジケーター - **関連リンクカード**（`link-card`）: 白地のカードにサムネイル、タイトル、説明文、緑の矢印を並べる - **理由カード**（`point-card`）: グレー線の角丸枠に淡緑の帯見出しと箇条書きを入れる ## Do's and Don'ts **Do** - 緑は1色を軸に、明暗2〜3段階だけで構成する - 手描き風の人物イラストを各セクションの端に添える - 工程は線画アイコンとアーチ枠で、やさしく図解する - 見出しは短く、2行に分けて大きく見せる - 後半は方眼の地で、ワークショップらしい雰囲気を出す **Don't** - グラデーションや強い影を多用しない - 緑以外の強い色をUIに足さない - 写真素材だけでページを構成しない - 細い明朝体で硬い印象にしない - カードの角を直角だけにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と親しみやすさを一目で伝える）: 緑の全面地の中央に白い看板を置き、四方を人物イラストで囲む 2. **キャッチと導線**（企画の趣旨を宣言し、一覧へ誘導する）: 黄色の太字見出しを集中線と下線で飾り、その下に白枠のピルボタン 3. **カードカルーセル**（作品を触って見せる）: 傾けた札を横並びにし、吹き出しで操作を案内、下に矢印とドット 4. **概要説明**（成り立ちを説明する）: 白い大角丸カードに商品写真、太字のリード文、注釈。下を波型で切り替え 5. **ピックアップ**（おすすめ作品を紹介する）: 白カード上部に枠付きラベル見出し、札の表裏を並べたスライダー 6. **制作ステップ**（作られた工程を見せる）: 英字ラベル付きの緑見出しに、4つのアーチ型カードを縦に積む 7. **目的**（企画の狙いを3点で示す）: 太い緑枠の方眼コンテナに、番号と緑帯見出しを並べ、写真を添える 8. **選ばれた理由**（この形式を選んだ理由を説明する）: 角丸枠のカードに淡緑の帯見出しと箇条書き、吹き出しとイラスト 9. **関連リンク**（関連コンテンツへ回遊させる）: 青灰の帯に、ピル型ラベルと白い横長リンクカードを2枚 10. **フッター**（サイト共通の導線を置く）: グレー地にSNSアイコン、テキストリンク、枠線ボタン、コピーライト ## Imagery - 太めの黒い主線とフラットな彩色で描く、手描き風の人物イラスト - オフィス・現場・在宅など、働く場面を明るい表情で描く - 札はパステル調の背景色に、白丸のひらがな頭文字を入れる - 工程アイコンは緑の単色線画で、丸みのある線にする - 商品写真は淡い青グレー地に札を散らした俯瞰構図 - 見出しの周りに集中線やきらめきの小さな装飾を付ける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はFVの看板を中央に置き、イラストを左右に広げる - PC のカルーセルは札を5〜6枚横に並べる - PC のピックアップは複数カードを横に並べ、縦書きの大きな英字を添える - PC のステップは左に見出しとタブ、右にアーチ型カードを横長で積む - PC の理由カードと関連リンクは2カラムにする ## 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-f651212a`（元 LP の URL から採番） - **元 LP**: https://www.hitachi-systems.com/sp/karuta/index.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。