2分割ヒーロー（見出しせり上がり）

左に見出し・サブ・CTA、右にビジュアルを置く2分割のファーストビュー。見出しは行マスクから順にせり上がり、ビジュアルはふわりと浮遊します。SaaSやサービスサイトの王道構成です。

#hero#title#split#reveal

ライブデモ

使用例（お題: SaaS FlowDesk）

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

HTML

<!-- FlowDesk：2分割ヒーローをSaaSトップに適用 -->
<section class="ths">
  <div class="ths-text">
    <p class="ths-kicker">PROJECT OS</p>
    <h1 class="ths-title">
      <span class="ths-line"><span>段取りが、</span></span>
      <span class="ths-line"><span>速くなる。</span></span>
    </h1>
    <p class="ths-sub">タスク・ドキュメント・予定をひとつの画面に。チームの“探す時間”をゼロへ。</p>
    <div class="ths-actions">
      <button class="ths-btn ths-btn--solid" type="button">14日間無料で試す</button>
      <button class="ths-btn ths-btn--ghost" type="button">デモを見る →</button>
    </div>
  </div>

  <div class="ths-visual" aria-hidden="true">
    <div class="ths-card ths-card--back"></div>
    <div class="ths-card ths-card--front">
      <span class="ths-chip">Today</span>
      <div class="ths-bar"></div>
      <div class="ths-bar ths-bar--s"></div>
      <div class="ths-dots"><i></i><i></i><i></i></div>
    </div>
    <span class="ths-badge">1,200社 導入</span>
  </div>
</section>

CSS

/* FlowDesk（SaaS）：2分割ヒーローの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.ths {
  width: 100%; min-height: 380px;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 24px;
  padding: 36px 38px;
  background: radial-gradient(120% 140% at 0% 0%, #e9edff 0%, #f7f8fc 55%);
  color: #18204a;
}
.ths-kicker { margin: 0 0 14px; font-size: 11px; letter-spacing: .3em; color: #4f6bff; font-weight: 700; }
.ths-title { margin: 0; font-size: 42px; font-weight: 900; line-height: 1.08; letter-spacing: -.02em; }
.ths-line { display: block; overflow: hidden; }
.ths-line > span { display: inline-block; transform: translateY(110%); animation: ths-up .7s cubic-bezier(.2,.7,.2,1) forwards; }
.ths-line:nth-child(2) > span { animation-delay: .14s; }
@keyframes ths-up { to { transform: translateY(0); } }

.ths-sub { margin: 18px 0 24px; font-size: 14.5px; line-height: 1.75; color: #555a78; max-width: 330px; }
.ths-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ths-btn { font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 11px 22px; border-radius: 10px; transition: transform .15s ease, filter .15s ease; }
.ths-btn--solid { border: none; color: #fff; background: linear-gradient(135deg, #4f6bff, #6d28d9); }
.ths-btn--solid:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ths-btn--ghost { background: transparent; border: 1px solid #c8cee6; color: #38406a; }
.ths-btn--ghost:hover { border-color: #4f6bff; color: #4f6bff; }

.ths-visual { position: relative; height: 260px; }
.ths-card { position: absolute; border-radius: 18px; }
.ths-card--back { inset: 30px 10px 30px 40px; background: linear-gradient(135deg, #aebcff, #c9b6ff); transform: rotate(-6deg); animation: ths-float 6s ease-in-out infinite; }
.ths-card--front { inset: 18px 30px 42px 12px; background: #fff; box-shadow: 0 22px 50px rgba(40,55,160,.22); padding: 18px; animation: ths-float-front 6s ease-in-out infinite; }
@keyframes ths-float { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(-6deg); } }
@keyframes ths-float-front { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.ths-chip { display: inline-block; font-size: 10.5px; font-weight: 700; color: #4f6bff; background: #e9edff; padding: 4px 10px; border-radius: 999px; }
.ths-bar { height: 12px; border-radius: 6px; background: #e8ebf5; margin-top: 14px; }
.ths-bar--s { width: 60%; }
.ths-dots { display: flex; gap: 7px; margin-top: 16px; }
.ths-dots i { width: 22px; height: 22px; border-radius: 7px; }
.ths-dots i:nth-child(1) { background: #4f6bff; }
.ths-dots i:nth-child(2) { background: #f59e0b; }
.ths-dots i:nth-child(3) { background: #10b981; }

.ths-badge { position: absolute; right: 6px; bottom: 18px; z-index: 3; font-size: 12px; font-weight: 700; color: #fff; background: #0b1020; padding: 7px 13px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.18); animation: ths-float-front 5s ease-in-out infinite .5s; }

@media (max-width: 560px) { .ths { grid-template-columns: 1fr; } .ths-visual { display: none; } }
@media (prefers-reduced-motion: reduce) { .ths-line > span { animation: none; transform: none; } .ths-card--back, .ths-card--front, .ths-badge { animation: none; } }

実装ガイド

使いどころ

SaaS・サービス・アプリのトップなど、価値を端的に伝えつつ製品イメージも見せたいファーストビューに。左に見出し・サブ・CTA、右にビジュアルを置く2分割の王道構成です。

実装時の注意点

見出しは行ごとに overflow:hidden の枠を被せ、内側を translateY(110%)→0 でせり上げます（行マスク）。右のカードは2枚を重ねて別々の浮遊アニメで動かし、奥行きを演出。grid の2カラムで、狭い画面ではビジュアルを隠して1カラムに畳みます。

対応ブラウザ

grid・overflow マスク・transform アニメーションは全モダンブラウザで対応。CSS のみで JS 不要です。

よくある失敗

行マスクは line-height が詰まりすぎると文字の上下が欠けるため、行の高さに余裕を持たせること。ビジュアル領域は固定高だと中身がはみ出すので、要素サイズと inset を揃えます。1カラム時にビジュアルを消すか上下積みにするか、レスポンシブ方針を決めておきます。

応用例

右ビジュアルを実スクリーンショットや動画に、CTA をアプリストアバッジに、見出しを語ごとの遅延出現に変えるなどの展開ができます。

コード