Algomatic（アルゴマティック） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: 白地に貂明朝アンチックの巨大な見出しとノイズ入りグラデーション球を落とす。装飾は少なく、字と余白と1色の赤だけで押す
• 密度: 低い。セクション間は --section-padding-y: 14rem（実測 118.6px @1440）。トップページの可視テキストは 147 要素しかない
• キーワード: 貂明朝アンチック、流体 rem、Algomatic レッド、ノイズグラデ、余白過多

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

1. 見出しはゴシックではない。貂明朝アンチック（ten-mincho-antique）の Bold。 ヒーローの「AIで企業のOSをつくり変える会社」は一見ヘビーゴシックだが、実測は font-family: ten-mincho-antique / font-weight: 700。仮名だけアンチック（写植の漫画書体）で肉付きがあり、漢字はゴシックに近い字面をもつ Adobe Fonts の書体。document.fonts で loaded を確認済み。可視 13 要素（h1 1・h2 3・p 9）がこの書体で、ゴシックで代用すると別物になる
2. 和文の本文には Web フォントを 1 本も使っていない。 本文・UI は 游ゴシック体 先頭の OS ローカルスタック（可視 110 要素）。Web フォントは欧文の nexa（24 要素）と見出し用の貂明朝アンチック（13 要素）の 2 本だけ
3. html の font-size が 8.47058px。 1440px ビューポートで 1rem = 8.47px（= 100vw / 170、デザイン幅 1700px で 1rem = 10px になる流体ルート）。全長さが rem 宣言で viewport に連動する。 以降この DESIGN.md では実測 px（@1440）と rem を併記する
4. letter-spacing は em ではなく rem で宣言されている。 --letter-spacing-body: .064rem（実測 0.542117px）。フォントサイズが変わっても字間は変わらない。 例外はヒーローと大見出しで、ここだけ 0.08em 相当（142.306px に 11.3845px、54.2117px に 4.33694px＝どちらもちょうど 8%）

font-feature-settings: "palt" は 35 要素に効いている（トップ）。プロポーショナルに詰めた上で 0.08em 空けるのが大見出しの組み方で、詰めっぱなしでも空けっぱなしでもない。

CSS Custom Properties は 28 個すべてが自社トークン（プラットフォーム由来 0 個）。ただし後述のとおりフォーム部品の 4 トークンだけ Tailwind slate の値が素通しになっている。

2. Color Palette & Roles

Primary（ブランドカラー）

赤は 1 色だけ。 #f8444d を面にも文字にも罫にも使い回す。2 つ目のアクセント色を足さないこと。

Neutral（ニュートラル）

Form（別系統。Tailwind slate の素通し）

フォーム部品だけブランドのニュートラルから外れている。 本文の黒は #16171d なのに入力欄の文字は #020617、罫は #c5c8d3 ではなく #e2e8f0。実装の実態としてそうなっているので、既存ページに合わせるならこの 3 値を使う。新規に組むなら本体のニュートラルへ寄せてよい。

その他

• ノイズ: --noise-opacity: .24。グラデーション球にノイズテクスチャを 24% で重ねている。フラットなグラデにしないこと
• リンクの UA 青: a に rgb(0, 0, 238) が 1 要素ある。font-size がルート継承の 8.47px・letter-spacing: normal＝テキストを子要素に置いた構造のリンクであり、計測失敗ではない。実装上は問題ないが、新規実装では a に色を明示すること

3. Typography Rules

3.1 和文フォント

• ゴシック体（本文・UI の既定）: 游ゴシック体。Web フォントではなく OS ローカル。可視 110 要素
• 明朝体（見出し専用）: 貂明朝アンチック（ten-mincho-antique, Adobe Fonts）weight 700。可視 13 要素。document.fonts で loaded
• Windows 対策: 游ゴシックの Medium マッピングはしていない。游ゴシック体 → YuGothic → 游ゴシック → "Yu Gothic" と並べるだけで、Windows では Regular（実質 Light 寄り）が当たる。このサイトはそれを許容している

