スマートフォンでWebサイトを閲覧する割合は、今や7割を超えると言われています。にもかかわらず、メニューの開閉がガタつく、押しにくい、閉じ方がわからない——そんなサイトを見かけたことはありませんか？
本記事では、スマホでも美しく動作するレスポンシブメニューの3つのパターンを、実装コード付きで解説します。
1. ハンバーガーアイコンのアニメーション
3本線のハンバーガーアイコンが「×（閉じる）」にスムーズに変形するアニメーション。クリックしてみてください。
HTML
<button class="hamburger" onclick="this.classList.toggle('is-open')">
<span></span><span></span><span></span>
</button>
CSS
.hamburger {
width: 32px;
height: 24px;
position: relative;
cursor: pointer;
}
.hamburger span {
display: block;
width: 100%;
height: 2px;
background: #1A1A1A;
position: absolute;
left: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { top: 22px; }
/* 開いた状態：×マークに変形 */
.hamburger.is-open span:nth-child(1) {
top: 11px;
transform: rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
opacity: 0;
}
.hamburger.is-open span:nth-child(3) {
top: 11px;
transform: rotate(-45deg);
}
💡 ポイント：中央の線を
opacity: 0 で消し、上下の線を中央に集めて45度回転させるだけで×マークになります。transform-origin の調整は不要です。
2. ドロワーメニュー（右からスライド）
スマホで最もよく使われるパターンです。画面右側からメニューがスライドインし、背景にオーバーレイを表示。下のデモのハンバーガーアイコンをクリックしてみてください。
HTML
<div class="drawer-wrap" id="drawer-demo">
<div class="drawer-header">
<span>Demo Site</span>
<button class="hamburger" id="drawer-toggle" onclick="toggleDrawer()"><span></span><span></span><span></span></button>
</div>
<div class="drawer-overlay" id="drawer-overlay" onclick="toggleDrawer()"></div>
<div class="drawer" id="drawer-panel">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">実績</a>
<a href="#">お問い合わせ</a>
</div>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.hamburger {
/* 本体のスタイル */
}
.drawer-header {
/* 本体のスタイル */
}
.drawer-wrap {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
/* ドロワー本体 */
.drawer {
position: fixed;
top: 0;
right: -100%;
width: 70%;
height: 100vh;
background: #E31010;
padding: 60px 24px;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 100;
}
.drawer.is-open { right: 0; }
/* 背景オーバーレイ */
.drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
z-index: 99;
}
.drawer-overlay.is-open {
opacity: 1;
visibility: visible;
}
3. ボトムナビゲーション
InstagramやTwitter（X）でおなじみの、画面下部に固定するナビゲーション。親指で操作しやすく、主要な導線を常にアクセス可能にします。
HTML
<div style="height:180px;display:flex;align-items:center;justify-content:center;color:var(--color-text-light);font-size:.85rem;">コンテンツエリア</div>
<div class="bottom-nav">
<a class="bottom-item is-active" onclick="return false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
ホーム
</a>
<a class="bottom-item" onclick="return false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
検索
</a>
<a class="bottom-item" onclick="return false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
会社概要
</a>
<a class="bottom-item" onclick="return false">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
お問い合わせ
</a>
</div>
CSS
/* ===== ベースのレイアウト（デザインに合わせて調整してください） ===== */
.bottom-item {
/* 本体のスタイル */
}
/* ===== 動作のアニメーション ===== */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
background: #fff;
border-top: 1px solid #EAEAEA;
padding: 8px 0;
z-index: 50;
}
.bottom-nav__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-size: 0.65rem;
color: #9A9794;
text-decoration: none;
transition: color 0.2s;
}
.bottom-nav__item.is-active,
.bottom-nav__item:hover {
color: #E31010;
}
まとめ：スマホメニューは「第一印象」を決める
サイトを開いた瞬間に最初に触れるのが、ナビゲーションです。この部分がスムーズに動くだけで、サイト全体への信頼感が大きく変わります。
- ハンバーガー → × → 状態変化を直感的に伝える
- ドロワーメニュー → 情報量の多いサイトに
- ボトムナビ → 主要導線を常にアクセス可能に
いずれも transition と position: fixed の組み合わせで実現でき、特別なライブラリは不要です。サイトの性質に合わせて最適なパターンを選びましょう。
💡 ツタワルの制作では：ナビゲーションの設計は「見た目」だけでなく、ユーザーがどんな順序で情報を見るか（＝導線設計）から逆算して設計しています。