幾何学バランスのヒーロー

左にコピー、中央に図形のコラージュ、右に CTA を置く3分割のヒーロー。CTA を余白の中に孤立させて、探さなくても見つかるようにします。

ENGLISH

Three-Column Geometric Hero

CSSのみ

約71行画面のかたち / 実用サンプル: LP・マーケページの一覧 →

プレビュー

ホバー

操作カーソルを乗せると動きます（スマホはタップ）。

仕様書

向く場面: デザイン・コラボ系ツールの LP
CTA を余白で孤立させて見つけやすくしたいとき
作品や製品画面の切り抜きを中央に置ける場合
避ける場面: コピーが長く 3 分割では左が溢れる場合
図形だけで運用して色の彩度が揃わないとき
構成要素: ヘッダー（ブランド／ナビ）
コピー（見出し＋一行）
図形コラージュ
主 CTA
安心の一言
副リンク
持っている状態: 通常
ホバー
フォーカス
キーボード: Tab でナビ 3 件→主 CTA→副リンクの順に移動し Enter で遷移。コラージュのホバー演出はキーボードでは起きない（装飾）
支援技術: コラージュは aria-hidden で読み上げから外す。nav に aria-label。リンクは focus-visible で水色の枠。reduced-motion で図形の移動と CTA の遷移を無効化
動き: コラージュにホバーすると図形 5 つが別々の方向へ 500ms（緩急付き）で動く。CTA 背景 150ms

原則フォン・レストルフ効果（孤立効果）

デザインの要点

CTA は目立たせるのではなく「孤立」させる。周囲に何も置かない余白が、ボタンを大きくするより効く
コラージュの色は4色まで。図形が主役の色を担うので、文字とボタンは墨だけにする
3カラムの幅は 1.1 / 1.3 / 0.8。均等にすると中央が主役に見えず、右の CTA が余白に沈む
CTA の下に「クレジットカード不要・3分で開始」の一言。押す前の不安に先に答える

プロのサイトでの実例

Figma別サイト ↗左コピー／中央コラージュ／右CTA の幾何学バランス。CTA が余白に孤立して見つけやすい

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

コラージュは実際の製品画面の切り抜きや作品に差し替える。図形だけで運用する場合は 4 色の彩度を揃える。

コード（コピーして使えます）

<div class="hgc">
  <header class="hgc-top">
    <span class="hgc-brand">Tessera</span>
    <nav class="hgc-nav" aria-label="主要"><a href="#">製品</a><a href="#">料金</a><a href="#">コミュニティ</a></nav>
  </header>
  <div class="hgc-grid">
    <div class="hgc-copy">
      <h1>チームで、<br>同じ画面を。</h1>
      <p>デザインも仕様も、ひとつのファイルに。誰でも開けて、いつでも最新。</p>
    </div>
    <div class="hgc-art" aria-hidden="true">
      <span class="hgc-s hgc-s1"></span>
      <span class="hgc-s hgc-s2"></span>
      <span class="hgc-s hgc-s3"></span>
      <span class="hgc-s hgc-s4"></span>
      <span class="hgc-s hgc-s5"></span>
    </div>
    <div class="hgc-cta">
      <a class="hgc-btn" href="#">無料で始める</a>
      <p class="hgc-note">クレジットカード不要・3分で開始</p>
      <a class="hgc-sub" href="#">営業に問い合わせる</a>
    </div>
  </div>
</div>