5 本線（ボリューミー）ハンバーガー
一般的な 3 本線ではなく、細い線を 5 本重ねた ボリューム感のあるハンバーガー です。線が密に並ぶぶん「ぎっしり詰まった」力強い表情になり、オレンジ（ #ff7a3a ）の角丸ボタンと合わせてスポーティで元気な印象を作ります。
解説
一般的な 3 本線ではなく、細い線を 5 本重ねたボリューム感のあるハンバーガーです。線が密に並ぶぶん「ぎっしり詰まった」力強い表情になり、オレンジ（#ff7a3a）の角丸ボタンと合わせてスポーティで元気な印象を作ります。開くと 1 番上と 3 番目の線が上下から寄って X を形成し、間の 2・4 番目と最下段の 5 番目は scaleX(0) や opacity:0 で消える設計です。動作は CSS の transition が担い、JavaScript は aria-pressed の切り替えのみです。
向いている場面
- スポーツ・フィットネス・アウトドア系のサイト
- 勢いや活力を伝えたいキャンペーンページ
- 太く目立つメニューで存在感を出したいヘッダー
線の本数が多いぶん、間隔（gap:3px）と太さ（2px）のバランスが見た目を左右します。詰めすぎると線がつぶれて見えるので注意してください。ボタン色をブランド色に変えるだけで雰囲気が変わります。閉時は 58px 角の十分なタップ領域があり、モバイルでも押しやすい設計です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
なぜ 5 本線なのですか？
通常の 3 本より線を密に重ねることで、ボリューム感のある力強い見た目を出すための演出です。開くときは上下の 2 本が X を作り、残りの線は消える仕組みなので、機能は通常のハンバーガーと変わりません。
ボタンの色を変えられますか？
はい。オレンジの背景色 #ff7a3a を変えるだけでブランドカラーに合わせられます。線は白なので、背景は線とのコントラストが出る濃いめの色を選ぶと視認性を保てます。