netresearch-branding

Netresearch ブランドガイドライン（厳守）

Web 出力、ドキュメント、TYPO3 拡張機能に Netresearch のブランドアイデンティティを適用します。

自動適用条件

以下のいずれかに該当する場合は、自動的に適用します。

• GitHub の組織が netresearch、または Composer のベンダーが netresearch/
• HTML ページ、ダッシュボード、レポート、ドキュメントページ、コンポーネントのデモを作成または変更する
• 拡張機能のアイコンやブランド UI アセットを作成する
• プロンプトにブランディングに関する用語（例：ロゴ、スタイルガイド、ブランドカラー）が含まれる
• 別のスキルがユーザー向けのビジュアルコンテンツを生成する

まず出力プロファイルを選択する

• ホスト型 TYPO3 マニュアル（Documentation/、guides.xml、docs.typo3.org）： typo3-docs スキルとともに references/typo3-docs-branding.md に従います。TYPO3 の公式テーマ、ヘッダー、フォント、ボタンカラーを維持します。マニュアルのコンテンツにネイティブのナビゲーションカード、装飾的なティールの下線、Netresearch の締めくくりカードを追加します。保守対象のすべての言語をレンダリングし、デスクトップとモバイルの出力を確認します。
• 独立したブランドページ、ダッシュボード、レポート：以下の厳格な有効性ルールと Web デザインのリファレンスを適用します。ヘッダーロゴと Raleway／Open Sans の要件はこのプロファイルに適用され、ホスト型マニュアルのプロファイルには適用されません。
• 拡張機能のアイコン、メタデータ、README ファイル：アーティファクト固有の要件を使用します。これらは独立した HTML ページではありません。

選択したプロファイルをユーザーの指示に適用します。

ロゴ描画に関する必須ルール

ロゴソースの優先順位：

1. assets/logos/netresearch-symbol-only.svg
2. references/logo-svg.md（インライン SVG のフォールバック）
3. references/logo.md（SVG に制限のあるエージェント向けのテキスト形式のフォールバック）

独立したブランドページのルール（ホスト型マニュアルには独自のプロファイルを適用）：

• ブランドページでは、トップヘッダーまたはナビゲーションにロゴをちょうど 1 回含めます
• 最小サイズは 32x32px、ヘッダーでは 40–56px を推奨します
• アスペクト比を維持します
• 色の変更、変形、フィルター、影、輪郭の追加、置き換え、近似表現は禁止です
• クリック可能にする場合は、https://www.netresearch.de/ にリンクします

参照資料の適用手順

参照資料を読み込む前に、出力プロファイルを選択します。独立したページの場合：

1. references/colors.md でパレットとトークンの対応を確認します
2. references/typography.md でフォントの役割とサイズ階層を確認します
3. references/web-design.md でページ構成、レイアウト、コンポーネント、余白を確認します
4. references/logo.md と references/logo-svg.md でロゴのフォールバック動作を確認します
5. references/typo3-extension-branding.md で TYPO3 のコンテキストを確認します
6. references/co-branding.md で、明示的な共同ブランディングの依頼がある場合に限り、推奨文を確認します

ホスト型 TYPO3 マニュアルの場合は、まず references/typo3-docs-branding.md を確認し、編集前に参照マニュアルの現行ソースとレンダリング済みの出力を調べます。

コアブランドシステム

