kumo.productions™ Branding StandardsVersion 1.0
The kumo™ Symbol CENTRAL

kumo.productions™
Branding Standards

Created
December 24, 2024
Version
1.0

General rules

本書は kumo.productions™ におけるロゴタイプの使用に際し、ブランディングを保持するための必要最低限の規定及び、使用に関する参考事例を記載するものであり、特別に定める禁止事項を除き、その他一般的な項目については参考程度に留め、使用媒体や状況に応じて適切に判断し使用するものとする。また、新しい媒体や技術により、本規定ではブランディングの保持や使用において障害が発生する場合、本書の責任者と協議の元、速やかにこれを改訂するものとする。

 本ガイドラインの元、ブランディングを使用するデザイン従事者各位は、本書に記載されたルールにとらわれず、仕上がりに応じグラフィックを制作してください。

kumo.productions™ is a video production company based in Tokyo. kumo™ specializes in motion graphics and 3D CGI, and has been creating commercials, music videos, and live performances.

Contents

The kumo.productions™ Naming Guidelines

02

Naming & Notation

正式な名称・表記

Info
法的な組織名は、合同会社クモ・プロダクションズ(英語表記: kumo.productions, Inc.)である。

Primary / プライマリ

kumo.productions™ の正式な名称・表記は kumo.productions™ である。基本として productions の間にスペースは空けないが、スペースを空けることによってハイパーリンクとして成立し、そのメリットがある場合は空けても良い。

例: ソーシャルメディアでの投稿
kumo.productions™ → リンクにならない
kumo.productions ™ → リンクになる
参考 → URLとしての表記

Secondary / セカンダリ

が入力できない環境では、kumo.productions と表記する。さらに、. が入力できない環境では、kumoproductions と表記する。

Do

  • kumo.productions™優先して使用
  • kumo.productionsドメイン名など、™が入力できない環境
  • kumoproductionsユーザー名など、™と.が入力できない環境

Don't

  • Kumo Productions大文字は使用しない
  • kumo プロダクション日本語では表記しない
  • kumo_productions_(アンダースコア)は使用しない

Short name / 短縮名称の使用

kumo™ を短縮名称として使用することができる。主に文章中で使用し、それ以外での単体使用は極力避ける。

e.g. 文章中
kumo™は、東京の映像制作会社です。
この作品はkumo™によって制作されました。

また、kumo™ による所有や管理を示すため、ファイル名などに kumo をつけることができる。すべて小文字表記、または全て大文字表記とし、他の命名規則の影響を受けない。

Do

  • kumo_Logo.pngファイル名
  • KUMO-HNDホスト名

Don't

  • Kumo_Logo.pngPascalCase は使用しない

URL notation / URLとしての表記

ドメイン名は kumo.productions である。.com 等と違い .productions という TLD はマイナーで、それが一目で URL であると分かりづらいため注意する。

特に印刷物など、ハイパーリンクに出来ない状況で URL を記載する際は、以下のように URL を表す文字を使用することが望ましい。

  1. 1. https://kumo.productions/https:// を明示的に記載する
  2. 2. 🔗 kumo.productionsアイコンを使用する
  3. 3. Web: kumo.productions先頭に Web: などをつける

The kumo.productions™ Symbol Guidelines

03

The kumo™ Symbol — CENTRAL

シンボル基準形

このシンボルロゴは、視覚的に象徴する最も基本的な要素です。規定されたグリッド上に配置される、4つの大きさの異なるそれぞれのスフィアより構成されます。

名前からなる雲やその水滴の集まりを模したシルエットには、これらはマテリアル、シェーディング・ライティング、コンポジット、ピクセル、モーションなど、kumo.productions™におけるコンピューターグラフィックを中心とする様々な制作スタイルの要素と、その多様な表現力を象徴すると共に、如何なる媒体や環境においても、バリアブルに適応できる柔軟性を保ち、如何なる構成においてもそのアイデンティティを失わず最も象徴的に体現します。

個別のスフィアはそのパターン、比率、濃淡のみが kumo.productions™ を視覚的に象徴する要素とし、その個別のレイアウトや個数についてはアイデンティティに影響しないものとします。

これは、その中で最も基本的なレイアウトであり、kumo.productions™ のすべてのアイデンティティはこの構成を中心に象徴されます。

スフィアの変形に特出した文脈や意図がない場合、基本の構成はこれを使用することを推奨します。

The kumo™ Symbol CENTRAL
symbol-central.svg
SVG ↓

The kumo.productions™ Symbol Guidelines

04

