Autify（オーティファイ） DESIGN.md

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

1. Visual Theme & Atmosphere

• デザイン方針: ティールグリーン1色を軸にした BtoB SaaS。白と淡いブルーグレーの面で段を作り、角丸と薄い影で「触れる」要素を示す。写真ではなくイラストと図で説明する
• 密度: 中程度。見出し 40px と本文 16px の2段で読ませ、実績数値（最大86%削減）だけ 42px で跳ね上げる
• キーワード: ティールグリーン、Webflow、和欧二層、淡いブルーグレー、数値の跳ね

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

1. 欧文を先頭に置いた和欧二層スタック。 Roboto, "Noto Sans JP", system-ui, sans-serif が トップ 201/219 要素・下層 149/181 要素。Roboto が欧文と数字を、Noto Sans JP が和文を引き受ける。和文を先頭に置かない設計
2. letter-spacing の設計がページ間で揃っていない。 トップは normal が 193/219 要素、下層（/products/nexus）は 0.2px が 117/181 要素。同じサイトで「字間を足さない」と「0.0125em 足す」が同居している（下記 3.5）
3. 本文の色もページ間で違う。 トップの本文は 純黒 #000000（78 要素）、下層は #333333（82 要素）。CSS 変数 --aut-black: #333 は宣言されているが、トップはそれを使っていない
4. font-weight: 800 を当てている要素があるが、Web フォントに 800 は無い。 Google Fonts の読み込みは Noto Sans JP:300,400,500,600,700 / Roboto:300,400,500,600,700 で、800 は Inter にしか存在しない。トップの 49 80（42px）が 800 指定で、実際にはブラウザの合成太字で出ている

font-feature-settings: "palt" は 1 要素も使っていない（CSS 全文の palt 出現も 0 回）。"liga" が 1 要素だけ。縦組みも 0 件。

サイトは Webflow 製（@font-face に webflow-icons、CSS は cdn.prod.website-files.com 配信、ブレークポイントが 991 / 767 / 479px ＝ Webflow 既定）。CSS Custom Properties は 26 個すべて自社トークン（プラットフォーム由来 0）。

2. Color Palette & Roles

Primary（ブランドカラー）

実装の実態として緑が2つある。 #00b398 がブランド色で、#12ccb0 は下層の1ボタンだけ。新規実装では #00b398 に寄せる。

Product Accent（製品別アクセント・宣言はあるが可視要素が少ない）

宣言 ≠ 実装。 製品別アクセントは変数としては並んでいるが、トップと Nexus ページでは一度も塗られていない。製品ページを作るときだけ使う色として扱う。

Gradient

