frontend/2026/08
余白に、小さなアニメーションを ― 404やEmptyStateを一捻りする
データが無いページ、404、エラー画面。空いているのに置くものがない余白に、小さなマイクロアニメーションを置いてみたら、思っていた以上によかった話です。実際にARCHAIVEで使っている例と、どう量産しているかを紹介します。

Archaive事業部 プロダクトマネージャー
株式会社STARUPのArchaive事業部プロダクトマネージャー。京都大学工学部建築学科卒。建築からエンジニアへ転身し、インドでの1年間の修行を経てSTARUPに参画。フロントエンド開発とUI/UXデザインの経験を活かし、現在はプロダクト全体の設計や進行を担当。自らデザインも行いスピーディーに要件を形にする強みを活かしつつ、現場への「共感」を大切にしたプロダクトづくりに取り組んでいる。
データが無いページ、404、エラー画面。空いているのに置くものがない余白に、小さなマイクロアニメーションを置いてみたら、思っていた以上によかった話です。実際にARCHAIVEで使っている例と、どう量産しているかを紹介します。
AIで動くモックアップが数分で作れるようになり、要件を固める場でモックアップを使うのが当たり前になりました。ただ、モックアップは情報を載せすぎるし、それ自体は全体の地図にはなりません。その落とし穴と付き合い方を、UXデザインの5層モデルという見方を借りて整理してみました。