記事のdescriptionが見えないときはリードをカード化する

自分のブログを作っていると、SEO用に書いたdescription（リード文）が、本文の中に埋もれてしまうことがあります。文字の色もサイズも本文と同じままだと、読者はそこが「記事の要約」だと気づきにくい。

この記事では、descriptionを枠付きのカードに切り出し、要約として一目で分かるようにする最小限の実装を紹介します。

今日の結論

• descriptionが本文と同じ見た目だと、要約として認識されにくい
• 枠＋淡色の背景（またはブランドカラーの左ボーダー）にすると、要約としてスキャンしやすくなる
• タグをカード内外どちらに置くかは、役割分離の考え方で決める
• モバイルでは余白の増えすぎに注意する

descriptionが読まれない理由

descriptionは本来「記事の要約」という特別な役割を持ちますが、CSS上は普通の段落（<p>タグなど）と同じ扱いのままだと見た目上の差がありません。色もサイズも本文と揃っているため、視線が留まらず読み飛ばされてしまいます。

見た目に差がないと役割の違いも伝わらない。見た目の差がないことが、埋もれて見える主な原因。

カード化して要約として見せる

対策はシンプルで、descriptionを専用のコンポーネントに切り出し、枠と淡色の背景を付けることです。手順は次のとおりです。

1. 記事トップのdescription表示が、本文と同じ色・サイズになっていないか確認する
2. リード専用のコンポーネント（例: ArticleIntro）に切り出す
3. 枠色をブランドカラー系（淡色のアクセントカラー）に揃える
4. モバイル表示で余白（padding・上下マージン）が増えすぎていないか確認する

筆者はPR上でこの実装を検証し、モバイル表示でも縦スペースが極端に増えないことを2026年7月時点で確認しました。

タグをカード内に入れるか、外に出すか

descriptionのカードに記事タグも一緒に入れるか、カードの外に出すかは、見た目だけでなく役割分離の考え方で決めます。

• カード内に入れる: 「要約＋分類」をひとまとまりの情報として見せたいとき向き
• カードの外に出す: descriptionは要約、タグは分類、と役割を明確に分けたいとき向き

ToolArcでは、要約と分類をまとめて先に見せたいという理由で、内包案（カード内にタグを含める形）を採用しました。どちらが正解というより、サイトの情報設計の方針に合わせて選ぶ判断です。

モバイルで注意すること

カード化すると、枠や余白の分だけ縦スペースが増えます。特にモバイルでは、記事タイトル直後にカードが大きく居座ると、本文にたどり着くまでのスクロール量が増えてしまう。paddingと上下マージンは、デスクトップより控えめな値から試すと調整しやすいです。

チェックリスト

• descriptionが本文と同じ色・サイズになっていないか確認した
• リード専用コンポーネントに切り出した
• 枠色をブランドカラー系に揃えた
• タグをカード内外どちらに置くか、役割分離の考え方で決めた
• モバイルで余白が増えすぎていないか確認した

まとめ・次に読む

descriptionが読まれない主な原因は、本文との見た目の差がないことです。専用コンポーネントに切り出し、枠と淡色の背景を付けるだけで、要約として認識されやすくなります。

関連Tipsとして、TOCジャンプ時の見出しずれは/blog/scroll-margin-toc-heading-hidden、サイト内検索の始め方は/blog/nextjs-site-search-without-full-text-indexも参照してください。

---

本記事の内容は執筆時点（2026-07-26）の情報に基づきます。仕様は変更される可能性があります。重要な判断は公式ドキュメントで確認してください。