一条工務店（ICHIJO） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: ベージュ（#f5f1e9）と白で組んだ住宅メーカー。 全画面の暮らしの写真に、字空けを広く取った白文字を重ねる。角丸 30px のピルとタグで柔らかさを作る
• 密度: 中〜高。トップの可視テキストは 617 要素。11px / 12px の補足が 211 要素あり、写真カードの下に情報を詰める
• キーワード: YakuHanJP、しっぽり明朝、ベージュ、字空け 0.2em、ピル 30px

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

1. YakuHanJP を先頭に置いて約物だけ半角にしている。 YakuHanJP, "Noto Sans JP", sans-serif が 613/617 要素。YakuHanJP は 、。「」（）・：； などの約物だけを収録したサブセットフォントで、先頭に置くと約物のアキだけが詰まり、かな漢字は Noto Sans JP が描く。palt を使わずに約物を詰める手段
2. font-feature-settings は 0 要素。 palt も tnum も使っていない。約物の処理は YakuHanJP に任せ、OpenType 機能には頼らない
3. 字間は見出しごとに個別指定する。 body は letter-spacing: normal（483/617 要素）。そのうえで 0.04em（本文・タグ）/ 0.16em / 0.2em（大見出し）の 3 段階を見出しごとに書き分ける。body に 1 回書いて継承させる設計とは逆
4. ヒーローのコピーだけ「しっぽり明朝」。 "Shippori Mincho", serif が 4 要素。41.2px / line-height: 1.33 / letter-spacing: 2.8859px（= 0.07em）。明朝は「暮らしの言葉」にだけ使い、UI はすべてゴシック

CSS Custom Properties は実質 0。 トップに 2 個あるのは Swiper の既定値（--swiper-theme-color / --swiper-navigation-size）で、/technology/ は 0 個。設計トークンを持たないサイトなので、この DESIGN.md の値はすべて実測の生の数値。

2. Color Palette & Roles

Primary（ブランドカラー）

Semantic（意味的な色）

赤が 3 つある（#d75c65 見出し / #f01236 バッジ / #cb3523 CTA）。用途がそれぞれ違うので統合しない。 トップの CTA は白地＋黒枠で、赤い面 CTA は /technology/ 以下の下層ページにだけ出る。

Neutral（ニュートラル）

