テキスト「MENU / CLOSE」切替型
線のアイコンを使わず、 「MENU」と「CLOSE」のテキスト だけで開閉を表現する上品なヘッダーボタンです。ピル型の枠の中に 2 つの語を重ねて配置し、開閉に応じて片方が上へ translateY(-100%) で抜け、もう片方が下から滑り込んでくる縦スライド切り替えになっています。
解説
線のアイコンを使わず、「MENU」と「CLOSE」のテキストだけで開閉を表現する上品なヘッダーボタンです。ピル型の枠の中に 2 つの語を重ねて配置し、開閉に応じて片方が上へ translateY(-100%) で抜け、もう片方が下から滑り込んでくる縦スライド切り替えになっています。語間を letter-spacing:.25em で広げ、太字に組むことで編集的で洗練された印象を出しています。動作は aria-pressed の真偽を変えるだけです。
合うブランド
- ファッション・コスメなどモード感のあるサイト
- 雑誌・メディアなど編集色の強いヘッダー
- アイコンより言葉で品よく見せたいブランド
文字色 #1a1a2e と開時の反転背景はブランド色に差し替え可能です。表示言語は「メニュー」「閉じる」などに書き換えても同じ動きで使えます。テキスト主体なので意味が明快で読み上げにも素直ですが、ボタン高さ 42px はタップしやすさの目安として下回らないようにし、文字を小さくしすぎないことが使いやすさのポイントです。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
表示する文言を日本語にできますか？
はい。MENU と CLOSE のテキストをそのまま『メニュー』『閉じる』などに書き換えれば、同じ縦スライドの動きで日本語表示にできます。文字数が増える場合はボタンの幅を少し広げてください。
アイコンがなくても使い勝手は問題ありませんか？
テキストで状態を明示するため、むしろ意味が伝わりやすい方式です。読み上げにも素直で、編集系・ファッション系の上品な見せ方に向きます。文字が小さくなりすぎないようサイズだけ確保してください。