admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
161 lines
9.8 KiB
Markdown
161 lines
9.8 KiB
Markdown
# Duolingo にインスパイアされたデザインシステム
|
||
|
||
> Category: 生産性 & SaaS
|
||
> 語学学習プラットフォーム。明るいフクロウグリーン、ぶ厚いシャドウ、ゲーミフィケーションの喜び。
|
||
|
||
## 1. ビジュアルテーマと雰囲気
|
||
|
||
Duolingo はゲーミフィケーションをビジュアル言語として体現したデザインです。インターフェースは遠慮なく鮮やかで、**フクロウグリーン**（`#58cc02`）をブランドプライマリとし、すべてのインタラクティブ要素の下部に 4px のぶ厚いシャドウを持ち、まるで押されるのを待っている 3D ボタンのように見えます。ページは白（`#ffffff`）で、2〜3px の太いボーダーは深いグレー（`#e5e5e5`）、システム全体がより良い階層構造で生まれ変わった 2015 年の iOS アプリのように読めます。
|
||
|
||
タイポグラフィは、クロームに **Feather Bold**（カスタムの丸みを帯びたサンセリフ）、本文に **Mona Sans**（または Inter）を使用しています。ディスプレイサイズは大きく自信に満ちており——Duolingo は決してささやきません。見出しはグリーンのアンダーラインストロークを持つか、グリーンのピルの上に置かれることが多く、マスコットの Duo（緑のフクロウ）は静的なロゴではなく、アクティブなイラストキャラクターとして登場します。
|
||
|
||
形状言語は親しみやすく：カードは 16〜20px の角丸、ボタンは 12px、チップとプログレスバーは 9999px です。アイコノグラフィは塗りつぶし、丸みを帯び、スキルでカラーコード化されており——すべてのレッスン面には一目で識別できるカラーペアリングがあります。
|
||
|
||
**主要な特徴：**
|
||
- フクロウグリーン（`#58cc02`）が支配的なブランドカラーとして、サーフェスの 30% 以上を占める
|
||
- すべてのボタンに 4px のぶ厚いボトムシャドウ（「触覚的プレス」のアフォーダンス）
|
||
- 2〜3px のソリッドボーダー、ヘアラインは一切使わない
|
||
- Feather Bold（丸みのあるディスプレイ）＋ Mona Sans（本文）
|
||
- 大きく自信のあるテキスト——ディスプレイサイズは 48px から始まり上昇する
|
||
- マスコット＝キャラクター：Duo フクロウはオンボーディング、エラー、ストリークに登場
|
||
- ストリークオレンジ（`#ff9600`）とジェムピンク（`#ce82ff`）がセカンダリブランドカラー
|
||
|
||
## 2. カラーパレットと役割
|
||
|
||
### プライマリ
|
||
- **フクロウグリーン**（`#58cc02`）：ブランドプライマリ、プライマリ CTA、正解。
|
||
- **フクロウグリーンディープ**（`#58a700`）：グリーンボタンのプレス/シャドウカラー。
|
||
- **フクロウグリーンライト**（`#89e219`）：ホバー、ソフトフィル。
|
||
- **フクロウグリーンペール**（`#dbf8c5`）：ソフトサーフェス、成功バナー。
|
||
|
||
### セカンダリアクセント
|
||
- **ストリークオレンジ**（`#ff9600`）：ストリークカウンター、炎アイコン、プレミアムエネルギー。
|
||
- **ストリークオレンジディープ**（`#cc7a00`）：オレンジのプレス状態。
|
||
- **ジェムピンク**（`#ce82ff`）：ジェム通貨、Super Duolingo。
|
||
- **ウナギブルー**（`#1cb0f6`）：ヒントボタン、情報リンク。
|
||
- **カーディナルレッド**（`#ff4b4b`）：不正解、ライフ喪失。
|
||
- **ビーイエロー**（`#ffc800`）：プロバッジ、実績。
|
||
|
||
### サーフェス
|
||
- **スノー**（`#ffffff`）：プライマリ背景。
|
||
- **ウナギ**（`#f7f7f7`）：セクション区切り、セカンダリサーフェス。
|
||
- **スワン**（`#e5e5e5`）：無効化背景、インセットブロック。
|
||
- **ウルフ**（`#777777`）：ダークディバイダー、セカンダリテキスト。
|
||
|
||
### インクとテキスト
|
||
- **ウナギブラック**（`#3c3c3c`）：プライマリテキスト。
|
||
- **ウルフ**（`#777777`）：セカンダリテキスト、キャプション。
|
||
- **ヘア**（`#afafaf`）：無効化、プレースホルダー。
|
||
|
||
### ボーダー
|
||
- **スワン**（`#e5e5e5`）：標準 2px ボーダー。
|
||
- **ヘア**（`#afafaf`）：ホバー時の強調ボーダー。
|
||
|
||
## 3. タイポグラフィルール
|
||
|
||
### フォントファミリー
|
||
- **ディスプレイ / UI / 見出し**：`Feather Bold`、フォールバック：`'DIN Round Pro', 'Helvetica Neue', sans-serif`
|
||
- **本文 / 長文**：`Mona Sans`、フォールバック：`'Helvetica Neue', system-ui, sans-serif`
|
||
- **コード（稀、学校/管理）**：`JetBrains Mono`、フォールバック：`ui-monospace, Menlo, monospace`
|
||
|
||
### 階層
|
||
|
||
| 役割 | フォント | サイズ | ウェイト | 行間 | 字間 | 備考 |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| ディスプレイ | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | オンボーディングヒーロー |
|
||
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | ページタイトル |
|
||
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | セクション見出し |
|
||
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | カードタイトル、レッスン行 |
|
||
| 本文ラージ | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | レッスンプロンプト、説明 |
|
||
| 本文 | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | 標準テキスト |
|
||
| キャプション | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | XP カウンター、メタデータ |
|
||
| ボタン | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | 標準ボタンラベル |
|
||
| ストリーク | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | ストリーク数字、炎の上 |
|
||
|
||
### 原則
|
||
- **800 がデフォルト**：Feather Bold は見出しとボタンで 800 で動作します。700 はこのシステムでは弱く見えます。
|
||
- **大きなタイプ**：見出しサイズは典型的なプロダクトブランドより 25〜40% 大きく——自信がアイデンティティです。
|
||
- **丸みのある字形**：すべてのグリフにソフトなターミナルがあります。シャープなセリフは親しみやすさの契約を壊します。
|
||
|
||
## 4. コンポーネントスタイリング
|
||
|
||
### ボタン
|
||
|
||
**プライマリ（フクロウグリーン）**
|
||
- 背景：`#58cc02`
|
||
- テキスト：`#ffffff`
|
||
- パディング：14px 24px
|
||
- 角丸：16px
|
||
- ボーダーボトム：4px solid `#58a700`（ぶ厚いシャドウ）
|
||
- ホバー：背景 `#89e219`
|
||
- アクティブ：translate-y 4px、ボーダーボトム 0（ボタンが「押される」）
|
||
- 使用：「続ける」、「確認」、メイン CTA。
|
||
|
||
**セカンダリ（ボトムシャドウ付き白）**
|
||
- 背景：`#ffffff`
|
||
- テキスト：`#777777`
|
||
- ボーダー：2px solid `#e5e5e5`
|
||
- ボーダーボトム：4px solid `#e5e5e5`
|
||
- 角丸：16px
|
||
- パディング：14px 24px
|
||
- ホバー：テキスト `#3c3c3c`、ボーダー `#afafaf`
|
||
|
||
**ストリークオレンジ**
|
||
- 背景：`#ff9600`
|
||
- テキスト：`#ffffff`
|
||
- ボーダーボトム：4px solid `#cc7a00`
|
||
- 使用：ストリークゴール、「ストリーク開始」
|
||
|
||
**エラー（カーディナルレッド）**
|
||
- 背景：`#ff4b4b`
|
||
- テキスト：`#ffffff`
|
||
- ボーダーボトム：4px solid `#cc3b3b`
|
||
- 使用：不正解フィードバック。
|
||
|
||
### カード / レッスンタイル
|
||
- 背景：`#ffffff`
|
||
- ボーダー：2px solid `#e5e5e5`
|
||
- ボーダーボトム：4px solid `#e5e5e5`
|
||
- 角丸：16px
|
||
- パディング：16px
|
||
- ホバー：2px 浮上、シャドウ `0 4px 0 #d7d7d7`
|
||
|
||
### スキルツリーノード（レッスンバブル）
|
||
- サイズ：80×72px
|
||
- 背景：スキルカラー色調（アクティブは緑、ロック済みはグレー）
|
||
- ボーダーボトム：6px solid 暗いバリアント
|
||
- 角丸：50%（円形）
|
||
- アクティブ：1.6s ごとに 1.0 → 1.05 でパルス
|
||
|
||
### 入力
|
||
- 背景：`#ffffff`
|
||
- ボーダー：2px solid `#e5e5e5`
|
||
- 角丸：12px
|
||
- パディング：12px 16px
|
||
- フォーカス：ボーダー `#1cb0f6`（ウナギブルー）、リング `0 0 0 3px rgba(28, 176, 246, 0.2)`
|
||
|
||
### プログレスバー
|
||
- トラック：`#e5e5e5`
|
||
- フィル：`#58cc02`（またはストリーク時 `#ff9600`）
|
||
- 角丸：9999px
|
||
- 高さ：16px
|
||
- アニメーションフィル：増分時 320ms ease-out。
|
||
|
||
## 5. スペーシングとレイアウト
|
||
|
||
- **ベースユニット**：4px。スケール：4、8、12、16、24、32、48、64。
|
||
- **コンテナ**：最大 1080px、24px ガター。
|
||
- **レッスンツリー列**：幅 320px；デスクトップで中央配置。
|
||
|
||
## 6. モーション
|
||
|
||
- **デュレーション**：ボタンプレス 180ms；スキルノードアンロック 320ms；アクティブノードパルス 1.6s。
|
||
- **イージング**：`cubic-bezier(0.34, 1.56, 0.64, 1)`（バックアウト、わずかなオーバーシュート）アンロック用。
|
||
- **マスコット**：Duo は 4〜6s ごとにまばたきし、ストリークのマイルストーンでジャンプ（480ms ease-out スプリング）。
|
||
|
||
## 7. 使用ガイドライン
|
||
|
||
- 高彩度のフクロウグリーン、ぶ厚いボトムシャドウ、丸みのあるレッスンジオメトリは一緒に保ってください。フラットなグリーンボタン単体では Duolingo らしく読まれません。
|
||
- 特大の太字テキストは、プロダクトが励ましやフィードバックを必要とするレッスン、ストリーク、進捗の瞬間のために取っておいてください。
|
||
- プレイフルなモーションは進捗状態の変化の周りに控えめに使い、すべてのコントロールに汎用のバウンシーアニメーションを使うのは避けてください。
|