メニュー → 戻る矢印に変形
角丸の白いボタンに収めた 3 本線が、開いた状態でクリックすると「← 戻る」を思わせる 左向き矢印 へ変形するメニューボタンです。上下の線が短くなって斜めに傾き、中央の線が矢印の軸として残るため、ユーザーに「ここから前の画面へ戻れる」という意味を直感的に伝えられます。
解説
角丸の白いボタンに収めた 3 本線が、開いた状態でクリックすると「← 戻る」を思わせる左向き矢印へ変形するメニューボタンです。上下の線が短くなって斜めに傾き、中央の線が矢印の軸として残るため、ユーザーに「ここから前の画面へ戻れる」という意味を直感的に伝えられます。変形は transition と transform-origin:left center による回転で表現し、JavaScript は aria-pressed の切り替えのみを担います。
使いどころ
- 階層の深いナビゲーションで開閉と「戻る」を兼ねたい場面
- 検索やフィルタのパネルを開いた後に閉じる往復動作
- モバイルアプリ風の画面遷移を持つ Web UI
線の色は #1a1a2e、枠は薄いグレーで、どちらも落ち着いた配色に変更できます。矢印の角度は rotate(45deg) 系の値で決まるので、傾きを浅くすればより緩やかな形になります。意味が「メニュー」と「戻る」で変わるため、状態に応じて aria-label も書き換えると読み上げが正確になります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
矢印の向きを右向きにできますか？
transform-origin と translate の符号、回転角度の組み合わせを左右反転すれば右向きにできます。ただし一般的に左向き矢印が『戻る』を意味するため、用途と合うか確認してから変更してください。
対応ブラウザは何ですか？
transform と transition のみを使う標準的な実装なので、最新の Chrome・Safari・Firefox・Edge で問題なく動作します。古いブラウザを意識する必要は実務上ほぼありません。