誇張しない目次型セクション
「堅牢で、使いやすい。それだけです」のような平文の見出しと、下線リンク＋一行説明の縦並びだけで製品を紹介するセクション。装飾を足さず、言葉で信頼を作ります。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 言葉で信頼を作りたい老舗・堅実な製品
- 機能を目次として同格に並べたいとき
- 装飾より読み順を示したいセクション
- 避ける場面
- 派手な見せ場を作りたいキャンペーン
- 項目が 8 つを超えるとき（一覧ページへ）
- 構成要素
- 平文の見出し
- 本文段落
- 目次リスト
- 下線リンク
- 一行説明
- 生きた数字
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で目次リンク 5 件を上から順に移動し Enter で遷移
- 支援技術
ul の各 li でリンク→一行説明の順に読まれ、説明は aria-describedby でリンクに結び付く。リンクは下線＋黄色の下線色で色以外にも示す。reduced-motion で背景遷移を無効化
- 動き
リンクのホバーで背景が黄色にハイライト 150ms
原則認知負荷
デザインの要点
- 見出しは主張を平文で言い切る。「究極の」「革新的な」は信頼を削る。足すなら形容詞ではなく事実
- リンクは下線付きの黒。ボタン化しない。目次は「読む順」を示すものなので、どれも同格に見せる
- 各リンクに一行の説明。「誰が・いつまでに。それだけ」のように、機能の名前でなく使い方を書く
- 末尾に生きた数字（いま 3,412 チームが使っています）を1つ。飾りの数字ではなく、更新される事実だけ
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<section class="pts">
<h2 class="pts-h">堅牢で、使いやすい。それだけです。</h2>
<p class="pts-p">Minato は 2014 年から、小さなチームのプロジェクト管理を支えてきました。派手な機能はありません。毎日使うものが、毎日ちゃんと動きます。</p>
<ul class="pts-toc">
<li><a href="#" aria-describedby="pts-d1">タスクと ToDo</a><span id="pts-d1">誰が・いつまでに。それだけを書く一覧。</span></li>
<li><a href="#" aria-describedby="pts-d2">メッセージボード</a><span id="pts-d2">チャットで流れてしまう決定を、掲示板に残す。</span></li>
<li><a href="#" aria-describedby="pts-d3">スケジュール</a><span id="pts-d3">締切と予定だけのカレンダー。同期はワンクリック。</span></li>
<li><a href="#" aria-describedby="pts-d4">ドキュメントとファイル</a><span id="pts-d4">プロジェクトごとにまとまる。探すのに検索は要らない。</span></li>
<li><a href="#" aria-describedby="pts-d5">クライアントとの共有</a><span id="pts-d5">見せたいものだけを、見せたい相手に。</span></li>
</ul>
<p class="pts-live">いま <b>3,412 チーム</b> が Minato で仕事をしています。</p>
</section>