KUMI-GLOWクミグローデザイン言語

KUMI-GLOWクミグロー組子構造に、発光の余白を。

KumiGlowクミグローは、表面的な和風装飾を排し、純粋な数理的ワイヤーフレームの規律に基づいて、画面内の「空間」と「時間」を制御・抑制するためのデザインシステムである。

策定日時
2026年9月28日〜29日
提唱・開発主体
TOIROといろ
用語体系の定義
麻の葉線の中に、光を置く。

用語体系の定義

KumiGlowクミグロー様式の総称/静止自発光

日本の伝統的組子幾何学の線そのものに、抑制された光彩(Glowグロー)を宿らせた静止状態のデザイン様式。

「線の中に、光を置く。」

  • テクスチャを貼り付けるのではなく、漆黒の夜地(墨)に浮かぶベクター線そのものが自発光体となる。
  • 幾何学の骨格(グリッド)は完全な対称性と比率を保ち、構造を無視した独立波紋を排除する。
KumiPulseクミパル動的演出/エネルギー伝播

固定された幾何学骨格の稜線および交点(ノード)のみを伝い、エネルギー波束が伝播・呼吸・明滅するアニメーション演出。

「構造への絶対的な従属」

  • 光は幾何学の線から逸脱しない。

スタイルガイド

カラーパレット

伝統和色の思想を継承し、光の三原色(RGB)加法混色を成立させる6色構成。

