マネーフォワード DESIGN.md

マネーフォワード（https://moneyforward.com/）のデザイン仕様書。 コーポレートサイトおよびサービスページの computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 堅実で信頼感のある業務ツール型UI。家計簿・資産管理という金融領域に相応しい、落ち着いたトーン
• 密度: 情報密度が高い業務UI。14px ベースの小さめフォントで多くの情報を表示する
• キーワード: 堅実、信頼性、業務的、効率的、和文優先
• 特徴: ヒラギノ角ゴ Pro を先頭に置く和文優先のフォントスタック。CSS Custom Properties を使用しない従来型のCSS設計。見出しは weight 500（medium）で控えめな強調

2. Color Palette & Roles

Primary（ブランドカラー）

• Primary Green (#4db848): メインのブランドカラー。CTAボタン、アクセント
• Primary Dark (#3a9a35): ホバー・プレス時のプライマリカラー

Semantic（意味的な色）

• Danger (#e74c3c): エラー、削除、危険な操作
• Warning (#f39c12): 警告、注意喚起
• Success (#27ae60): 成功、完了

Neutral（ニュートラル）

• Text Primary (#333333): 本文テキスト
• Text Secondary (#666666): 補足テキスト、ラベル
• Text Disabled (#999999): 無効状態のテキスト
• Border (#dddddd): 区切り線、入力欄の枠
• Background (#ffffff): ページ背景
• Surface (#f5f5f5): カード、セクション背景

3. Typography Rules

3.1 和文フォント

• ゴシック体: Hiragino Kaku Gothic Pro（ヒラギノ角ゴ Pro W3）— 第一候補として和文表示を優先

3.2 欧文フォント

• サンセリフ: フォントスタック内に明示的な欧文フォント指定なし（和文フォント内蔵の欧文グリフを使用）
• フォールバック: Meiryo, メイリオ, MS PGothic, Osaka, sans-serif

3.3 font-family 指定

css/* 本文（実測値） */
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "MS PGothic", Osaka, sans-serif;

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

• ヒラギノ角ゴ Pro を最優先（macOS環境での和文表示品質を重視）
• 日本語フォント名と英語フォント名の両方を記載（環境互換性）
• Meiryo → MS PGothic → Osaka の順でWindows・レガシー環境をカバー
• 欧文専用フォントを先に置かない設計（和文の統一感を優先）

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

3.5 行間・字間

• 本文の行間 (line-height): 1.5（21px / 14px）。日本語としては標準的
• 見出しの行間: normal（h2）〜 1.7（h3）
• 本文の字間 (letter-spacing): normal（字詰めなし）
• 見出しの字間: normal

ガイドライン:

• 14px ベースのため、行間 1.5 で最低限の可読性を確保
• letter-spacing は全階層で normal — 意図的な字詰め調整なし
• 業務ツール的な密度を維持するため、余白は控えめ

3.6 禁則処理・改行ルール

css/* 推奨設定 */
word-break: break-all;
overflow-wrap: break-word;

3.7 OpenType 機能

cssfont-feature-settings: normal; /* palt 不使用 */

• palt: 未使用。本文・見出しともにプロポーショナル字詰めなし
• 業務ツール的な等幅感を維持する設計

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary

• Background: #4db848
• Text: #ffffff
• Padding: 8px 24px
• Border Radius: 4px
• Font Size: 14px
• Font Weight: 500

Secondary

• Background: transparent
• Text: #333333
• Border: 1px solid #dddddd
• Padding: 8px 24px
• Border Radius: 4px

Inputs

• Background: #ffffff
• Border: 1px solid #dddddd
• Border (focus): 1px solid #4db848
• Border Radius: 4px
• Padding: 8px 12px
• Font Size: 14px
• Height: 36px

Cards

• Background: #ffffff
• Border: 1px solid #eeeeee
• Border Radius: 4px
• Padding: 20px
• Shadow: 0 1px 3px rgba(0,0,0,0.08)

5. Layout Principles

Spacing Scale

Container

• Max Width: 980px
• Padding (horizontal): 20px

Grid

• Columns: 12
• Gutter: 20px

6. Depth & Elevation

7. Do's and Don'ts

Do（推奨）

• フォントは必ず和文・欧文のフォールバックチェーンを指定する
• 日本語本文の line-height は 1.5 以上にする
• 見出しの weight は 500 に統一する（bold ではなく medium）
• 14px ベースの密度を維持する（業務ツールとしての視認性）
• 色のコントラスト比は WCAG AA 以上を確保する

Don't（禁止）

• font-family にヒラギノ角ゴ Pro 1つだけを指定しない（Windows環境で表示崩れ）
• 日本語本文に line-height: 1.2 以下を使わない
• 見出しに font-weight: 700 (bold) を使わない（500 medium が基本）
• font-feature-settings: "palt" を適用しない（サイト全体で未使用）
• CSS Custom Properties を新たに導入しない（既存設計との一貫性）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）

フォントサイズの調整

• モバイルでは本文 14px を維持（もとから小さいため縮小しない）
• 見出しはデスクトップの 85–90% 程度に縮小

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #4db848
Text Color: #333333
Background: #ffffff
Font: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "MS PGothic", Osaka, sans-serif
Body Size: 14px
Line Height: 1.5
Heading Weight: 500
palt: なし
CSS Custom Properties: なし

プロンプト例

マネーフォワードのデザインシステムに従って、家計簿の収支一覧テーブルを作成してください。
- プライマリカラー: #4db848
- フォント: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "MS PGothic", Osaka, sans-serif
- 本文: 14px / weight 400 / line-height: 1.5
- 見出し: weight 500（bold ではなく medium）
- palt: 使用しない
- ボーダー: #dddddd
- テーブルヘッダー背景: #f5f5f5

freee との主な違い