Kumiki Web版語彙集

バージョン: v0
セマンティック HTML に data-as 固定語彙を与え、CSS ゼロでも意味が通るコーポレートサイトの構造を生成するための語彙集。一語の data-as 指示で定型セクションの DOM 骨格を立てる。

設計原則

コンテンツとプレゼンテーションの分離 — タグ名はコンテンツの意味構造を表し、塊の指定は data-as 属性で行う。
フォールバックファースト — CSS を外しても、HTML のセマンティクスだけでコンテンツが読める。各語は素の HTML がそのままワイヤーフレームになる骨格だけを持つ。
固定語彙 — ジャンル語彙（定型セクション・20語）＋形態語彙（エスケープハッチ・7語）の二層。業種ごとの中身の違いは語彙を増やさず、同じ骨格の連続変形として吸収する。
標準 HTML 準拠 — ブラウザの DOMParser でパースできる正しい HTML。
装飾を持たない — 視線誘導の線・矢印・背景などの装飾は語彙に含めない。出力は構造のみ。

記法の約束

ページは器を宣言する：<body data-canvas="...">。多カラム時の配置は data-slot（省略時 main）。
ジャンルはセクション単位。data-as は意味的に妥当な HTML 要素に与える（タグ＝HTML 意味、data-as＝塊）。
1要素に data-as は1つ。コンテンツは必ずテキストノードとして表現し、属性値には入れない。
見出しレベル：ページの h1 は hero が持つ。各ジャンルセクションは h2 から始める。
min-width 契約：各語は 320px で成立する骨格を既定とする。配置可否＝スロット幅 ≥ コンポーネント min-width。広い幅を要する横並び表現は v0 キャンバス（mobile-only）では使わず、縦積みの骨格を出す。
DOM 骨格は最小形。実コンテンツでの要素の繰り返し・省略は自由（骨格の意味構造を保つ限り）。
勝手な新語彙・無意味ラッパーを作らない。語彙に無いものは形態語彙（callout / table / card / grid / banner / list / media）で受ける。

1. キャンバスとスロット

`data-canvas` — ページの器（`<body>` に1つ）

<body data-canvas="mobile-only">

コンテンツ全体をどの器に流すかの宣言。要素の語彙とは別軸で、ページに1つ。v0 で生成に使う値は mobile-only。

value	中身	スロット
`mobile-only`	モバイル幅の構えを保つ流動1カラム・中央寄せ（ビューポートに追従、上限 ~640px で頭打ち。PC 向けの再配置はしない。ワイドでは両脇が余白になり rail が現れる）	`main` / `rail`

`data-slot` — どのスロットに置くか（`<body>` 直下のセクションに付く）

省略時は main。本文セクションは data-slot を書かなくてよい。
rail を使うときだけ data-slot="rail" を明示する。
DOM 順は意味の順：main を先、補助（rail）を後に書く。CSS を外せば1本の意味の流れに戻る。

`rail` — ワイド時のみ現れる脇スロット

<body data-canvas="mobile-only">
  <main>…（ジャンルセクションの列）…</main>
  <aside data-slot="rail">
    <nav aria-label="目次"><ul><li><a href="#...">…</a></li></ul></nav>
  </aside>
</body>

存在は条件付き：ワイド画面でのみ表示。狭幅では非表示。
rail 無しでページが完結すること。main だけ読んだ人が困る情報は rail に置かない。再掲（目次・ナビ）やワイド限定の告知のみ。

2. ジャンル語彙（本体・20語）

コーポレートサイトの定型セクション。一語で中身も形態も復元できる。本体20語だけで普通のコーポレートサイトが一本立つ。各語は min-width 320 の縦積み骨格を既定とする。

global-nav — グローバルナビゲーション min-width: 320

サイト全体の主要ページへの導線。ハンバーガー開閉を details/summary で持つ（純CSS・JS ゼロ。CSS を外してもネイティブの開閉として通る）。data-as は nav に付け、details は開閉機構。

<nav data-as="global-nav" aria-label="メイン">
  <details>
    <summary>メニュー</summary>
    <ul>
      <li><a href="...">サービス</a></li>
      <li><a href="...">会社概要</a></li>
    </ul>
  </details>
