タイムライン & 404

タイムライン & 404に分類されるWeb表現技法10件。縦タイムライン、アクティビティフィード、進捗ステップ、ポップな404（浮遊する図形）など。ライブデモとコピーできるコード付き。

左に伸びる縦線とノードで年表をたどるタイムライン。日付・見出し・説明を並べ、スクロールに合わせて各項目が順にふわっと現れます。

アバター付きの操作履歴を表示するアクティビティフィード。数秒ごとに新しい操作が一覧の先頭にスライドインし、常に最新の状態を保ちます。

受付から配達完了までを追う注文追跡ステップ。時間の経過とともに現在地が自動で進み、完了した区間の連結線が満ちていきます。

大きな「404」と親しみのあるメッセージ、ホームへ戻る導線を、ふわふわ浮かぶ図形とともに見せる陽気なエラーページ。離脱しがちな404を、ブランドの遊び心で和ませて回遊につなげます。

迷い込んだユーザーを助ける、検索ボックスと人気リンクを備えた実用的な404ページ。「お探しのページは見つかりません」で終わらせず、目的地へ再誘導します。メディアやECに向きます。

中央の縦線を挟んでカードが左右交互に並ぶ沿革タイムライン。それぞれが逆方向からふわっと現れ、狭い画面では片側寄せの1列表示に切り替わります。

横方向にスクロールする年表タイムライン。年ごとの節目を線でつなぎ、現在地のノードだけ光の輪でパルスさせて強調表示します。

Now・Next・Laterの3列に分けたカンバン風ロードマップ。ステータスごとに色分けし、進行中タスクには達成率を示す進捗バーが伸びます。

CSSだけで描いた宇宙飛行士が宙を漂うイラスト系404。世界観のあるビジュアルで「迷子」を表現し、ブランドの個性を出します。ポートフォリオやプロダクトサイトに似合います。

「404」がノイズとともに揺れ、RGBがずれるサイバーなグリッチ404。テック系やゲーム、音楽系サイトの世界観に合う、強い印象を残すエラーページです。動きで“壊れた感”を演出します。