The kumo™ Symbol — Systems

構成システム

このシンボルロゴは4つの大きさの異なるスフィアより構成され、また、それぞれはその陰影を表現するパーティクルによって構成されます。

SPHERES直径 11マス、7マス、5マス、3マスの4つの異なる大きさで構成され、それぞれは同一シンボルでは一種類につき一つまでしか使用できません。
PARTICLES各スフィアを構成するパーティクルについて、その陰影を表現するため、7種類の異なる大きさのオブジェクトを使用します。
前提グリッドの一辺を 15a とする。
1.一辺 3a(n+1)(1≦n≦7)※nは自然数でなければならない からなる、7つの正方形で構成され、
2.いずれの角も半径 2a の角丸で設定します。
3.また、一辺 15a の正方形からなるグリッド上に設置し、必ず対角線上に設置しなければなりません。
また、各パーティクルの接続について以下に従い構成してください。
4.接続部は 1.5a の角丸で構成されます。
5.5≦n の大きさのパーティクルが、3≦n の斜めに隣接する場合すべて接続しなければなりません。
6.ただし、外周に位置するパーティクルのみ、隣接する単一のパーティクルと接続が可能です。
SPHERES base compositions
SPHERES — 11 / 7 / 5 / 3, 4, 7直径 11マス、7マス、5マス、3マスの4つの異なる大きさで構成されます。
PARTICLES size specification
1. 2. PARTICLES — 3a+3an (1≤n≤7) / 2a一辺 3a(n+1)(1≦n≦7)からなる7つの正方形。いずれの角も半径 2a の角丸で設定します。
Connection fillet radius 1.5a
3. 4. 15a / 1.5a一辺 15a の正方形からなるグリッド上に、必ず対角線上に設置。接続部は 1.5a の角丸で構成されます。
Connected and not connected judgments
5. Example of no connection / Example of connection — 5≦n / 3≦n5≦n の大きさのパーティクルが、3≦n の斜めに隣接する場合すべて接続しなければなりません。
Connection examples in composition
6. Connected / Not connectedただし、外周に位置するパーティクルのみ、隣接する単一のパーティクルと接続が可能です。

Composition examples 1–6 / 構成例

このシンボルは、規定されたグリッド上に配置される、4つの大きさの異なるそれぞれのスフィアより構成され、そのパターン、比率、濃淡のみをアイデンティティとして定め、その個別のレイアウトについては以下の規定に則って自由に配置することができます。

Composition system 1 — scale range
1. すべてのスフィアを使用していなくてもシンボルとして認め、使用する各スフィアに特別な制限はありません。
Composition system 2
2. ただし、同じ大きさのスフィアは同一アイデンティティ上に複数同時に配置してはいけません。
Composition system 3
3. 同一のアイデンティティとして存在するスフィアのサイズや比率を個別に変更してはいけません。
Composition system 4
4. 同一のアイデンティティとして存在するスフィアは同一のグリッド上に配置しなければなりません。
Composition system 5
5. 隣接するスフィア同士のパターンは必ず揃えなければならず、それぞれの全てのパーティクルが45度の斜め方向に対応して配置されなければなりません。
Composition system 6
6. スフィアの陰影は、光源の位置を一つとするか、陰影の方向は必ず一点に設定しなければなりません。

Corner ornament / コーナーオーナメント

kumo.productions™ の OGP や Web ページ上部にみられる、スフィア単体をあしらいとして用いる構成です。上記の構成規定に加え、以下に従ってください。本ポータルでもページ右上に適用しています。

1.単一のスフィアを、面の右上隅に上端または右端で部分的に見切れるよう(裁ち落とし)配置することができます。
2.スフィアは規定の4種のうち一種を単体で使用し、左右反転を許容します。回転は媒体基準の直角単位に限ります。
3.一つの面につき一箇所までとし、ロゴタイプや本文と重ねてはいけません。
4.カラーは Color Style の規定に従い単色とし、背景と十分なコントラストを保ってください。
OGP 1200×630 — sphere_3 ミラー / 右上裁ち落とし

The kumo.productions™ Symbol Guidelines

05

The kumo™ Symbol — Incorrect Usage

使用禁止例

ロゴシンボルは如何なる場合においても規定の比率を逸脱した変形や歪曲をしてはならず、下記に定める例の他、著しくブランディングアイデンティティを損なう処理を行うことを禁止します。

