インセットグループリスト
iOS の設定画面の型。角丸の白いグループを灰色の地に浮かせ、セクション見出し・アイコン・値・シェブロン・トグルを行に並べる。トグルはその場で切り替わる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 「移動する行」は右端にシェブロン、「その場で変わる行」はトグルや値。押す前に何が起きるかを右端の形で示す
- グループの上に小さな見出し、下に補足の一文。設定の意味はグループ単位で説明し、行のラベルは短く保つ
- 区切り線はアイコンの右から始める。左端まで引くと行が分断されて見え、グループ感が薄れる
- 行の高さは 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>
</div>