NIPPONIA DESIGN.md

このファイルはAIエージェントが正確な日本語UIを生成するためのデザイン仕様書です。 セクションヘッダーは英語、値の説明は日本語で記述しています。 実測日: 2026-10-13 / 対象: https://team.nipponia.or.jp/, /about/

1. Visual Theme & Atmosphere

• デザイン方針: 約物だけをサブセットフォントで詰め、letter-spacing には一切触らない。 古民家再生ブランドの組織サイト。ゴシック（本文）と明朝（理念の言葉）の二層を、YakuHanJP / YakuHanMP という「約物専用フォント」で揃える
• 密度: 低い。トップは深い紺地（#080822）に写真と縦の大見出しを置き、下層は白地で 1 カラムの読み物になる
• キーワード: 紺地、YakuHan、約物詰め、明朝の理念、MyFonts の欧文

このサイトの核心は 4 つある。

1. letter-spacing を書かない。 実測でトップ 205/208 要素、下層 170/173 要素が normal。例外はバナーのアイキャッチ（0.22em / 0.18em）など CSS 全文で 9 宣言だけ。字間は「組まない」のが既定
2. font-feature-settings: "palt" は 1 要素も使っていない（実測 0 件）。代わりに YakuHanJP / YakuHanMP（約物だけを収録したサブセットフォント）をスタックの先頭に置き、句読点・括弧だけを半角幅に詰める。palt と違い、仮名漢字の字送りは一切変わらない
3. html { font-size: 62.5%; line-height: 1 }。 無単位の 1 が全要素に降りるため、行間を宣言し忘れた要素は行が潰れる（実測 比率 1.00 がトップ 107 要素）。本文ブロックは必ず line-height を書く
4. ヒーローの縦組み大見出しは SVG スプライト（<use xlink:href="#icon-top-copy">、154×490px）。テキストではない。 本物の writing-mode: vertical-rl は右端の「お問い合わせ」タブ（幅 40px）と「私たちの想い」アンカーだけ

CSS Custom Properties は自社トークン 8 個のみ（残り 60 個は WordPress / Gutenberg の preset）。うち色の 4 個（--rte-gold --rte-gold-hover --rte-line --rte-wash）はトップ・ブログ記事の両方で可視 0 要素。 宣言はあるが描画されていない。

2. Color Palette & Roles

Primary（ブランドカラー）

下層ページの地色は紺ではなく白。 body.home にだけ #080822 が当たる設計で、/about/ 以下は #ffffff。 pageBackground.resolved はトップでヒーロー（div.TopSlideBgImg）に覆われるため、heroCover.note の「body: rgb(8,8,34) が本来のページ背景」を採る。

宣言はあるが使われていない色（Don't）

css/* :root に宣言されているが、トップ・ブログ記事とも可視 0 要素 */
--rte-gold:       #9a6412;
--rte-gold-hover: #c8892f;
--rte-line:       #e8e0d2;
--rte-wash:       #faf5ec;

この 4 色を「ブランドカラー」として実装しない。 リッチテキスト（記事本文）用に用意されたまま、実測した 2 ページでは一度も描画されていない。

Neutral（ニュートラル）