• CSS 変数は --nr-* です。ベンダープレフィックスを付けることが重要です。これらのトークンはプロジェクト独自のスタイルシートに追加されます。そこでは、--color-primary がすでに別の意味で使われている可能性があります。 チェックポイント NB-16 ではこれらを grep で検索します。値を含む標準セットは次のとおりです。

  トークン	値	役割
  --nr-primary	#2F99A4	サーフェス、境界線、アイコン、チャートの系列、24px 以上のディスプレイ文字 — 3.38:1。本文サイズのテキスト色には使用しません
  --nr-primary-fill	#257880	白いテキストを載せる塗りつぶしサーフェス（5.15:1）
  --nr-primary-text	#15585E	白地のリンク、ラベル、小さな文字（8.11:1）
  --nr-primary-deep	#0A5057	上記のホバー状態（9.14:1）
  --nr-accent	#FF4D00	塗りつぶしやマーカーとして使うアクセント — 3.33:1。本文テキストには使用しません
  --nr-accent-dark	#CC3D00	白いテキストを載せるアクセントの塗りつぶし（4.96:1）
  --nr-accent-text	#9A2E00	テキスト内でのアクセント強調（7.60:1）
  --nr-text	#585961	本文テキスト（6.96:1）
  --nr-text-secondary	#6E6F78	ヘルプ、メタ情報、キャプション（4.99:1）
  --nr-bg / --nr-bg-alt	#FFFFFF / #F5F5F5	ページおよびセクションの背景
  --nr-border	#CCCDCC	区切り線と装飾専用（1.59:1）
  --nr-border-strong	#8A8B93	インタラクティブなコントロールの視認できる境界線 — SC 1.4.11 では 3:1 が求められます
  --nr-border-light	#E5E5E5	極細線

  ダークサーフェスではまったく別のセットを使います。references/colors.md を参照してください。

• アクセントのオレンジはハイライト専用で、サーフェスの大部分を占めてはなりません

• アクセシビリティ：WCAG AA の最低コントラスト比とセマンティックな構造

• ユーザー向けのブランドページでは、フッターのブランディングが必須です

ブランド付きの単独ページを構築する

上記のルールでは、Netresearch の見た目を定義しています。このセクションでは、それらを使って templates/styles.css で単独ページ、ダッシュボード、アプリ画面を構築する方法を説明します。 これは単独ページ向けプロファイルに属します。ホスト型 TYPO3 マニュアルでは独自のプロファイルを維持し、出力を無効にするのは「厳格な有効性ルール」のみです。テンプレートから始めてください。references/web-design.md の「ブランド付きページの構築方法」では、その理由とすべてのコンポーネントを説明しています。

• 1 ページにつき太いサーフェスは 1 つ：入れ子の正方形のモチーフを配した、ペトロールブルーのグラデーション #257880 → #15585E → #0A5057 は、ヒーロー、分割型のブランドパネル、またはアプリのヘッダーバンドに使用します。必須のアンスラサイトのフッターを除き、その他はすべて白または #F5F5F5 にします。
• 細い線で奥行きを表現：1px の --nr-border-light 境界線に、柔らかな影を重ねます。角丸は、コントロールが 10px、カードが 16px、ヒーローパネルとダイアログが 24px です。ホバー時に跳ねる動きは使わず、transition: all も使用しません。
• 文字で階層を表現：見出しはブランドのテキスト色 #585961 を使い、左揃えにします。上には、オレンジ色のドットを本来の役割でアクセントとして使う、すべて大文字のアイブロウを配置します。14px 未満のテキストは使いません（references/typography.md）。
• フォームでは色だけでなく状態も示す：ステータスはドットと文字を組み合わせたピル（.badge-*）、指標は等幅数字を使ったタイル（.stat）、メッセージは状態の色合いを使ったアイコンタイル付きの白い通知カード（.notice-*）で示します。カード、通知、パネルの端に色付きのストライプを付けません。
• コントロールだとひと目でわかる見た目にする：入力欄とボタンは 48px、入力欄の境界線は 3:1、フォーカスアウトラインは単色（--nr-focus。グラデーション上とフッター上では白）、チェックボックスは描画し、2～4 個の表示を切り替える場合はセグメントコントロールを使い、必須フィールドはラベルで示します。
• 実際の手順にはステップ、オンボーディングには分割レイアウト：サインイン、リクエスト、アップロードの各画面では、左側にプロセスのステップを配したブランドパネル、右側にタスクを配置します。
• 両方の配色に対応：すべてのカラートークンにはダーク用の値があります（references/colors.md）。prefers-color-scheme と data-theme を尊重してください。

