Purebeats / Reports Design reference

Design system / Reference sheet

Report design
with rhythm.

数字、背景、判断、次の行動をひとつの読みやすいリズムに整える、PurebeatsのHTMLレポート基盤。

Version
1.0
Updated
2026-08-28
Owner
Purebeats
Format
HTML / Print
00 / Intent

A report should feel like a well-produced track: the signal is clear, the context supports it, and every section moves the reader forward.

01

Brand foundation

濃いインク色で情報の骨格をつくり、アイボリーで長時間の読みやすさを確保。インディゴは主要な信号、コーラルは要対応、ミントは良好な状態に使います。

Ink#111118
Paper#F4F0E8
Indigo#4F46CF
Coral#DC514B
Mint#BFEAD9
Amber#F7DFA0
02

Executive scorecards

数値はサンプルです。カードは最大4枚を基本とし、指標名・値・比較の順で読みます。

Revenue
¥12.8M
↑ 8.4% vs prev.
Conversions
1,284
↑ 12.1% vs prev.
Cost per action
¥8,420
→ 1.2% vs prev.
Risk items
3items
Action required
03

Insight structure

事実、解釈、行動を分けることで、読み手がどこまで確定しているかを判断できます。

What changed

主要指標は前月を上回りました。伸びは新規流入と再訪の両方から発生しています。

Why it matters

単発施策ではなく、継続導線の改善が寄与している可能性があります。チャネル別の再確認が必要です。

Reference / 参考比較期間、集計条件、データソースは本文から分離して明記します。
Next action / 次の一手担当者、期限、完了条件を1文で記載します。
Attention / 要対応緊急性がある内容だけにコーラルを使い、装飾目的では使いません。
04

Options and trade-offs

複数案は結論だけでなく、向いている条件とトレードオフを同じ密度で示します。

Option A / Focus

集中投資

成果が確認できた領域へ配分を寄せ、短期の改善速度を優先します。

向いている条件: 仮説の確度が高く、短期目標が明確。
Option B / Balance

均衡運用

既存成果を維持しながら、隣接領域の検証枠を確保します。

向いている条件: 安定性と学習速度を両立したい。
Option C / Explore

探索強化

短期効率を一部許容し、新しい成長経路の発見を優先します。

向いている条件: 既存施策の伸びしろが小さい。
05

Data table

表は詳細確認に使い、結論は表の外に書きます。数値列は右寄せし、横幅が足りない場合はスクロールできます。

ChannelStateSpendCVCPA
SearchStable¥4,820,000602¥8,007
SocialGrowing¥3,460,000421¥8,219
DisplayReview¥1,320,00096¥13,750