誌面ヒーロー（透かし文字＋縦組み）

様式名: エレガント・エディトリアル / ヒーロー

ヒーローエディトリアル明朝透かし文字縦組み

⧉ 別タブで開く

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

特徴 — なぜ効くか

背景の巨大な斜体透かし文字が奥行きを作る。写真を使わずに「誌面らしい重なり」を出せる
縦組みの一行が余白に刺さることで、雑誌の柱（ノンブル脇の添え字）のような編集感が出る
半透明パネルを紙の粒子地に重ねることで、単なる白背景より紙の質感が伝わる
透かし文字の不透明度を上げるとただの誤植に見える。.05前後が「気づいたら見える」限界
縦組みは日本語の連続した文でないと違和感が出る（1〜2単語の短い添え字向き。長文には不向き）

実装メモ — 踏んだ罠

透かし文字は position:absolute で左上に負の値ではみ出させ、裁ち落としにする。中央揃えだと額縁のように収まってしまい透かしに見えない
紙の粒子は 04_concrete_brutalism と同じ feTurbulence だが、baseFrequency を上げず opacity を半分の .05 にして暖色に寄せた。同じ強度だとコンクリートと区別がつかない
縦組みは writing-mode: vertical-rl のみで letter-spacing を .32em ほど広めに取らないと文字が詰まって読みにくい
quote 要素の backdrop-filter は Safari 以外は無くても崩れない。無効でも rgba 背景だけで紙感は出るため必須ではない
accent は紫 (#6d28d9) ではなく深い赤マルーン (#7a1f2b) を採用。STYLE_AXIS.md の訂正（本人の色は紫ではなくマルーン／紺）に合わせた
見出しは明朝指定（Hiragino Mincho ProN / Yu Mincho）。Windowsで游明朝が無い環境ではブラウザ既定serifにフォールバックするが崩れはしない

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

使う: 明朝・上品な世界観のヒーローで、写真を使わず「誌面らしさ」を出したいとき
使う: 短い一行（キャッチコピー・号数・読み仮名的な添え字）を縦組みで添えたいとき
使う: 背景に紙・コンクリートなどの質感地を敷き、その上に情報を「浮かせる」構成にしたいとき
避ける: 長文が主役のコンテンツ（読み物ページの本文など）。透かし文字も縦組みも短い言葉向けで、長文には効果が出ずむしろ邪魔になる
避ける: ゴシック体・ポップな世界観のサイト。明朝と透かし文字はエディトリアルの文脈でのみ効く

壊れる条件

透かし文字を中央揃えで額縁のように収める → 裁ち落としでなくなり「デザイン中の飾り」に見え、透かしとして機能しない
透かし文字の不透明度を.1以上に上げる → 誤植・タイプミスに見える。.05前後が境界
縦組みに長文を入れる → writing-mode:vertical-rl は行間・字間の調整が水平文の想定と違うため、長文になるほど読みにくくなる
紙の粒子ノイズを 04（コンクリート）と同じ baseFrequency・opacity のまま使う → 暖色に寄せていないと単なるコンクリート地の使い回しに見え、「紙」の質感が出ない
quoteパネルの backdrop-filter を外した上で rgba 背景の不透明度も下げる → 地の模様が透けすぎて、引用文の可読性が背景ムラに依存するようになる
見出し・添え字にマルーン以外の差し色（紫など）を使う → 手癖から外れ、「エディトリアル」ではなく別様式に見える

コントラスト実測

対象	文字色	背景	実効背景	比	判定
見出し（h2）	`#1c263a`	`#f3ede2`	`#f3ede2`	12.99:1	AA 合格
見出し強調（em「余白」）	`#7a1f2b`	`#f3ede2`	`#f3ede2`	8.76:1	AA 合格
issueラベル	`#7a1f2b`	`#f3ede2`	`#f3ede2`	8.76:1	AA 合格
lead本文	`#3a3226`	`#f3ede2`	`#f3ede2`	10.83:1	AA 合格
縦組み添え字（マルーン系グラデ寄りの最不利地点で実測）	`#7a1f2b`	`#f3ede2`	`#ece2d8`	7.99:1	AA 合格
引用文（quoteパネル、実測パネル地）	`#2c2418`	`#f3ede2`	`#f9f6f1`	14.19:1	AA 合格

アクセシビリティ

透かし文字(.watermark)・縦組みの添え字(.tategaki)は装飾要素であり読み上げに意味を持たない。実装時は aria-hidden="true" を付ける（現状のデモには未指定）
縦組み文字は読み上げ順序がDOM出現順になり、視覚的な右側配置とズレる。情報として重要な文言を縦組みだけに頼らせない
コントラストは地の質感（紙のノイズ・radial-gradientの色ムラ）ごとに変わる。今回は主要文字が地の基準色付近に収まり実測でも問題なかったが、配色や配置を変える場合は都度最も不利な箇所で再検証する
明朝の細い字画は縮小表示・低解像度環境で潰れやすい。本文サイズを13px未満にしない

スマホへの落とし方

透かし文字は font-size:clamp() で流体化しているが、SPでは裁ち落とされる分量が変わる。極端に狭い幅では単語の一部しか見えなくなるため、視認できる範囲に主要な文字（先頭2〜3字）が来るよう top/left の基準位置を調整する
縦組みの添え字はSPで右端の余白が削られると本文と重なる。幅375px以下では tategaki を非表示にするか、本文の下に横書きで畳むほうが安全
quoteパネルの max-width(26em) はSPでも有効だが、padding込みで画面幅を超えないか375pxで必ず確認する
.inner の padding-right:90px は縦組みぶんの余白。SPで縦組みを消すなら padding-right も詰める

ブラウザ対応

writing-mode:vertical-rl / backdrop-filter / clamp() はいずれもモダンブラウザ（Chrome・Firefox・Safari・Edge）で広くサポートされている基本機能。※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:"Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  min-height:340px;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 55% 40% at 15% 20%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 80%, rgba(122,31,43,.05), transparent 62%),
    #f3ede2;
}
/* 紙の粒子。コンクリートと同じ手法だが暖色・低コントラストで「紙」に寄せる */
body::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 背景の透かし文字。裁ち落とし（画面外へはみ出す）でノイズにしない */
.watermark{
  position:absolute;top:-.28em;left:-.05em;z-index:0;pointer-events:none;
  font-size:clamp(90px,26vw,190px);font-weight:700;font-style:italic;
  color:rgba(28,38,58,.05);letter-spacing:-.02em;white-space:nowrap;line-height:1;
}
/* 縦組みの添え字。手癖：本文とは別に縦の一行を添える */
.tategaki{
  position:absolute;right:26px;top:28px;bottom:28px;z-index:2;
  writing-mode:vertical-rl;font-size:12px;letter-spacing:.32em;color:#7a1f2b;
}
.inner{position:relative;z-index:2;padding:34px 90px 30px 32px}
.issue{
  display:inline-block;font-family:system-ui,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.28em;color:#7a1f2b;border-bottom:1px solid rgba(122,31,43,.4);
  padding-bottom:6px;
}
h2{
  margin-top:16px;font-size:clamp(26px,6vw,42px);font-weight:600;color:#1c263a;
  line-height:1.35;letter-spacing:.02em;
}
h2 em{font-style:italic;color:#7a1f2b}
/* 和文の行長は em で取る（ch は半角基準で和文には合わない） */
p.lead{margin-top:16px;font-size:13px;line-height:2;color:#3a3226;max-width:22em}
.quote{
  margin-top:20px;max-width:26em;padding:16px 20px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(3px);
  border-left:2px solid #7a1f2b;font-size:12.5px;line-height:1.9;color:#2c2418;
}
</style></head><body>
<div class="watermark">EDITORIAL</div>
<div class="tategaki">紙のような、静けさ。</div>
<div class="inner">
  <span class="issue">ISSUE — 04</span>
  <h2>言葉に、<br><em>余白</em>を持たせる。</h2>
  <p class="lead">写真より文字を主役にする。曲線のあしらいと透かし文字で、雑誌の誌面らしい奥行きを作る。</p>
  <div class="quote">「デザインとは、読ませるための静けさである。」</div>
</div>
</body></html>

出典・参考: STYLE_AXIS.md の様式定義（明朝系＋曲線あしらい＋背景の透かし文字）と伊藤翔真の手癖（明朝見出し・マルーン差し色・縦組み）に基づく自作実装