マグニファイ・ドック
macOS風のドック。カーソルに近いアイコンほど大きく持ち上がり、なめらかに波打つ。横並びナビやツールバーをリッチに。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 横並びのアイコンナビ・ツールバーをリッチに見せる
- アイコン6個前後のランチャー
- 遊び心を出したいポートフォリオ
- 避ける場面
- 業務画面の主要ナビ（誤タップを招く）
- アイコンが多く枠幅を超える構成
- テキストラベルが必要なナビ
- 構成要素
- ドック台
- アイコンボタン
- 拡大した近傍アイコン
- 持っている状態
- 通常
- ホバー
- キーボード
Tab で各アイコン button へ・Enter／Space で実行。拡大はポインタ専用（フォーカスした button は輪郭で示す）
- 支援技術
nav に aria-label=ドック、絵文字だけの button に aria-label（ホーム／検索など）。拡大は装飾で、reduced-motion では追従を止めて等倍のまま
- 動き
transform 0.15s ease-out でカーソル距離に応じ最大1.8倍に拡大・持ち上げ。カーソル位置を伝える。reduced-motion では動かない
デザインの要点
- 拡大率はカーソルとアイコン中心の距離で連続的に決める（1 − d/range）。乗った1個だけ拡大すると波にならず、隣との段差で跳ねる
- transform-origin を bottom center にし、拡大分を上へ逃がす。中心基準だと台に沈み込んで見える
- 拡大分の余白は土台の padding が吸収する。アイコンを大きくしても隣を押しのけないので、レイアウトが揺れない
- 絵文字だけの button には aria-label を付ける。読み上げでは「家」「拡大鏡」のような絵文字名になり、行き先が分からない
実装メモ
カーソルX座標と各アイコン中心の距離で拡大率を決めています。アイコン数や最大拡大率(scaleMax)・効き幅(range)はお好みで。タッチ端末ではドラッグで反応します。
コード（コピーして使えます）
<nav class="dock" aria-label="ドック">
<button class="dock-item" aria-label="ホーム">🏠</button>
<button class="dock-item" aria-label="検索">🔍</button>
<button class="dock-item" aria-label="ファイル">📁</button>
<button class="dock-item" aria-label="メール">✉️</button>
<button class="dock-item" aria-label="ミュージック">🎵</button>
<button class="dock-item" aria-label="設定">⚙️</button>
</nav>