Incorrect: replaced particle shapes
1. 背景色と同化した素材を使用した、形状の認識を著しく損なう処理をしてはなりません。ただし、映像素材による一時的なものはこれを適応しません。
Incorrect: outlined
2. アウトライン化された形で表現してはいけません。
Incorrect: rotated particles
3. 自敬から影が伸びたり、部分的にアウトライン化された形状で表現してはいけません。
Incorrect: skewed
4. 規定の比率を逸脱した変形、歪曲をしてはなりません。ただし、立体オブジェクト上に表示する場合、形状の認識を著しく損なう処理でなければこれを適応してはいけません。
Incorrect: irregular shapes
5. 媒体を基準に水平、直角以外での配置をしてはいけません。
Incorrect: off-palette colors
6. 同一のアイデンティティ上の個別のスフィアで複数の色を使用してはいけません。

The kumo.productions™ Logotype Guidelines

06

The kumo™ Logotype

ロゴタイプ — Pangram Pangram Foundry / Object Sans Regular

このロゴタイプは kumo.productions™ を視覚的に象徴する最も基本的な要素です。

Pangram Pangram Foundry による Object Sans Regular をもとにタイプを構成した本要素は、あらゆる場面において浸透、適応するとともに、自身のアイデンティティを最も象徴的に体現します。

これらのロゴタイプは、何れも kumo.productions™ を視覚的に象徴する基本的な要素です。これらタイプシンボルは媒体やグラフィックの設計に従い、それぞれの要素を状況に応じ使用し分けてください。

このロゴタイプは如何なる場合においても変形、回転、その他描き直すことを禁止し、また、一部用件を除いた個別オブジェクトのカラー変更や濃度変更を禁止します。

必ず本書又は付属するロゴデータより完全に複製されたものを使用しなければなりません。

また、一つの媒体において、単一の面上にて複数のシンボルを同時に視認できる際、同じサイズ・形状のものを使用するレイアウトは基本的に避けてください。

ただし、立体物はこれに限らないものとします。

The kumo™ Logotype PRIMARY

kumo.productions™ logotype PRIMARY with TM
logotype-primary-tm.svg
SVG ↓

The kumo™ Logotype SECONDARY

kumo.™ productions logotype SECONDARY with TM
logotype-secondary-tm.svg
SVG ↓

The kumo™ Logotype TERTIARY

kumo. productions™ logotype TERTIARY with TM
logotype-tertiary-tm.svg
SVG ↓

The kumo™ Logotype ABBREVIATION

kumo.™ logotype ABBREVIATION with TM
logotype-abbreviation-tm.svg
SVG ↓

The kumo™ Logotype MICROSPACE

kumo.productions™ logotype MICROSPACE with TM
logotype-microspace-tm.svg
SVG ↓
07

Typography Style

タイポグラフィ

これらの書体はいずれも、その無機質さが kumo.productions™ を構成する要素と親和性が高く、また視認性に非常に優れたタイポグラフィーシステムです。

Helvetica Now Display は、ロゴタイプとの組み合わせや見出しに使用し、印刷媒体や小さいスペースのテキストなどは Helvetica Now text を使用してください。

日本語書体である東京シティーフォントについては見出し、テキスト関係なく組み合わせ使用してください。

日本語と英語の組み合わせは、同封された合成フォントファイル、kumo.productions.type-style。またはいずれも縦横 100% の書体を組み合わせて使用してください。

また、上が使用できない場合に限り、SECONDARY で定めた書体で構成される kumo.productions.type-style2 を使用するか、いずれも縦横 100% の書体を組み合わせてください。

文字組アキ量設定について、いずれも同封された kumo.yakumono-typestyle を使用してください。

原則、PRIMARY で定めた書体を使用し、SECONDARY で定めた「Inter」及び「BIZ UDPGothic」は極力使用を避け、PRIMARY で定めた書体が使用できない場合のみに選択してください。

また、PRIMARY で定めた書体と SECONDARY で定めた書体は同一の文章及び同一の媒体で組み合わせて使用することを禁止します。

MONOSPACE で定めた書体は必ず独立させた文章として使用し、その他いかなる書体と組み合わせて文章を制作してはいけません。

