メインコンテンツへスキップ
Context Grammar文脈を読むAIをデザインする

デザインシステム・カタログ

ページの動き

ページ単位の動き。開いたとき、ページを移るとき、スクロールするとき。

登場

01

初回の読み込み

きっかけ
ページの読み込み
イージング
--ease-out cubic-bezier(0.16, 1, 0.3, 1)
動きを減らす設定
まるごと省略され、ページはそのまま現れます。

使っている場所

セッションに一度だけ、グリッドの線が上から下へ、ヘッダーの罫線が左から右へ引かれ、ページの見出しが浮かびます。内容は隠れないので、読むために待たされることはありません。

ページ移動

02

ページ遷移

きっかけ
ページ移動
動きを減らす設定
ページは遷移の演出なしで、すぐに切り替わります。

前のページが消え、次のページが少し浮かび、ヘッダーの線が引き直されます。400ms以内で、ナビゲーションは動きません。「ここでもう一度」はアドレスのクエリだけを変えるので、このページを離れずに再生できます。

スクロール

03

スクロールで描く

きっかけ
スクロール
動きを減らす設定
図は最初から描き終えた状態で表示され、動きません。

線の図はスクロール位置に合わせて描かれ、戻ると消えていきます。時計の役目は読み手のスクロールが担うので、長さもカーブもありません。

04

イラストの登場

きっかけ
スクロール
長さ
--dur-stage 560ms
イージング
--ease-out cubic-bezier(0.16, 1, 0.3, 1)
動きを減らす設定
イラストは最初から全体が見え、マスクはかかりません。

ページに一枚だけ、3割ほどが見えたところで、左から右へのマスクのワイプで一度だけ現れます。最初から完成した状態で描画されているので、JavaScript がなくてもそのまま見えます。