ANDPAD（アンドパッド） DESIGN.md

株式会社アンドパッド（https://andpad.co.jp/）のデザイン仕様書。 建設現場の施工管理・経営を一元化するクラウドサービス「ANDPAD」を提供する SaaS 企業のコーポレートサイト。 最大の特徴は、和文にモリサワの Web フォント（TypeSquare）を使い、太さを font-weight ではなくファミリー名で切り替えること。本文・UI は中ゴシック BBB（Gothic Medium BBB）、強調段落は太ゴ B101（Futo Go B101）。欧文は自社ホストの San Francisco（SF Display / SF Text）で、英字の見出しだけが別書体になる和欧分離型。 色は白地 #ffffff にANDPAD レッド #ef3340 の一点突破。角丸はピル（38.36px）のみで、それ以外は radius 0・影ゼロの徹底したフラット。 実サイトの computed style 実測（2026-08-09 取得。トップ＋ミッションページ）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白地・フラット・赤の一点。面色も影も使わず、余白と 1px の輪郭だけで構造を作る。彩度を持つのは #ef3340 ただ一色で、それを帯・アイコン・ボタンの輪郭・見出し脇の矩形に「点」で置く
• ANDPAD について: 建設業界向けの施工管理 SaaS。現場写真・図面・工程・原価を 1 つに束ねるプロダクトで、サイトも「現場の実写 → 整理された情報」という構成を取る
• 密度: 中〜低密度。KV は全幅の現場実写ムービー、以下はセクションごとに大きく余白を取って積層する。1 画面に詰め込まない
• キーワード: 純白の地、ANDPAD レッド #ef3340、モリサワ Web フォント、ピルだけの角丸、影ゼロ、英字見出しは San Francisco、黒フッター #222222
• 特徴:
  • 和文はモリサワ TypeSquare の 2 書体。本文・ナビ・UI が中ゴシック BBB、強調したい段落・小見出しが太ゴ B101。typesquare_option クラスが要素に付く実装
  • 英字の見出しだけ SF Display（自社ホスト）に切り替わる。"Service" "History of ANDPAD" などのセクション名は和文書体を経由しない。和欧を 1 書体で揃えず、役割ごとに書体を分ける設計
  • html { font-size: 14px } が rem の基準。2.8rem = 39.2px、1.4rem = 19.6px のように 14 の倍数で階層が刻まれる（16px 基準ではない点に注意）
  • body の font-weight が 505 という中間値。TypeSquare の可変軸を微調整した実装で、500 でも 600 でもない。太字は 600 / 700 を使う
  • letter-spacing はほぼ normal。開くのは大見出しだけ（39.2px → 0.1em、46px → 0.14em）。本文は詰めも開きもしない
  • 角丸はピル 38.36px の 1 種類だけ。カード・入力欄・画像はすべて radius 0。box-shadow は 1 つも存在しない
  • CTA は面色を持たない。1px solid #ef3340 のアウトラインピルが標準で、濃色背景の上では白枠、白地の上では黒枠に反転する 3 バリエーション
  • セクション見出しは赤い矩形ブロック（105px の左パディング）＋ 英字という組み。矩形は ::before で置かれる

2. Color Palette & Roles

実測値。地は純白 #ffffff、テキストは #222222。彩度を持つのは #ef3340（と沈んだ #c8102e）のみで、それ以外は無彩色。

Brand（ブランド）