• linear-gradient(90deg, #00b398, #805ad5)（可視 1 要素）。トップ下部の CTA 帯 貴社のボトルネックを特定し、最適なAIアプローチで最速解決へ。グラデはこの1箇所だけ

Neutral（ニュートラル）

3. Typography Rules

3.1 和文フォント

• ゴシック体（唯一）: Noto Sans JP（Google Fonts）。ウェイトは 300 / 400 / 500 / 600 / 700 を読み込む
• 明朝体は使わない

3.2 欧文フォント

• サンセリフ（既定）: Roboto（Google Fonts、300〜700）。和文より先に置かれており、欧文と数字は Roboto で出る
• サンセリフ（番号専用）: Inter（Google Fonts、300〜900）。トップの手順番号 01 02 03 5 要素のみ
• アイコン: Material Symbols Rounded（login 1 要素）

3.3 font-family 指定

css/* 本文・UI（既定） */
font-family: Roboto, "Noto Sans JP", system-ui, sans-serif;

/* 下層フォームなど一部 */
font-family: "Noto Sans JP", sans-serif;

/* 手順番号 01 / 02 / 03 */
font-family: Inter, sans-serif;

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

• 欧文優先。 Roboto を先頭に置き、和文グリフだけ Noto Sans JP に落とす二層構成。数字・英字の見た目を Roboto に統一する狙い
• system-ui を挟んでから sans-serif に落ちる
• **下層フォームだけ "Noto Sans JP", sans-serif（Roboto なし）**になっている箇所がある（31 要素）。新規実装では既定スタックに揃える

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

3.5 行間・字間

• 本文の行間: 1.50（body が 16px / 24px）。実測でもトップ 70 要素・下層 59 要素で最多
• 見出しの行間: 1.40（58 要素）。ヒーロー見出しだけ 1.50、カード見出しは 1.30、数値は 1.10
• CTA・ボタンの行間: 1.20（48 要素）
• 読み物の行間: 1.70（事例の説明文、19 要素）

字間はページによって違う（実測の事実）

body の letter-spacing は両ページとも normal。 下層の 0.2px は要素側で当てている。どちらか一方に揃えるなら normal 側（トップ＝ブランドの顔の設計）。 例外的に字間を足しているのは タブラベルの 1.56px（13px / 約 0.12em、5 要素）、CTA の 0.8px（16–18px / 約 0.05em、8 要素）、数値の 0.52px。 逆に 事例タイトルだけ -0.16px と詰めている（6 要素）。

ガイドライン:

• 本文に字間を足さない。 足すのはタブ・CTA・数値の3つだけ
• 行間は 1.5 を既定にし、見出しだけ 1.4 に詰める。 事例の読み物だけ 1.7 に広げる

3.6 禁則処理・改行ルール

css/* 実測: body に効いている */
line-break: strict;        /* ★このサイトの既定。厳格な禁則 */
word-break: normal;
overflow-wrap: normal;

• line-break: strict が body に効いている（4 幅すべてで実測）。小書きのかな（ゃ・ゅ・ょ・っ）や長音符を行頭に送らない厳格な禁則
• word-break: auto-phrase は使っていない（CSS 全文で 0 回）
• CSS 全文の word-break 宣言は 6 回（個別要素の上書き）

3.7 OpenType 機能

css/* このサイトは palt を使わない */
font-feature-settings: normal;

• palt は 1 要素も無く、CSS 全文にも 0 回。Noto Sans JP の素のベタ組みをそのまま使う
• "liga" が 1 要素だけ（アイコンフォント用）

3.8 縦書き

該当なし（writing-mode: vertical-rl は 0 件）。

4. Component Stylings

Buttons

Primary（面）

• Background: #00b398
• Text: #ffffff
• Border Radius: 4px（本体）／ 20px（ヘッダーの小サイズ）
• Font Size: 14px (weight 500) / 16px (weight 400) / 13px (weight 700・ヘッダー)
• Line Height: 1.50（16px 時）／ 1.20（13px 時）
• Letter Spacing: normal
• Border: なし（ヘッダーの 20px 版のみ 1px solid #cbd5e0）

Secondary（アウトライン・白地）

• Background: #ffffff
• Text: #00b398
• Border: 1px solid #00b398
• Border Radius: 4px
• Font Size: 16–18px / Weight 600 / Letter Spacing 0.8px

Secondary（アウトライン・濃色面の上）

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Border Radius: 4px / Font Size 18px / Weight 600 / Letter Spacing 0.8px

Tertiary（下層の強調ボタン）

• Background: #12ccb0 / Text #ffffff / Radius 4px / 18px / Weight 600

Badges

• 業種バッジ: Background #f0f5f9、Text #718096、Radius 4px、11px / Weight 700
• ヒーロータグ: Background #dffdf9、Text #00b398、Radius 30px、12px / Weight 500

Inputs（下層フォーム）

• Background: #f5f8fa
• Border Radius: 3px
• Font Size: 13px
• Text: #212d3a
• 必須マーク *: #ff0000

Cards

• Background: #ffffff または #f6f9fb
• Border Radius: 8px（説明カード 20 要素）／ 12px（記事カード）／ 5px（最多 46 要素・画像の角）
• Shadow: rgba(0,0,0,0.05) 0 0 10px（12 要素）

角丸は 1 種類に統一されていない。 実測で 5px / 8px / 4px / 40px / 100% / 20px / 12px / 30px の 8 種。新規実装では ボタン=4px・カード=8px・画像=5px の3値に絞ると実サイトと整合する。

5. Layout Principles

Spacing Scale（gap の実測）

Container

• Max Width: 1200px（トップ 8 回・下層 10 回で最多）
• 他に 1280px / 1380px（全幅帯）、370–400px（カード）

Grid

• カードは 3 列（370px / 400px）が基本。gap は 16px または 24px

6. Depth & Elevation

影は「ぼかしのみ・オフセットほぼ 0」が基本（0 0 10px / 0 0 24px）。縦オフセットを付けるのはナビのドロップダウン（0 2px 12px）だけ。

7. Do's and Don'ts

Do（推奨）

• font-family は Roboto, "Noto Sans JP", system-ui, sans-serif をそのまま使う（欧文先頭）
• 本文は 16px / line-height 1.50 / letter-spacing normal
• CTA は #00b398 の面＋白文字＋radius 4px。第2 CTA は白地＋#00b398 の枠と文字＋letter-spacing 0.8px
• 面を切り替えるときは #f6f9fb（最多の面色）を使う
• line-break: strict を body に書く

Don't（禁止）

• font-weight: 800 / 900 を当てない。 読み込んでいるのは 300–700 で、800 は合成太字になる（実サイトの数値 42px がそれ）
• palt を足さない。 このサイトは字詰めをしない設計
• 本文に letter-spacing を足さない（下層にある 0.2px は実装のばらつきで、揃えるなら normal）
• 本文色に #000000 と #333333 を混ぜない（新規実装では #333333 に統一）
• 製品アクセント（#ff4478 / #6946e6 / #ff5c35）を通常ページで使わない

8. Responsive Behavior

Breakpoints（Webflow 既定）

ルートは固定・見出しだけ流体

• html / body は 4 幅（1440 / 1200 / 834 / 375px）すべてで 16px 固定。rem の換算は常に 16px 基準でよい
• ヒーロー見出し（h1）だけ流体: 1440px で 40px → 1200px で 39.99px → 834px で 30px → 375px で 24.26px
• 本文（p）は 834px 以下で 16px → 12px に落ちる。モバイルの本文は 12px / line-height 18px（1.50 は維持）

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）

9. Agent Prompt Guide

クイックリファレンス

Primary Color: #00b398
Surface: #f6f9fb
Text Color: #333333
Background: #ffffff
Font: Roboto, "Noto Sans JP", system-ui, sans-serif
Body Size: 16px
Line Height: 1.5
Letter Spacing: normal（本文には足さない）
Button Radius: 4px / Card Radius: 8px
Container: 1200px
line-break: strict

プロンプト例

Autify のデザインシステムに従って、料金プランの比較カードを3枚作成してください。
- フォント: Roboto, "Noto Sans JP", system-ui, sans-serif
- 本文: 16px / line-height 1.5 / letter-spacing normal
- カード: 背景 #ffffff、角丸 8px、影 rgba(0,0,0,0.05) 0 0 10px
- セクションの地色: #f6f9fb
- 推奨プランの CTA: 背景 #00b398、白文字、角丸 4px、16px / weight 400
- 他プランの CTA: 白地、文字と枠 #00b398、角丸 4px、18px / weight 600、letter-spacing 0.8px
- 価格の数字: 42px。ただし font-weight は 700 まで（800 は合成太字になるので使わない）
- palt は使わない。body に line-break: strict を書く
- コンテナ幅 1200px、カード間の gap は 24px