EN [Headline]
Monotype Helvetica Now Display
Web表示: Helvetica Neue代替
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
EN [Body]
Monotype Helvetica Now Text
Web表示: Helvetica Neue代替
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
EN (Secondary)
Inter
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
JA (Primary)
TP Tokyo City font
Web表示: BIZ UDPGothic代替
あアア亜。、
JA (Secondary)
BIZ UDPGothic
あアア亜。、
Synthetic JA+EN (Primary)
TP Tokyo City font + Monotype Helvetica Now Text
abcdABCD01234 あ亜@¥$.;(-)。、
Synthetic JA+EN (Secondary)
BIZ UDPGothic + Inter
abcdABCD01234 あ亜@¥$.;(-)。、
Monospace
Gravitica Mono
Web表示: IBM Plex Mono代替
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
Type styles (v1.0)
kumo.productions™ — Helvetica Now Display / Helvetica Now text
kumo.productions.type-style — 100%(PRIMARY・SECONDARY)
kumo.productions.type-style2 — 100%(SECONDARY)
kumo.yakumono-typestyle — PRIMARY・SECONDARY(約物)

Logo Systems Guidelines

08

Logo Systems

ロゴシステム

ロゴタイプと文章を組み合わせ、名前、部署やシステムなどをアイデンティティに含むことが可能です。Logotype TERTIARY または、Logotype ABBREVIATION に、Helvetica Now Display を以下の例を参考に組み合わせ配置してください。

これらはシンボルおよびタイプを組み合わせた一例を記載しています。CENTRAL 及び PRIMARY を組み合わせたものが最も基本的な形になりますが、意匠、使用用途や媒体に合わせ、自由に組み替えてください。

Logo and typography system
Logo & typography systemLogotype TERTIARY / Logotype ABBREVIATION / Helvetica Now Display(氏名はダミー表記)
Logo symbol and type system lockups
Logo symbol & type systemCENTRAL / PRIMARY

Color Style Guidelines

09

Color Style

カラー

これらのカラーは kumo.productions™ におけるアイデンティティを確立するための要素です。

雲やその水滴の集まりを模したシンボルに合わせ、それぞれ空をイメージした特別なカラーで構成されています。

これらはそれぞれの明度・彩度・色相を変えてはならず、均一に塗られている必要があります。また、後述する組み合わせの規定に従い、配色してください。

Semantic colors — Extension / セマンティックカラー(拡張定義)

ベース7色に役割を与えたエイリアス。UI・制作物では原則こちらを参照します(定義: tokens/colors.css)。ハイライト2色の運用ルール(グレー上禁止・低コントラスト禁止)はセマンティック層でも同様です。

TokenSourceUsage
--surface-page / --surface-cardBase white #FFFFFF画面・カードの地
--surface-sunkenCloud white #F7F7F7沈み面・ホバー背景
--surface-inverseSpace black #1E1E1Eダーク面・反転カード
--text-primaryBase black #000000本文・見出し
--text-secondaryCloudiness gray #6A6E71補足・ラベル・キャプション
--text-inverse / --text-on-accentBase white #FFFFFF反転面・アクセント上の文字
--accentNight sky blue #1E4B6Bリンク・強調アクション
--accent-softSky blue #64ADD4ホバー・フォーカスの強調
--accent-soft-bgSky blue 14%選択・ハイライト背景
--border-default / --border-strong#E9EAEB / #C9CCCE(gray由来)ヘアライン区切り / 入力・アウトライン枠
--focus-ringSky blue 55%フォーカスリング(2px)
--scrimSpace black 50%モーダル・オーバーレイ背景
--danger / --danger-bgoklch(0.5 0.13 25) — 追加色エラー・破壊的操作(ブランド外・最小使用)
--success / --success-bgoklch(0.55 0.1 155) — 追加色完了・成功状態(ブランド外・最小使用)
--warning / --warning-bgoklch(0.58 0.12 80) — 追加色注意・要確認状態(ブランド外・最小使用)
colors.css ↓

Color Style Guidelines

10

Color Combinations

配色

これらは kumo.productions™ におけるカラーシステムにおいて、組み合わせの例を記載したものです。

Approved monochrome combinations
1. 異なるベースカラーを中心とした基本の組み合わせです。特別な意図がない場合は基本これを使用してください。
Approved highlight combinations
2. ハイライトカラーを使用した特殊な組み合わせです。特段誘導し目立たせたい意図がある場合、これを使用してください。

Incorrect usage / 禁止配色

これらは kumo.productions™ におけるカラーシステム上において、意図せずアイデンティティを損なわないよう禁止・注意する事項です。下記に定める例の他、著しくブランディングアイデンティティを損なう処理を行うことを禁止します。

Incorrect: low contrast tone on tone
1. 同じグループに属するカラー同士を組み合わせないでください。
Incorrect: on highlight backgrounds
2. ハイライトカラーを下地に使用することを禁止します。
Incorrect: highlight colors on Cloudiness gray
3. Cloudiness grayCloudiness gray を下地に使用した際、ハイライトと組み合わせないでください。
Incorrect: low contrast highlight pairings
4. 異なるグループであってもトーンが近い色同士での組み合わせの使用は意図しない印象を与える可能性に注意してください。

