kumo.productions™
Branding Standards
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
Naming & Notation
正式な名称・表記
Primary / プライマリ
kumo.productions™ の正式な名称・表記は kumo.productions™ である。基本として productions と ™ の間にスペースは空けないが、スペースを空けることによってハイパーリンクとして成立し、そのメリットがある場合は空けても良い。
Secondary / セカンダリ
™ が入力できない環境では、kumo.productions と表記する。さらに、. が入力できない環境では、kumoproductions と表記する。
Do
- kumo.productions™優先して使用
- kumo.productionsドメイン名など、™が入力できない環境
- kumoproductionsユーザー名など、™と.が入力できない環境
Don't
- Kumo Productions大文字は使用しない
- kumo プロダクション日本語では表記しない
- kumo_productions_(アンダースコア)は使用しない
Short name / 短縮名称の使用
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. https://kumo.productions/https:// を明示的に記載する
- 2. 🔗 kumo.productionsアイコンを使用する
- 3. Web: kumo.productions先頭に Web: などをつける
The kumo.productions™ Symbol Guidelines
The kumo™ Symbol — CENTRAL
シンボル基準形
このシンボルロゴは、視覚的に象徴する最も基本的な要素です。規定されたグリッド上に配置される、4つの大きさの異なるそれぞれのスフィアより構成されます。
名前からなる雲やその水滴の集まりを模したシルエットには、これらはマテリアル、シェーディング・ライティング、コンポジット、ピクセル、モーションなど、kumo.productions™におけるコンピューターグラフィックを中心とする様々な制作スタイルの要素と、その多様な表現力を象徴すると共に、如何なる媒体や環境においても、バリアブルに適応できる柔軟性を保ち、如何なる構成においてもそのアイデンティティを失わず最も象徴的に体現します。
個別のスフィアはそのパターン、比率、濃淡のみが kumo.productions™ を視覚的に象徴する要素とし、その個別のレイアウトや個数についてはアイデンティティに影響しないものとします。
これは、その中で最も基本的なレイアウトであり、kumo.productions™ のすべてのアイデンティティはこの構成を中心に象徴されます。
スフィアの変形に特出した文脈や意図がない場合、基本の構成はこれを使用することを推奨します。
The kumo.productions™ Symbol Guidelines
The kumo™ Symbol — Systems
構成システム
このシンボルロゴは4つの大きさの異なるスフィアより構成され、また、それぞれはその陰影を表現するパーティクルによって構成されます。
Composition examples 1–6 / 構成例
このシンボルは、規定されたグリッド上に配置される、4つの大きさの異なるそれぞれのスフィアより構成され、そのパターン、比率、濃淡のみをアイデンティティとして定め、その個別のレイアウトについては以下の規定に則って自由に配置することができます。
Corner ornament / コーナーオーナメント
kumo.productions™ の OGP や Web ページ上部にみられる、スフィア単体をあしらいとして用いる構成です。上記の構成規定に加え、以下に従ってください。本ポータルでもページ右上に適用しています。
The kumo.productions™ Symbol Guidelines
The kumo™ Symbol — Incorrect Usage
使用禁止例
ロゴシンボルは如何なる場合においても規定の比率を逸脱した変形や歪曲をしてはならず、下記に定める例の他、著しくブランディングアイデンティティを損なう処理を行うことを禁止します。
The kumo.productions™ Logotype Guidelines
The kumo™ Logotype
ロゴタイプ — Pangram Pangram Foundry / Object Sans Regular
このロゴタイプは kumo.productions™ を視覚的に象徴する最も基本的な要素です。
Pangram Pangram Foundry による Object Sans Regular をもとにタイプを構成した本要素は、あらゆる場面において浸透、適応するとともに、自身のアイデンティティを最も象徴的に体現します。
これらのロゴタイプは、何れも kumo.productions™ を視覚的に象徴する基本的な要素です。これらタイプシンボルは媒体やグラフィックの設計に従い、それぞれの要素を状況に応じ使用し分けてください。
このロゴタイプは如何なる場合においても変形、回転、その他描き直すことを禁止し、また、一部用件を除いた個別オブジェクトのカラー変更や濃度変更を禁止します。
必ず本書又は付属するロゴデータより完全に複製されたものを使用しなければなりません。
また、一つの媒体において、単一の面上にて複数のシンボルを同時に視認できる際、同じサイズ・形状のものを使用するレイアウトは基本的に避けてください。
ただし、立体物はこれに限らないものとします。
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 で定めた書体は必ず独立させた文章として使用し、その他いかなる書体と組み合わせて文章を制作してはいけません。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789@¥$%!?.,:;(-)
kumo.productions.type-style — 100%(PRIMARY・SECONDARY)
kumo.productions.type-style2 — 100%(SECONDARY)
kumo.yakumono-typestyle — PRIMARY・SECONDARY(約物)
Logo Systems Guidelines
Logo Systems
ロゴシステム
ロゴタイプと文章を組み合わせ、名前、部署やシステムなどをアイデンティティに含むことが可能です。Logotype TERTIARY または、Logotype ABBREVIATION に、Helvetica Now Display を以下の例を参考に組み合わせ配置してください。
これらはシンボルおよびタイプを組み合わせた一例を記載しています。CENTRAL 及び PRIMARY を組み合わせたものが最も基本的な形になりますが、意匠、使用用途や媒体に合わせ、自由に組み替えてください。
Color Style Guidelines
Color Style
カラー
これらのカラーは kumo.productions™ におけるアイデンティティを確立するための要素です。
雲やその水滴の集まりを模したシンボルに合わせ、それぞれ空をイメージした特別なカラーで構成されています。
これらはそれぞれの明度・彩度・色相を変えてはならず、均一に塗られている必要があります。また、後述する組み合わせの規定に従い、配色してください。
Semantic colors — Extension / セマンティックカラー(拡張定義)
ベース7色に役割を与えたエイリアス。UI・制作物では原則こちらを参照します(定義: tokens/colors.css)。ハイライト2色の運用ルール(グレー上禁止・低コントラスト禁止)はセマンティック層でも同様です。
Color Style Guidelines
Color Combinations
配色
これらは kumo.productions™ におけるカラーシステムにおいて、組み合わせの例を記載したものです。
Incorrect usage / 禁止配色
これらは kumo.productions™ におけるカラーシステム上において、意図せずアイデンティティを損なわないよう禁止・注意する事項です。下記に定める例の他、著しくブランディングアイデンティティを損なう処理を行うことを禁止します。
Usage Examples
Usage Examples
使用例(氏名・連絡先等はダミー表記)
On-screen / 映像
Print / 印刷物
Billing Statement — 全文(ダミー表記)
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 — 全文(ダミー表記)
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 — 全文(ダミー表記)
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
Design Tokens
ブランド規定から定義したCSSトークン — styles.css が tokens/colors・typography・spacing を読み込みます
Semantic colors — 定義一覧は Color Style
Spacing — grid unit a = 4px
Radius / Elevation / Motion
区切りは1pxヘアライン。影は --shadow-card(極薄)と --shadow-overlay のみ
--dur 150ms / --ease cubic-bezier(0.2, 0, 0, 1)
focus ring: 2px rgba(100,173,212,.55)
Files
assets/svg/(ロゴ・シンボル)
Dark mode / ダークモード
<html data-theme="dark"> で全セマンティックトークンが反転します。地は Space black、文字は Base white、アクセントは Sky blue(Night sky blue は黒地でコントラスト不足のため禁止配色に準拠)。ソリッド系コントロール(--solid / --on-solid)は白黒が反転します。
Design System Extension
UI Components
ブランド規定から定義した標準UIセット(React+トークン参照)。以下は実動デモ — 操作できます。各コンポーネントは .jsx 実装+.d.ts(プロップ契約)+.prompt.md(使用例)の3点構成
配色・状態はガイドライン準拠: プライマリ=Base black、アクセント=Night sky blue、フォーカスリング=Sky blue、ヘアライン基調・150msの控えめなモーション。状態色(--success / --warning / --danger)はUI上の必要から、パレットに調和するoklch値で追加(最小限の使用)。