ヒューリック（HULIC） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 青一色の不動産コーポレート。和文は詰め、欧文は空けるという逆方向の字送りを1枚の画面で同時にやる。角丸は「ピル（9999px）か 0 か」の二択で、中間の角丸をほとんど使わない
• 密度: 中。IR・事業紹介の情報量は多いが、セクション間を大きく空けて1画面1メッセージで見せる
• キーワード: 青、Forum（欧文セリフ）、和文 −0.05em、欧文 +0.025em、行間 1 が既定

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

1. 字送りの向きが和欧で逆。 和文の見出しは letter-spacing: -0.05em（32px → −1.6px、18px → −0.9px）で詰め、欧文の Forum は +0.025em（16px → 0.4px、60px → 1.5px、116px → 2.9px）で空ける。本文・ナビ・リストは normal（トップ 168/203 要素、下層は 165/165 要素＝100%）。詰めるのも空けるのも、見出しだけの仕事
2. letter-spacing は各要素が em で自分の分を宣言する（継承ではない）。サイズが変われば px 値も比例して変わる（32px/−1.6px と 18px/−0.9px はどちらも −0.05em）。body に一度書いて継承させる設計ではない
3. line-height の既定が 1。 body が line-height: 16px（= font-size 16px × 無単位 1）で、宣言し直さない要素は行送りゼロで出る（比率 1.00 がトップ 59 要素 / 下層 32 要素）。本文ブロックは各自 1.4 / 1.5 / 1.8 を宣言して取り返している
4. ヒーローの明朝は画像。 スクリーンショットの「駅と未来に近いビル。」は大きな明朝の字空けに見えるが、distributions.fontFamily に明朝が 1 要素も出ない。実体は txt_main01.png（PC）/ txt_main01_sp.png（SP）という文字を焼き込んだ PNG で、img_main01.jpg（1600×920）の写真に重ねている。ここを Web フォントで実装しない

CSS Custom Properties は 2 ページとも 0 個（own: 0 / platform: 0）。設計トークンは存在せず、値はすべて個別の CSS に直書きされている。 font-feature-settings は 2 ページとも 0 件（palt を使っていない）。縦組みも 0 要素。

2. Color Palette & Roles

Primary（ブランドカラー）

青が3つ（#006aac / #005caa / #003f76）あるのは実装の実態。 面に使うのは #006aac、文字リンクは #005caa、見出しは #003f76 と役割が分かれている。1色に統合しない。

Neutral（ニュートラル）

