0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 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。

2026-10-15 21:17:28 +08:00

26 KiB

Raw Blame History

Apple にインスパイアされたデザインシステム

Category: メディア＆コンシューマー民生用電子機器。プレミアムな余白、SF Pro、シネマティックなイメージ。

1. ビジュアルテーマと雰囲気

Apple の Web 言語は、ギャラリーのような静けさと小売的な情報密度の高いブロックを交互に切り替える、精密なエディトリアルシステムです。ビジュアルのトーンは抑制的に保たれます。広大なニュートラルのキャンバス、控えめなクローム、そして表現上のウェイトをほぼすべて担う製品イメージ。インターフェースは姿を消すように設計されており、ハードウェア、素材、仕上げのオプションが物語の前景となります。

分析した 5 ページ全体を通して、リズムは一貫していますが一枚岩ではありません。マーケティング面（ホームページと Environment）はシネマティックな黒と光のチャプター構成を用い、コマース面（Store と Shop フロー）はより詰まった間隔、より多くのユーティリティコントロール、より密度の高いカードスタックを導入しつつ、ブランドの核となる文法を崩しません。その結果が、2 つのギアを持つ 1 つのシステム、すなわちショーケースモードとトランザクションモードです。

タイポグラフィが安定装置となります。SF Pro Display はコンパクトな行高と制御されたトラッキングでヒーローとマーチャンダイジングの階層を担い、SF Pro Text は製品メタデータ、ナビゲーション、フィルター、密度の高い選択 UI を扱います。タイポグラフィは控えめに保たれますが、スケールの範囲はビルボードのようなヒーローメッセージと極小のユーティリティラベルの両方を支えるのに十分なほど広くなっています。

主要な特徴:

二項対立のセクションリズム: 深い黒のシーン（#000000）と淡いニュートラルのフィールド（#f5f5f7）の交互
アクションとリンクのセマンティクスのための単一のブルーアクセントファミリー（#0071e3、#0066cc、#2997ff）
1 つのシステムにおける 2 つの動作モード: シネマティックなショーケースモジュールと密度の高いコマースコンフィギュレーター
イメージと素材仕上げへの強い依存。UI のクロームは視覚的に薄いまま
引き締まった見出しメトリクス（SF Pro Display、semibold）とコンパクトな本文／リンクのタイポグラフィ（SF Pro Text）の組み合わせ
署名的なアクション言語としてのピル＆カプセルのジオメトリ（18px から 980px、および円形コントロール）
奥行きは控えめに使用。コントラストとサーフェスの分離がレイヤリング作業の大半を担う
複数ページにわたるカラーブロックのリズム: 黒のヒーローチャプター -> 淡いニュートラルのマーチャンダイジングフィールド -> ユーティリティ的な白の小売サーフェス -> コントロール用のダークなマイクロサーフェス

2. カラーパレットと役割

Source Pages: https://www.apple.com/, https://www.apple.com/environment/, https://www.apple.com/store, https://www.apple.com/shop/buy-iphone/iphone-17-pro, https://www.apple.com/shop/accessories/all

プライマリー

