モバイル特有

§17-01

Bottom sheet

画面下からスライドして現れるパネル。

親指が届く下部で選択や詳細を扱え、片手操作で完結する。モバイルでモーダルの代わりに短い選択や設定を出す場面で使う。

実装のポイント下端に固定したシートを translateY で出し入れし、背景スクロールのロックとフォーカストラップを入れる。ドラッグハンドルで下に払って閉じられると手に馴染む。

デモはボトムシート (mobile)と共通です。

§17-02

Pull to refresh

一覧を引き下げて最新の内容に更新する。

一覧の先頭を引き下げる動作で最新情報を取り込め、更新ボタンを探さずに済む。モバイルのフィードや受信箱で広く期待される操作。

実装のポイントscrollTop が 0 のときだけ touchmove の移動量でインジケータを引き出し、閾値を超えて離したら更新する。overscroll-behavior: contain でブラウザ標準の更新と競合させない。

§17-03

Swipe action (リスト)

リスト項目を左右にスワイプして削除や保管を行う。

メニューを開かずに一項目ずつ素早く片付けられる。受信箱やタスク一覧など、繰り返し処理するリストで操作回数を減らす。

実装のポイントpointermove で横移動量を追い、閾値を超えたら開いた位置に吸着させる。スワイプできない利用者のために同じ操作をメニューやボタンからも呼べるようにする。

§17-04

Floating action button (FAB)

画面右下に浮かぶ主要操作のボタンを置く。

画面のどこからでも主要な操作に手が届くようにする。新規作成や投稿のように、利用の中心となる操作が一つあるときに向く。

実装のポイント画面の主要アクションを 1 つだけ載せ、position: fixed で右下に置く。下端は safe-area-inset-bottom を加算し、アイコンのみなので aria-label を必ず付ける。

§17-05

Long press menu

長押しでコンテキストメニューを開く。

右クリックのないタッチ端末で、項目ごとの追加操作を提供する。一覧の各行に削除や共有などの補助操作を付けたいときに使う。

実装のポイントpointerdown でタイマーを開始し、pointerup/pointercancel や一定距離の移動で取り消す。キーボード向けにメニューボタンも用意する。

§17-06

Safe area insets 対応

ノッチやホームバーに内容が隠れないよう余白を取る。

画面の切り欠きやホームバーに内容が重ならないよう余白を確保する。全画面表示や下部固定の操作があるモバイル画面で必須になる。

実装のポイントviewport メタに viewport-fit=cover を指定し、padding に env(safe-area-inset-top) などを加える。max() で通常の余白と比べると全端末で崩れない。

§17-07

PWA install prompt

ホーム画面への追加を自前のタイミングで促す。

ブラウザの通知任せにせず、利用者が価値を感じた直後に導入を勧められる。繰り返し使うことが前提の Web アプリに向く。

実装のポイントbeforeinstallprompt を preventDefault して保持し、利用者が価値を感じた後に自前のボタンから prompt() を呼ぶ。閉じられたら記録して再表示を控える。

§17-08

Splash screen (PWA)

アプリ起動時にアイコンと背景色の画面を見せる。

ホーム画面から起動したときに空白画面を見せない。ネイティブアプリのような起動感を出したいときに使う。

実装のポイントスプラッシュは manifest の name、background_color、icons から生成されるので、テーマに合う背景色と十分な解像度のアイコンを用意する。起動中に重い処理を置かない。