インセットグループリスト
iOS の設定画面の型。角丸の白いグループを灰色の地に浮かせ、セクション見出し・アイコン・値・シェブロン・トグルを行に並べる。トグルはその場で切り替わる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- iOS 風の設定画面
- 「移動する行」と「その場で変わる行」を混ぜて並べる
- グループ単位で補足説明を添えたい設定
- 避ける場面
- 行ごとに説明文が長い設定
- PC の広い画面でそのまま使う
- 行数が多く見出し無しで並べる一覧
- 構成要素
- セクション見出し
- 白いグループ
- 行（アイコン＋ラベル）
- 値とシェブロン
- スイッチ
- 補足の一文
- 持っている状態
- 通常
- フォーカス
- 押下中
- 無効
- キーボード
Tab で戻るボタン・各スイッチ・各行ボタンへ順に移動。Space でスイッチ切替、Enter／Space で行を開く（見本では移動先をトーストで示す）
- 支援技術
input type=checkbox role=switch を label で包み行全体がタップ標的。主スイッチ OFF で下 2 行が disabled。行の移動先は role=status のトースト。アイコンとシェブロンは aria-hidden、戻るは aria-label
- 動き
つまみ 200ms ease-out・レール色 200ms。行押下は背景色の即時変化、トースト 200ms。reduced-motion で停止
デザインの要点
- 「移動する行」は右端にシェブロン、「その場で変わる行」はトグルや値。押す前に何が起きるかを右端の形で示す
- グループの上に小さな見出し、下に補足の一文。設定の意味はグループ単位で説明し、行のラベルは短く保つ
- 区切り線はアイコンの右から始める。左端まで引くと行が分断されて見え、グループ感が薄れる
- 行の高さは 44px 以上。トグルのタップ標的は行全体にし、label で包んで文字を押しても切り替わるようにする
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="igl-phone">
<header class="igl-head">
<button class="igl-back" type="button" aria-label="戻る">‹</button>
<h2 class="igl-title">通知</h2>
</header>
<div class="igl-scroll">
<p class="igl-section">通知の受け取り</p>
<div class="igl-group">
<label class="igl-row">
<span class="igl-icon igl-ic-red" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 6-3 7-3 7h18s-3-1-3-7"/><path d="M13.5 21a2 2 0 0 1-3 0"/></svg></span>
<span class="igl-label">通知を許可</span>
<span class="igl-switch"><input class="igl-input" type="checkbox" role="switch" checked><span class="igl-track"></span></span>
</label>
<label class="igl-row">
<span class="igl-icon igl-ic-blue" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 6h16M4 12h10M4 18h7"/></svg></span>
<span class="igl-label">ロック画面に表示</span>
<span class="igl-switch"><input class="igl-input" type="checkbox" role="switch" checked><span class="igl-track"></span></span>
</label>
<label class="igl-row">
<span class="igl-icon igl-ic-green" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M12 3v18M6 9v6M18 9v6"/></svg></span>
<span class="igl-label">サウンド</span>
<span class="igl-switch"><input class="igl-input" type="checkbox" role="switch"><span class="igl-track"></span></span>
</label>
</div>
<p class="igl-foot">ロック画面の表示をオフにすると、通知は通知センターにだけ残ります。</p>
<p class="igl-section">まとめて受け取る</p>
<div class="igl-group">
<button class="igl-row igl-row-btn" type="button">
<span class="igl-icon igl-ic-gray" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="12" cy="12" r="8"/><path d="M12 8v4l3 2"/></svg></span>
<span class="igl-label">配信時刻</span>
<span class="igl-value">8:00 / 18:00</span>
<span class="igl-chevron" aria-hidden="true">›</span>
</button>
<button class="igl-row igl-row-btn" type="button">
<span class="igl-icon igl-ic-orange" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span>
<span class="igl-label">対象のアプリ</span>
<span class="igl-value">12 個</span>
<span class="igl-chevron" aria-hidden="true">›</span>
</button>
</div>
<p class="igl-foot">選んだアプリの通知は、配信時刻にまとめて届きます。</p>
</div>
<p class="igl-toast" id="igl-toast" role="status" aria-live="polite"></p>
</div>