夜地 / 墨(すみ)#111009環境基底完全な黒ではなく深みのある闇。光が溶けて消える終着点。
白練(しろねり)#FFFFFF文字・情報幾何学の干渉を受けず、最も高い可読性を担保する文字色。
金の発光 / 黄金・琥珀#D4AF37中核光彩伝統幾何学の線に宿る基軸色。落ち着いた金箔・真鍮の輝き。
翡翠(ひすい)#34D399補助の翠回復、覚醒、安全、調和。RGBにおける緑(G)軸を担保。
空(そら)#60A5FA補助の青静寂、シールド、防壁、情報。彩度を抑えた澄んだ青色光彩。
珊瑚(さんご)#FB7185補助の紅生気、緊張、エネルギー、警告。原色赤を排した品格ある紅の光彩。
  • 光の三原色(RGB)加法混色を論理的根拠とし、中核の「金の発光」に加えて「翠(緑)」「空(青)」「珊瑚(紅)」を配備。
  • 背景は完全なデジタル黒(#000000)ではなく、温かみと深みのある夜地/墨(#111009)を採用し、水墨画のような減衰を受け止める基盤とする。

空間の規律

組余白(Kumi-Yohakuクミヨハク):文字や主要UIの可読性を確保し、光を美しく際立たせるために、あえて計算して配置される闇の領域。

  • 画面全体を均一に100%発光させることを固く禁じる。
  • 情報を伝える領域(UI)と光を楽しむ領域(幾何学)の「偏り・バランス」を意識的に設計する。
  • 夜地(墨 #111009)へ向かって光が滑らかに溶けていく減衰グラデーションを配置し、情報の邪魔にならない場所へ光を心地よく配分する。
減衰グラデーション対比図

5大コア幾何学パターン

麻の葉・蜀江・菱・七宝・紗綾形の完全固定・完全対称ワイヤーフレーム。

麻の葉 Asanohaアサノハ

正六角形をベースに三角形・菱形が交差する六芒星構造。

固有挙動
多重放射・輪郭パルス
UIにおける役割
フラッグシップ、全画面背景、メインウィンドウ

麻の葉をかたどった正六角形を基本とし、魔除けや子どもの健やかな成長を願う柄とされています。(新晃社)

蜀江 Shokkouショッコウ

固有挙動
結界・面展開パルス
UIにおける役割
エナジーシールド、防御バフ、広域均一グリッド

中国の三国時代に魏、呉と共に三国時代を形成した国、「蜀(しょく)」にあった「蜀江(しょっこう)」という河の名前に由来しています。(吉原木工所)

菱 Hishiヒシ

固有挙動
超硬質・ステップ通電
UIにおける役割
データ分析HUD、テック系ダッシュボード、情報枠

菱の紋様は、池や沼でとれる一年草のヒシの実またはヒシの葉を図案化したものとされています。(吉原木工所)

七宝 Shippouシッポウ

円弧が四方に均等に重なり合う連続曲線。

固有挙動
穏やかな波紋・呼吸(ブレス)
UIにおける役割
優美・調和、待機状態、チャージ完了リング

円を四方八方に重ねることで永遠の連鎖や繁栄、円満、調和を象徴する吉祥柄です。(新晃社)

紗綾形 Sayagataサヤガタ

「卍」を崩して連続結合した直角クランクグリッド。

固有挙動
基板回路・直角走査
UIにおける役割
電子基板(PCB)風UI、高速チャージ、配線パルス

紗綾形は卍(まんじ)を斜めに崩して連続文様とした柄で、「不断長久」を表す吉祥文様の一つです。(新晃社)

文様の由来の参照:吉原木工所「組子紋様」/新晃社「和柄文様のデザイン」

3D空間への展開と「軸」の規律

幾何学骨格の画面内での比率・対称性という「軸」の完全保持(3D空間やカメラワークに配置する場合も、組子本来の数理的規律を維持する)。

DRAG TO ROTATE 3-FACE CUBE CORNERドラッグ・トゥ・ローテート・スリー・フェイス・キューブ・コーナー

Kumi-Pulseクミパル 実演(動的演出)

5大文様の線上だけを走る固有パルス(消散モード)。

系統
5大パターン
面で動く:光の前線が、骨格を掃く・広がる。中心交点から直線に沿ってエネルギーが走り、交点を励起させることで多層的な輪郭が浮かび上がる。

KumiPulseクミパル 詳細動的パラメータ仕様

空間伝播ベクトル(8つの基本軌道)

幾何学の骨格(線とノード)の上を、エネルギーがどの方向へ伝うかの制御仕様。

走査(Scanスキャン)
画面端から端へ均一な光帯が通過。
収束(Convergenceコンバージェンス)
外周ラインから中心ノードへ光が集束。
解放 / 放射(Release / Radiationリリース/ラディエーション)
中心の核から外周へ一気に炸裂・放出。
集中(Focusフォーカス)
特定のUIノードやボタンへ向けて周囲の線が連鎖的に励起。
分散(Dispersionディスパージョン)
太い主線から細線へ毛細血管のように均等に分散。
波状 / 伝播(Wave / Propagationウェーブ/プロパゲーション)
交点を順次リレーしながら外へ波打つ。
循環(Loop / Circulationループ/サーキュレーション)
多角形フレームの外周を光の塊が途切れず周回。
呼吸(Breatheブリーズ)
線上を移動せず、幾何学全体が一斉に膨張・収縮するように明滅。
パルスプロファイル(波形と寿命)
走破(Full Traverseフル・トラバース)
始点から終点(画面端)まで減衰せずに鋭く突き抜ける(決定時・アクション用)。
消散(Decay / Dissolveディケイ/ディゾルブ)
中心から発生し、外周に届く前にエネルギーが失われ夜地へ溶け消える(待機・アンビエントUIの標準挙動)。
彗星尾(Comet Tailコメット・テール)
先頭が最も鋭く強く発光し、後方に長く滑らかなグラデーションの尾を引く。
矩形波束(Square Packetスクエア・パケット)
一定の長さを持った硬質な光のブロックがライン上を移動する。
放電・明滅の質感(テクスチャ)とレベル調整
チカチカ(Flickerフリッカー / 点滅)
微細な電圧の揺らぎから、強力なストロボフラッシュまで。
バチバチ(Electric Arcエレクトリック・アーク / 高速放電)
控えめな通電から、交点間を火花のようにショートして結ぶ高エネルギー放電まで。
速度レベル(Speedスピード Lv.1〜20)
Lv.1(ゆったりとした呼吸)〜 Lv.20(クロック周波数の超高速走査)。
端点漏出・物理解放モード(Terminal Release Modesターミナル・リリース・モード)

紗綾形(卍)や非閉塞の幾何学において、線が途切れている端点(末端ノード)から外へ光が出る際の振る舞いを、地球・宇宙・水中の物理現象に基づき定義した演出プリセット。

① 真空射出(Vacuum Beamバキューム・ビーム)
物理の着想:宇宙 / 真空
直線性100%。線の太さと角度を完全に維持し、レーザーのように画面外へ一直線に突き抜ける。
ゲームUIでの役割:超長距離スキル、決定打、通信確立
② 放電破裂(Corona Burstコロナ・バースト)
物理の着想:地球 / 大気放電
端点を出た瞬間、パチパチッと微小な火花(アーク)や破片となって四散・爆発して消える。
ゲームUIでの役割:クリティカルヒット、過負荷、エラー警告
③ 膨張散逸(Thermal Flareサーマル・フレア)
物理の着想:地球 / 熱膨張
線から離れた途端、光がラッパ状・霧状に太く広がり、柔らかく夜地(墨)に溶けて蒸発する。
ゲームUIでの役割:通常攻撃の余韻、優美なUIフォーカス
④ 水性浸透(Aqueous Leakアクエアス・リーク)
物理の着想:水中 / 散乱
直進せず、先端からインクが水に滲むように、青白い光のモヤとなって全方位へボワッと広がって減衰。
ゲームUIでの役割:シールド被弾、防御バフ、回復演出
⑤ 飽和凝縮(Node Containmentノード・コンテインメント)
物理の着想:静電蓄積 / 球電
外へ飛び出さず、線の端点に光がググッと圧縮され、球状(玉)になってパチパチと脈打ちながら留まる。
ゲームUIでの役割:チャージ待機、エネルギー満タン、ホールド状態
パラメータ設定値
Projection Reachプロジェクション・リーチ(射出長)
Shortショート (1〜20%) / Mediumミディアム (30〜60%) / Infiniteインフィニット (100%)
Vector Consistencyベクター・コンシステンシー(直進維持率)
0% (全方位散乱) 〜 100% (元の線の角度を完全維持)

演出論

時間の規律

組の間(Kumi-Maクミマ / 着想:床の間):アニメーションのタイムラインにおいて絶え間ない動きを排除し、緊張と弛緩のインターバルを持たせる時間設計。

  1. 01蓄圧の間(Chargeチャージ)パルス発火直前、0.1〜0.2秒間わずかに輝度を沈ませ、交点へエネルギーを凝縮させるタメ。
  2. 02凝固の間(Holdホールド)重要ノード(交点)に光が到達した際、数フレームだけ完全停止して光圧をその場に留める「見得(みえ)」の静止。
  3. 03散逸の間(Cooldownクールダウン)光の波束が走り去った後、微弱な熱(ブルーム)が夜地へ消散していくまでの冷却の余韻。
間がない機械的な動き
蓄圧・凝固・散逸を伴う動き

追補録(エピローグ)

開発の対話と、残しておきたかった思想

仕様書という枠組みを超えて、このデザインシステムがどのような試行錯誤と対話を経て形作られたのか。その背景にある動機と、ものづくりへの思いの記録。

  1. 01

    直感から始まる言葉の強さ

    デザインの体系を考え始めるとき、最初はつい「電紋」や「透光紋」といった小難しい言葉や、既存の表現に頼ろうとしていました。しかし、実際にゲームを開発し、画面を作る現場に立つと、そうした言葉はどこか堅苦しく、手触り感が薄いと感じていました。

    ふと思い浮かんだのは、子どもの頃から親しまれている「ピカチュウ」のような、直感的なネーミングの発想でした。「ピカッと光る」「ネズミの連想」、そしてあの語呂の良さ。理屈をこね回すのではなく、誰もが一瞬でイメージできるシンプルな結びつきから生まれ、やがて世界共通の呼び名として定着していった言葉の力です。

    「組子という構造(Kumiクミ)」と、「光るという現象(Glowグロー)」。この2つを素直に合わせた「KumiGlowクミグロー」という響きが決まったとき、頭の中で散らばっていたピースが一気に引き締まりました。

    「背景はKumiGlow(クミグロー)で、決定時にKumiPulse(クミパル)を走らせて」。
    現場で軽やかに交わされるこの0.1秒の直感的な言葉こそが、本当に役立つ共通言語になると確信しています。

  2. 02

    自分自身の「困惑」から生まれた定義

    世の中を見渡すと、「和」と「サイバー」を組み合わせた表現はたくさんあります。しかし、いざ自分が本格的なゲームUIや画面を作ろうとしたとき、「具体的にどうすれば安っぽくならず、本物の美しさを再現できるのか?」という指針がどこにもないことに気づきました。

    鳥居や漢字を配置するのもひとつの表現ですが、自分が作りたかったのはもっと根本的な、日本の職人がミリ単位で木を組んできた「構造そのものの美しさ」でした。足し算で飾り立てるのではなく、骨格そのものに光を宿らせること。自分が開発の中で迷い、試行錯誤し、必要に迫られたからこそ、この「KumiGlowクミグロー」というルールを一つひとつ言語化していくことになりました。

  3. 03

    3D空間への展開と「軸」の規律

    ゲームや最新のクリエイティブ環境において、3D空間へのアプローチは欠かせないものです。KumiGlowクミグローも、立体的な空間やカメラワークの中で機能していくことを想定しています。

    ただし、そのときに意識したいのが「幾何学の軸を崩さない」ということです。パースがついたり空間に配置されたりしても、組子本来の持つ比率や対称性という「数理的な規律」が保たれているからこそ、そのオブジェクトは美しい佇まいを維持できます。立体として空間に存在させながらも、骨格としての誠実さを手放さない。そのバランスを探るための基準として、この規律を置いています。

  4. 04

    情報を引き立たせるための光の配分

    今回のWeb画面では、左側に文字を置き、右下に光を溜めるというレイアウトを試みました。しかし、これは決して「右下が明るくなければいけない」という固定ルールではありません。

    本質は、「画面全体を均一に光らせるのではなく、文字や情報のために闇を残し、光をどこかへ心地よく逃がしてあげること」です。Photoshopフォトショップやコードの機能で言えばグラデーションやマスクに近い処理かもしれません。しかし、「単に色を混ぜる」という作業ではなく、「人が情報を読むための静けさと、光の余韻をどう同居させるか」という意識を持つこと。その意図を共有するための合言葉として、「組余白」という視点を提案しています。

  5. 05

    現場の使い手に委ねる余白

    「組の間」にしても、最初は「KuminoMaクミノマ」という呼び方も考えました。けれど、世界中のクリエイターが使うことを想像したとき、助詞を取り払った「Kumi-Maクミマ」のほうがシンプルで馴染みやすいだろうという結論に至りました。

    もちろん、日本の現場で「組の間(くみのま)」と呼んでも、「クミマ」と呼んでも、それは使う人の自由です。FigmaフィグマやAfter Effectsアフター・エフェクツのどの機能を使って再現するかも、エンジニアがどんな変数名でコードを書くかも、それぞれの現場のやりやすさが一番です。

    私たちが提案したいのは「厳しい縛り」ではなく、「日本の伝統美をデジタル画面で活かすための、ひとつの美しい道標」です。自分が欲しくて作ったこの考え方が、同じように悩むクリエイターの表現を少しでも豊かにする助けになればと願っています。

実稼働プロダクト

MLBBナビ

game.toiro.space/mlbb/

MLBBナビのホーム画面。背景に麻の葉文様が敷かれている
ホーム
MLBBナビの設定画面にあるクミグロー(KumiGlow)の項目。濃さ・柄の大きさ・演出・色を選べる
設定「クミグロー(KumiGlowクミグロー)」
濃さ
なし・薄い・普通・濃い
柄の大きさ
小・中・大
演出
静止・斜め・上から下・波紋
色
金・赤・青・緑・白・全て
発光対象
麻の葉の背景/枠線/勝率・Tierティアの数字/押されたボタン

ScrimAIスクリムエーアイ

game.toiro.space/mlbb/scrimai/app/

ScrimAIのダッシュボード(見学用サンプルデータ)。背景に麻の葉文様が敷かれ、カードの枠線が金色に光る
ダッシュボード
ScrimAIの設定画面にあるクミグロー(KumiGlow)の項目。濃さ・柄の大きさ・演出・色を選べる
設定「クミグロー(KumiGlowクミグロー)」
濃さ
なし・薄い・普通・濃い
柄の大きさ
小・中・大
演出
静止・斜め・上から下・波紋
色
金・赤・青・緑・白・全て
発光対象
麻の葉の背景/枠線/選択中のタブ/押されたボタン

2026年10月3日撮影(ScrimAIは見学用サンプルデータ)