アブソリュートブラック (#000000): 没入型のヒーローキャンバス、ドラマ性の高い製品チャプター、深い UI アンカー。
ペールアップルグレー (#f5f5f7): フィーチャーバンド、比較ブロック、エディトリアルの遷移のためのメインのライトサーフェス。
ニアブラックインク (#1d1d1f): ライトキャンバス上のプライマリーテキストおよびダークフィルのコントロールカラー。

セカンダリー＆アクセント

アップルアクションブルー (#0071e3): プライマリーアクションのフィルおよびフォーカスを示すブランドアクセント。
ボディリンクブルー (#0066cc): 長文の可読性に最適化されたインラインリンクカラー。
高輝度リンクブルー (#2997ff): より強いコントラストが必要な暗いシーンでの明るいリンク処理。

サーフェス＆背景

ピュアホワイトキャンバス (#ffffff): 小売／製品リストの背景および密度の高いトランザクションセクション。
グラファイトサーフェス A (#272729): ダークカードおよびメディアコントロールのコンテキストレイヤー。
グラファイトサーフェス B (#262629): コントロールのグルーピング用のやや深いダークなユーティリティレイヤー。
グラファイトサーフェス C (#28282b): 持ち上げられたダークなサポートサーフェス。
グラファイトサーフェス D (#2a2a2c): よりリッチなダークシーンでの分離に使用される、最も暗い持ち上げられたステップ。

ニュートラル＆テキスト

セカンダリーニュートラルグレー (#6e6e73): 本文のセカンダリーコピー、ヘルパーの説明、ターシャリーのメタデータ。
ソフトボーダーグレー (#d2d2d7): 区切り線、控えめなアウトライン、抑制されたユーティリティの囲い。
ミッドボーダーグレー (#86868b): 製品構成およびフィルターのコンテキストにおけるより強いフィールドアウトライン。
ユーティリティダークグレー (#424245): ストアのコンテキストにおけるダークニュートラルのテキスト／サーフェスのクロスオーバー。

セマンティック＆アクセント

選択／フォーカスシグナル (#0071e3): マーケティングとコマースのコンテキスト全体で共有されるフォーカスおよび選択状態のシグナル。
エラー／警告／成功: 抽出されたサーフェスセットでは、一貫して見られる明確なセマンティックパレットはありませんでした。

グラデーションシステム

抽出されたページは圧倒的にソリッドサーフェス主導です。ビジュアルの豊かさは、持続的な UI グラデーションではなく、写真や仕上げのレンダリングから生まれます。

3. タイポグラフィルール

フォントファミリー

ディスプレイファミリー: SF Pro Display、フォールバック SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
テキストファミリー: SF Pro Text、フォールバック SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
使い分け: ディスプレイファミリーはヒーロー／製品の見出しおよびマーチャンダイジングの見出しを扱い、テキストファミリーはナビゲーション、コントロール、ラベル、密度の高いコマースコピーを扱います。

階層

役割	サイズ	ウェイト	行高	字間	備考
Hero Display XL	80px	600	1.00-1.05	-1.2px	Environment／store のヒーロースケール
Hero Display L	56px	600	1.07	-0.28px	ホームページのヒーローモーメント
Section Display	48px	500-600	1.08	-0.144px	主要なチャプター見出し
Product Heading	40px	600	1.10	normal	製品およびキャンペーンのセクションタイトル
Feature Display	38px	600	1.21	0.152px	デバイスおよびマーチャンダイジングのコールアウト
Promo Display	32px	300-600	1.09-1.13	0.128px to 0.352px	モジュールレベルのサブヒーロー
Card/Product Title	28px	600	1.14	0.196px	タイルレベルの名称およびキーコピー
Utility Heading	24px	600	1.17	0.216px / -0.2px	コンフィギュレーターおよびグループ化されたコンテンツの見出し
Link/Action Heading	21px	600	1.14-1.38	0.231px	より大きなプロモーションリンク
Subhead	19px	600	1.21	0.228px	コンパクトなセクションのイントロ
Body Primary	17px	400	1.47	-0.374px	標準的な本文および小売の説明
Body Emphasis	17px	600	1.24	-0.374px	強調されたラベルおよびキー値
Control Label	14px	400-600	1.29-1.47	-0.224px	ボタン、ヘルパーラベル、コンパクトなナビゲーションテキスト
Micro UI	12px	400-600	1.00-1.33	-0.12px	細字、マイクロラベル
Legal/Meta	10px	400	1.30-1.47	-0.08px	密度の高いメタデータおよび法的なサポートテキスト

原則

ページタイプを越えた連続性: 同じタイポグラフィの DNA がシネマティックなローンチと製品購入フローにまたがり、マーケティングとコマースの間のブランドの分裂を防ぎます。
スケールにおける圧縮: ディスプレイ層は引き締まったレディングと制御されたトラッキングを用い、機械的かつ製品ファーストに感じさせます。
小売的な深さでの可読な密度: SF Pro Text はコンパクトさと、長い製品リストやオプションマトリクスのための十分な垂直リズムのバランスを取ります。
測定されたウェイトのはしご: 600 が支配的な強調ウェイトであり、700 は選択的に登場し、300 はより大きな行でのコントラストのために控えめに使用されます。

フォント代替に関する注記

最も近い自由に利用可能な代替: テキスト重視の実装には Inter、見出しには Inter Tight で近似した SF Pro Display-like メトリクス。
代替する際は、本文サイズで行高をわずかに増やし（+0.02 から +0.06）、可読性を保つために負のトラッキングの強度を減らします。

4. コンポーネントのスタイリング

ボタン

プライマリーフィルアクション: #0071e3 の背景、#ffffff のテキスト、8px の角丸、コンパクトな水平パディング（一般的に 8px 15px）。決定的な購入／進行アクションに使用。
ダークフィルアクション: #1d1d1f の背景、#ffffff のテキスト、8px の角丸。ライトサーフェスが抑制された高コントラストのプライマリーを必要とするときに使用。
ピル／カプセルアクションファミリー: 18px-56px の角丸の大きなカプセルアクションと、980px の極端なピルリンク。Apple のソフトながら精密な CTA のシルエットを確立。
ユーティリティフィルター／ボタンシェル: 密度の高い構成コンテキストのための、控えめなグレーのボーダー（#d2d2d7 / #86868b）を持つライトシェル（#fafafc または半透明の白）。
押下時の挙動: アクティブなコントロールは一般的に、物理的な押下の確認を示すためにスケールを縮小したりフィルをわずかにシフトさせたりします。

カード＆コンテナ

エディトリアル／製品カード: 最小限のフレーミングとイメージファーストの構成を持つ、#f5f5f7 または白のフィールド上のライトカード。
ダークユーティリティカード: オーバーレイ、メディアコントロール、ダークコンテキストのモジュールに使用されるグラファイトのステップ（#272729 から #2a2a2c）。
コンフィギュレーターパネル: 明確ながら抑制されたボーダー定義を持つ角丸コンテナ（多くの場合 12px-18px）。
カルーセル／スポットライトモジュール: フィーチャーコンテンツのレーンのための、より大きな角丸シェル（28px-36px）。

入力＆フォーム

小売の入力フィールド: 半透明または白の背景、ダークテキスト（#1d1d1f）、ボーダー主導の囲い（#86868b）。
選択コントロール: 製品選択インターフェースでは、円形／トグルのようなコントロールジオメトリが頻繁に現れます。
密度の戦略: デバイスイメージと価格の階層を支配的に保つため、フォームフィールドは視覚的に静かなままに保たれます。

グローバルマーケティングナビ: 小さな文字のリンクと抑制されたアイコノグラフィを持つ、コンパクトなダーク半透明バー。
ストア／サブショップのナビレイヤー: カテゴリーや製品の絞り込みのための追加のユーティリティバー、チップ、セグメンテッドコントロール。
リンク階層: ニュートラルなテキストが密度の高いナビゲーションセットを支える一方で、リンクのブルーが主要なインタラクティブシグナルであり続けます。

イメージ処理

オブジェクトファースト写真: ハードウェアとアクセサリーが制御されたソリッドサーフェス上で前景化されます。
高忠実度の仕上げレンダリング: 反射的／素材的なディテールがビジュアルによる説得の中心です。
混合フレーミング: フルブリードのヒーローシーンが、角丸の小売カードや密にトリミングされたマーチャンダイジングのサムネイルと共存します。

その他の特徴的なコンポーネント

製品コンフィギュレーターマトリクス: チップ、ラジオ形式のコントロール、コンテキストに応じた価格／サマリーブロックを組み合わせたオプションスタックとセレクター。
カルーセルコントロールのドット／矢印: ギャラリーの進行のための、抑制されたオーバーレイ内の円形コントロールの語彙。
Environment ストーリーパネル: エディトリアルなタイポグラフィとシネマティックな製品／環境のビジュアルを融合した物語的なチャプター。

5. レイアウトの原則

スペーシングシステム

基本単位は実質的に 8px ですが、システムは精密な整列のための密度の高いマイクロステップをサポートします。
ページ全体で頻繁に再利用されるスペーシング値: 2、4、6、7、8、9、10、12、14、17、20 px。
マーケティングと小売の両フローで見られる普遍的なリズムの定数: コンポーネントのパディングとリストのスペーシングに 14-20px のユーティリティ間隔を伴う 8px 単位のスキャフォールディング。

グリッド＆コンテナ

ショーケースページ: 広い水平方向の余白とフルワイドのカラーチャプターを持つ大きな中央カラム。
コマースページ: 頻繁なモジュラースタッキングを伴う、より詰まったマルチカラムの製品およびコントロールグリッド。
コンテナの挙動: デスクトップ幅では寛大な外側マージンを伴う、制約された可読なコア。

余白の哲学

シーンのペーシング: 主要なビジュアルチャプターは広い上下の余白を使用します。
必要に応じた情報の圧縮: 小売ページは、ビューポートあたりのアクション可能な情報をより多く露出させるために、意図的にスペーシングを圧縮します。
コントラスト主導の分離: セクションの遷移は、装飾的な区切り線よりもサーフェスの変化に依存します。

ボーダー半径のスケール

5px: 極小のユーティリティリンク／タグおよびマイナーな小さなシェル。
8px-12px: 標準的なコントロールおよびコンパクトなフィールド。
16px-18px: カード、モジュールフレーム、コマースパネル。
28px-36px: より大きなモジュールおよびスポットライトコンテナ。
56px / 100px / 980px: カプセル、大きなピル、署名的な細長い CTA フォーム。
50%: 円形のメディアおよび選択コントロール。

6. 奥行きとエレベーション

レベル	処理	用途
Level 0	フラットなニュートラルサーフェス（`#ffffff`、`#f5f5f7`、`#000000`）	メインの物語および製品のステージ
Level 1	控えめなボーダーの囲い（`#d2d2d7`、`#86868b`）	フィルター、入力フィールド、ユーティリティカード
Level 2	ソフトシャドウ（存在する場合 `rgba(0,0,0,0.08)` から `rgba(0,0,0,0.22)`）	ハイライトされたカードおよび持ち上げられたマーチャンダイズモジュール
Level 3	ダークサーフェスのステッピング（`#272729` -> `#2a2a2c`）	オーバーレイ、メディアコントロール、ダークユーティリティクラスター
Accessibility	ブルーのフォーカスシグナル（`#0071e3`）	キーボードおよび選択の強調

奥行きは意図的に抑制されています。Apple は、重厚なシャドウの積み重ねよりも、トーンのコントラスト、サーフェスのステッピング、構成上の階層を好みます。

装飾的な奥行き

装飾的な奥行きは主に、合成的な UI 効果ではなく、写真的なリアリズムと素材のレンダリングによって生み出されます。
半透明のオーバーレイとガラスのようなユーティリティバーが、ナビゲーションとコントロールに穏やかな雰囲気のレイヤリングを提供します。

7. すべきこと・すべきでないこと

すべきこと

ニュートラルの三和音（#000000、#f5f5f7、#ffffff）を構造の基盤として使用する。
ブルーのアクセントは真のアクションとナビゲーションのセマンティクスのために確保する。
特にディスプレイスケールで、タイポグラフィを引き締まった意図的なものに保つ。
コントロールとキーアクションのためにカプセル／円のジオメトリ言語を維持する。
製品イメージにビジュアルのドラマを担わせ、クロームを控えめに保つ。
密度の高い小売コンテキストでは、重厚なカードの装飾の代わりにボーダー主導の囲いを使用する。
ショーケースモジュールとトランザクションモジュールの間の明確な分離を保ちつつ、コアトークンは共有したままにする。

すべきでないこと

Apple ブルーと競合する広範なセカンダリーアクセントパレットを導入しない。
コアの UI クロームでシャドウ、グロー効果、装飾的なグラデーションを多用しない。
無関係なフォントファミリーを混ぜたり、無差別にトラッキングを緩めたりしない。
すべての角を単一の半径に平坦化しない。Apple は目的を持った半径の層を使用する。
コマースモジュールに太いボーダーや派手なビジュアル効果を詰め込みすぎない。
ダークとライトのチャプター間のニュートラルなコントラストのケイデンスを取り除かない。
マーケティングと購入フローを別々のデザインシステムとして扱わない。

8. レスポンシブ挙動

ブレークポイント

名称	幅	主要な変化
Small Mobile	374px 以下	引き締められた小売コントロール、単一カラムの製品スタック
Mobile	375px-640px	1 カラムのモジュール、コンパクトなアクション行、凝縮されたセレクター
Tablet	641px-833px	拡張されたカードと 1-2 カラムの混合遷移
Tablet Wide	834px-1023px	より安定したマルチカラムのマーチャンダイジング、より大きなテキストブロック
Desktop	1024px-1240px	フルの小売レイアウトと製品比較構造
Desktop Wide	1241px-1440px	マーケティングヒーローの拡張とより広いセクションスペーシング
Large Desktop	1441px+	最大のチャプターの余白と広いエディトリアル構成

タッチターゲット

プライマリーおよびセカンダリーアクションは、一般的にタップしやすいピル／ボタンのジオメトリで提示されます。
円形のメディアおよび選択コントロールは、モバイルコンテキストでの最小のタッチ可能な意図に揃えられています。
密度の高いコマース UI はコンパクトなラベルを使用しますが、周囲の形状パディングによって明確なヒット領域を維持します。

折りたたみ戦略

マーケティングヒーローのタイポグラフィは、階層のコントラストを保ちながら離散的な層で縮小します。
製品およびコマースのグリッドは、セレクターの可視性を持続させながらマルチカラムからスタックされたカードへと折りたたまれます。
ユーティリティナビゲーションは、キーアクションを保ちながらよりシンプルなリンク／コントロールのグルーピングへと圧縮されます。
オプション／構成のクラスターは、小さな画面で購入フローを線形に保つために垂直に順序付けられます。

イメージの挙動

製品イメージはブレークポイントを通じてアスペクトと中心性を保ちます。
ヒーローのビジュアルはモバイルでも支配的なままで、テキストはメディアの優先順位に合わせて再配置されます。
小売のサムネイルは、より引き締まったトリミングロジックとより密度の高いカードスタッキングによって判読可能なままに保たれます。
イメージ主導のモジュールは、レイアウト密度が高まるにつれてリズムを固定し続けます。

9. エージェントプロンプトガイド

��イックカラーリファレンス

プライマリーアクションブルー: アップルアクションブルー (#0071e3)
インラインリンクブルー: ボディリンクブルー (#0066cc)
ダークチャプターキャンバス: アブソリュートブラック (#000000)
ライトチャプターキャンバス: ペールアップルグレー (#f5f5f7)
ライト上のプライマリーテキスト: ニアブラックインク (#1d1d1f)
セカンダリーテキスト: セカンダリーニュートラルグレー (#6e6e73)
小売ボーダー（ソフト）: ソフトボーダーグレー (#d2d2d7)
小売ボーダー（ストロング）: ミッドボーダーグレー (#86868b)

コンポーネントプロンプトの例

「黒のキャンバス（#000000）上に Apple スタイルの製品ヒーローをデザインしてください。SF Pro Display の semibold 見出し（48-56px）、簡潔なサポートコピー、そして #0071e3 と #1d1d1f を使った 2 つのカプセル CTA を配置してください。」
「白（#ffffff）上にコマース構成パネルを作成してください。18px の角丸カード、#86868b のボーダーフィールド、SF Pro Text 17px の本文コピー、そしてコンパクトなオプションセレクターを使ってください。」
「#f5f5f7 と白のサーフェスを交互にしたマーチャンダイジングカードグリッドを構築してください。イメージファーストのカード、抑制されたシャドウ、そして 14-17px の SF Pro Text メタデータを使ってください。」
「円形ボタン（50% の半径）、抑制されたグレーのオーバーレイ、そしてギャラリーナビゲーションのための明確なアクティブフィードバックを使ったカルーセルコントロールのクラスターを生成してください。」
「マーケティング + 小売の混合ページリズムを構成してください: ダークなショーケースチャプター -> ライトなフィーチャーチャプター -> 密度の高い製品リストモジュール。ブルーのアクセントはアクションとリンクにのみ保ってください。」

イテレーションガイド

アクセントを調整する前に、まずニュートラルの基盤（#000000、#f5f5f7、#ffffff）を固定する。
ブルーのアクセントを希少で目的のあるものに保つ。すべてがブルーなら、階層は崩壊する。
この順序でタイポグラフィを調整する: ディスプレイスケール、本文の可読性、次にマイクロラベル。
画一的な角丸ではなく、コンポーネントのクラス（フィールド、カード、カプセル、円）ごとに半径を合わせる。
ショーケースセクションからコマースセクションへ移行する際は、密度を徐々に高める。
各リビジョンの後に、製品イメージが最も強いビジュアルレイヤーであり続けることを検証する。

既知のギャップ

明確なセマンティックステータスカラー（エラー／警告／成功）は、抽出されたページセットでは一貫して見られませんでした。
一部のインタラクションのマイクロステートはモジュールによって異なり、普遍的なシステムトークンとしては表現されていません。
一部の小売モジュールは、5 ページすべてにわたっては現れないコンテキスト固有のタイポグラフィのオーバーライドを露出しています。

26 KiB Raw Blame History Unescape Escape