幾何学バランスのヒーロー
左にコピー、中央に図形のコラージュ、右に CTA を置く3分割のヒーロー。CTA を余白の中に孤立させて、探さなくても見つかるようにします。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
デザインの要点
- CTA は目立たせるのではなく「孤立」させる。周囲に何も置かない余白が、ボタンを大きくするより効く
- コラージュの色は4色まで。図形が主役の色を担うので、文字とボタンは墨だけにする
- 3カラムの幅は 1.1 / 1.3 / 0.8。均等にすると中央が主役に見えず、右の CTA が余白に沈む
- CTA の下に「クレジットカード不要・3分で開始」の一言。押す前の不安に先に答える
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
実装メモ
コラージュは実際の製品画面の切り抜きや作品に差し替える。図形だけで運用する場合は 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>