スイス・ミニマルデータテーブル

様式名: スイス・ミニマル / テーブル

テーブルデータグリッドサンセリフ余白

⧉ 別タブで開く

「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。

特徴 — なぜ効くか

罫線ではなく、余白・ゼブラ・字重で構造を作る。線で囲わずに読みやすい表になる
サンセリフ体で、階層は font-weight の差（400 vs 700）だけで作る。装飾は足さない
数値は右揃え＋等幅数字、テキストは左揃え。中央揃えにしない
色は白＋黒＋差し色1色に絞る。差し色は状態や強調の1点だけに使う
1950年代スイスの International Typographic Style 起源で、定義がほぼ変わらないまま70年以上現役

実装メモ — 踏んだ罠

border-collapse:collapse で土台を作り、罫線はヘッダ下の1本（太め）だけに絞る。tbody のセルには罫線を引かない
行の区切りは nth-child(even) のゼブラ（#f9f9f9 程度の淡さ）と、11px 前後の縦 padding で作る。線ではなく余白で分ける
数値列は text-align:right ＋ font-variant-numeric:tabular-nums。等幅数字にしないと桁が揃わず読み取りにくい
階層は font-weight だけで作る。ヘッダの小見出しは 10〜11px の大文字＋letter-spacing、本文は 13px の 400。サイズと太さの差だけで十分効く
【自分で実測した数値】ヘッダ小見出し #6b6b6b は白地で 5.33:1。ゼブラ地（#f9f9f9）に置くと下がるので、小見出しはヘッダ行（白地）だけに置き、ゼブラ地には黒本文（#1a1a1a、16.53:1）しか乗せない設計にした
差し色は白地で 5.88:1 の赤 #c8102e を1色だけ。状態『遅延』とリンクにのみ使い、多用しない

使いどころ / 使ってはいけない場面

使う: 数値・ステータスを正確に読ませたい表。ダッシュボード、レポート、価格表、比較表
使う: 情報が主役で、装飾を足したくないとき。余白そのものがデザインになる
避ける: 感情に訴えたいランディング。スイスは中立・機能的で、熱量は出ない
避ける: グリッドを敷けないほど不揃いなデータ。整列できないとスイスは成立せず、ただの手抜きミニマルに見える
避ける: 1画面に大量の列を詰めたいとき。余白を削ると様式の要が消える

壊れる条件

全セルに罫線を引く → 余白で分けるという思想が消え、事務書類・表計算の初期状態に見える（demo_bad.html の[1]）
すべて中央揃えにする → 数値の桁が揃わず読み取りにくく、左揃えの緊張感も失われる（demo_bad.html の[2]）
字重コントラストを消す（全部同じ太さ）→ 見出しと本文の階層が無くなり、構造が読めない（demo_bad.html の[3]）
グリッドに乗せずに要素を置く → 『白背景＋黒文字＋ゴシック』の3点だけでは成立しない。見えないグリッド線に揃っていないと素人っぽくなる
差し色を増やす／写真の彩度を上げる → 限定色の緊張感が濁って安っぽくなる
ステータスを色だけで示す（赤=遅延の丸だけ等）→ 色覚特性のある人に伝わらない。文字ラベルを併用する

コントラスト実測

対象	文字色	背景	実効背景	比	判定
本文（白地）	`#1a1a1a`	`#ffffff`	`#ffffff`	17.40:1	AA 合格
本文（ゼブラ偶数行）	`#1a1a1a`	`#f9f9f9`	`#f9f9f9`	16.53:1	AA 合格
ヘッダ小見出し（白地のヘッダ行のみ）	`#6b6b6b`	`#ffffff`	`#ffffff`	5.33:1	AA 合格
差し色・状態『遅延』／リンク（白地）	`#c8102e`	`#ffffff`	`#ffffff`	5.88:1	AA 合格
やりがちな失敗：小見出しをゼブラ地に置く	`#767676`	`#f9f9f9`	`#f9f9f9`	4.31:1	不合格

アクセシビリティ

状態は色だけで示さない。『遅延』の赤は文字ラベルと必ずセットにする（WCAG 1.4.1 色の使用）
リンクも色だけにしない。下線を付ける。限定色の様式は『差し色でリンクを示す』実装に流れやすく、ここを外しがち
th に scope 属性を付ける。見た目の整列だけでは、読み上げでどのセルがどの見出しに対応するか伝わらない
余白を活かすために本文を小さくしがちだが、13px を下回らない。可読性と拡大時（WCAG 1.4.4）の両方に効く

