塗り四角 → X の塗り変形
このメニューボタンは、塗りつぶした横長の正方形パーツ2つ（ .mb-sq__top と .mb-sq__bot ）が、クリックで X 字に分裂・回転する開閉アイコンです。状態は aria-pressed 属性で管理し、わずかな JavaScript はその真偽を反転させているだけ。
解説
このメニューボタンは、塗りつぶした横長の正方形パーツ2つ（.mb-sq__top と .mb-sq__bot）が、クリックで X 字に分裂・回転する開閉アイコンです。状態は aria-pressed 属性で管理し、わずかな JavaScript はその真偽を反転させているだけ。実際の変形は CSS の transition と transform（rotate(45deg) など）が担い、cubic-bezier のイージングで動きに溜めを付けています。枠線付きの四角という骨格が、ベタなハンバーガー線とは違う工芸的な印象を生みます。
使いどころ
- 和モダンや伝統工芸系サイトの、主張しすぎない小さなメニュー開閉
- 装飾性を重視したポートフォリオやギャラリーのナビ
- 余白の効いた一枚絵 LP のヘッダーアクセント
色は枠線とパーツの #f0b13c を共通変数に置き換えると一括で変更できます。開閉の速さは .4s の値を調整。実際のメニュー開閉処理は別途必要で、このボタンはあくまでトグルの見た目だけを担います。aria-pressed と aria-label が入っているので、スクリーンリーダー利用者にも状態が伝わります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
クリックしてもメニューが開きませんが、なぜですか
このスニペットはアイコンの開閉アニメーションと aria-pressed の切り替えだけを行うサンプルです。実際のナビゲーション表示・非表示は、別途自分の JavaScript や CSS で aria-pressed の値に応じて連動させる必要があります。
色を別のテーマに合わせたいです
枠線とパーツに使われている #f0b13c、背景の濃紺 #0F1B3D を変えれば見た目を調整できます。ボタンの枠と中のバーは同じ色なので、その1色を差し替えるとアイコン全体の色が一括で変わります。