3.2 欧文フォント

• サンセリフ: nexa（Adobe Fonts）。ナビ（About Service News）・セクションラベル（Feature Services）に使う。可視 24 要素
• ウェイトは 500 と 600 が loaded、300 は unloaded。 font-weight: 300 を前提に組まないこと
• 本文中の欧文・数字は游ゴシック体の欧文グリフをそのまま使う（専用指定なし）

3.3 font-family 指定

css/* 本文・UI（既定） */
--font-family-base:
  "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
  "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
  Meiryo, sans-serif;

/* 欧文ラベル・ナビ */
--font-family-en: "nexa", sans-serif;

/* 見出し（ディスプレイ） */
--font-family-display:
  "ten-mincho-antique",
  "Hiragino Mincho ProN", "游明朝", "Yu Mincho", YuMincho,
  "MS PMincho", serif;

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

• 和文優先。 欧文を先頭に置かない
• Noto Sans JP はスタックの 7 番目。Web フォントとしては読み込まず、入っている環境の保険として置いているだけ
• 貂明朝アンチックのフォールバックは普通の明朝（ヒラギノ明朝 → 游明朝）。アンチック仮名は再現されないので、フォールバック時は別の印象になる前提で組む

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

実測は 1440px ビューポート（1rem = 8.47058px）。rem 列はデザイン幅 1700px なら ×10 が px になる。

サイズには 2 つの系統がある。 コンテンツ（見出し・本文・カード）は rem で viewport 連動、ナビとボタンとチップは px 固定（12 / 13 / 14px）。UI 部品はどの画面幅でも同じ大きさという設計。

3.5 行間・字間

• 本文の行間: 1.65（13.5529px / 22.36px）。日本語本文としてはやや締まった値
• 最多の行間: 1.20（66 要素）。ラベルとナビと短い見出し
• 大見出しの行間: 1.12〜1.32。ヒーローは 1.12
• 字間の既定: .064rem（0.542117px）。normal は 4 要素しかない
• 大見出しの字間だけ 0.08em。ヒーロー（142.306 → 11.3845）とセクション見出し（54.2117 → 4.33694）がどちらもちょうど 8%

ガイドライン:

• 字間は rem で書く。 em で書くとサイズに比例してしまい、このサイトの「本文の字間は絶対値」という設計が崩れる
• ただし 40px を超える大見出しだけは 0.08em。 貂明朝アンチックは字面が大きいので、大サイズでは palt で詰めた上に均等に空けないと窮屈になる
• 巨大な欧文（100px 超）は -0.02em で詰める。 和文とは逆方向

3.6 禁則処理・改行ルール

• ヒーローは 2 行を手で割っている（AIで企業のOSを / つくり変える会社）。自動折り返しに任せない
• word-break: break-all は使わない

3.7 OpenType 機能

font-feature-settings: "palt" を 35 要素（トップ）/ 23 要素（about）に適用している。

• 見出しと本文の両方に効いている。 貂明朝アンチックの見出しは palt で詰めた上に 0.08em 空ける
• ボタン・チップ（interactive の実測）は font-feature-settings: normal。UI 部品には palt を効かせない

3.8 縦書き

• writing-mode: vertical-rl は 1 要素のみ：ヒーロー左端の Scroll Down（span.scroll-label / 13px / letter-spacing: 0.237176px）
• 和文の縦組みはしていない。 縦に置いているのは欧文ラベル 1 つだけ

4. Component Stylings

border-radius は 3 値のみ：1.2rem（実測 10.1647px、73 要素）/ 0.4rem（3.38823px、28 要素）/ 999px（1 要素）。

css--radius-xs: .4rem;    /* 3.39px @1440 — 写真・小さな面 */
--radius-sm: .8rem;    /* 6.78px */
--radius-md: 1.2rem;   /* 10.16px — 既定。ボタン・カード */
--radius-full: 999px;  /* Get In Touch の丸ボタンのみ */

Buttons

Primary Dark（主 CTA）

