← Files AI Review SkillsARCHIVED FILE
skills/html/design-system/component-samples.html
11.7 KB · Oct 2, 2026 · 00:33 UTC
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML ドキュメントデザインシステム 部品見本</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Sans:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./document.css">
<script src="./math-copy.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
</head>
<body>
<div class="mb-page">
<div class="mb-hero">
<header class="mb-header">
<div>
<h1>HTML ドキュメントデザインシステム 部品見本</h1>
<p class="mb-meta-line">design-system / component samples</p>
</div>
</header>
<p class="mb-lede">
技術的な説明 HTML で使う視覚部品と、その用途を確認するための見本です。
</p>
<nav class="mb-toc">
<ol>
<li><a href="#tokens">設計トークン（色と字体）</a></li>
<li><a href="#headings">見出しと本文</a></li>
<li><a href="#cards">カードとグリッド</a></li>
<li><a href="#quote">引用</a></li>
<li><a href="#figure">図とコードと数式</a></li>
<li><a href="#reuse">再利用方法</a></li>
</ol>
</nav>
<div class="mb-summary">
<ul>
<li>背景はオフホワイト <code>#FAF9F6</code>、部品は白地 + 黒罫線 + 角丸で浮かせる</li>
<li>自然言語は Ubuntu Sans（日本語は Noto Sans JP に代替）、コードは UbuntuMono Nerd Font で統一する</li>
<li>有彩色はリンク青 <code>#2990DA</code> とアクセント赤 <code>#D63A2F</code> の2色のみ。赤は1ページに1箇所まで</li>
</ul>
</div>
</div><!-- /.mb-hero -->
<div class="mb-wrap">
<main class="mb-main">
<h2 id="tokens">設計トークン（色と字体）</h2>
<p>
色は CSS 変数として定義しています。
部品を追加するときも、直接の色指定ではなく変数を参照します。
</p>
<table>
<tr><th>変数</th><th>値</th><th>役割</th></tr>
<tr><td><code>--mb-bg</code></td><td><code>#FAF9F6</code></td><td>ページ背景（オフホワイト）</td></tr>
<tr><td><code>--mb-surface</code></td><td><code>#FFFFFF</code></td><td>カード・表などの面</td></tr>
<tr><td><code>--mb-ink</code></td><td><code>#111110</code></td><td>見出し・強調・罫線（黒）</td></tr>
<tr><td><code>--mb-ink-body</code></td><td><code>#1A1A1A</code></td><td>本文の文字色（墨色）</td></tr>
<tr><td><code>--mb-rule</code></td><td><code>#DFDFDF</code></td><td>構造だけを示す薄い罫線</td></tr>
<tr><td><code>--mb-muted</code></td><td><code>#595959</code></td><td>補助テキスト</td></tr>
<tr><td><code>--mb-faint</code></td><td><code>#A5A5A5</code></td><td>フッターなど最弱の文字</td></tr>
<tr><td><code>--mb-link</code></td><td><code>#2990DA</code></td><td>リンク・URL</td></tr>
<tr><td><code>--mb-accent</code></td><td><code>#D63A2F</code></td><td>最重要語の強調（1ページ1箇所まで）</td></tr>
</table>
<p>
表は短い対応関係の一覧に使います。セルに句点を含む文を書かず、文で説明したい内容は本文に置きます。
列は3列までを基本とし、長文になる列は最後に置きます。各行の見出しになるラベル列には
<code>.mb-rowlabel</code> を付けて折り返しを禁止します（「層1 座標系」が「座標/系」で割れる崩れを防ぎ、
残りの幅が本文列へ配分されます）。
</p>
<table>
<tr><th class="mb-rowlabel">ラベル列</th><th>内容</th></tr>
<tr><td class="mb-rowlabel">層1 座標系</td><td>ラベル列は mb-rowlabel で折り返されない</td></tr>
<tr><td class="mb-rowlabel">層2 フォント</td><td>本文列が残り幅を受け取る</td></tr>
</table>
<p>
字体は2系統だけです。自然言語（見出し・本文・補助テキスト）は
<span style="white-space: nowrap">Ubuntu Sans + Noto Sans JP</span>、
コード・URL・日付などのメタ情報は
<span style="white-space: nowrap">UbuntuMono Nerd Font（代替: Ubuntu Mono）</span>。
欧文と和文が混ざる本文では、欧文グリフが Ubuntu Sans、和文グリフが Noto Sans JP で描画されます。
</p>
<h2 id="headings">見出しと本文</h2>
<p>
h1 と h2 には左端の黒い縦棒が付きます。CSS が自動で付けるため
書き手は何も指定しません。h3 は縦棒なしの太字です。
</p>
<p>
本文中の強調は <strong>strong（黒の太字）</strong> を基本とし、ページ内で最重要の一語だけ
<em>em（アクセント赤）</em> を使えます。リンクは <a href="https://example.com/docs">example.com/docs</a> のように青になります。
</p>
<ul>
<li>箇条書きの行頭は黒丸（CSSが描画する。文字の ● は使わない）
<ul>
<li>入れ子は小さいグレーの丸になる</li>
</ul>
</li>
<li>チップは <span class="mb-chip">検索</span> <span class="mb-chip">生成</span> <span class="mb-chip">評価</span> のような並列の分類名の列挙にだけ使う</li>
</ul>
<h2 id="cards">カードとグリッド</h2>
<p>
カードは白地 + 黒罫線 + 角丸です。中央揃えのタイトル帯を持つ「タイトル付きカード」と、
左上に小ラベルを置く「ラベル付きカード」の2形があります。並べるときはグリッドで高さを揃えます。
</p>
<div class="mb-grid-2">
<div class="mb-card">
<div class="mb-card-title">タイトル付きカード</div>
<p>比較対象の名称をタイトル帯へ置き、本文との境界を水平罫線で示します。</p>
</div>
<div class="mb-card">
<div class="mb-card-label">ラベル付きカード</div>
<p>「前提」「結果」のような短い欄見出しを左上へ置く形です。</p>
</div>
</div>
<h2 id="quote">引用</h2>
<p>
外部の発言・文書の引用は引用カードに入れます。原文と日本語訳は同じカード内で上下に並べ、
間をグレーの罫線で区切ります。訳の文字サイズ・色は原文と同一にします（訳だけ小さくする・薄くするのは禁止）。
出所はカード末尾に等幅で書きます。
</p>
<blockquote class="mb-quote">
<p class="mb-quote-original">
Early versions of Claude Code used RAG + a local vector db, but we found pretty quickly
that agentic search generally works better.
</p>
<p class="mb-quote-ja">
Claude Code の初期バージョンでは RAG とローカルのベクトルDBを使っていたが、
エージェンティック検索の方が概ね優れていることにすぐ気づいた。
</p>
<p class="mb-quote-source"><a href="https://x.com/bcherny/status/2017824286489383315">x.com/bcherny/status/2017824286489383315</a></p>
</blockquote>
<h2 id="figure">図とコードと数式</h2>
<p>
<code>.mb-figure</code> は、画像や SVG とキャプションを一つにまとめる外枠です。
内部の図の種類を表すコンポーネントではありません。
<code>.mb-figure-frame</code> は視覚資料の表示面、<code>figcaption</code> は図番号・説明・出所に使います。
</p>
<p>
自作の説明図はインライン SVG で、黒一色の線画を基本とします。
矢印でつながった箱は、ここで示す図の一例にすぎません。
</p>
<figure class="mb-figure">
<div class="mb-figure-frame">
<svg viewBox="0 0 560 120" width="560">
<g fill="none" stroke="#111110" stroke-width="2">
<rect x="10" y="35" width="130" height="50" rx="10"/>
<rect x="215" y="35" width="130" height="50" rx="10"/>
<rect x="420" y="35" width="130" height="50" rx="10"/>
<line x1="140" y1="60" x2="215" y2="60"/>
<line x1="345" y1="60" x2="420" y2="60"/>
<path d="M207 55 L215 60 L207 65 Z" fill="#111110" stroke="none"/>
<path d="M412 55 L420 60 L412 65 Z" fill="#111110" stroke="none"/>
</g>
<g font-family="Ubuntu Sans, Noto Sans JP, sans-serif" font-size="15" fill="#111110" text-anchor="middle">
<text x="75" y="65">原稿</text>
<text x="280" y="65">共有CSS</text>
<text x="485" y="65">HTML文書</text>
</g>
</svg>
</div>
<figcaption>fig.1 デザインの一貫性を担保する流れ</figcaption>
</figure>
<p>
コードブロックは白カードの中に等幅で置き、Highlight.js で言語に応じたシンタックスハイライトを適用します。
<code>language-html</code> のように言語を明示します。
</p>
<pre><code class="language-html"><link rel="stylesheet" href="./design-system/document.css"></code></pre>
<p>
コード差分は生の差分を貼らず、変更を論理順の散文で説明しながらコード断片を埋め込みます。
表現は GitHub と同じ慣習（追加 = 緑の淡背景 + 行頭の <code>+</code>、削除 = 赤の淡背景 + 行頭の <code>-</code>）です。
この緑・赤は差分部品に限って許される機能色で、本文の装飾には使えません。
</p>
<pre class="mb-diff"><code class="nohighlight"><span class="ctx">.mb-quote-ja {</span>
<span class="del"> font-size: 14.5px;</span>
<span class="add"> border-top: var(--mb-border-w) solid var(--mb-rule);</span>
<span class="ctx">}</span></code></pre>
<p>
数式は MathJax で描画します。書体は MathJax の既定に任せます。
インラインは $p(w_t \mid w_{<t})$ のように、ディスプレイは次のように書きます。
</p>
<p>$$ \mathrm{softmax}(z)_i = \frac{\exp(z_i)}{\sum_j \exp(z_j)} $$</p>
<h2 id="reuse">再利用方法</h2>
<p>
成果物と同じ場所へ <code>design-system</code> ディレクトリを配置し、
head から CSS、数式コピー用 JavaScript、MathJax、Highlight.js の順に読み込みます。
</p>
<pre><code class="language-html"><link rel="stylesheet" href="./design-system/document.css">
<script src="./design-system/math-copy.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script></code></pre>
</main><!-- /.mb-main -->
<aside class="mb-glossary" aria-labelledby="glossary-title">
<h2 id="glossary-title">用語リスト</h2>
<dl>
<dt>設計トークン</dt>
<dd>色・字体・余白などのデザイン上の決定を、名前を付けた変数として定義したもの。</dd>
<dt>オフホワイト</dt>
<dd>純白よりわずかに暖色寄りの背景色。本システムでは #FAF9F6。</dd>
<dt>カード</dt>
<dd>白地・黒罫線・角丸で本文から浮かせた矩形の部品。</dd>
<dt>チップ</dt>
<dd>角丸の枠で囲んだ小さなラベル。並列の固有名の列挙に使う。</dd>
<dt>等幅フォント</dt>
<dd>全文字が同じ幅を持つ字体。コード・URL・日付などのメタ情報に使う。</dd>
<dt>MathJax</dt>
<dd>ブラウザ上で数式を組版するJavaScriptライブラリ。</dd>
<dt>読みやすい差分</dt>
<dd>変更を論理順の散文に並べ替え、コード断片を埋め込んだ差分の提示形式。literate diff の訳。</dd>
</dl>
</aside>
</div><!-- /.mb-wrap -->
<footer class="mb-footer">HTML Document Design System</footer>
</div>
<script>hljs.highlightAll();</script>
</body>
</html>
SHA-256: 47745e2bfcb7942eafe28e61fbed26c5b387d37e7595ac74594bb90a2155977b