スマホへの落とし方

列が多い表は、狭い幅では横スクロールさせる（table を overflow-x:auto の親で包む）。無理に折り返すと桁の対応が壊れる
数値の右揃えと等幅数字は幅が変わっても維持する。SPで崩すと比較できなくなる
ゼブラは幅に依存しないので、SPでもそのまま行の区切りとして機能する

ブラウザ対応

border-collapse・nth-child・font-variant-numeric:tabular-nums はいずれも主要ブラウザで長く使える。※2026-07-22 時点、一次情報での再確認は未実施

関連するパーツ

コードを見る

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>スイス・ミニマル データテーブル デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1a1a1a;      /* 本文。白地で 17.40:1 */
  --sub:#6b6b6b;      /* ヘッダ小見出し。白地で 5.33:1。ゼブラ地には置かない */
  --accent:#c8102e;   /* 差し色は1色だけ。白地で 5.88:1 */
  --zebra:#f9f9f9;    /* 偶数行。本文（黒）しか乗せない */
  --line:#1a1a1a;
}
body{background:#fff;color:var(--ink);min-height:340px;padding:34px 30px;
  font-family:"Helvetica Neue","Arial",system-ui,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}

/* 字重コントラストで階層を作る（装飾しない）。400 と 700 の差だけ */
.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--sub);font-weight:700;margin-bottom:6px}
h2{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:2px}
.meta{font-size:12px;color:var(--sub);margin-bottom:22px}

table{width:100%;border-collapse:collapse;font-size:13px}
/* ヘッダ：小見出しは大文字＋トラッキング。境界はヘッダ下の1本の太線だけ */
thead th{text-align:left;font-size:10px;letter-spacing:.12em;color:var(--sub);
  font-weight:700;text-transform:uppercase;padding:0 16px 10px 0}
thead tr{border-bottom:2px solid var(--line)}
/* 数値は右揃え＋等幅数字。表組みの定石 */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
/* 行の区切りは罫線ではなく余白とゼブラで作る。罫線は引かない */
tbody td{padding:11px 16px 11px 0;font-weight:400}
tbody tr:nth-child(even){background:var(--zebra)}
.name{font-weight:700}
/* ステータスは色だけに頼らない。色＋文字ラベルを併用（WCAG 1.4.1） */
.stat{font-weight:700}
.stat.late{color:var(--accent)}
/* リンクも色だけにしない。下線を必ず付ける */
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
tfoot td{padding-top:14px;font-size:11px;color:var(--sub);font-weight:400}
</style></head><body>
<p class="eyebrow">Q2 REPORT</p>
<h2>案件別 進捗一覧</h2>
<p class="meta">2026年4月〜6月／全4件</p>

<table>
  <thead>
    <tr>
      <th scope="col">案件</th>
      <th scope="col">担当</th>
      <th scope="col" class="num">予算（万）</th>
      <th scope="col" class="num">進捗</th>
      <th scope="col">状態</th>
    </tr>
  </thead>
  <tbody>
    <tr><td class="name">ブランドサイト刷新</td><td>伊藤</td><td class="num">240</td><td class="num">92%</td><td><span class="stat">進行中</span></td></tr>
    <tr><td class="name">採用LP</td><td>佐藤</td><td class="num">88</td><td class="num">100%</td><td><span class="stat">完了</span></td></tr>
    <tr><td class="name">物流ダッシュボード</td><td>田中</td><td class="num">410</td><td class="num">64%</td><td><span class="stat late">遅延</span></td></tr>
    <tr><td class="name">EC 決済改修</td><td>伊藤</td><td class="num">150</td><td class="num">78%</td><td><span class="stat">進行中</span></td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="5">出典: 社内進捗管理（2026-06-30 時点）／ <a href="#">全案件を見る</a></td></tr>
  </tfoot>
</table>
</body></html>

出典・参考: 自作の再現実装。様式の5要素（グリッド・サンセリフ・非対称/左揃え・限定色・余白）は https://www.masterclass.com/articles/swiss-design および https://www.pixeldarts.com/en/post/swiss-style-web-design-a-comprehensive-guide （いずれも2026-07-21閲覧）に基づく。コントラスト値は当方で実測。