更新履歴タイムライン

左に日付レール、右にバージョンタグ＋見出し＋変更点を並べる更新履歴。新着に「New」バッジ。「新機能／修正」のフィルタで項目が絞り込まれます。

ENGLISH

Changelog Timeline

約102行画面のかたち / 実用サンプル: LP・マーケページの一覧 →

プレビュー

クリック

操作クリック／タップで動きます。

デザインの要点

日付は左のレールに固定し、右の本文と縦線でつなぐ。時間の流れが構造として見える
バージョン番号は等幅で小さく。見出しは「監査ログと SSO」のように、ユーザーの言葉で何が変わったかを書く
New は最新 1〜2 件だけ。全部に付くと意味を失う。既定は 7 日以内など期限で自動化する
変更点は箇条書き 2〜3 項目で止め、詳細はリンク先へ。履歴ページは「読む」より「探す」場所

プロのサイトでの実例

Linear別サイト ↗Changelog ページで日付レール＋見出し＋変更点の形式。トップページから導線がある

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

New バッジは公開日から 7 日以内など期限で自動付与する。フィルタは URL のクエリ（?kind=fix）と同期させると共有できる。

コード（コピーして使えます）

<section class="clt">
  <header class="clt-head">
    <div>
      <h2 class="clt-h">更新履歴</h2>
      <p class="clt-sub">Kestrel の新機能と修正。毎週金曜に更新しています。</p>
    </div>
    <div class="clt-filters" role="group" aria-label="種類で絞り込む">
      <button type="button" data-f="all" aria-pressed="true">すべて</button>
      <button type="button" data-f="feature" aria-pressed="false">新機能</button>
      <button type="button" data-f="fix" aria-pressed="false">修正</button>
    </div>
  </header>
  <ol class="clt-list">
    <li class="clt-item" data-kind="feature">
      <time class="clt-date" datetime="2026-09-08">2026.09.08</time>
      <div class="clt-body">
        <p class="clt-meta"><span class="clt-ver">v3.2.0</span><span class="clt-new">New</span><span class="clt-kind">新機能</span></p>
        <h3>監査ログと SSO</h3>
        <ul><li>管理者向けに、誰がいつ何を変えたかの監査ログを追加</li><li>SAML による SSO ログインに対応（Business 以上）</li></ul>
      </div>
    </li>
    <li class="clt-item" data-kind="fix">
      <time class="clt-date" datetime="2026-09-01">2026.09.01</time>
      <div class="clt-body">
        <p class="clt-meta"><span class="clt-ver">v3.1.4</span><span class="clt-kind">修正</span></p>
        <h3>モバイルのドラッグ改善</h3>
        <ul><li>iOS Safari でカードをドラッグ中に画面がスクロールする問題を修正</li><li>長押し判定を 300ms に短縮</li></ul>
      </div>
    </li>
    <li class="clt-item" data-kind="feature">
      <time class="clt-date" datetime="2026-08-22">2026.08.22</time>
      <div class="clt-body">
        <p class="clt-meta"><span class="clt-ver">v3.1.0</span><span class="clt-kind">新機能</span></p>
        <h3>キーボードショートカット一覧</h3>
        <ul><li><kbd>?</kbd> でどの画面からでも一覧を表示</li><li>ショートカットのカスタマイズに対応</li></ul>
      </div>
    </li>
    <li class="clt-item" data-kind="fix">
      <time class="clt-date" datetime="2026-08-15">2026.08.15</time>
      <div class="clt-body">
        <p class="clt-meta"><span class="clt-ver">v3.0.8</span><span class="clt-kind">修正</span></p>
        <h3>通知メールの件名を短く</h3>
        <ul><li>件名から課題 ID の重複を削除し、受信箱で読みやすく</li></ul>
      </div>
    </li>
  </ol>
  <p class="clt-empty" hidden>この種類の更新はまだありません。</p>
</section>