TECHNO.0019 / 2026.10.01 THU / 1 MIN READ
Next.jsで「静かなUI」をつくる
通常時はほぼ静止。ときどき何かが起こる。その「ときどき」をどう実装するか。
通常時はほぼ静止している。ときどき何かが起こる。操作すると、思ったより丁寧に反応する。mekabu のUIで目指しているのは、そういう静けさだ。
「ときどき」を実装する
一定間隔で動かすと、すぐに機械的に見える。間隔に幅を持たせ、ひとつの演出が終わってから次を予約する。
const MIN_MS = 2600
const MAX_MS = 6400
const nextAt = (now: number): number => now + MIN_MS + Math.random() * (MAX_MS - MIN_MS)動きを減らす設定
静止状態を正本にしておくと、prefers-reduced-motion への対応は「動きを足さない」だけで済む。
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}戻るは一瞬で
行きの演出は許せても、帰りの演出は許せない。閉じる操作は待たせず、移動の連続性だけを残す。
<motion.h1 layoutId={`title-${article.id}`} transition={{ duration: 0.46 }}>
{article.title}
</motion.h1>