Reference
Client Tone
参照元は `https://tangity.global/ja` です。目的は完全コピーではなく、 企業サイトらしい編集的なトーン、余白の取り方、強弱の付け方を引き継ぐことです。
Design System
DESIGN.md を
そのまま見える化する
このページは、公開サイトで使っている配色、背景、コンポーネント、コピーのルールを 実装に近い形で確認するための一覧です。抽象的な方針ではなく、 どの役割にどの見た目を割り当てるかまで見えるようにしています。
Raw file: DESIGN.md
Foundation
最初に固定する前提
参照先、タイポグラフィ、色の扱い方を最初に固定しておくと、 あとの UI 判断が場当たりになりません。このページでは Tangity を参照しつつ、 このサイト用に絞ったルールだけを残しています。
Type
Typography
Heading Sample
`Inter + Noto Sans JP` を使用。色を増やす前に、サイズ、余白、ウェイトで階層を作ります。
Body Sample
日本語は可読性を優先し、本文は 15px 前後の落ち着いたサイズで運用します。 補足は `var(--text-secondary)` を使い、主張しすぎない濃度に揃えます。
Principle
Hierarchy Before Color
色は装飾ではなく補助です。まずは余白、並び順、見出しサイズ、線で情報の優先順位を作り、 青はリンク、強調、CTA のような意味がある場所にだけ使います。
Spacing System
このサイトでは 8pt ベースで組みつつ、独立した要素同士の間隔は `16px` 未満にしません。 タグの下、見出しと本文、カード内の縦積み、リストの行間もこのルールに揃えます。
タグの下、見出しと本文、カード内の最小スタック間隔
カードの標準 padding、ミドルサイズの grid gap、設計ページのプレビュー間隔
CTA の2カラム、セクション内の大きめのまとまり、強弱を付ける区切り
長いページでの大きな小見出し切り替えや、主要ブロック間の余白
Palette
3色軸と薄い派生トーン
色数を増やさず、まず 3 色の役割を固定します。そのうえで背景や区切りに必要な差分だけを、 白と青の薄い派生色で作ります。
Core Colors
テキスト、背景、アクセントの基準色です。
本文、見出し、暗色CTAに使う基準色
ベース背景とカード面の標準色
リンク、キッカー、CTA、強調のアクセント色
Derived Washes
セクション差分や穏やかな強調に使う背景用トーンです。
Hero と Resources の背景
内部面や淡い青ニュアンスの補助背景
情報のまとまりを一段だけ持ち上げる面
Define と Q&A の背景
Prototype の背景
Refine の背景
Backgrounds
セクションごとの背景マッピング
連続した長いページでは、背景差分をほんの少し入れるだけで読み順が整います。 強い色面は使いすぎず、薄い wash で切り替わりを見せます。
Hero / Resources
`Paper` を使って、導入と後半の参考情報を少しだけ浮かせています。
Input / Refine
`Soft Blue-Gray Wash` で、前提整理と最終調整を落ち着いたトーンでまとめています。
Overview / Prompts / CTA
白背景に戻して、情報そのものを素直に読ませるセクションです。
Define / Q&A
`Blue Wash` を使い、前提整理と疑問解消を同じ読みのグループとして束ねています。
Prototype
`Neutral Wash` で中央のハンズオン領域を切り替え、動かす工程に視線を集めます。
Components
このサイトで定義したコンポーネント
役割が同じなら、見た目も同じです。命名だけ違って見た目がばらつく状態を避けるために、 このページでは役割ごとの共通クラスを定義し、それを実例で見せています。
Section Intro
Overview
このセクションで伝えること
kicker、title、supporting copy を 1 セットにした導入ブロックです。
- 使う場所: 各セクション冒頭
- 構成: kicker / title / supporting copy
- ルール: 色よりもサイズ、余白、順序で階層を作る
Component Card
Info
White Surface
基本面は白、線は薄く、余白と見出しの階層だけで役割差をつけます。
Same Role, Same Surface
情報カードもリソースカードも、役割が同じなら同じ面構造を共有します。
- 使う場所: meta / info / layer / rail / comparison / resource / cta meta
- ルール: 白面、細い境界線、同じ角丸
- 補足: summary 用の meta card は item ごとに色違いを作らない
- 例外: 最終 CTA だけは強いコントラストを許可
Component Chip
Audience
Docs
GOOD
- 使う場所: ラベル、タグ、区分、インデックス
- ルール: 同じピル形状、同じウェイト、同じ余白
- 補足: 役割差は文言で出し、形は増やさない
Code Panel
Long Prompt
scroll in panel
あなたはサービスデザインのシニアコンサルタントです。
requirements.md を作成してください。
- ターゲットユーザー
- Must機能 / Nice-to-have
- スコープ外
- 画面遷移
- 制約条件
- 成功指標- 使う場所: プロンプト、コード、長文仕様
- 構成: heading row + scrollable area
- ルール: 長文はページではなくパネル内でスクロール
Nav Chip
- 使う場所: Define / Prototype / Refine の導線
- ルール: stacked layout、同じタップ領域、同じ余白構造
- 補足: 強調は色帯ではなく見出しサイズと配置で作る
Step Card
requirements.md
要件を固定
検索
入力と一覧の連動
- 使う場所: flow step / rail cell
- ルール: 小さな白面、細い線、同じ余白リズム
- 補足: 長い文字列は折り返しで吸収し、はみ出さない
FAQ Card
CSS は全部覚える必要がありますか？
全部ではありません。最低限の共通語彙を持つことで、AI と人への指示が正確になります。
- 使う場所: Q&A
- 構成: summary row + answer area
- ルール: 折りたたみの見た目は増やさず、1 パターンに固定する
CTA Panel
Next Action
最後の行動を一つに絞る
CTA だけはページ内で最も強いコントラストを使い、次のアクションを迷わせないようにします。
- 使う場所: 最終行動の提示
- ルール: 強コントラストは CTA のみに限定する
- 補足: 本文エリアと補足メタを 2 面で整理する
Rules
運用ルールとコピーの基準
配色やコンポーネントを揃えても、最後に崩れやすいのはコントラストと文言です。 実装時に毎回見るべき判断基準をここに残しています。
Color
青は意味がある場所だけ
- リンク、キッカー、CTA に限定して使う
- 背景は薄い wash だけで切り替える
- 色を増やして情報設計を代替しない
Contrast
白文字を薄い背景に置かない
- 通常本文は `WCAG 2.2 AA` の 4.5:1 を下回らない
- 淡い面では濃い文字を使う
- 暗色面を使うのは CTA のような限定箇所だけ
Consistency
同じ役割は同じ見た目
- カード役割は `component-card` に統一する
- ラベル役割は `component-chip` に統一する
- 同じ role の item ごとに色や線の差分を入れない
- 新しい装飾より既存役割クラスの再利用を優先する
Copy
受講者向けに書く
- 登壇者メモや内部事情の言い回しを残さない
- 受講者が次に何をすればいいかまで書く
- 批判への返しではなく、疑問への答えとして表現する
Flow
視線は複雑にしない
- 色面は絞り、カード面は基本白に戻す
- 隣接セクションは薄い背景差で切り替える
- 1 セクションの中で主張点を増やしすぎない
Spacing
16px 未満の詰まりを作らない
- タグの下や見出しの下は最低 `16px` 空ける
- カード内は heading margin ではなく `gap` で揃える
- 狭く見えたらまず余白を見直し、色は後から足す
Reference