スクロールで縮む拡張FAB
ラベル付きの「＋ 新規作成」ボタンが、一覧をスクロールしている間はアイコンだけに縮んで本文を隠さず、指が止まると再びラベル付きに戻る。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- 一覧の上に「新規作成」を常に置きたい画面
- 本文を読む間はボタンを小さくしたい長いリスト
- 初見でラベルを見せ、慣れたらアイコンで足りる操作
- 避ける場面
- 一覧が短くスクロールしない画面
- 主アクションが複数ある画面
- ラベルが無いと意味が伝わらない操作
- 構成要素
- スクロールする一覧
- 拡張 FAB（アイコン＋ラベル）
- 縮んだ FAB（アイコンのみ）
- 一覧末尾の余白
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で一覧（スクロール領域）とボタンへ。一覧は↑↓でスクロール、ボタンは Enter／Space で新規作成。縮小はスクロール中だけ
- 支援技術
ボタンは aria-label「新規作成」で、ラベルが畳まれても名前が変わらない。追加は件数（aria-live=polite）の更新で読ませる。スクロール領域は tabindex=0＋aria-label。reduced-motion で停止
- 動き
ラベル折り畳み 220ms ease（grid 0fr で幅を畳む）、スクロール停止 160ms 後に復帰。本文を隠さない意図
デザインの要点
- 初見ではラベル付きで「何が作れるか」を示し、読んでいる最中はアイコンだけに退く。主役（本文）を隠さない
- 縮むのはスクロール中だけ。止まって 150ms ほどで戻すと、指を離した瞬間に押せる状態になる
- ラベルは width を 0 にせず grid-template-columns 0fr で畳む。文字が潰れずに滑らかに消える
- FAB は一覧の最下行と重なるので、リストの末尾に FAB の高さぶん余白を足す
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="efs-phone">
<header class="efs-head">
<h2 class="efs-title">メモ</h2>
<span class="efs-meta" id="efs-meta" aria-live="polite">24 件</span>
</header>
<div class="efs-scroll" id="efs-scroll" tabindex="0" aria-label="メモ一覧（スクロール）">
<ul class="efs-list" id="efs-list"></ul>
</div>
<button class="efs-fab" id="efs-fab" type="button" aria-label="新規作成">
<span class="efs-fab-icon" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span>
<span class="efs-fab-label"><span class="efs-fab-text">新規作成</span></span>
</button>
</div>