READYFOR（レディーフォー） DESIGN.md

READYFOR（https://readyfor.jp/）のデザイン仕様書。 日本初・日本最大級のクラウドファンディングプラットフォーム。社会課題の解決や文化・地域活性化を支援するプロジェクトが中心。 実サイトの computed style 実測（2026-06-21 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白を基調としたクリーンなレイアウトに、情熱のレッド #e73650 の角丸 CTA でクラウドファンディングの「行動喚起」と「温かさ」を両立。プロジェクトカードを主役にした UI で、支援者とプロジェクトの出会いを演出
• 密度: 本文の line-height は 1.5。見出しも 1.2〜1.5 で比較的広め。カード UI を中心に情報を整理しつつ、読みやすさを確保
• キーワード: クリーンホワイト、パッションレッド、クールグレーサーフェス、Roboto + Noto Sans JP のモダンな混植、社会貢献プラットフォームの信頼感
• 特徴:
  • フォントスタックは Roboto（欧文優先）→ Noto Sans JP（和文）→ sans-serif のシンプルな構成。Google Fonts で完結するためプレビュー再現性が高い
  • ブランドカラーは #e73650（コーラルレッド）。主要 CTA「ログイン・新規登録」「プロジェクトをはじめる」の背景とボーダーに使用。border-radius は 4px の角丸
  • アクセントカラーに #fcb92c（ゴールドイエロー）。「NEXT GOAL挑戦中」バッジに使われ、プロジェクトの勢いや達成感を表現
  • サーフェスに #f2f5f8（クールグレー）を使用。ウォーム系ではなく寒色寄りの明るいグレーで、白との微妙なコントラストで階層を作る
  • テキスト色は #383d43（ダークグレー）が主体。純黒 #000000 は限定的で、#787f87（ミディアムグレー）を補助テキストに使用
  • フッターは #383d43（ダークグレー）の反転配色で、白文字のナビゲーションを配置
  • font-feature-settings: normal — palt / kern の明示的有効化なし
  • Tailwind CSS ベースの実装（rf: プレフィックス付きユーティリティクラス）
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Brand Red (#e73650): メインのブランドカラー。主要 CTA「ログイン・新規登録」「プロジェクトをはじめる」の背景、ヘッダーのアクションボタン、CTA セクション（uniqueBackgrounds で 33 件、最多出現色）
• Brand Gold (#fcb92c): 「NEXT GOAL挑戦中」バッジの背景。プロジェクトの達成度や勢いを示すアクセント色（8 件出現）
• Brand Blue (#3c82eb): 「常設寄付のプロジェクトをはじめる」ボタン背景。寄付セクション専用のセカンダリブランド色（2 件出現）

CTA / Buttons

• Primary CTA: 背景 #e73650 / 文字 #ffffff / radius 4px / padding 8px 12〜20px / border 1px solid #e73650 / box-shadow rgba(33, 35, 37, 0.12) 0px 4px 8px 0px
• Secondary CTA: 背景 #f2f5f8 / 文字 #383d43 / border 1px solid #d8dce1 / radius 4px / padding 8px 20〜40px
• Card Link: 背景 #ffffff / radius 4px / border なし / パディングなし — プロジェクトカード全体がリンク

Neutral — Cool Gray Scale

Semantic / Status

• 達成 (Orange): #f88629 — 「達成」バッジの背景色
• 挑戦中 (Gold): #fcb92c — 「NEXT GOAL挑戦中」バッジの背景
• 進行中 (Orange Gradient): #ffa45a — プログレスバーのアクセント（8 件出現）
• Green (Success): #06c755 — 達成率 100% 超えのインジケータ等
• Tag Active (Teal): #308e85 — ハッシュタグ文字色（#地域文化 等）
• Donation Blue Surface: #edf4ff — 寄付セクションの薄いブルー面

Footer

• Footer BG: #383d43 — ダークグレー背景
• Footer Text: #ffffff — 白文字
• Footer Link: #ffffff — 白文字リンク

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を使用。Google Fonts の標準的な日本語ゴシック体
• フォールバック: sans-serif（最小構成）
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• Roboto を最優先。Google のヒューマニストサンセリフで、Noto Sans JP と相性がよい
• font-family チェーンで Roboto が先頭に来るため、英数字は Roboto、日本語は Noto Sans JP で描画される

3.3 font-family 指定

css/* 全要素共通（body, h1〜h4, p, a, span, button, input, nav, header, footer） */
font-family: Roboto, "Noto Sans JP", sans-serif;

フォールバックの考え方:

• 欧文は Roboto を最優先。英数字・記号類は Roboto の字形で統一
• 和文は Noto Sans JP にフォールバック。Roboto が持たない日本語グリフをカバー
• 最終フォールバックは sans-serif のみ。OS 固有のフォント（Hiragino Sans, Yu Gothic 等）は font-family に含まれない
• Google Fonts で両方提供されるため、Web 環境でほぼ確実にブランド書体で表示される

3.4 文字サイズ・ウェイト階層

実測値（トップページ、2026-06-21 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• Display (48px): 1.46（70px / 48px）— キャッチコピー用の広い行間
• Feature (28px): 1.5（42px / 28px）
• Section H2 (20px): 1.2（24px / 20px）— やや狭め
• 本文 (14px): 1.5（21px / 14px）
• Caption (12px): 1.5（18px / 12px）
• H1 / Body Large: normal（ブラウザデフォルト）

字間 (letter-spacing) — 実測:

• 全階層で normal（0em）。ネガティブ / ポジティブいずれのトラッキングも適用されていない

ガイドライン:

• READYFOR のタイポグラフィは letter-spacing をいじらないシンプルな方針。フォント本来のメトリクスに任せる
• line-height は全体的に 1.5 で統一感がある。Display のみ 1.46 とわずかに広め
• キャッチコピー（Display H2）は weight 400 の軽い見出し。セクション見出しは weight 700 の太い見出し

3.6 禁則処理・改行ルール

css/* 推奨設定（実サイト準拠） */
word-break: normal;            /* 既定の日本語禁則 */
overflow-wrap: break-word;     /* 長い英単語の折り返し */

• Tailwind の rf:break-all クラスが一部の見出しに適用されている（長いプロジェクト名の折り返し対策）
• ヘッダーのボタン内テキストは rf:whitespace-nowrap で改行防止
• プロジェクトタイトルは rf:h-[54px] + rf:overflow-hidden で2行以上を非表示（2行制限）

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• Roboto + Noto Sans JP の組合せでは、フォントのデフォルトメトリクスに依存する方針

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Primary CTA（レッド角丸） — "ログイン・新規登録"・"プロジェクトをはじめる"

• Background: #e73650
• Text: #ffffff
• Padding: 8px 12〜20px
• Border: 1px solid #e73650
• Border Radius: 4px
• Box Shadow: rgba(33, 35, 37, 0.12) 0px 4px 8px 0px
• Font: Roboto / Noto Sans JP, 12〜16px, weight 700

Secondary CTA（グレー面＋ボーダー） — "プロジェクトをさがす"・"もっと詳しく"

• Background: #f2f5f8
• Text: #383d43
• Padding: 8px 20〜40px
• Border: 1px solid #d8dce1
• Border Radius: 4px
• Box Shadow: none
• Font: Roboto / Noto Sans JP, 14〜16px, weight 400

Donation CTA（ブルー） — "常設寄付のプロジェクトをはじめる"

• Background: #3c82eb
• Text: #ffffff
• Padding: 標準
• Border Radius: 4px
• Font: Roboto / Noto Sans JP, 16px

Text Link

• Background: transparent
• Text: #0000ee（ブラウザデフォルトリンク色）
• Text Decoration: none（rf:no-underline）
• Font: Roboto / Noto Sans JP, 12〜16px, weight 400

Badges / Tags

NEXT GOAL挑戦中（ゴールドバッジ）

• Background: #fcb92c
• Text: #ffffff
• Font: 12px, weight 700
• 位置: プロジェクトカード画像の上に重ねて表示

NEW（新着バッジ）

• プロジェクトカードに付与される新着マーク

達成（オレンジバッジ）

• Background: #f88629
• Text: #ffffff

ハッシュタグ

• Background: transparent
• Text: #308e85（ティールグリーン）
• Font: 12px, weight 700

Progress Bar（達成率バー）

• 背景トラック: #d8dce1
• 進捗バー: #ffa45a（オレンジグラデーション）/ #06c755（100% 超え）
• パーセント表示: #787f87, 14px, weight 600

Inputs

• Background: #ffffff
• Border: 0px none（ボーダーレス。親要素に含まれる検索バー）
• Border Radius: 4px
• Padding: 7px 8px
• Font: Roboto / Noto Sans JP, 12〜16px, weight 400
• Text: #383d43

Cards / Surfaces

プロジェクトカード

• Background: #ffffff
• Border: なし
• Border Radius: 4px
• Shadow: none（フラット）
• カード全体が <a> タグで包まれたクリッカブルカード

サーフェス

• #f2f5f8 — セカンダリ背景・ボタン面
• #f8f9f9 — 地域検索セクション等
• #edf4ff — 寄付セクションの薄いブルー面

Header

• Background: #ffffff（白）
• Border Bottom: なし
• Position: sticky / fixed
• 右端に #e73650 の CTA ボタン
• 検索バー内蔵

Footer

• Background: #383d43（ダークグレー）
• Text: #ffffff
• カテゴリリンク一覧をグリッド配置
• Padding: 大きめ

5. Layout Principles

Spacing Scale（8px グリッド推奨）

Container

• Max Width: 1120px 程度（プロジェクトカードグリッドの最大幅）
• Padding (horizontal): mobile 16px / desktop 20〜32px

Border Radius Scale

READYFOR は 4px の統一 radius が特徴。ピル形状（9999px）は使用しない。

Grid

• プロジェクトカードは CSS Grid / Flexbox で並ぶ
• Desktop: 4 カラム（注目プロジェクト）/ 3 カラム（一般プロジェクト）
• Tablet: 2 カラム
• Mobile: 1 カラム
• Gutter: 16〜24px

6. Depth & Elevation

• 実測ではプロジェクトカードは box-shadow: none。フラットカードデザインが基本
• Primary CTA のみ控えめな影 rgba(33, 35, 37, 0.12) を持つ
• 階層は白 #ffffff / クールサーフェス #f2f5f8 / ダークフッター #383d43 の3層で表現
• モーダルオーバーレイは rgba(0, 0, 0, 0.7) のダークスクリム（viewport 最大面積要素）

7. Do's and Don'ts

Do（推奨）

• フォントスタックは Roboto → "Noto Sans JP" → sans-serif の順で指定する
• 本文の line-height は 1.5 を基本にする
• letter-spacing は normal（0em）のまま。フォント本来のメトリクスを活かす
• 主要 CTA は #e73650 のレッド角丸（4px）。セカンダリは #f2f5f8 面 + #d8dce1 ボーダー
• プロジェクト達成系バッジは #fcb92c のゴールド、新着系は別色
• テキスト色は #383d43 を主体に、補助テキストは #787f87 で控えめに
• サーフェスは クールグレー #f2f5f8 を使い、色温度を統一する
• プロジェクトカードは フラット（shadow: none）+ radius 4px のクリーンなスタイル
• フッターは #383d43 のダーク背景 + 白文字で、カテゴリナビゲーションを配置
• キャッチコピー（Display）は weight 400 の軽い表現、セクション見出しは weight 700

Don't（禁止）

• 主要 CTA に ピル形状（border-radius: 9999px）を使わない — READYFOR は一貫して 4px の角丸
• 主要 CTA に 黒や青を使わない — CTA は #e73650 のレッドが基本（ブルー #3c82eb は寄付セクション専用）
• ウォームグレー（#f2f2f0, #737368 等）を使わない — READYFOR のグレースケールはクール寄り
• 本文に 正の letter-spacing を使わない（normal のまま維持）
• 見出しに 負の letter-spacing を使わない（normal のまま維持）
• プロジェクトカードに 影を付けない — フラットデザインが基本
• palt / kern を font-feature-settings で有効にしない
• 本文テキスト色に 純黒 #000000 を多用しない — #383d43 が基本（純黒は限定的）

8. Responsive Behavior

Breakpoints（Tailwind 互換・実測値）

実装上、rf:hidden と rf:lg:flex の対比から lg=1024px がモバイル／デスクトップの主な閾値。

モバイル時の調整

• Display H2: 48px → 32px 程度
• Section H2: 20px 維持（もともと小さめ）
• 本文サイズは 14px を維持
• ヘッダー CTA は省略、ハンバーガーメニューに格納
• プロジェクトカードは 1 カラム表示
• 検索バーは全幅展開

タッチターゲット

• Primary CTA: 高さ 36〜44px（padding 8px + font size + line-height）
• プロジェクトカード: カード全体がタップ領域（<a> タグ）
• 検索入力: padding 7px 8px + font 16px で 38px 程度

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Brand Red (CTA): #e73650
Brand Gold (Badge): #fcb92c
Brand Blue (Donation): #3c82eb
Dark Gray (Text/Footer): #383d43
Medium Gray (Sub Text): #787f87
Tag Teal: #308e85
Border: #d8dce1
Surface: #f2f5f8
White: #ffffff
Footer BG: #383d43

Font: Roboto, "Noto Sans JP", sans-serif

Display Size: 48px / line-height 1.46 / weight 400 / color #787f87
Section Heading: 20px / line-height 1.2 / weight 700 / color #383d43
Feature Heading: 28px / line-height 1.5 / weight 700 / color #383d43
Card Title: 14px / line-height 1.5 / weight 700 / color #383d43
Body: 14px / line-height 1.5 / weight 400 / color #383d43
Caption: 12px / line-height 1.5 / weight 400〜700 / color #787f87

Border Radius: 4px（全要素統一。ピルは使わない）
Shadow: Primary CTA のみ rgba(33,35,37,0.12) 0 4px 8px。他は none
letter-spacing: 全階層 normal
font-feature-settings: normal

プロンプト例

READYFOR のデザインに従って、クラウドファンディングのプロジェクト一覧ページを作成してください。
- フォント: Roboto, "Noto Sans JP", sans-serif
- セクション見出し: 20px / weight 700 / line-height 1.2 / color #383d43
- プロジェクトタイトル: 14px / weight 700 / line-height 1.5 / color #383d43
- 本文: 14px / weight 400 / line-height 1.5 / color #383d43
- 補助テキスト: 12px / weight 400 / color #787f87
- 主要 CTA: 背景 #e73650 / 白文字 / border-radius 4px / padding 8px 20px / border 1px solid #e73650 / shadow rgba(33,35,37,0.12) 0 4px 8px
- セカンダリ CTA: 背景 #f2f5f8 / 文字 #383d43 / border 1px solid #d8dce1 / radius 4px
- NEXT GOAL バッジ: 背景 #fcb92c / 白文字 / 12px bold
- 達成率バー: トラック #d8dce1 / バー #ffa45a / パーセント #787f87
- プロジェクトカード: 白背景 / radius 4px / shadow none（フラット）
- タグ: #308e85（ティール） / 12px bold
- フッター: 背景 #383d43 / 白文字
- letter-spacing, font-feature-settings はすべて normal