長文記事はタイトル直下にTL;DRブロックを置く

どんな問題を解決するか / いつ使うか

ブログ・ドキュメント・ニュースレターなど、スクロールが長くなる読み物ページ。全文を読まない読者（流し読み層）に価値を届けたいとき、また離脱率を下げたいとき。

やり方

1. タイトル（＋メタ情報）のすぐ下に、背景色や罫線で本文と区別したボックスを置く。
2. 見出しは「TL;DR」「要点」「3行まとめ」など短く。
3. 中身は箇条書き3〜5行。結論→根拠→次のアクションの順に。
4. 本文の該当セクションへのアンカーリンクを付けると、要点から詳細へ飛べて親切。

<aside class="tldr">
  <strong>TL;DR</strong>
  <ul>
    <li>結論：…</li>
    <li>理由：…</li>
    <li>やること：…</li>
  </ul>
</aside>

.tldr { background: #f5f7fa; border-left: 4px solid #3b82f6; padding: 16px 20px; border-radius: 8px; }

注意点・対応状況

• 本文と同じ内容の繰り返しになりすぎないよう、本当に要点だけに絞る。
• 短い記事には不要（かえってノイズになる）。

出典

• 投稿者: @vponamariov (Victor)
• 投稿: @vponamariov · 2026-10-07
• 収集日: 2026-10-09（JST）