受信箱の2ペイン
左に一覧（未読は太字・スター付き）、右に選択中のプレビュー。行を選ぶと既読になり、アーカイブすると行が消えて次のメールへ進む。狭い画面では一覧→詳細へスライドする。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 未読は太さで、重要はスターで、選択中は背景で示す。3 つの状態に 3 つの別の手段を当てる
- アーカイブ後は自動で次の 1 通を開く。受信箱の目的は「読み終えて空にする」ことだから
- 行の高さは 3 行（差出人・件名・抜粋）で固定し、抜粋は 1 行で省略する。一覧の走査速度が命
- スマホは 2 ペインを重ねずスライドで切り替える。戻るボタンを左上の定位置に置く
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="ib-app">
<aside class="ib-list-pane">
<header class="ib-list-head">
<h1 class="ib-h1">受信トレイ</h1>
<span class="ib-count" id="ib-count">3 件の未読</span>
</header>
<ul class="ib-list" id="ib-list" role="listbox" aria-label="メール一覧"></ul>
</aside>
<section class="ib-detail-pane" id="ib-detail" aria-live="polite">
<header class="ib-toolbar">
<button type="button" class="ib-icon-btn ib-back" id="ib-back" aria-label="一覧へ戻る">
<svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><path d="M12.5 4 6.5 10l6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<div class="ib-toolbar-actions">
<button type="button" class="ib-icon-btn" id="ib-star-btn" aria-label="スター" aria-pressed="false">
<svg viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><path class="ib-star-path" d="M10 2.5l2.3 4.8 5.2.7-3.8 3.6.9 5.2L10 14.3l-4.6 2.5.9-5.2L2.5 8l5.2-.7z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
</button>
<button type="button" class="ib-btn" id="ib-archive-btn">アーカイブ</button>
</div>
</header>
<article class="ib-mail" id="ib-mail">
<h2 class="ib-subject" id="ib-subject"></h2>
<div class="ib-meta">
<span class="ib-avatar" id="ib-avatar"></span>
<div class="ib-meta-text"><span class="ib-from" id="ib-from"></span><span class="ib-time" id="ib-time"></span></div>
</div>
<div class="ib-body" id="ib-body"></div>
</article>
<div class="ib-empty" id="ib-empty" hidden>
<p class="ib-empty-title">受信トレイは空です</p>
<p class="ib-empty-sub">すべて処理済みです。おつかれさまでした。</p>
</div>
</section>
</div>