ビッグタイプ交互パネル

画面を3段に割り、ハミ出すサイズの極太文字を段ごとに逆方向へゆったり往復させます。数秒ごとに1段だけ色が反転。少ない動きで大きなインパクトを出す、アーティスト系サイトの定番手法です。

#big-typography#panel#invert

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk: SaaSの強い言い切りを極太タイポで3段に流すヒーロー -->
<div class="stack" aria-label="FlowDeskのキーメッセージ3段">
  <div class="panel"><span class="big" aria-hidden="true">SHIP</span></div>
  <div class="panel"><span class="big" aria-hidden="true">SCALE</span></div>
  <div class="panel"><span class="big" aria-hidden="true">SYNC</span></div>
</div>

CSS

:root{ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: #0b1f3a; }

.stack {
  display: flex; flex-direction: column;
  width: 100%; height: 100vh; min-height: 260px; max-height: 100%;
  overflow: hidden; background: #0b1f3a;
}
.panel {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #0b1f3a;
  transition: background .18s steps(2);
}
.panel.invert { background: #4D7CFE; }

.big {
  white-space: nowrap;
  font-family: "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 900; font-size: clamp(48px, 19vw, 170px);
  letter-spacing: -0.04em; line-height: 1; color: #E8F0FF;
  transform: translate(-6%, 6%); will-change: transform;
  animation: sweep 7s var(--ease-inout) infinite alternate;
  transition: color .18s steps(2);
}
.panel.invert .big { color: #0b1f3a; }
.panel:nth-child(2) .big { animation-name: sweepRev; animation-delay: -2.3s; }
.panel:nth-child(3) .big { animation-delay: -4.6s; }

@keyframes sweep    { from { transform: translate(-6%, 6%); } to { transform: translate(6%, 6%); } }
@keyframes sweepRev { from { transform: translate(6%, 6%); }  to { transform: translate(-6%, 6%); } }

JavaScript

// 往復はCSS。4秒ごとに1段だけ色を反転させて循環（デモと同じロジック）。
(() => {
  const panels = [...document.querySelectorAll('.panel')];
  if (!panels.length) return;
  let i = 0;
  const tick = () => {
    panels.forEach(p => p.classList.remove('invert'));
    panels[i % panels.length].classList.add('invert');
    i++;
  };
  tick();
  setInterval(tick, 4000);
})();

実装ガイド

使いどころ

アーティストやブランド、SaaSのヒーローで、強い言い切りや世界観を大きく見せたいときに。少ない動きで大きなインパクトを出せます。

実装時の注意点

段ごとに極太文字を逆方向へ往復させ（CSS animation alternate）、位相を負のdelayでずらします。数秒ごとに1段だけ色反転をJSのsetIntervalで切替。反転はtransitionにsteps(2)を使ってパッと切り替えます。font-sizeはclampでvw連動にし、小画面でも迫力を保ちます。

対応ブラウザ

CSS animation/transition・clampは全モダンブラウザで安定動作します。white-space:nowrapで改行を防ぎ、prefers-reduced-motion時は往復を止める配慮を入れます。対応バージョンは断定せず確認してください。

よくある失敗

clampの中央値をvwにしないと小カードで文字が縮み迫力が死にます。マーキー（無限流れ）にすると別物になり読みづらくなります。文字数が多いと往復幅が足りずハミ出しが弱くなります。

応用例

単語を商品名やスローガンに、反転色をブランドに、段数を増減、可変フォントのウェイト変化と組み合わせるなどに発展できます。

コード