• Text Primary (#222222): 本文・ナビ。トップ 430 要素で最多
• Text Primary (下層) (#2c2b26): /technology/ の本文（135 要素）。ページによって本文色が違う
• Text Secondary (#333333): カード内の説明文（88 要素）
• Text Tertiary (#3c3c3c): リード文（6 要素）
• Link (#185463): <a> の既定色（濃い青緑）
• Text Muted (#7a776a): お問い合わせ一覧はこちら
• Text on Photo (#ffffff): 写真上のコピー（11 要素）
• Border (#e2e3e7): お客さまの声カードの枠（44 要素）
• Border Light (#dfdfdf): /technology/ のボタン枠
• Surface Gray (#f5f5f5): /technology/ の面（8 要素）
• Background (#ffffff): ページ背景（pageBackground.resolved = rgb(255,255,255) / 根拠 body）

viewportTopByArea の 1 位はヘッダーの #f5f1e9（675,000px²）だが、これはヘッダーの面であってページの地色ではない。 heroCovered は false、body に #ffffff が直接入っている。ページ背景は白。

3. Typography Rules

3.1 和文フォント

• ゴシック体（既定）: Noto Sans JP（Google Fonts）。@font-face は 300 / 400 / 500 / 700 が宣言され、トップで loaded なのは 400 / 500 / 700（/technology/ では 300 も loaded）
• 約物（最優先）: YakuHanJP。@font-face は 100 / 200 / 300 / 400 / 500 / 700 / 900 の 7 ウェイトが宣言されているが、loaded は 400 と 700 の 2 つだけ
• 明朝体（ヒーローのコピー専用）: Shippori Mincho（しっぽり明朝）。400 / 700 とも loaded。実測 4 要素
• Noto Serif JP も宣言されているが 全ウェイト unloaded。使わないこと

3.2 欧文フォント

• /technology/ の番号だけ Inter（Inter, sans-serif・9 要素）。01 02 03 と Comfortable 等のラベル。font-weight: 100（8 要素）という極細で使う
• それ以外の欧文（VIEW MORE PICK UP Scroll）は Noto Sans JP の欧文グリフ
• 等幅フォントの指定は無い

3.3 font-family 指定

css/* トップページの既定 */
font-family: YakuHanJP, "Noto Sans JP", sans-serif;

/* 下層ページの既定（フォールバックが長い） */
font-family: YakuHanJP, "Noto Sans JP", "Hiragino Kaku Gothic ProN",
             "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, sans-serif;

/* ヒーローのコピー */
font-family: "Shippori Mincho", serif;

/* 番号・英字ラベル（下層のみ） */
font-family: Inter, sans-serif;

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

• YakuHanJP を必ず先頭に置く。 YakuHanJP は約物しか持たないサブセットなので、それ以外の文字は自動的に次の "Noto Sans JP" に落ちる。これが「約物だけ半角」の仕組み
• 和文優先。 欧文専用フォントを先頭に置かない（Noto Sans JP の欧文グリフで統一する）
• 同一サイト内にスタックが 2 系統ある。 トップは 3 段（YakuHanJP, "Noto Sans JP", sans-serif）、/technology/ は OS フォントまで並べた 6 段（69 要素）。新規実装ではどちらかに統一すること。短い方（トップ）が新しい

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

ルートは 16px（html / body とも 16px・weight 400・line-height: normal / letter-spacing: normal）。rem はそのまま px に読み替えてよい。

h1 は 16px / weight 700 / letter-spacing: normal（ロゴ用でスタイルが当たっていない）。見出し階層は h2 から読むこと。

3.5 行間・字間

• 行間は normal が 469/617 要素。明示的に指定するのは読ませる文だけ
  • 本文（p）: 1.875（16px / 30px）
  • ナビ・リスト: 1.50（97 要素）
  • 見出し（32px / 24px）: 1.75
  • リード文: 1.80（3 要素）
  • ヒーローのコピー: 1.33
  • ボタン・タグ: 1.00（33 要素）
• 字間は normal が 483/617 要素。個別指定は 12 種類

字間の 3 段階（em に直すと揃う）

letter-spacing は em 宣言 → px 継承。 0.44 / 0.64 / 1.28 をそれぞれのサイズで割ると すべて 0.04em に揃う。px の数値をそのままコピーしない。em で書くこと。

ヒーローの 41.2272px / 2.8859px は流体サイズ（vw 由来）の端数。 ビューポート 1440px での実測値なので、固定 px で書き写さず clamp() か vw で組むこと。

ガイドライン:

• body は letter-spacing: normal。字間は見出しごとに書く（このサイトは継承させない）
• 字空けは 0.04em（本文・タグ）→ 0.16em → 0.2em（大見出し）の 3 段階
• 小さいラベルには負の字間を使う（12px で -0.1em、30px のタブで -0.02em）
• 本文の行間は 1.875（16px / 30px）。ナビは 1.5、見出しは 1.75

3.6 禁則処理・改行ルール

cssoverflow-wrap: break-word;
line-break: strict;

• YakuHanJP が先頭にあるため、約物は半角幅で組まれる。 「家は、性能。」を実現する、４つの柱。 のような約物の多い見出しが詰まって見えるのはこのため
• word-break: break-all は使わない

3.7 OpenType 機能

このサイトは font-feature-settings を一切使っていない（実測 0 要素・2 ページとも）。

• palt を足さないこと。 約物のアキは YakuHanJP（約物半角フォント）で処理しており、palt を重ねると二重に詰まる
• tnum も使っていない。数値（No.1 4,000社）は Noto Sans JP の既定グリフ

3.8 縦書き

該当なし（writing-mode: vertical-rl は実測 0 要素）。

• ただし 「一 条 工 務 店」のように 1 文字ずつ縦に並べた見出しがある。これは writing-mode ではなく 1 文字ごとの span ＋ letter-spacing: 0.16em（32px で 5.12px） で作られている（15 要素）

4. Component Stylings

Buttons

Outlined Pill（トップの主 CTA・6 種類で共通）

• Background: #ffffff / Text: #222222
• Border: 1px solid #000000
• Padding: 12px 40px 13px（下だけ 1px 多い）
• Border Radius: 30px
• Font: 18px / weight 400 / letter-spacing: normal
• 例: 建築実例の一覧を見る 商品一覧を見る テクノロジーを見る 公式SNSの紹介はこちら

Filled Red（/technology/ 以下の CTA）

• Background: #cb3523 / Text: #ffffff
• Border Radius: 8px（小さいものは 4px）
• Padding: 14px 12px（大きいものは 24px 22px）
• Font: 13px / weight 400

Caution（黄色の帯）

• Background: #fade20 / Text: #222222
• Padding: 11px 0px 12px / Border Radius: 5px
• Font: 18px / weight 400 / letter-spacing: 0.54px (= 0.03em)

Round Outlined（企画コンテンツ）

• Background: #ffffff / Text: #3c3c3c
• Border: 1px solid で 3 色を出し分ける（#74b2b4 青緑 / #d0b904 黄 / #b8ada2 グレー）
• Padding: 10px 0px / Border Radius: 50px
• Font: 14px / weight 400

Tab（選択状態）

• Background: #e5dac1 / Text: #222222
• Border Radius: 5px 5px 0px 0px（上だけ角丸）
• Padding: 15px 30px
• Font: 30px / weight 400 / letter-spacing: -0.6px
• 非選択は背景 #ffffff

Filter Chip（/technology/）

• 選択: Background #898989 / Text #ffffff
• 非選択: Background #ffffff / Text #2c2b26
• Border: 1px solid #dfdfdf / Border Radius: 8px / Padding: 11px 16px
• Font: 14px / weight 400

Badges / Tags

Tag（# 平屋）

• Background: #f5f1e9 / Text: #222222
• Padding: 7px 8px
• Border Radius: 30px
• Font: 11px / weight 400 / letter-spacing: 0.44px (= 0.04em)

NEW Badge

• Background: #f01236 / Text: #ffffff
• Padding: 4px 10px / Border Radius: 0px
• Font: 21px / weight 400

Cards

Photo Card（建築実例・ニュース）

• Background: #ffffff
• Border Radius: 5px
• Shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1)（42 要素。サイトで唯一の影）
• Title 18px / Body 14px / Note 11px

Voice Card（お客さまの声）

• Background: transparent / Border: 1px solid #e2e3e7
• Border Radius: 5px
• Padding: 288px 20px 20px（上に写真の高さ分を空ける）

Feature Card（企画コンテンツ）

• Background: #ffffff / Border: 1px solid #dae1d9
• Border Radius: 20px
• Text: #185463

Inputs

• Font: 16px / weight 400 / placeholder は #999999
• font-family は YakuHanJP, "Noto Sans JP", sans-serif が継承されている（フォーム要素も和文で揃っている）

5. Layout Principles

Spacing Scale

Container

• トップ Max Width: 1000px（実測 13 要素で最多）
• 1200px / 960px / 840px / 800px / 720px の派生幅を持つ
• /technology/ は 1220px（5 要素）・1180px（3 要素）とトップより広い
• 列 gap に 3.3% という相対値を使う箇所がある（4 要素）

Grid

• トップは 1000px の中で 2〜4 カラム。建築実例は 3 カラム、ニュースは 4 カラム
• /technology/ は 1220px の中で 2 カラム（番号 ＋ 説明）

6. Depth & Elevation

オフセット 0・ぼかし 5px・広がり 3px という珍しい形。 落ち影ではなく周囲に均等ににじむ影で、写真カードの縁を紙のように柔らかく見せている。0 2px 8px のような一般的な値に置き換えると印象が変わる。

7. Do's and Don'ts

Do（推奨）

• font-family は YakuHanJP, "Noto Sans JP", sans-serif。YakuHanJP を必ず先頭に置く（約物だけが半角になる）
• YakuHanJP は 400 と 700 だけ読み込む（7 ウェイト宣言しても loaded は 2 つ）
• body は letter-spacing: normal。字間は見出しごとに em で書く
• 字空けは 0.04em → 0.16em → 0.2em の 3 段階
• 小さいラベルには負の字間（12px で -0.1em、30px のタブで -0.02em）
• 本文は 16px / line-height: 1.875、ナビは 1.5、見出しは 1.75
• ヒーローのコピーだけ「しっぽり明朝」（line-height: 1.33 / letter-spacing: 0.07em）
• 主 CTA は白地 ＋ 1px solid #000000 ＋ border-radius: 30px。赤い面 CTA（#cb3523）は下層ページだけ
• タグは背景 #f5f1e9 / border-radius: 30px / 11px / 0.04em
• 写真カードの影は 0 0 5px 3px rgba(0,0,0,0.1) 一択

Don't（禁止）

• font-feature-settings: "palt" を足さない。 YakuHanJP と二重に詰まる
• YakuHanJP を欧文フォントや Noto Sans JP より後ろに置かない（約物半角が効かなくなる）
• ヒーローの 41.2272px / 2.8859px を固定 px で書かない（流体サイズの端数。clamp() か vw で組む）
• letter-spacing の px をそのままコピーしない（em に直すと 0.04 / 0.16 / 0.2 に揃う）
• Noto Serif JP を使わない（宣言はあるが全ウェイト unloaded）
• Inter を本文に使わない（/technology/ の番号 01 02 専用・weight 100）
• 赤を 1 色にまとめない（#d75c65 見出し / #f01236 バッジ / #cb3523 CTA は用途が別）
• トップの CTA を面色にしない（トップは白地＋黒枠。面 CTA は下層）
• カード以外に影を付けない（/technology/ は影 0 種）
• CSS 変数を前提にしない（このサイトは設計トークンを持たない）

8. Responsive Behavior

Breakpoints

• デスクトップファースト（max-width 優先）で、軸は 768px 1 本
• 390px の第 2 軸が 31 回ある（iPhone の標準幅）。小さい端末で文字サイズと余白を追い込んでいる
• ホバーは (hover) と (hover: hover) and (pointer: fine) を併用。タッチ端末でホバー効果が残らないようにしている

タッチターゲット

• Outlined Pill（12px 40px 13px / 18px）は約 52px 高。44px を満たす
• Filter Chip（11px 16px / 14px）は約 43px 高でほぼ満たす
• Tag（7px 8px / 11px）は約 30px 高で 44px を下回る。 モバイルでは高さを確保すること
• VIEW MORE（10px）は単独では小さすぎる。カード全体をタップ領域にすること

フォントサイズの調整

• ヒーローのコピーは vw ベースの流体サイズ（1440px で 41.2272px）。モバイルでは自動的に縮む
• 本文 16px / カード 14px / 補足 11〜12px はブレークポイントをまたいで固定
• セクション見出し 32px はデスクトップ前提。768px 以下で 24px 前後に落とす

9. Agent Prompt Guide

クイックリファレンス

Beige:        #f5f1e9   Beige Ink: #4f4836   Beige Fill: #e5dac1
Gold:         #c8bb91（VIEW MORE） / #c9c0a1（タグ）
Text:         #222222（トップ） / #2c2b26（下層） / #333333（カード）
Link:         #185463
Alert:        #d75c65（見出し） / #f01236（NEW） / #cb3523（下層CTA）
Caution:      #fade20
Green:        #3b8e48
Border:       #e2e3e7 / #dfdfdf
Background:   #ffffff
Font: YakuHanJP, "Noto Sans JP", sans-serif
Font (ヒーロー): "Shippori Mincho", serif
Body Size: 16px
Line Height: 1.875（本文） / 1.5（ナビ） / 1.75（見出し） / normal（既定）
Letter Spacing: normal（body） / 0.04em（本文・タグ） / 0.16em / 0.2em（大見出し）
font-feature-settings: なし（YakuHanJP が約物を処理する）
Border Radius: 30px（ピル・タグ） / 8px（下層ボタン） / 5px（カード） / 20px（企画カード）
Box Shadow: 0 0 5px 3px rgba(0,0,0,0.1)（写真カードのみ）

プロンプト例

一条工務店のデザインシステムに従って、建築実例の一覧ページを作成してください。
- font-family は YakuHanJP, "Noto Sans JP", sans-serif（YakuHanJP を必ず先頭に置く）
- YakuHanJP は 400 と 700 だけ読み込む
- font-feature-settings は書かない（palt を足すと約物が二重に詰まる）
- body の letter-spacing は normal。字間は見出しごとに em で書く
- セクション見出しは 32px / weight 400 / line-height 1.75 / letter-spacing 0.2em
- サブ見出しは 24px / weight 400 / line-height 1.75 / letter-spacing 0.2em
- 本文は 16px / line-height 1.875 / letter-spacing 0.04em
- カードのタイトルは 18px、説明は 14px、補足は 11px（いずれも letter-spacing: normal）
- 写真カードは背景 #ffffff / border-radius 5px / box-shadow 0 0 5px 3px rgba(0,0,0,0.1)
- タグは背景 #f5f1e9 / border-radius 30px / padding 7px 8px / 11px / letter-spacing 0.04em / 文字色 #c9c0a1
- 主 CTA は白地 + 1px solid #000000 / border-radius 30px / padding 12px 40px 13px / 18px
- 「VIEW MORE」は 10px / #c8bb91
- ヘッダーとユーティリティナビの地は #f5f1e9、その文字は #4f4836 / 15px / weight 700
- 本文色は #222222、ページ背景は白、コンテナは 1000px
- ブレークポイントは screen and (max-width: 768px) を主軸に、390px でもう一段調整する