</nav>

hero — ファーストビュー min-width: 320

ページ冒頭の主張。h1 の唯一の置き場。DOM は主張＋導線のみ。

<header data-as="hero">
  <h1>キャッチコピー</h1>
  <p>サブコピー</p>
  <p><a href="...">主要CTA</a></p>
</header>

company-profile — 会社概要 min-width: 320

会社の基本情報。定義リストが正典。

<section data-as="company-profile">
  <h2>会社概要</h2>
  <dl>
    <dt>社名</dt><dd>...</dd>
    <dt>設立</dt><dd>...</dd>
    <dt>資本金</dt><dd>...</dd>
    <dt>代表者</dt><dd>...</dd>
  </dl>
</section>

team-members — スタッフ/メンバー紹介 min-width: 320

人の一覧。1カラム縦積み。

<section data-as="team-members">
  <h2>メンバー</h2>
  <ul>
    <li>
      <figure><img src="..." alt="氏名"></figure>
      <h3>氏名 <small>役職</small></h3>
      <p>紹介文</p>
    </li>
  </ul>
</section>

service-list — 事業/サービス一覧 min-width: 320

各項目に図版が付く場合は li 内に figure を足す。

<section data-as="service-list">
  <h2>サービス</h2>
  <ul>
    <li>
      <h3>サービス名</h3>
      <p>説明</p>
    </li>
  </ul>
</section>

pricing — 料金 min-width: 320

プランの縦積み。単一料金の場合は dl/table 形態に降りてよい。横並び比較表は mobile-only では使わない。

<section data-as="pricing">
  <h2>料金</h2>
  <ul>
    <li>
      <h3>プラン名</h3>
      <p><data value="30000">月額 30,000円</data></p>
      <ul>
        <li>含まれるもの</li>
      </ul>
    </li>
  </ul>
</section>

faq — よくある質問 min-width: 320

問いと答えの対。dl が正典。

<section data-as="faq">
  <h2>よくある質問</h2>
  <dl>
    <dt>質問文</dt>
    <dd>回答文</dd>
  </dl>
</section>

news — お知らせ min-width: 320

日付つきの更新一覧。

<section data-as="news">
  <h2>お知らせ</h2>
  <ul>
    <li>
      <time datetime="2026-06-01">2026.06.01</time>
      <a href="...">記事タイトル</a>
    </li>
  </ul>
</section>

history — 沿革 min-width: 320

年表。dl が正典。

<section data-as="history">
  <h2>沿革</h2>
  <dl>
    <dt><time datetime="2010">2010年</time></dt>
    <dd>出来事</dd>
  </dl>
</section>

access — アクセス min-width: 320

所在地と来訪手段。地図は静止画。

<section data-as="access">
  <h2>アクセス</h2>
  <address>住所</address>
  <p>最寄駅・道順</p>
  <figure data-as="media"><img src="..." alt="地図"></figure>
</section>

contact — お問い合わせ min-width: 320

問い合わせフォームの構造。

<section data-as="contact">
  <h2>お問い合わせ</h2>
  <form>
    <p><label>お名前 <input type="text" name="name" required></label></p>
    <p><label>メール <input type="email" name="email" required></label></p>
    <p><label>内容 <textarea name="message" required></textarea></label></p>
    <p><button type="submit">送信</button></p>
  </form>
</section>

recruit — 採用（募集要項の塊） min-width: 320

<section data-as="recruit">
  <h2>採用情報</h2>
  <dl>
    <dt>募集職種</dt><dd>...</dd>
    <dt>勤務地</dt><dd>...</dd>
    <dt>給与</dt><dd>...</dd>
  </dl>
  <p><a href="...">応募する</a></p>
</section>

cta — CTA帯 min-width: 320

ページ内に挟まる行動喚起の帯。

<aside data-as="cta">
  <p>誘い文句</p>
  <p><a href="...">行動（資料請求 / 友だち登録 など）</a></p>
</aside>

testimonial — お客様の声 min-width: 320

