ストーリーズ
Instagram風のストーリーのリング一覧。タップで全画面ビューが開き、上部の分割プログレスバーが自動で進む。画面の右をタップで次、左で前、×で閉じられる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 24 時間で消える短い投稿の閲覧
- 全画面で順送りに見せる写真・動画
- 既読リングで見た・見てないを示す一覧
- 避ける場面
- 長文や複数操作が要るコンテンツ
- 自動送りを止められない環境（読み切れない）
- 構成要素
- ストーリーリング
- 全画面ビューア
- 分割プログレスバー
- 閉じるボタン
- 前へ／次へ領域
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でリングへ Enter／Space で開く。開いている間は →／← で送り・戻し、Space で一時停止・再開、Esc で閉じる。Tab はビューア内を循環し、閉じるとリングへ戻る
- 支援技術
ビューアは role=dialog＋aria-modal で閉じている間は inert。開くと閉じるボタンへフォーカス。バーは role=progressbar（N件中M件目）。既読はリング色＋名前の ✓＋aria-label。reduced-motion でバーを即時満了
- 動き
ビューアのフェード 200ms。各セグメントは 3.5s linear でバーが満ち、自動で次へ進む
デザインの要点
- 左右のタップ領域は 32%／68% に分ける。次へ進む操作が圧倒的に多いので右を広く取る
- 進行は分割バーで「今何件目か」を先に見せる。1 本のバーだと残りが分からず、途中で閉じられる
- 自動送りは必ず止められるようにする（一時停止ボタン・Space・長押し）。3.5s で読み切れない文もある
- 未読はブランド色のリング、既読は灰＋名前の ✓。色だけで既読を示すと区別できない人がいる
実装メモ
プレビューは枠内に収めるため、全画面ビューを position:absolute（ステージ基準）で実装しています。実際のページで画面全体に重ねるときは position:fixed に変え、body 直下など高い階層へ置いてください。各セグメントは SEG_MS ごとに自動で進み、上部バーは width の transition で進捗を表現します（reduced-motion 時は即時に満ちます）。左右のタップ領域は透明ボタンで、右=次・左=前に対応します。
コード（コピーして使えます）
<div class="st-stage" id="stStage">
<div class="st-row" id="stRow"></div>
<div class="st-viewer" id="stViewer" role="dialog" aria-modal="true" aria-label="ストーリー" inert>
<div class="st-bars" id="stBars" role="progressbar" aria-label="ストーリーの進行" aria-valuemin="1" aria-valuemax="1" aria-valuenow="1"></div>
<div class="st-top">
<span class="st-av sm" id="stTopAv" aria-hidden="true"></span>
<span class="st-topnm" id="stTopNm"></span>
<button class="st-pause" id="stPause" type="button" aria-pressed="false" aria-label="一時停止">
<svg class="st-ico-pause" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><rect x="3" y="2.5" width="3.5" height="11" rx="1" fill="currentColor"/><rect x="9.5" y="2.5" width="3.5" height="11" rx="1" fill="currentColor"/></svg>
<svg class="st-ico-play" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2.5l9 5.5-9 5.5z" fill="currentColor"/></svg>
</button>
<button class="st-close" id="stClose" type="button" aria-label="閉じる">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><line x1="3" y1="3" x2="13" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="13" y1="3" x2="3" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
</div>
<div class="st-content" id="stContent"><span class="st-cap" id="stCap"></span></div>
<button class="st-nav st-prev" id="stPrev" type="button" aria-label="前へ"></button>
<button class="st-nav st-next" id="stNext" type="button" aria-label="次へ"></button>
</div>
</div>