右開き 括弧モチーフ メニュー
ダークな背景にシアン（ #0ff ）の 3 本線を置き、開いた状態で右向きの 「>」括弧 のような形へ変形するテック寄りのメニューボタンです。上下の線が内側へ寄りつつ少し傾き、中央の線が短く右へずれることで、コードのカーソルや山括弧を思わせる記号的なシルエットを作ります。
解説
ダークな背景にシアン（#0ff）の 3 本線を置き、開いた状態で右向きの「>」括弧のような形へ変形するテック寄りのメニューボタンです。上下の線が内側へ寄りつつ少し傾き、中央の線が短く右へずれることで、コードのカーソルや山括弧を思わせる記号的なシルエットを作ります。変形は transform の translate と rotate の組み合わせで、JavaScript は aria-pressed を反転させるだけです。
相性の良い場面
- 開発者向けツールや API ドキュメントのサイト
- ダークテーマのポートフォリオやスタートアップ LP
- ターミナル風・コード風の世界観を持つ UI
線色のネオンシアンとボタン枠（半透明の白）は世界観の要なので、暗い地色とセットで使うと映えます。明るい背景に置くなら線色を濃い色へ変更してください。傾きは rotate(25deg) 前後で決まり、角度を浅くすると括弧の主張が弱まります。発光感が強い配色のため、文字との同居時はコントラスト比を確認しておくと読みやすさを保てます。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
明るい背景でも使えますか？
そのままだと暗い背景前提の配色です。明るい背景に置く場合は、ネオンシアンの線色（#0ff）を濃い色に、半透明白の枠線も濃いめに変更してください。配色を入れ替えれば明るいテーマにも対応できます。
括弧の傾き具合を変えられますか？
上下の線にかかる rotate(-25deg)／rotate(25deg) の角度を増減すれば、括弧の開き具合を調整できます。角度を浅くすると控えめに、深くするとよりはっきりした山括弧の形になります。