• Text Primary (#111111): 見出し・リンク（可視 59 要素）
• Text Body (#333333): 本文（トップ 13 要素 / 下層 39 要素）
• Text on Navy (#ffffff): 紺地の上のテキスト（トップ 40 要素 / 下層 82 要素）
• Text Muted (#aaaaaa): 日付・カテゴリ（可視 46 要素）。PAGE TOP ボタンの面色でもある
• Text Muted 2 (#999999): サブメニュー項目（可視 20 要素）
• Text Caption (#666666): 人物の肩書き（可視 6 要素）
• Surface Card (#eceef1): メディア掲載カードの面（可視 40 要素）
• Surface Gray (#f6f6f6 / #e6e6e6 / #f3f3f3): 下層の面（各 9 / 4 / 7 要素）
• Surface Cream (#fbf8f1): 下層の「株式会社NOTE」告知バナーの面（1 要素）
• Border Cream (#d9d0bd): 同バナーの枠（1px solid）
• Background（トップ） (#080822) / Background（下層） (#ffffff)

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文・UI）: Noto Sans JP（Google Fonts、400 700 の可変レンジ）。約物は YakuHanJP（400 / 500 / 700 が loaded）
• 明朝体（理念・見出し）: Noto Serif JP（300 500 の可変レンジ）。約物は YakuHanMP（400 / 500 が loaded、下層では 300 も loaded）

明朝に 700 は存在しない。 Noto Serif JP の宣言が 300 500、YakuHanMP の 700 は unloaded。明朝へ font-weight: 700 を当てるとブラウザの合成太字になる。

3.2 欧文フォント

• CarreNoirPro-Medium（MyFonts 配信、loaded）: NIPPONIA Sites Pick up About us LANDSCAPE などの欧文見出し専用（トップ・下層とも 10 要素）。CSS に @import url("//hello.myfonts.net/count/380055") がある
• 本文中の欧文は和文スタック内の "Helvetica Neue", Helvetica, Arial に任せる

3.3 font-family 指定

css/* 本文・UI（ゴシック） */
font-family: YakuHanJP, "Noto Sans JP", "Helvetica Neue", Helvetica, Arial,
             游ゴシック体, "Yu Gothic", YuGothic,
             "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
             メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

/* 理念・引用（明朝） */
font-family: YakuHanMP, "Noto Serif JP", Georgia,
             游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;

/* 欧文見出し */
font-family: CarreNoirPro-Medium;

フォールバックの考え方:

• 先頭の YakuHanJP / YakuHanMP は書体ではなく「約物だけのサブセット」。 句読点・括弧・中黒のみを収録しているので、仮名漢字は次の Noto Sans JP / Noto Serif JP が受ける。この順序を崩すと約物詰めが消える
• Georgia は明朝スタックの 3 番目にあるが欧文専用書体なので、和文は後続の游明朝まで通る。generic family（serif）は末尾だけ
• 游ゴシックの Medium 指定が無い。 游ゴシック体, "Yu Gothic", YuGothic の順で、Windows で Light に当たりうる。ただし Noto Sans JP が loaded なので実際には到達しない。Web フォントを外す改変をするなら "游ゴシック Medium" を足すこと

3.4 文字サイズ・ウェイト階層

ルートは html { font-size: 62.5% } = 10px、body { font-size: 1.4rem } = 14px。6 幅（1440 / 1200 / 834 / 768 / 767 / 375px）すべてで 10px / 14px から動かない（流体ではない）。

ウェイトは 300 / 400 / 500 / 700 の 4 段。 実測は 400（トップ 127 / 下層 126）・500（62 / 19）・700（19 / 21）・300（下層のみ 7）。300 は明朝にだけ当たる。

3.5 行間・字間

• 本文の行間: 1.75（14px / 24.5px）。下層の長文は 1.65（16px）
• 見出しの行間: 1.40（36px の明朝見出し）、1.45（20px）
• カードの行間: 1.30（実測 36 要素）
• 字間: normal が既定。トップ 205/208 要素、下層 170/173 要素。 CSS 全文でも letter-spacing の宣言は 9 件しかない

css/* CSS 全文にある letter-spacing 宣言（これで全部） */
.BtnSns              { letter-spacing: 0.1em; }   /* 別ブレークポイントで 0.05em */
.ProjectTitle        { letter-spacing: -0.01em; }
.RTE .RTELink__badge { letter-spacing: 0.06em; }
.AkariBanner__eyebrow{ letter-spacing: 0.22em; }  /* 別ブレークポイントで 0.18em */
.AkariBanner__copy   { letter-spacing: 0.03em; }
.AkariBanner__cta    { letter-spacing: 0.08em; }
.MapGuard__hint      { letter-spacing: 0.06em; }

ガイドライン:

• 本文・見出しに letter-spacing を足さない。 約物詰めは YakuHanJP / YakuHanMP が担当しており、ここに字間を足すと「詰めてから空ける」二重の操作になる
• line-height は必ず要素ごとに宣言する。 html { line-height: 1 } が降りてくるため、宣言し忘れた本文は行が潰れる（実測 比率 1.00 が 107 要素）
• 比率は 無単位で書く。1.0em のような絶対値にすると子要素まで巻き込む

3.6 禁則処理・改行ルール

css/* 実サイトの宣言（4 件のみ） */
.PublishSlideItem__noimg { word-break: break-word; }
.screen-reader-text      { word-break: normal !important; }

• word-break: auto-phrase は使っていない。 改行位置はブラウザ既定に任せている
• overflow-wrap / line-break の宣言も無い。長い URL を置く場合は自前で overflow-wrap: break-word を足すこと

3.7 OpenType 機能

css/* このサイトは font-feature-settings を一切書かない（実測 0 件） */

• palt も halt も使わない。 約物詰めは YakuHanJP / YakuHanMP をスタック先頭に置くことで実現している
• palt と YakuHan は別物。 palt は全文字の字送りを詰めるが、YakuHan は約物（、。「」（）・）だけを半角幅に置き換える。仮名漢字の間隔は変わらない
• 再現するときは YakuHan をスタックに入れる。palt で代用すると本文全体が詰まって別物になる

3.8 縦書き

css/* 右端の固定タブ（実測 幅 40px） */
.SubMenuContact__inner { writing-mode: vertical-rl; line-height: 40px; }
.SubMenuContact__primary   { font-size: 14px; }  /* お問い合わせ */
.SubMenuContact__secondary { font-size: 10px; }  /* 視察・求人・物件 */

• 本物の縦組みは 6 要素だけ（うち 2 件はアイコンの <svg> / <use>）。右端の固定タブと、サブメニューの 私たちの想い（12px、12×72px）
• ヒーローの大きな縦組みコピーは実装ではない。 .TopSlideCopy__inner > svg > use[xlink:href="#icon-top-copy"] ＝ SVG スプライトのアウトライン（<text> 要素は 0 個、<path> も 0 個）。ここを writing-mode で再現しようとしない
• 縦組みの letter-spacing は normal、line-height は 40px の絶対値

4. Component Stylings

Buttons

Primary（お問い合わせ）

• Background: #8a001a
• Text: #ffffff / 12px / weight 400
• Line Height: 24px
• Padding: 0 14px
• Border Radius: 12px（高さの半分＝ピル）
• Border: none

Secondary（下層の告知バナー）

• Background: #fbf8f1
• Text: #000000 / 14px / weight 400
• Border: 1px solid #d9d0bd
• Padding: 26px 40px
• Border Radius: 0

Page Top

• Background: #aaaaaa
• Text: #000000 / Arial 13.33px
• Border Radius: 0

Badges / Chips

Tag（分類タグ）

• Background: rgba(153,153,153,0.6)（半透明。写真の上に重ねる前提）
• Text: #ffffff / 10px / weight 400
• Line Height: 17px
• Padding: 0 7px
• Border Radius: 9px

Cards

Media Card（メディア掲載）

• Background: #eceef1
• Border Radius: 3px（実測 40 要素で最多の角丸）
• Text: #7c828c / 13.5px

Floating Banner（AKARI SUPPORTER）

• Background: rgba(17,16,22,0.62)（ガラス調）
• Border: 1px solid rgba(255,255,255,0.16)
• Border Radius: 14px
• Shadow: rgba(0,0,0,0.42) 0 14px 36px（サイト唯一の影）

Inputs

• 実測した 2 ページに入力欄が無い。新規実装では Tag の radius: 9px と Primary の radius: 12px に合わせる

5. Layout Principles

Spacing Scale

ルートが 10px なので **rem の値がそのまま「px ÷ 10」**になる。実測で使われている横余白:

Container

• Max Width: 1440px（実測 11 要素）。補助的に 1066px が 1 要素
• Padding (horizontal): 80px（デスクトップ）
• コンテンツ幅の実測値: 1280px（1440 − 80×2）

Grid

• トップのプロジェクト一覧・メディア掲載カードとも gap の宣言は無く、マージンで組んでいる

6. Depth & Elevation

影は実測 1 種類 1 要素しかない。 カード・ボタン・ナビはすべてフラット。影で階層を作らず、紺地（#080822）と白地の面の切り替えで区切る設計。

7. Do's and Don'ts

Do（推奨）

• YakuHanJP / YakuHanMP をスタックの先頭に置く。 約物詰めはこれが全部
• line-height を要素ごとに必ず宣言する（html { line-height: 1 } が降りてくる）。無単位で書く
• 明朝（Noto Serif JP）は理念・引用の言葉にだけ使う。 ウェイトは 300 / 400 / 500
• 欧文の見出しは CarreNoirPro-Medium。和文と混ぜず、独立した行に置く
• トップは #080822、下層は #ffffff。ページ種別で地色を切り替える
• 角丸は 3px（カード）/ 9px（タグ）/ 12px（ボタン）/ 14px（バナー） の 4 値から選ぶ

Don't（禁止）

• font-feature-settings: "palt" を足さない。 このサイトは 0 件。YakuHan と併用すると約物が二重に詰まる
• 本文・見出しに letter-spacing を足さない。 実測 205/208 要素が normal
• 明朝に font-weight: 700 を当てない。 Noto Serif JP は 300 500、YakuHanMP 700 は unloaded。合成太字になる
• ヒーローの縦組みコピーを writing-mode で実装しない。 実サイトは SVG スプライト。writing-mode: vertical-rl が当たっているのは右端のタブ（幅 40px）だけ
• --rte-gold --rte-gold-hover --rte-line --rte-wash を使わない。 宣言はあるが実測 2 ページとも可視 0 要素
• line-height を em や px で書かない。 絶対値が子要素まで降りる
• 影を増やさない（実測 1 種類のみ）

8. Responsive Behavior

Breakpoints

CSS 全文の @media 宣言数（実測）:

• max-width: 800px が 299 宣言と圧倒的。 実質 2 段階（〜800px / 801px〜）の設計
• ルートサイズは全幅で 10px / body 14px のまま動かない。 フォントの流体スケールは使っていない

タッチターゲット

• お問い合わせボタンは高さ 24px（line-height）＋ padding。44px に満たないので、新規実装では縦 padding を足す
• 縦組みタブは幅 40px × 高さ 252px

フォントサイズの調整

• ルートが固定なので、サイズ変更はコンポーネント側のメディアクエリで行う（.AkariBanner__eyebrow が 0.22em → 0.18em に変わるなど）

9. Agent Prompt Guide

クイックリファレンス

Primary Color:  #080822  (トップの地色)
CTA Color:      #8a001a
Text Color:     #111111 / 本文 #333333
Background:     #080822 (トップ) / #ffffff (下層)
Font (gothic):  YakuHanJP, "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, 游ゴシック体, sans-serif
Font (mincho):  YakuHanMP, "Noto Serif JP", Georgia, 游明朝, "Hiragino Mincho ProN", serif
Font (latin):   CarreNoirPro-Medium
Root Size:      10px (html 62.5%)
Body Size:      14px
Line Height:    1.75 (本文) / 1.40 (見出し) ※必ず宣言する
Letter Spacing: normal （足さない）
palt:           使わない

プロンプト例

NIPPONIA のデザインシステムに従って、プロジェクト一覧カードを作成してください。
- font-family は YakuHanJP を先頭に置いたゴシックスタックを使う（palt は書かない）
- letter-spacing は normal のまま。字間を足さない
- line-height は必ず宣言する（html に line-height: 1 が入っている前提）
- カードの角丸は 3px、分類タグは radius 9px / rgba(153,153,153,0.6) / 10px
- 見出しに明朝を使う場合は Noto Serif JP の weight 300〜500 まで。700 は使わない
- 影は付けない