<section data-as="testimonial">
  <h2>お客様の声</h2>
  <ul>
    <li>
      <blockquote><p>引用文</p></blockquote>
      <p><cite>氏名・属性</cite></p>
    </li>
  </ul>
</section>

case-study — 導入事例/実績 min-width: 320

図版つきの場合は article 内に figure。

<section data-as="case-study">
  <h2>導入事例</h2>
  <article>
    <h3>事例タイトル</h3>
    <p>課題 → 施策 → 結果の要約</p>
  </article>
</section>

feature — 特徴 min-width: 320

「選ばれる理由」「3つの強み」型。順序が意味を持つなら ol。

<section data-as="feature">
  <h2>特徴</h2>
  <ul>
    <li>
      <h3>特徴の見出し</h3>
      <p>説明</p>
    </li>
  </ul>
</section>

flow — 利用の流れ min-width: 320

手順。順序が意味を持つので ol が正典。

<section data-as="flow">
  <h2>ご利用の流れ</h2>
  <ol>
    <li>
      <h3>ステップ名</h3>
      <p>説明</p>
    </li>
  </ol>
</section>

message — 代表メッセージ min-width: 320

<section data-as="message">
  <h2>代表メッセージ</h2>
  <figure><img src="..." alt="代表者"></figure>
  <p>本文</p>
  <p>代表取締役 氏名</p>
</section>

legal — 法定系 min-width: 320

プライバシーポリシー・特定商取引法表記。特商法表記は dl（販売業者/責任者/所在地…）の亜流。

<section data-as="legal">
  <h2>プライバシーポリシー</h2>
  <section>
    <h3>条項見出し</h3>
    <p>本文</p>
  </section>
</section>

<footer data-as="footer-info">
  <address>社名・住所・連絡先</address>
  <nav aria-label="フッタ">
    <ul>
      <li><a href="...">プライバシーポリシー</a></li>
    </ul>
  </nav>
  <p><small>© 2026 社名</small></p>
</footer>

3. 形態語彙（エスケープハッチ・7語）

ジャンルに収まらないコンテンツに、見た目の塊を直接指定する。タグの意味は内容に応じて選ぶ。

語	塊	正典タグの目安	min-width
`callout`	囲み・注意・補足	`aside`	320
`table`	行×列の対照	`table`（caption必須）	内容による。広いものは mobile-only では使わない
`card`	自立した小単位（タイトル＋本文±図版）	`article`	320
`grid`	card 等の格子配置	`ul > li`	320（mobile-only では縦積み）
`banner`	帯状の告知	`aside`	320
`list`	素の列挙	`ul` / `ol`	320
`media`	図版＋テキストの対	`figure` + `figcaption` または img+p	320

4. 装飾は語彙に含めない

視線誘導のつなぎ線・矢印・両脇背景などの装飾パーツは語彙に含めない。生成する HTML は構造のみとし、装飾は持たせない。ワイド時の両脇背景はキャンバスの CSS（body の背景）で実現するため、専用ノードを生成しない。

5. 最小ドキュメント例

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>...</title></head>
<body data-canvas="mobile-only">

  <nav data-as="global-nav" aria-label="メイン">
    <details>
      <summary>メニュー</summary>
      <ul>
        <li><a href="#service">サービス</a></li>
        <li><a href="#company">会社概要</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </details>
  </nav>

  <header data-as="hero">
    <h1>あなたの事業を、次の一歩へ。</h1>
    <p>中小企業のためのDX支援</p>
    <p><a href="#contact">無料で相談する</a></p>
  </header>

  <section data-as="service-list" id="service">
    <h2>サービス</h2>
    <ul>
      <li><h3>業務システム開発</h3><p>現場に合わせた業務システムを構築します。</p></li>
      <li><h3>DXコンサルティング</h3><p>課題の整理から導入まで伴走します。</p></li>
    </ul>
  </section>

  <section data-as="company-profile" id="company">
    <h2>会社概要</h2>
    <dl>
      <dt>社名</dt><dd>株式会社サンプル</dd>
      <dt>設立</dt><dd>2018年4月</dd>
      <dt>代表者</dt><dd>山田 太郎</dd>
    </dl>
  </section>

  <section data-as="contact" id="contact">
    <h2>お問い合わせ</h2>
    <form>
      <p><label>お名前 <input type="text" name="name" required></label></p>
      <p><label>メール <input type="email" name="email" required></label></p>
      <p><label>内容 <textarea name="message" required></textarea></label></p>
      <p><button type="submit">送信</button></p>
    </form>
  </section>

  <footer data-as="footer-info">
    <address>株式会社サンプル</address>
    <p><small>© 2026 株式会社サンプル</small></p>
  </footer>