• Background: #16171d / Text: #ffffff
• Border Radius: 1.2rem（10.1647px）
• Padding: 1.6rem 5.6rem（実測 13.5529px 47.4353px）
• Font: 游ゴシック体 / 14px（px 固定）/ weight 700 / line-height 1.30 / letter-spacing: .028rem
• Border: 1px solid transparent（ホバーで色が入る余地）
• Box Shadow: inset 0 0 0 0 #ffffff（ホバー時に内側から白が伸びる仕掛けの初期値。静止時は不可視）

Primary Round（Get In Touch / お問い合わせ）

• Background: #f8444d / Text: #ffffff
• Border Radius: 999px（完全な円）
• 円の中に英語ラベル（nexa）＋日本語ラベル（游ゴシック体）の 2 段
• ヒーロー右下に固定配置

Contact Band（フッター手前の全幅帯）

• Background: #f8444d / Text: #ffffff
• Border Radius: 1.2rem
• Padding: 5.6rem 6.5rem（実測 47.4353px 55.0588px）

Filter（すべて 経営層向け支援 事業変革）

• 選択: Background #f8444d / Text #ffffff
• 非選択: Background #f0f1f4 / Text #16171d
• Border Radius: 0px（このサイトで唯一の角丸ゼロ部品）
• Padding: 0.6rem 1.6rem（実測 5.08235px 13.5529px）
• Font: 13px / weight 500 / letter-spacing: .056rem

Cards

• Background: #ffffff
• Border Radius: 1.2rem（人物写真は 0.4rem）
• Border: なし（必要なら 1px solid #c5c8d3）
• Shadow: 静止状態では付けない（--shadow-card は宣言のみで可視 0 要素）

Tags / Chips

• Background: #f0f1f4 または透明
• Font: 12px / weight 500 / letter-spacing: .024rem（可視 37 要素で最多のテキスト種）
• Border Radius: 0.4rem

5. Layout Principles

Root Font Size（最初に決めること）

csshtml {
  font-size: calc(100vw / 170);  /* 実測 8.47058px @1440px、10px @1700px */
}

このサイトの寸法はすべてこの rem に乗っている。 ルートを 16px や 62.5% にすると、トークンの数値（14rem = セクション余白）がすべて壊れる。

Spacing Scale

24px の gap が 5 要素だけ px 固定で混ざっている（UI 部品側）。

Container

• about ページの本文カラム: 72rem（実測 609.882px @1440）
• サブカラム: 69.6rem（589.553px）
• トップページは全幅レイアウトで max-width を持つ要素が無い

Border

• --border-h-width: 1px。左端の縦罫（#f8444d）とセクション区切りに使う

6. Depth & Elevation

影で階層を作らないサイト。 奥行きはノイズ入りグラデーション球と、#16171d / #f0f1f4 の面の差で作る。

7. Do's and Don'ts

Do（推奨）

• html { font-size: calc(100vw / 170) } を先に置く。 全トークンがこれ前提
• 見出しは ten-mincho-antique 700。 入手できない環境では "Hiragino Mincho ProN", "游明朝", serif に落ちる前提で書く
• 本文・UI は游ゴシック体（OS ローカル）。和文の Web フォントは読み込まない
• 字間は rem で宣言する（本文 .064rem / タグ .024rem / ボタン .028rem）
• 40px 超の大見出しだけ letter-spacing: 0.08em ＋ font-feature-settings: "palt"
• 巨大な欧文アクセントは letter-spacing: -0.02em と逆に詰める
• 赤は #f8444d 1 色。面・文字・罫すべてこれ
• 本文色は #16171d（純黒にしない）
• 角丸は 1.2rem を既定に、写真は 0.4rem、丸ボタンだけ 999px
• ナビ・ボタン・チップの font-size は px 固定（12 / 13 / 14px）

Don't（禁止）