Usage Examples

11

Usage Examples

使用例(氏名・連絡先等はダミー表記)

On-screen / 映像

16:9 end card
16:9
Cinemascope end card
CINEMASCOPE
SPHERES circular icon
SPHERES — icon

Print / 印刷物

Billing statement example
Billing Statement
Resume example
Resume
Business cards example
Business cards
Aircraft livery example
Aircraft livery
Billing Statement — 全文(ダミー表記)
2025.01.01 / C24015
BILLING STATEMENT
Bill to. CLIENT — Payment due. 2024.01.01
000-0000 0-00-0 SAMPLE BLDG 000
000-0000 0-0-0 000 / 000-0000-0000
Invoice number T0000000000000
Subject. CG — Total.(JPY) 99,790
Bank account number BANK (0000) (000) 0000000
発行元: 合同会社○○○○○○ 東京都○○区○○ サンプルビル 000
宛先住所: 東京都○○区○○○ 0-00-0 SAMPLE BLDG 000
Task description デザイン製作費 / Delivery date 25.01.01 / Quantity 1 / Amount(JPY) 100,000(×6行)
Subject. CG デザイン制作費 / 銀行 ○○支店 普通 0000000(口座名義はダミー)
Subtotal 100,000 / Consumption tax 10% 10,000 / Total 99,790
kumo.productions / 01/01
Resume — 全文(ダミー表記)
Areas of Expertise
Direction(×3)
Works Title Name Title(×8)
From corporate promotional videos to virtual content.(×8)
Full Name | Alias
Executive Director, Motion Designer, CG Generalist
本文ダミーテキスト: 「ある日の暮方の事である。…」(芥川龍之介『羅生門』冒頭)
kumo.productions / P.01
Business cards — 全文(ダミー表記)
kumo.productions/ →
Full Name | Alias — Executive Director, Motion Designer, CG Generalist
Full Name | Alias — Director, CG Artist
Full Name | Alias — Motion Designer, CG Artist
E name@kumo.productions
P +81 000.0000.0000
X @username

Design System Extension

12

Design Tokens

ブランド規定から定義したCSSトークン — styles.css が tokens/colors・typography・spacing を読み込みます

Semantic colors — 定義一覧は Color Style

--surface-page / card--surface-sunken--surface-inverse--text-primary--text-secondary--border-strong--accent--accent-soft / focus

Spacing — grid unit a = 4px

--space-1…16(4→64px)

Radius / Elevation / Motion

--radius-sm 4 / -md 6 / -lg 10(角丸はパーティクル R=2a に呼応)
区切りは1pxヘアライン。影は --shadow-card(極薄)と --shadow-overlay のみ
--dur 150ms / --ease cubic-bezier(0.2, 0, 0, 1)
focus ring: 2px rgba(100,173,212,.55)

Files

styles.css → tokens/colors.css / tokens/typography.css / tokens/spacing.css
assets/svg/(ロゴ・シンボル)
styles.css ↓

Dark mode / ダークモード

<html data-theme="dark"> で全セマンティックトークンが反転します。地は Space black、文字は Base white、アクセントは Sky blue(Night sky blue は黒地でコントラスト不足のため禁止配色に準拠)。ソリッド系コントロール(--solid / --on-solid)は白黒が反転します。

--surface-page #1E1E1E--surface-sunken #000--text-primary / --solid #FFF--text-secondary #9BA0A3--accent #64ADD4
Actions — light
Actions — dark(?theme=dark)
Forms — dark
Feedback — dark

Design System Extension

13

UI Components

ブランド規定から定義した標準UIセット(React+トークン参照)。以下は実動デモ — 操作できます。各コンポーネントは .jsx 実装+.d.ts(プロップ契約)+.prompt.md(使用例)の3点構成

Actions — Button / IconButtoncomponents/actions/
Forms — Input / Select / Checkbox / Radio / Switchcomponents/forms/
Display — Card / Badge / Tag / KumoLogocomponents/display/
Navigation — Tabscomponents/navigation/
Feedback — Dialog / Toast / Tooltipcomponents/feedback/

配色・状態はガイドライン準拠: プライマリ=Base black、アクセント=Night sky blue、フォーカスリング=Sky blue、ヘアライン基調・150msの控えめなモーション。状態色(--success / --warning / --danger)はUI上の必要から、パレットに調和するoklch値で追加(最小限の使用)。