Styledex

デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。

特大タイポ・ヒーロー（明朝／裁ち落とし）

様式名: 特大タイポ・ダーク / タイポグラフィ

タイポグラフィヒーロー明朝裁ち落とし縦組み
⧉ 別タブで開く

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

特徴 — なぜ効くか

  • 文字そのものを図版として使う。画像が無くても画面が持つ
  • 言葉に自信がある時だけ成立する。弱いコピーを巨大化すると弱さが拡大される
  • 画面外へ裁ち落とすと、画面が「切り取られた一部」に見えて広がりが出る。全部収めると急に平凡になる
  • ハイコントラストなセリフ（Didone系）は、特大にするほど線の太細差が効く。逆に小さいと潰れて読めない
  • 和文は欧文ほど大きくできない。字面が詰まっていて、同じ級数でも重く見える

実装メモ — 踏んだ罠

  • font-size:clamp(52px,13vw,124px) で流体化。vw だけだとSPで潰れ、pxだけだとPCで間延びする
  • 裁ち落としは margin-left を負にして親に overflow:hidden。position:absolute でずらすと折り返しの計算が狂う
  • 特大時は letter-spacing を負に(-.02em程度)。既定の字間は本文サイズ向けの設計なので、大きくすると空きすぎて見える
  • line-height は .92〜1.1 まで詰める。1.5 のままだと行が離れて塊に見えない
  • 和文と欧文でフォントを分けるなら、明朝×セリフで揃える。片方がゴシックだと骨格がぶつかる
  • 縦組みは writing-mode:vertical-rl。英数字は自動で横倒しになるので、短い語だけに使う
  • 【和文の罠】行長に ch を使わない。ch は「0」の字幅＝半角基準なので、34ch は和文だと約17文字にしかならず、右に大きな余白を残して折り返す。和文は em で取る(1em＝全角1文字)。実際にこのデモで踏んだ
  • Webフォントは実際に使うウェイトだけ読む。和文は1ウェイト約27KB増える（実測）。未使用ウェイトを足すと重くなるだけ
  • font-weight を明示しないと、読み込んでいないウェイトが近傍から合成されて別物の字形になる

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

壊れる条件

コントラスト実測

対象文字色背景実効背景比判定
見出し（紙地）#1c1c1e#e9e7e3#e9e7e313.78:1AA 合格
リード文（紙地）#44403c#e9e7e3#e9e7e38.32:1AA 合格
eyebrow 小文字（紙地）#57534e#e9e7e3#e9e7e36.18:1AA 合格
縦組み白文字（色面の上・合成後）#ffffff#7b1418#86292c8.87:1AA 合格

アクセシビリティ

スマホへの落とし方

関連するパーツ

コードを見る 
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>特大タイポ・ヒーロー（明朝／裁ち落とし）デモ</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 実際に使うウェイトだけ。h1=900 / .ja=.vertical=700 / .lede=400。
     使わないウェイトを足すと和文は1つ約27KBずつ増える（実測） -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&family=Shippori+Mincho:wght@700&family=Noto+Serif+JP:wght@400&display=swap">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#e9e7e3;
  color:#1c1c1e;
  padding:34px 30px;
  overflow:hidden;           /* 裁ち落としの受け皿 */
  position:relative;
  min-height:340px;
}
/* 粒状の紙地。ベタ塗りの白にしない */
body::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 大判の有機的な色面を1枚。これが画面の背骨 */
.stroke{
  position:absolute;top:-40px;right:-90px;width:340px;height:340px;
  background:#7b1418;opacity:.9;
  border-radius:62% 38% 44% 56% / 48% 56% 44% 52%;
  transform:rotate(-12deg);
}
.inner{position:relative}
.eyebrow{
  font-size:10px;letter-spacing:.28em;color:#57534e;margin-bottom:14px;
  font-family:system-ui,sans-serif;
}
h1{
  font-family:'Playfair Display',serif;   /* ハイコントラストのDidone系 */
  font-size:clamp(52px,13vw,124px);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.02em;
  margin-left:-.06em;      /* 左に裁ち落とす */
  white-space:nowrap;
  color:#1c1c1e;
}
.ja{
  font-family:'Shippori Mincho',serif;    /* 和文も明朝で揃える */
  font-size:clamp(17px,3.4vw,26px);
  font-weight:700;
  letter-spacing:.06em;
  margin-top:18px;
  padding-bottom:10px;
  border-bottom:1px solid #1c1c1e;
  display:inline-block;
}
.lede{
  font-family:'Noto Serif JP',serif;
  font-size:13px;line-height:2;color:#44403c;
  max-width:26em;           /* 和文は em。ch は半角基準で半分になる */
  margin-top:16px;
}
/* 縦組み。本人のFigmaでも WORKS が縦。
   白抜きにするなら必ず色面の上に置く。地の上に逃がすと消える（実際に一度やらかした） */
.vertical{
  position:absolute;right:26px;top:34px;
  writing-mode:vertical-rl;
  font-family:'Shippori Mincho',serif;
  font-weight:700;   /* 読み込んでいるウェイトを明示。未指定だと近傍で合成されて別物になる */
  font-size:13px;letter-spacing:.32em;color:#fff;
}
</style></head><body>
<div class="stroke"></div>
<div class="inner">
  <p class="eyebrow">PORTFOLIO — SHOMA ITO</p>
  <h1>Aesthetics</h1>
  <p class="ja">見た目は、思考である。</p>
  <p class="lede">配色も余白も書体も、選んだ理由がある。届ける相手を決めきってから、はじめて形が決まる。</p>
</div>
<div class="vertical">WORKS</div>
</body></html>
出典・参考: 伊藤翔真本人のFigmaプロト（2026-07-15 目視）の骨格を再現。Didone系セリフ＋明朝＋テクスチャ地＋大判の色面＋裁ち落とし＋縦組み