共同ブランディング（任意）

Netresearch と別のブランド（プラットフォーム、Netresearch の製品ブランド、顧客）を組み合わせるよう、リクエストで明示的に求められた場合にのみ適用します。話題としてブランド名が挙げられているだけでは、このリクエストには該当しません。Netresearch が OroCommerce について紹介するページは、Netresearch のブランドのみを使用します。

• 送信者は Netresearch のままとし、厳格な有効性ルールは変更せず適用します。
• 2つ目のブランドはコンテンツのアクセントとして扱い、推奨文では Netresearch の役割を明示します。
• 別のブランドを送信者とする出力は対象外です。
• 役割、文言のカタログ、ガードレールについては、references/co-branding.md を参照してください。

TYPO3 拡張機能の要件

• アイコンのパス：Resources/Public/Icons/Extension.svg（ティール #2F99A4）
• Composer ベンダープレフィックス：netresearch/
• author_company：Netresearch DTT GmbH
• 説明の末尾：- by Netresearch
• 連絡先：[email protected]

ブランドアセット

• assets/markdown-pdf.css — markdown-to-pdf-skill 用のブランドスタイルシートです。--css で適用します。.page-header／.page-footer のランニング要素は convert.py では出力されません。呼び出し側でそれらを含む HTML を用意する必要があります（このスキルの SKILL.md を参照）。
• assets/markdown-pdf-logo.svg — 一般用途向けの単独の Netresearch ロゴ（ブランドティール／グレー）です。
• assets/markdown-pdf-logo-white.svg — .page-header のランニングヘッダー用の白塗りバージョンです。ティール／グレーのロゴはティールの背景（--nr-primary）ではコントラストがありません。「色の変更禁止」に対する正式に認められた例外です。ほかでは使用しないでください。

アーティファクトの種類別ライセンス

「Netresearch のライセンス」は単一のライセンスではありません。アーティファクトの種類に応じて選択してください。

アーティファクト	ライセンス
TYPO3 拡張機能（netresearch/t3x-*、各種 typo3-cms-extension）	AGPL-3.0-or-later、または拡張機能を GPL-2.0-only のコードと共存させる必要がある場合は GPL-2.0-or-later — TYPO3 コアは GPL-2.0-or-later であり、拡張機能もその義務を引き継ぎます
エージェントスキル、ライブラリ、CLI、内部ツール	分割：コードは MIT、文章および参考コンテンツは CC-BY-SA-4.0。LICENSE-MIT と LICENSE-CC-BY-SA-4.0 として提供し、SPDX 式は (MIT AND CC-BY-SA-4.0) とします
ブランドアセット（ロゴファイル、色の仕様、このスキルの参考資料）	CC-BY-SA-4.0。また、ロゴには references/logo.md に記載された商標ルールも適用されます — ライセンスによって色の変更や変形が許可されるわけではありません

種類ごとの詳細については、拡張機能は references/typo3-extension-branding.md、スキルとツールは references/README-branding.md を参照してください。

編集者による評価の禁止

ブランドを適用したレポート、PR／コミットの文章、ドキュメントでは、変更や出力が何をするのかを述べ、作業の良し悪しは評価しないでください。期待される結果の語り（「すべてのテストが成功」）や自己称賛（「クリーン」）は避けてください。判断基準は語調であり、単語リストではありません。references/no-editorializing.md を参照してください。

参考資料

• references/colors.md
• references/typography.md
• references/web-design.md
• references/logo.md
• references/logo-svg.md
• references/typo3-extension-branding.md
• references/typo3-docs-branding.md
• references/README-branding.md
• references/no-editorializing.md
• references/co-branding.md（明示的に共同ブランディングを求められた場合のみ）