</body>
</html>

6. テーマ（色・フォント）── HTML から上書きする API

生成する HTML 自体は構造のみだが、kumiki-web.css は色とフォントだけを CSS カスタムプロパティの公開 API として持つ。案件側で素の :root に再設定すれば、HTML を変えずにサイト全体のトーンを差し替えられる（既定は @layer kumiki 内にあるため、案件側のレイヤー外 :root がソース順に依らず必ず勝つ）。余白・角丸など他の見た目は [data-as="…"] セレクタで直接上書きする。

変数	役割	既定
`--primary`	主要色（見出し・CTA 塗り・強調）	コア（設定起点）
`--accent`	差し色（リンク・装飾・淡帯の素）	コア
`--text`	本文文字色	コア
`--bg`	背景色	コア
`--muted`	補助文字	`color-mix(--text 55%, --bg)`（上書き可）
`--rule`	罫線・ハードライン	`color-mix(--text 16%, --bg)`（上書き可）
`--accent-soft`	淡い帯（cta/callout/banner）	`color-mix(--accent 12%, --bg)`（上書き可）
`--surface`	カード・入力の面	`#fff`（上書き可）
`--primary-contrast`	`--primary` 塗り上の文字色	`#fff`（上書き可）
`--font`	本文フォント	system UI スタック
`--font-heading`	見出しフォント	`var(--font)`

--primary / --accent / --text / --bg のコア4色を決めれば、派生（muted/rule/accent-soft）は自動追従する。個別に微調整したいものだけ上書きする。

<style>
  :root {
    --primary: #0b3d2e;
    --accent:  #c9962f;
    --text:    #1d1d1b;
    --bg:      #fbf7ee;
    --font-heading: 'Shippori Mincho', serif;
  }
</style>

7. 語彙の拡張（本体で足りないとき）

本体20語＋形態7語は普通のコーポレートサイトが一本立つよう閉じている。足りないと感じても、まず拡張せずに次を試す:

本体ジャンルの連続変形で吸う。業種ごとの中身の違い（医師/エンジニア、士業/飲食…）は語彙を増やさず、同じ骨格の変形と AI の曖昧性吸収で受ける。
形態語彙へ降りる。ジャンルに無い塊は callout / table / card / grid / banner / list / media で受ける。大半はここで足りる。

勝手な新 data-as 名・無意味なラッパーは作らない。これらで受けられず、同種の「降り」が繰り返し発生する塊だけが拡張候補になる。

拡張するときに必ず満たす条件

新コンポーネントも本体語彙とまったく同じ不変条件・記法に従う（卒業＝ data-as→FLOCSS に乗るため）:

1要素1 data-as。名前は FLOCSS Component 名（c-*）と1対1で切れること。
fallback-first。CSS ゼロでも意味が通る最小セマンティック DOM だけを持つ（見出し・リスト・定義リストを正直に使う）。
min-width 320 で成立する1カラム縦積み骨格を既定にする。
本体語彙と同じ書式（想定 DOM ＋ min-width ＋メモ）で定義する。

どの層に置くか

層	性質	足すもの
本体	普遍・閉じる	足さない（迷ったら本体に寄せるが、新語は安易に作らない）
拡張レイヤー	業種で育てる・再利用	業種横断で繰り返し要る塊（例：飲食のメニュー、士業の取扱業務）
サイト固有	使い捨て	その案件限りの一点もの

拡張レイヤーで定番化した語は、のちに本体語彙の候補として昇格しうる。

Kumiki Web版 語彙集