アイコンの線が変形
メニュー⇄閉じる、再生⇄一時停止、＋⇄− の3つを、アイコンを差し替えずに線の回転・clip-path の頂点移動で変形させる。同じ図形が姿を変えるので、状態が連続して伝わる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- メニュー⇄閉じる、再生⇄一時停止のトグル
- 同じボタンの別状態を連続して伝えたいとき
- アイコン差し替えのちらつきを無くしたい
- 避ける場面
- 意味の異なる別機能へ切り替わるボタン
- 頂点数が違い補間できない複雑な図形
- 構成要素
- ハンバーガー3本線
- 再生／一時停止の2枚
- ＋／−の2本線
- キャプション
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab で3つのボタンへ、Enter／Space で切替（aria-expanded／aria-pressed が反転）
- 支援技術
メニューと＋は aria-expanded で aria-label を「メニュー／閉じる」等に入れ替え、再生は aria-pressed のトグルでラベル「再生」は固定（APG）。svg は aria-hidden。reduced-motion で transition 無し
- 動き
線の回転・clip-path の頂点移動 250ms ease-out(.16,1,.3,1)、中央線の消失 150ms。同じ図形が姿を変え状態の連続性を保つ
デザインの要点
- アイコンの差し替え（表示/非表示）は状態の連続性が切れる。同じ線が回って別の記号になると「同じボタンの別の状態」と伝わる
- 頂点数が同じ polygon 同士は clip-path で補間できる。三角と2本の棒も、4頂点×2枚に分ければ変形できる
- 回転の中心を線の中央に置く（transform-origin: center）。既定の左上だと線が弧を描いて飛ぶ
- 200〜250ms の ease-out。押した直後に形が変わり始めないと、押せたか分からず二度押しされる
コード（コピーして使えます）
<div class="im-wrap">
<div class="im-cell">
<button class="im-btn" id="imMenu" type="button" aria-expanded="false" aria-label="メニュー">
<svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true"><line class="im-l im-l1" x1="4" y1="7" x2="20" y2="7"/><line class="im-l im-l2" x1="4" y1="12" x2="20" y2="12"/><line class="im-l im-l3" x1="4" y1="17" x2="20" y2="17"/></svg>
</button>
<span class="im-cap">メニュー ⇄ 閉じる</span>
</div>
<div class="im-cell">
<button class="im-btn" id="imPlay" type="button" aria-pressed="false" aria-label="再生">
<span class="im-pp" aria-hidden="true"><span class="im-bar im-bar-l"></span><span class="im-bar im-bar-r"></span></span>
</button>
<span class="im-cap">再生 ⇄ 一時停止</span>
</div>
<div class="im-cell">
<button class="im-btn" id="imPlus" type="button" aria-expanded="false" aria-label="追加">
<svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true"><line class="im-l im-pv" x1="12" y1="4" x2="12" y2="20"/><line class="im-l im-ph" x1="4" y1="12" x2="20" y2="12"/></svg>
</button>
<span class="im-cap">＋ ⇄ −</span>
</div>
</div>