• ANDPAD Red (#ef3340, rgb 239,51,64): ブランドの中核。ロゴ、採用バンドの面色、ボタンの輪郭、見出し脇の矩形、ナビのアクティブ表示、アイコン。サイトで唯一の彩度
• ANDPAD Red Dark (#c8102e, rgb 200,16,46): ミッションページで併記されるもう一段沈んだ赤。ホバー・プレス、および赤の重なりを避けたい箇所に使う

Neutral（面・罫・文字）

• Background (#ffffff): ページ地色。純白
• Ink (#222222, rgb 34,34,34): body の基本テキスト色。フッターの面色でもある。純黒 #000000 は使わない
• Surface Alt (#fafafa, rgb 250,250,250): News / Company セクションの面。白地との差はごくわずかで、区切りを「感じさせる」程度に留める
• Meta Gray (#adb5bd, rgb 173,181,189): ニュースの日付。青みを含んだ淡いグレー
• Overlay (rgba(0,0,0,0.1)): 会社情報ブロックの画像上に掛ける薄いスクリム
• Inverse (#ffffff): 濃色面（赤バンド・黒フッター）上のテキストとボタン輪郭

Semantic（意味的な色）

• コーポレートサイトのため意味色は前面に希薄。プロダクト UI へ展開する際の目安は以下
• Danger／Error: ブランドレッド #ef3340 をそのまま流用せず、沈んだ #c8102e を使う（CTA の赤と混同させない）
• Warning: 暖色のアンバー（#e8a33d 目安）
• Success: 緑（#2f9e5f 目安）
• Info: #222222 ＋ 罫線で表現し、青は足さない（サイトに青が一切存在しないため）

3. Typography Rules

和文はモリサワ Web フォント（TypeSquare）の 2 書体、英字見出しは自社ホストの San Francisco。太さはファミリー名の切り替えで作り、html の rem 基準が 14px である点が実装の要。

3.1 和文フォント

• 本文・ナビ・UI: 中ゴシック BBB（Gothic Medium BBB）。モリサワの定番ゴシックで、写植由来の落ち着いた字面。サイトの大半はこれ
• 強調段落・小見出し: 太ゴ B101（Futo Go B101）。中ゴシック BBB より一段太く、力のある字面。サービス説明の段落やミッションページの h3 に使う
• フォールバック: ヒラギノ角ゴ ProN W3 → Hiragino Kaku Gothic ProN → Arial → メイリオ → Meiryo → sans-serif。ProN（JIS2004 字形）を指定する点に注意（Pro ではない）
• 明朝体は使わない

3.2 欧文フォント

• SF Display（自社ホスト）: 英字のセクション見出し専用。"Service" "History of ANDPAD" など。weight 100〜900 の 9 段を @font-face で読み込んでいる
• SF Text（自社ホスト）: 小さめの英字用（同じく 100〜800）
• Material Icons: chevron_right 等のアイコンフォント
• 和文スタック内の欧文は Arial にフォールバックする。英字見出しだけが SF に切り替わるため、和文段落中の英単語と英字見出しでは書体が異なる
• preview.html での注記: Gothic Medium BBB / Futo Go B101 はモリサワ TypeSquare のライセンス Web フォントのため、ローカルの preview.html では表示できない。プレビューでは Google Fonts の Zen Kaku Gothic New（400/500/700） を代替に用いる。Zen Kaku Gothic New はモリサワ提供の書体で、中ゴシック BBB 系の落ち着いた字面に最も近い。SF Display は -apple-system / system-ui で代替できる（macOS / iOS では実物の San Francisco が出る）。実装時は必ず TypeSquare を読み込むこと

3.3 font-family 指定

css/* rem の基準（16px ではない） */
html { font-size: 14px; }

/* 本文・ナビ・UI（中ゴシックBBB） */
font-family: "Gothic Medium BBB", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
             Arial, メイリオ, Meiryo, sans-serif;

/* 強調段落・小見出し（太ゴB101） */
font-family: "Futo Go B101", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
             Arial, メイリオ, Meiryo, sans-serif;

/* 英字の見出し（自社ホストの San Francisco） */
font-family: "SF Display";
font-family: "SF Text";

/* body の既定 */
font-size: 13px;
font-weight: 505;        /* 500 でも 600 でもない中間値 */
line-height: 1.85;       /* 24.05px */
letter-spacing: normal;
font-feature-settings: normal;   /* palt は使わない */

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

• 和文 Web フォントを先頭に置き、その直後に ヒラギノ角ゴ ProN W3 を並べる（JIS2004 字形で字形を揃える）
• 欧文の Arial は和文フォールバックの後ろ。和文書体の欧文グリフを優先する
• 英字見出しは和文スタックを使わず "SF Display" 単独で指定する。ここだけ和欧の系統が切れる
• 太さはファミリー名（中ゴシック BBB ↔ 太ゴ B101）の切り替えで作るのが原則。font-weight は補助

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

• font-weight: 505 は誤記ではない。body に実際に指定されている中間値で、TypeSquare の可変軸を微調整した結果。太字を作るときは 600（見出し）／ 700（リンク・ナビ）を使う
• サイズはすべて 14px 基準の rem。0.85rem = 11.9px / 1.4rem = 19.6px / 2rem = 28px / 2.8rem = 39.2px
• weight 700 の要素は行間が 2.2 に広がる（13px → 28.6px）。太い字面に余白を足して重さを逃がす設計

3.5 行間・字間

• 本文の行間 (line-height): 1.85（13px → 24.05px）。太字は 2.2（13px → 28.6px）
• 見出しの行間: 英字大見出しは 1.0〜1.2（35px → 35px / 42px → 50.4px）と締める。和文見出しは 1.5
• 字間 (letter-spacing): 本文・UI は normal。開くのは大見出しだけで、和文 39.2px に 0.1em、英字 46px に 0.14em
• palt は使わない（font-feature-settings: normal）

ガイドライン:

• 本文は 1.85 を基準にし、詰めない。SaaS のコーポレートサイトとして「読ませる」ことを優先している
• 太字にしたら行間も広げる（1.85 → 2.2）。中ゴシック BBB / 太ゴ B101 は字面が詰まって見えやすい
• 字間はいじらない。開くのは 35px を超える見出しに限る

3.6 禁則処理・改行ルール

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

禁則対象:

• 行頭禁止: ）」』】〕〉》、。，．・：；？！
• 行末禁止: （「『【〔〈《

3.7 OpenType 機能

cssfont-feature-settings: normal;   /* palt を掛けない */

• palt は使わない。中ゴシック BBB の等幅の字面をそのまま活かす
• 字間を触らない設計なので、kern に依存する箇所もない
• 見出しで字を開きたいときは letter-spacing を使う（詰める方向には動かさない）

3.8 縦書き

• 該当なし。UI・記事とも横組み

4. Component Stylings

Buttons

Primary（赤アウトライン・ピル） — サイトの標準 CTA。面色を持たない

• Background: transparent
• Text: #222222
• Border: 1px solid #ef3340
• Padding: 5.25px 10.5px（実測。幅は c-button--animation__8rem 等のクラスで min-width を与える）
• Border Radius: 38.36px（ピル）
• Font: 中ゴシック BBB / 13px / weight 700 / lh 2.2
• 例: 「ミッション」「サービスサイト」「ニュース一覧」「10周年特設サイトはこちら」

Inverse（白アウトライン・ピル） — 赤バンドや写真の上

• Background: transparent
• Text: #ffffff
• Border: 1px solid #ffffff
• Padding / Radius: Primary と同じ
• 例: 「採用情報」（赤バンド #ef3340 の上）

Inverse Black（黒アウトライン・ピル） — 淡い面の上

• Background: transparent
• Text: #222222
• Border: 1px solid #222222
• Padding / Radius: Primary と同じ
• 例: 「会社情報」

Icon Button（丸・赤）

• 1px solid #ef3340 の正円（border-radius: 50%）に矢印アイコンを 1 つ置く
• 「続きを見る」のような文字を伴わない導線に使う

Inputs

• Background: #ffffff
• Border: 1px solid #222222（サイトはフラットなため、罫は本文色と同系で引く）
• Border (focus): 1px solid #ef3340
• Border Radius: 0px（入力欄はピルにしない）
• Padding: 12px 14px
• Font: 中ゴシック BBB / 13px / weight 505 / lh 1.85
• Text Color: #222222 / Placeholder: #adb5bd

Cards

• Background: #ffffff または #fafafa
• Border: なし（面色の差と余白で分離する）
• Border Radius: 0px
• Padding: 56px（大ブロック）／ 24px（小カード）
• Shadow: なし（サイト全体に box-shadow が 1 つも存在しない）

Section Heading（赤矩形＋英字）

• h2 に padding-left: 105px を与え、::before で赤い矩形（#ef3340）を左に置く
• 文字は SF Display 35px / weight 600 / lh 1.0
• 矩形の高さは見出しの行高に揃える（実測でおよそ 35px 前後の帯）

Band（採用バンド）

• Background: #ef3340
• Text: #ffffff
• Padding: 56px
• 中に Inverse（白アウトライン）ボタンを 1 つ置く

5. Layout Principles

Spacing Scale

14px を rem 基準とするため、余白も 14 の倍数と 7 の倍数が主軸になる。

• 実測されたセクション padding は 56px 0 84px（History）／ 77px 0（News）／ ヘッダー 21px 0

Container

• Max Width: 1140px（サイト全体の標準コンテナ）
• サブカラム: 570px（1140 の半分。2 カラム構成）
• 中間幅として 760px / 900px / 950px / 980px を併用
• Padding (horizontal): 20〜40px

Grid

• Columns: サービス・ニュースは 2 カラム（570px × 2）、カードは 3 カラム
• Gutter: 28px
• KV は全幅ブリード（現場実写のムービー）、以下は 1140px のコンテナに収める

6. Depth & Elevation

ANDPAD のサイトには box-shadow が 1 つも存在しない。 奥行きは面色の差と余白だけで作る。

• 浮遊感が必要なときは影ではなく余白を広げるか面色を変える
• 画像の上に情報を載せるときは rgba(0,0,0,0.1) のスクリムを掛ける

7. Do's and Don'ts

Do（推奨）

• 和文は中ゴシック BBB（本文・UI）と 太ゴ B101（強調）の 2 書体で組み、太さはファミリー切り替えで作る
• html { font-size: 14px } を rem の基準にする（16px 基準にすると全サイズがずれる）
• 本文は 13px / 行間 1.85、太字にしたら行間を 2.2 に広げる
• 彩度は #ef3340 一色だけに絞る。赤を置いていない場所は無彩色で通す
• CTA は面を塗らずアウトラインのピル（radius 38.36px、border 1px）にする。背景に応じて赤枠／白枠／黒枠を選ぶ
• セクション見出しは**赤い矩形 ＋ 英字（SF Display）**の組で作る
• 影を使わず、余白と面色（#ffffff / #fafafa / #222222 / #ef3340）で階層を作る
• 英字の大見出しだけ SF Display に切り替える。和文見出しは 太ゴ B101

Don't（禁止）

• カード・入力欄・画像に角丸をつけない（radius が許されるのはピル 38.36px とアイコンの円のみ）
• box-shadow を足さない（原典はサイト全体で影ゼロ。影を入れた瞬間に別ブランドになる）
• CTA を赤で塗りつぶさない（ANDPAD の赤は輪郭と帯の色であって、ボタンの面色ではない）
• 赤以外の彩度（青・緑・黄）を UI に持ち込まない
• palt を掛けない、本文の letter-spacing を触らない
• 本文の行間を 1.5 以下にしない（詰めると中ゴシック BBB の字面が重くなる）
• 純黒 #000000 を使わない（テキストもフッターも #222222）
• 和文スタックで英字見出しを組まない（Arial に落ちて印象が変わる）

8. Responsive Behavior

Breakpoints

タッチターゲット

• 最小サイズ: 44px × 44px（WCAG基準）。ピルボタンは padding が 5.25px 10.5px と小さいので、モバイルでは縦 padding を 12px 以上に広げる
• ドロワーナビの項目は 14px / weight 700 で、行間 1.85 分の余白を確保する

フォントサイズの調整

• 本文 13px は据え置く（14px まで上げてもよい）
• 英字 Display 46px → モバイルでは 28〜32px、Section Head 35px → 24〜26px 程度に縮小
• 和文大見出し 39.2px（2.8rem）→ 24〜28px（1.7〜2rem）
• 見出しの letter-spacing（0.1em / 0.14em）はモバイルでは 0.05em 程度まで戻してよい
• 行間 1.85 はモバイルでも維持する

9. Agent Prompt Guide

クイックリファレンス

Background:     #ffffff   （純白）
Surface Alt:    #fafafa   （News / Company セクション面）
Text:           #222222   （フッターの面色でもある。純黒は使わない）
Meta Gray:      #adb5bd   （ニュース日付）
Brand Red:      #ef3340   （唯一の彩度。帯・輪郭・矩形・アイコン）
Brand Red Dark: #c8102e   （ホバー・沈めたい赤）
JP Font (body): "Gothic Medium BBB", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, sans-serif
JP Font (bold): "Futo Go B101", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, sans-serif
EN Heading:     "SF Display"（自社ホストの San Francisco）
rem Base:       html { font-size: 14px }   ← 16px ではない
Body:           13px / weight 505 / lh 1.85 / ls normal
Body Bold:      13px / weight 700 / lh 2.2
Letter Spacing: normal（見出しのみ 0.1em〜0.14em）
Feature:        font-feature-settings: normal（palt を使わない）
Radius:         38.36px（ピル）のみ。他はすべて 0
Shadow:         none（サイト全体に box-shadow が存在しない）
Container:      1140px（サブカラム 570px）

プロンプト例

ANDPAD のデザインシステムに従って、施工管理サービスの機能紹介ページを作成してください。
- html の font-size は 14px にして、すべてのサイズを rem で 14 の倍数として刻む
- 和文の本文・UI は "Gothic Medium BBB"（無ければ ヒラギノ角ゴ ProN W3 → sans-serif）、
  強調段落は "Futo Go B101" に切り替える
- 英字のセクション見出しだけ "SF Display"（無ければ -apple-system / system-ui）を使う
- body は 13px / font-weight 505 / line-height 1.85 / letter-spacing normal、
  太字は weight 700 にして line-height を 2.2 に広げる
- 地は純白 #ffffff、セクション面は #fafafa、テキストとフッターは #222222（純黒は使わない）
- 彩度は #ef3340 一色に絞る。CTA は面を塗らず 1px solid #ef3340 のアウトラインピル
  （border-radius: 38.36px、padding 5.25px 10.5px、13px / weight 700）
- 赤バンドの上では白枠、淡い面の上では黒枠にボタンを反転させる
- セクション見出しは左に赤い矩形（#ef3340）を置き、padding-left: 105px、
  文字は SF Display 35px / weight 600 / line-height 1.0
- 和文の大見出しは 太ゴ B101 39.2px / weight 600 / lh 1.5 / letter-spacing 0.1em
- box-shadow は一切使わない。カード・入力欄・画像の border-radius は 0
- コンテナ幅は最大 1140px、2 カラムは 570px ずつ、gutter 28px
- font-feature-settings は normal（palt は掛けない）