タイプ風見出しヒーロー

見出しの一部が次々に打ち変わる（タイプライター＋ワード差し替え）ヒーロー。「○○のための△△」の△△が切り替わり、複数の価値提案をテンポよく見せられます。サービスの幅を伝えたいトップに。

#hero#title#typing#rotate

ライブデモ

使用例（お題: カフェ MOON BREW）

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

HTML

<!-- MOON BREW：見出しの語が打ち変わるカフェヒーロー -->
<section class="tht">
  <div class="tht-inner">
    <p class="tht-kicker">SINCE 2019 · OPEN 18:00</p>
    <h1 class="tht-title">
      <span class="tht-static">今日の</span>
      <span class="tht-typed"><span id="thtWord" class="tht-word">気分</span><span class="tht-cursor" aria-hidden="true"></span></span>
      <span class="tht-static">に、一杯を。</span>
    </h1>
    <p class="tht-sub">深夜焙煎の珈琲と、静かな時間を。あなたの夜に寄り添う一杯を。</p>
    <button class="tht-btn" type="button">メニューを見る</button>
  </div>
</section>

CSS

/* MOON BREW（カフェ）：タイプ風見出しヒーローの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.tht { width: 100%; min-height: 380px; display: grid; place-content: center; text-align: center; padding: 40px 26px;
  background: radial-gradient(120% 120% at 50% 0%, #2e1d0e 0%, #140d06 70%); color: #f5ead8; }
.tht-inner { max-width: 640px; }
.tht-kicker { margin: 0 0 16px; font-size: 11px; letter-spacing: .3em; color: #e0a458; font-weight: 700; }
.tht-title { margin: 0; font-size: 38px; font-weight: 900; letter-spacing: -.01em; line-height: 1.3; font-family: "Hiragino Mincho ProN", serif; }
.tht-static { white-space: nowrap; }
.tht-typed { display: inline-flex; align-items: center; }
.tht-word { background: linear-gradient(120deg, #f0c987, #e0a458); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tht-cursor { display: inline-block; width: 3px; height: 1em; margin-left: 3px; background: #e0a458; border-radius: 2px; animation: tht-blink 1s steps(1) infinite; vertical-align: -2px; }
@keyframes tht-blink { 50% { opacity: 0; } }
.tht-sub { margin: 18px auto 26px; font-size: 14.5px; line-height: 1.8; color: rgba(245,234,216,.78); max-width: 420px; font-family: "Segoe UI", sans-serif; }
.tht-btn { font: inherit; font-size: 14px; font-weight: 700; color: #2e1d0e; background: #e0a458; border: none; padding: 12px 26px; border-radius: 999px; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.tht-btn:hover { filter: brightness(1.07); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) { .tht-cursor { animation: none; } .tht-btn { transition: none; } }

JavaScript

// （デモと同じフックを流用）見出しの語をタイプ＆削除でローテーション
(() => {
  const el = document.getElementById('thtWord');
  if (!el) return;
  const words = ['気分', '一日', '出会い', '読書'];
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) { el.textContent = words[0]; return; }
  let wi = 0, ci = 0, deleting = false;
  function tick() {
    const w = words[wi];
    ci += deleting ? -1 : 1;
    el.textContent = w.slice(0, ci);
    let delay = deleting ? 60 : 130;
    if (!deleting && ci === w.length) { delay = 1400; deleting = true; }
    else if (deleting && ci === 0) { deleting = false; wi = (wi + 1) % words.length; delay = 350; }
    setTimeout(tick, delay);
  }
  setTimeout(tick, 700);
})();

実装ガイド

使いどころ

サービスの幅や複数の価値提案を伝えたいトップに。「○○のための△△」の△△が次々に打ち変わり、テンポよく訴求します。

実装時の注意点

語をタイプ→一定時間保持→削除→次の語、を setTimeout の可変ディレイで繰り返します。点滅カーソルは CSS アニメ。前後の固定テキストで文を成立させ、語だけ差し替えます。

対応ブラウザ

setTimeout・CSS アニメーションは全モダンブラウザ対応。background-clip:text の色付き語は -webkit- 併記です。

よくある失敗

語の長さがバラつくと行幅が揺れて読みにくいので、語数や文字数を揃えるか右側に余白を確保。reduced-motion では先頭の語で静止。打鍵速度は速すぎず読める速さに。

応用例

色を語ごとに変える、複数行のローテーション、絵文字の差し替え、入力中のカーソル形状変更などに展開できます。

コード