• Text Primary (#333333): 本文・ナビ（トップ 109 要素 / 下層 105 要素で最多）
• Text on Dark (#ffffff): 青面・写真上のテキスト（31 要素）
• Text Strong (#222222): ヒーロー脇のリード文（4 要素）。#333333 とは別値
• Text Muted (#777777): PDF の容量表記 （406KB） など（8 要素）
• Text Muted 2 (#888888): IR のカテゴリ行（3 要素）
• Text Sub (#444444): カードの小見出し（4 要素）
• Surface (#f4f7fb): ニュース行・カードの面（トップ 6 / 下層 3 要素）
• Surface Blue (#e4ebf4) / #d6e4f0: セクション帯・パンくず
• Surface Blue Light (#e5f0f7): 下層の実績ブロック（4 要素）
• Surface Gray (#f7f7f7): 下層のカード面（4 要素）
• Accent Fill (#3079a7) / #dae6f1: 下層「取り組む領域」/「非注力分野」の対比面
• Hero Tint (rgba(186, 221, 242, 0.8)): 下層ヘッダーの淡い青の覆い（div::after、518,400px²）
• Header Veil (rgba(255, 255, 255, 0.85)): 固定ヘッダーの半透明白
• Background (#ffffff): ページ背景。html / body ともに背景指定が無く、UA 既定の白（canvasUnpainted: true）

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP（Google Fonts、可変フォント 100 900）。トップ 168 要素 / 下層 152 要素。これ1本で全ての和文を組む
• 明朝体: 使わない。 2 ページを走査して明朝・セリフ系の和文は可視 0 要素。ヒーローの明朝は画像（1章参照）

3.2 欧文フォント

• セリフ: Forum（Google Fonts、weight 400 のみ）。トップ 34 要素 / 下層 11 要素。ABOUT US VIEW MORE PICK UP 01 などのラベルと連番専用
• サンセリフ: 専用指定なし。欧文も Noto Sans JP の欧文グリフで出る
• フォント取得: fonts.gstatic.com へ 36 件（Noto Sans JP の unicode-range サブセット＋Forum 1 本）。document.fonts は Forum 400 と Noto Sans JP 100 900 が loaded

3.3 font-family 指定

css/* 本文・見出し（和文） */
font-family: "Noto Sans JP", sans-serif;

/* ラベル・連番（欧文） */
font-family: Forum, serif;

/* 和欧混在の1要素だけこの順（「物件をお探しのお客さまはこちら」） */
font-family: Forum, "Noto Sans JP", sans-serif;

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

• 和文スタックは "Noto Sans JP", sans-serif の2語だけ。 游ゴシック・ヒラギノを一切書かない割り切った設計。Web フォントが落ちると OS 既定のゴシックに素通りする
• Forum, serif は欧文書体に serif を受け皿にした正しい形。和文を含む要素にこのスタックを当てない（和文は serif 側＝明朝で出てしまう）

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

ルートは 16px 固定（html も body も 16px）。ただし 768px 未満だけ流体（8章参照）。

• weight は 400 / 500 / 600 の3段（トップ 153 / 18 / 32 要素）。下層にだけ 700 が 4 要素（成長性 安全性 収益性 の指標ラベル）。可変フォントなので 700 も正しく出るが、原則 600 で止める

3.5 行間・字間

• line-height の既定は 1（無単位）。 body { line-height: 1 } 相当が全体に降り、宣言し直さない要素は行送りが font-size と同値になる（比率 1.00 がトップ 59 要素）。無単位なので子は自分のサイズで再計算する（15px の要素は 15px、32px の要素は 32px）
• 本文ブロックは必ず line-height を宣言する: 1.8（本文）/ 1.6（リード・下層見出し）/ 1.5（ニュース行）/ 1.4（ナビ・見出し、トップ 55 / 下層 61 要素で最多）
• 字間は3つのルールしかない:
  • 本文・ナビ・リスト → normal（トップ 168 要素、下層 165/165 = 100%）
  • 和文の見出し・リード → -0.05em
  • 欧文の Forum → +0.025em（例外: PICK UP NEWS の 96px だけ -0.025em、連番 48px は +0.05em）
• em で各要素に当てる。px に読み替えない。 32px → −1.6px と 18px → −0.9px が同じ −0.05em で揃っている＝比例している＝ em 宣言の証拠。px で固定すると見出しサイズを変えたときに字間だけ取り残される

3.6 禁則処理・改行ルール

css/* 実サイトは word-break / overflow-wrap を body で指定していない（computed: normal） */
word-break: normal;
overflow-wrap: anywhere;   /* 推奨: 長いURL・英数字の溢れ対策として足す */
line-break: strict;        /* 推奨 */

• word-break: auto-phrase は使っていない。改行位置はブラウザ既定のまま
• 見出しの改行は HTML 側で \n を入れて制御している（リード文に実改行が入っている）

3.7 OpenType 機能

font-feature-settings は 2 ページとも 0 件。palt を使っていない。

和文の字詰めは palt（プロポーショナルメトリクス）ではなく letter-spacing: -0.05em という一律の負の字送りで作っている。 この2つは別物で、

• palt … 約物（「」、。）など文字ごとに詰め幅が変わる
• -0.05em … 全部の字間を同じだけ詰める（約物の間延びは直らない）

このサイトの見た目を再現するなら -0.05em を使う。palt を足すと詰まりすぎる。

3.8 縦書き

該当なし（writing-mode: vertical-* は 2 ページとも 0 要素）。

4. Component Stylings

Buttons

Primary（ヘッダー CTA） — 物件を探す / お問い合わせ

• Background: #006aac
• Text: #ffffff / 13px / weight 600 / line-height 1.0
• Border Radius: 0px
• Letter Spacing: normal
• Box Shadow: none

Outlined Pill（セクション導線） — ABOUT US / MANAGEMENT PLAN

• Background: transparent
• Text: #005caa / 18px / weight 400 / line-height 1.0
• Border: 1px solid #6ea9cf
• Border Radius: 30px
• Font: Forum / letter-spacing +0.025em

Outlined Pill 2（VIEW MORE）

• Background: transparent
• Text: #005caa / 16px / weight 400
• Border: 1px solid rgba(0, 106, 172, 0.5)
• Border Radius: 完全なピル（実測 3.35544e+07px = border-radius: 9999px 系の指定。9999px と書けばよい）

Carousel Arrow — PREV / NEXT

• Background: #81b3d5 / Text: #333333 / 16px / 400
• Border Radius: 16px（小）/ 24px（大）

Badges / Tags

• NEW: 背景 #d1277c / 文字 #ffffff / Forum 14px / 400 / radius 14px（＝高さの半分でピル）
• カテゴリタグ（IR資料 ニュース）: 背景 #385a70 / 文字 #ffffff / 12px / weight 600 / radius 0px / line-height 1.5

Cards

• Background: #f4f7fb（ニュース行）/ #ffffff（下層の指標カード）
• Border Radius: 0px（ニュース行）/ 9999px（下層の指標ピル）
• Shadow: トップ rgba(0, 0, 0, 0.2) 0 0 8px 0（3 要素）/ 下層 rgba(17, 88, 132, 0.1) 0 3px 6px 0（6 要素）

下層の影は黒ではなく青（rgba(17, 88, 132, …)）。 黒に丸めると沈んで見える。offset・blur・色をそのまま写す。

Inputs

トップ・下層ともフォーム要素が無いため実測値なし。実装が必要なら Outlined Pill の枠色 rgba(0, 106, 172, 0.5) と radius 0px に合わせる。

5. Layout Principles

Container

Spacing Scale

明示的なトークンは無い。実測で使われている値は 4 / 8 / 16 / 24 / 30 / 40px 系。 角丸は 0px / 2px / 4px / 14px / 16px / 24px / 30px / 9999px の 8 種で、 中心は「0 か 9999（ピル）か」の二択。16〜30px は円形ボタンの半径として出ているだけ。

Grid

display: grid の gap が 2 ページとも検出されず（gaps: []）、レイアウトは float / flex と margin で組んでいる。新規実装で grid を使うのは構わないが、既存ページとの整合は margin ベースで取る。

6. Depth & Elevation

影は実質2種類しかなく、しかも色が違う（下層は青み、トップは黒）。影を足しすぎない。

7. Do's and Don'ts

Do（推奨）

• 和文の見出しは letter-spacing: -0.05em、欧文の Forum は +0.025em を em で各要素に書く
• 本文・ナビ・リストの letter-spacing は normal のままにする
• 本文ブロックには line-height を必ず明示する（1.8 / 1.6 / 1.5 / 1.4）。宣言を省くと既定の 1 が降りて行が潰れる
• 青は役割で使い分ける（面 #006aac / リンク #005caa / 見出し #003f76）
• 角丸は 0px かピル（9999px）に寄せる
• ボタンの影は使わない（box-shadow: none）

Don't（禁止）

• ヒーローの大きな明朝を Web フォントで実装しない。 実サイトは PNG（txt_main01.png）で、サイトに明朝は1要素も存在しない
• palt を足さない。 このサイトは 0 件。字詰めは -0.05em で作っている
• letter-spacing を px で固定しない。 各要素が em で宣言しており、サイズに比例する
• line-height を無単位 1 のまま本文に使わない（実サイトの既定だが、本文は必ず上書きしている）
• 和文に Forum, serif を当てない（和文が明朝にフォールバックする）
• 3つの青を1色にまとめない
• 影の色を黒に丸めない（下層は rgba(17, 88, 132, 0.1)）

8. Responsive Behavior

Breakpoints

ルートの流体化（768px に崖がある）

html の font-size は 768px 以上で 16px 固定、767px 以下で 4.267vw。 実測:

• 768 → 767px の 1px で、ルートが 16px から 32.73px へ 2.05 倍に跳ぶ。 rem で書いた値はすべて 2 倍になる
• 式の分母から設計幅が読める: 4.267vw は 375px のときちょうど 16px に着地する＝モバイルの設計幅は 375px、ルート 16px。375px の画面に合わせたレイアウトを、画面幅に比例してそのまま拡大する方式
• 実装するときは rem を使う。 px で固定するとモバイルで拡大に追従せず、375px 設計のレイアウトが崩れる
• 規定の 4 幅（1440 / 1200 / 834 / 375px）だけ測ると、834px と 375px はどちらも 16px なので崖が見えない。 767px を必ず測ること

csshtml { font-size: 16px; }
@media (max-width: 767px) {
  html { font-size: 4.267vw; }   /* 375px で 16px */
}

タッチターゲット

• ヘッダー CTA（物件を探す）、Outlined Pill（30px radius / 18px 文字）は 44px を満たす
• VIEW MORE（16px 文字）とカテゴリタグ（12px / radius 0）は下回る。 モバイルでは上下 padding で 44px を確保する

フォントサイズの調整

• デスクトップでは html 16px 固定なので、見出しのサイズ差（116 / 96 / 60 / 48 / 32 / 18px）はそのまま
• モバイルは rem がルートに追従して全体が拡縮する。個別にブレークポイントで縮める設計ではない

9. Agent Prompt Guide

クイックリファレンス

Hulic Blue:   #006aac   (面・ヘッダーCTA)
Link Blue:    #005caa   (リンク・アウトライン文字)
Navy:         #003f76   (見出し)
Sky:          #81b3d5   (カルーセル矢印)
Magenta:      #d1277c   (NEW バッジのみ)
Slate:        #385a70   (カテゴリタグ)
Cyan:         #01b4cd   (連番 01/02/03)
Text:         #333333
Text Strong:  #222222
Muted:        #777777
Surface:      #f4f7fb / #e4ebf4 / #d6e4f0 / #e5f0f7
Background:   #ffffff

Font (JP): "Noto Sans JP", sans-serif
Font (EN): Forum, serif
Root: 16px (>=768px) / 4.267vw (<=767px, 375px設計)
Body: 16px / line-height 1.8 / letter-spacing normal
Heading JP: 32px / 600 / 1.4 / letter-spacing -0.05em
Lead JP:    18px / 400 / 1.6 / letter-spacing -0.05em
Display EN: 116px / Forum / 1.1 / letter-spacing +0.025em
line-height 既定: 1（無単位）— 本文は必ず上書きする
font-feature-settings: なし（palt 0 件）
Border Radius: 0px か 9999px（ピル）
Shadow: rgba(17,88,132,0.1) 0 3px 6px 0 / rgba(0,0,0,0.2) 0 0 8px 0
Container: 1320px / 1280px / 960px

プロンプト例

ヒューリックのデザインシステムに従って、事業紹介ページを作成してください。
- 和文は "Noto Sans JP", sans-serif の1本だけ。明朝は使わない
- 欧文のラベル・連番は Forum, serif
- letter-spacing: 和文の見出しとリードは -0.05em、欧文の Forum は +0.025em、本文とナビは normal
- letter-spacing は px ではなく em で各要素に書く
- line-height は本文 1.8 / リード 1.6 / ニュース行 1.5 / 見出しとナビ 1.4 を必ず明示する
- セクション見出しは英語 116px Forum（+0.025em）＋ 和文 32px / weight 600 / -0.05em の二段
- CTA は背景 #006aac / 白 / 13px / weight 600 / border-radius 0
- 「VIEW MORE」は透明背景 / 文字 #005caa / 1px solid rgba(0,106,172,0.5) / border-radius 9999px
- 「NEW」バッジは背景 #d1277c / Forum 14px / border-radius 14px
- カードの影は rgba(17,88,132,0.1) 0 3px 6px 0（黒にしない）
- コンテナは 1320px
- html の font-size は 768px 以上で 16px、767px 以下で 4.267vw（375px 設計）。サイズは rem で書く
- palt は使わない。縦組みも使わない