トーンオントーン・プロジェクトカード

様式名: トーンオントーン / カード

カードモノクロマティックタイポグラフィ有機形

⧉ 別タブで開く

「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。

特徴 — なぜ効くか

単色の濃淡だけで階層を作るので、差し色を選ぶ手間がなく量産に向く
有機的なブロブを1枚忍ばせて濃淡にムラを作る。無いと『ただのグレー基調カード』で単調に見える
色数を絞った分、明朝の特大見出しの書体コントラストがそのまま主役になる
明度差だけに階層を頼ると、見る人の色覚特性によっては差が消える。最低3段階、体感で区別できる明度幅が要る
彩度を上げすぎると『単色』ではなく『ワントーンのネオン』に見える。彩度は40%前後に抑える

実装メモ — 踏んだ罠

同一色相のグラデーションだけだとベタっと平坦に見えやすい。ブラーの効いた有機ブロブを背後に1枚置き、濃淡のムラで立体感を作る
実測：本文用の中間トーン#c9a29cは地#2a0508に対し8.1:1あったが、最初に試した彩度の高いピンク寄りの中間トーン(#d68a94相当)は5:1を切っていた。色相を保ったまま明度だけ上げるほうが安全
有機ブロブの形は border-radius の非対称指定（60% 40% 30% 70% / 60% 30% 70% 40%）で作る。clip-pathより軽く、サイズが変わっても破綻しない
タグ・ボタンの背景は本体より一段明るいだけの同系色にする。ここに差し色を足すと『トーンオントーン』の定義から外れて『フラットデザイン』に寄ってしまう
濃色地に濃色ブロブを重ねるとブロブが沈んで見えなくなる。ブロブは地より必ず1段以上明るくする（暗い上に暗いは禁物。グラスモーフィズムのブロブでも同じ罠を踏んだ）

使いどころ / 使ってはいけない場面

使う: 差し色を選ぶ余力がない、または統一感を最優先したいプロジェクトカード・実績カード
使う: 何十枚も並べるカードリストなど量産用途。単色ベースなので色選定の意思決定コストがかからない
使う: 明朝の特大見出しなど、書体そのものにコントラストを持たせたいとき。色数を絞るほど書体の存在感が引き立つ
避ける: 複数カテゴリを色で識別させたい一覧（タグの色分けなど）。単色濃淡では区別に使えない
避ける: 情報の重要度を色だけで階層化したい場面。明度差だけでは色覚特性によって階層が消えるリスクがある

壊れる条件

ブロブを地より暗い色にする → 地に沈んで見えなくなる。ブロブは地より最低1段明るくする（グラスモーフィズムのブロブでも同じ罠を踏んだ）
彩度を上げる（40%超）→ 単色濃淡の落ち着きが消え、ワントーンのネオンに見える
タグ・ボタンに差し色を足す → トーンオントーンの定義から外れフラットデザインに寄る
明度差だけで階層を3段未満にする → 色覚特性によっては差が判別できず、階層が機能しない
ブロブをテキスト領域と大きく重ねる → 本文の背景色が場所ごとに変わりコントラストが不安定になる（このデモでは重ならない配置になっているか実測で確認済み）

コントラスト実測

対象	文字色	背景	実効背景	比	判定
eyebrow / desc（中間トーン）	`#c9a29c`	`#2a0508`	`#2a0508`	8.13:1	AA 合格
見出し（title）	`#f3e4dd`	`#2a0508`	`#2a0508`	15.09:1	AA 合格
タグ文字	`#f3e4dd`	`#4a0d10`	`#4a0d10`	12.50:1	AA 合格
pillボタン文字	`#f3e4dd`	`#a83036`	`#a83036`	5.40:1	AA 合格（余裕なし）

アクセシビリティ

明度差だけで階層をつくる様式のため、色覚特性によっては見出し・本文・タグの区別が付きにくくなり得る。今回は本文8.13:1・見出し15.09:1と実測上は離れているが、彩度・明度を変更する場合は最低3段階の明度幅を保つ
4組の中でpillボタン（#a83036地）が最もコントラストが低い（5.40:1）。文字を小さくする・太字を解除するなど視認性を下げる変更をするとAAを割る可能性があるため、変更時は測り直す
有機ブロブは pointer-events:none を指定済み（クリックを吸って導線を塞がないための最低限の対応）
フォーカスリングを追加する場合、カード全体が濃色のため outline は明るい色（#f3e4ddなど）を使わないと沈んで見えなくなる

スマホへの落とし方

カード幅は420px固定。SPでは100%可変にし、padding（36px 32px）は狭幅で24px程度に詰めないと本文の折返しが窮屈になる
ブロブの位置（top:-70px;right:-60px）はpx固定。SPで幅が狭くなると相対的にブロブが大きく見え、見出しに被る面積が増えるため、狭幅では%基準に切り替えるかサイズを縮小する
和文の行長は em 指定（max-width:20em）なので、SPでも文字数ベースの折返しは崩れない
footer（タグ＋ボタン）は flex で space-between。極端に狭い幅ではタグとボタンが横に収まらず折返す設計に変更する必要がある（現状420px想定で未検証）

ブラウザ対応

border-radius の非対称値（有機ブロブ）・filter:blur・flexbox はいずれもモダンブラウザで広く使える基本CSSのみで構成。filter:blur(38px) は低スペック端末で描画負荷になり得る点のみ留意する。※2026-07-22時点の一般的な理解に基づく記述で、一次情報での再確認は未実施

関連するパーツ

コードを見る

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>トーンオントーン・カード デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;
  background:#1c0304;padding:28px;min-height:340px;
  display:flex;align-items:center;justify-content:center}
.card{
  position:relative;width:420px;background:#2a0508;border-radius:20px;
  padding:36px 32px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5)
}
/* 有機ブロブ：地より必ず1段明るくする。暗い上に暗いは沈んで見えなくなる */
.blob{
  position:absolute;width:260px;height:220px;background:#5c0f12;
  filter:blur(38px);opacity:.65;
  border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
  top:-70px;right:-60px;pointer-events:none
}
.eyebrow{
  position:relative;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#c9a29c;font-weight:600
}
.title{
  position:relative;font-family:Georgia,"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:32px;line-height:1.4;letter-spacing:-.01em;color:#f3e4dd;
  margin:.5em 0 .5em;font-weight:700
}
/* 和文の行長は em で取る（ch は半角基準で和文の字数と合わない） */
.desc{position:relative;font-size:14px;line-height:1.9;color:#c9a29c;max-width:20em}
.footer{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  margin-top:26px
}
.tags{display:flex;gap:8px}
.tag{
  font-size:11px;background:#4a0d10;color:#f3e4dd;
  padding:5px 12px;border-radius:999px;letter-spacing:.02em
}
.pill{
  font-size:12px;font-weight:700;background:#a83036;color:#f3e4dd;
  padding:9px 18px;border-radius:999px
}
</style></head><body>
<div class="card">
  <div class="blob"></div>
  <p class="eyebrow">Case 06 / Tonal</p>
  <h2 class="title">静けさは、<br>濃淡でつくる。</h2>
  <p class="desc">差し色を足さず、1色の明度だけで見出し・本文・タグの階層を作る。単調さは有機的なブロブ1枚で崩す。</p>
  <div class="footer">
    <div class="tags"><span class="tag">Mono</span><span class="tag">Organic</span></div>
    <span class="pill">VIEW →</span>
  </div>
</div>
</body></html>

出典・参考: 自作の再現実装。伊藤翔真の手癖（明朝の特大見出し・大判の有機的な色面・色数を絞る）をトーンオントーン様式に適用