• 見出しをヘビーゴシックにしない。 一見そう見えるが実体は明朝アンチックで、ゴシックに置き換えると仮名の表情が消える
• nexa の font-weight: 300 を使わない（unloaded。500 / 600 のみ loaded）
• 本文の letter-spacing を em で書かない（サイズ連動になり設計が崩れる）
• カード・ボタンに box-shadow を足さない（静止状態は影ゼロ）
• グラデーションをフラットにしない（ノイズ 24% が前提）
• アクセント色を 2 色目にしない
• --color-surface-subtle（#fafafc）を面に使わない（実サイトでは未使用）
• フォーム以外に slate の値（#020617 / #64748b / #e2e8f0）を持ち込まない

8. Responsive Behavior

Breakpoints

ブレークポイントは 768px の 1 本だけ。 中間幅の調整は html の流体 font-size が引き受けている。

タッチターゲット

• Primary Dark ボタン: 高さ 45px（13.55px × 2 + 18.2px）— 44px をぎりぎり満たす
• Filter チップ: 高さ 28.6px — 44px を下回る。モバイルでは縦 padding を増やすこと

フォントサイズの調整

• 本文は clamp(13px, 1.6rem, 16px)。狭い画面で 13px を下回らず、広い画面で 16px を超えない
• ナビ・ボタン・チップは px 固定なのでブレークポイントをまたいで変わらない

9. Agent Prompt Guide

クイックリファレンス

Primary Red:  #f8444d
Text:         #16171d
Text Inverse: #ffffff
Text Muted:   #585e74
Surface Dark: #16171d
Surface Muted:#f0f1f4
Border:       #c5c8d3
Background:   #ffffff
Root:  html { font-size: calc(100vw / 170) }   /* 8.47px @1440 */
Font (見出し): "ten-mincho-antique", "Hiragino Mincho ProN", "游明朝", serif  /* weight 700 */
Font (本文):   "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif
Font (欧文):   "nexa", sans-serif   /* 500 / 600 のみ */
Body Size:     clamp(13px, 1.6rem, 16px)
Line Height:   1.65（本文） / 1.20（ラベル） / 1.12〜1.32（大見出し）
Letter Spacing: .064rem（本文） / 0.08em（40px超の見出し） / -0.02em（巨大欧文）
Radius: 1.2rem（既定） / 0.4rem（写真） / 999px（丸ボタン） / 0（フィルタ）
Section Padding: 14rem 8rem
Breakpoint: (width <= 768px)
palt: あり（見出し・本文）／UI 部品は normal
Shadow: なし

プロンプト例

Algomatic のデザインシステムに従って、AIコンサルティング会社のコーポレートトップを作成してください。
- まず html { font-size: calc(100vw / 170) } を置き、以降の長さはすべて rem で書く
- 見出しは "ten-mincho-antique"（貂明朝アンチック）/ weight 700。ゴシックで代用しない
  フォールバックは "Hiragino Mincho ProN", "游明朝", serif
- ヒーローは 16.8rem / line-height 1.12 / letter-spacing 0.08em / font-feature-settings: "palt"
  2行を手で割る（自動折り返しに任せない）
- セクション見出しは 6.4rem / line-height 1.32 / letter-spacing 0.08em
- 本文は游ゴシック体（OSローカル、和文Webフォントは読み込まない）
  clamp(13px, 1.6rem, 16px) / line-height 1.65 / letter-spacing .064rem
- セクションラベル（Feature / Services）は "nexa" 400 / 1.6rem / 色 #f8444d
- ナビは "nexa" 500 / 14px 固定 / letter-spacing 0.28px
- 主CTAは背景 #16171d / 白文字 / radius 1.2rem / padding 1.6rem 5.6rem / 14px weight 700
- お問い合わせは #f8444d の radius 999px の丸ボタン（英語ラベル＋日本語ラベルの2段）
- フィルタチップは選択 #f8444d / 非選択 #f0f1f4、radius 0、13px weight 500
- 背景は白。ヒーローにノイズ（opacity .24）を重ねたグラデーション球を2つ置く
- box-shadow は使わない。セクション余白は 14rem 8rem
- ブレークポイントは (width <= 768px) の1本だけ