ソリューション · ブランドアイデンティティ

Muzi Studio ブランド構成

ほかの会社のブランドを10年つくってきて、最後に手がけたのが自分たちのブランドでした。2016年の初代は黄色地に赤。当時の仕事はグラフィックデザインだけでした。その後Webと技術基盤の仕事が増え、アイデンティティにもグラデーションが加わりました。2026年の今回で、10周年になります。

この案件はブランドアイデンティティのソリューションで進めました。同じ進め方を御社の案件に当てはめたら、どうなるでしょうか。

カテゴリブランドアイデンティティ・デザインシステム年2016–2026(3世代)担当戦略・ネーミング・アイデンティティ・デザインシステム・Web範囲3世代・派生ライン4本・グラデーションのストップ9つ・トークン33ブロックステータス稼働中

Muzi Studio ブランド構成

カバーは v10 の光場です。この1枚は、ここでしか使っていません。

01

/09

ORIGIN

はじまり

2016年、このスタジオの名前はMuziCreativeで、中国語名は木子創意事務所。グラフィックデザインだけを手がけていました。当時のアイデンティティは黄色地に赤で、マークは i の点の位置に置いた六角形でした。

2020年、Webと技術基盤の仕事が加わり、アイデンティティも一度つくり直しました。地色を白にして、あの点を4色に分け、紫からターコイズへのグラデーションを初めて入れました。同じ時期に、Creative、Library、Insight、Shop の4つの派生ラインもできています。

2016年:黄色地に赤の六角形2020年:紫からターコイズへのグラデーション2020年:派生ライン4本、ルールなし

左から。グラフィックだけを手がけていた2016年ごろ、シンボルは単色のベタでした。2020年のグラデーション帯は当時のファイルから切り出したもので、ストップは2つ、その間はレンダラー任せです。派生ラインは4本で、色も4つ。それぞれが個別に描かれていただけでした。

どのデザインより先に、名前があった

両親の名前に「森」と「林」が1字ずつ入っていたので、子どもが「木子」と名づけられたのは自然な流れでした。森、林、木と並べると、ちょうど木を数えている形になります。

森木3つ林木2つ木木1つ

「木」の角度

「木」の横画・左払い・右払いは互いに60° = 六角形の3本の軸

「木」の横画、左払い、右払いを同じ60°の軸にのせると、その60°がそのまま六角形の角度になります。

そこでシンボルには、途切れずに敷き詰めていける六角形を選びました。実は2016年より前から、この形は名前の中にあったことになります。

2016年版の時点で、六角形はすでに「i」の本来の点に代わって乗っていました。

02

/09

THE TURN

転機

前の2世代が決めたのは色。この世代が決めるのは光。

2度の転機と、それぞれのきっかけ

2回の改訂は、どちらも先に事業が変わり、アイデンティティがあとを追いました。

2016MuziCreative 木子創意事務所グラフィックデザインの事務所2020MuziCreativeWebと技術基盤の仕事が加わる2026Muzi Studio技術と AI が増え、広げられる母体が必要に

2026年、ここはもうデザインだけのスタジオではありません。技術の比重は年々大きくなり、AIでできることも一気に増えました。Muzi には、この先も外へ広げていける母体が必要でした。

新しくする前に、変えないものを決める

色は何度も変わってきました。納品するものが紙から画面へ、そして光へと変わってきたからです。

iあの点の位置60°六角形の角度#6400DE紫、2020年と同じ値

変えないものは3つです。あの点の位置、60°の角度、そして紫。2026年の #6400DE は、2020年版と1ビットも違いません。

03

/09

DERIVATION

導出

今回、10年で初めて書体を変えました。

一歩ずつ組み立てる

6ステップの導出

比率はすべてトークンから取っています。これは現行の幾何で描き直した構成の再現で、当時のスケッチではありません。

ワードマークの構造

ワードマークには点のない i を使っています。文字全体のなかで、取り替えても読めるのはあの点だけ。だからシンボルをそこに置きました。

項目値六角形の幅1.20 × ステム幅xハイトからの距離0.50 × ステム幅ワードマークのトラッキング+1.5%ディスクリプター0.70 × xハイト · 0.1em · 500オプティカルスペーシング490.6ユニット

3つのうち、いちばん無駄のない形

同じ面積での周長:六角形がいちばん短い頂点を拡大:直角なら隙間なし、角丸だと星形の隙間

平面を隙間なく埋められる正多角形は3種類だけです。面積が同じなら、辺の合計がいちばん短いのは六角形。ただし、それが成り立つのは頂点が丸くない場合に限ります。実際に試すと、角丸6%で各頂点に白いピンホールが開き、12%でははっきりした星形が出ました。

すべてステム幅を単位に

3つの倍率:8×・1×・16px

点の幅はステムの1.2倍、xハイトのラインからはステム半分の距離。ウェイトを変えると、点も一緒に変わります。

クリアスペース:xハイト1つ分、ファイルに含み済み最小サイズ:スクリーン 140px・印刷 24mm

クリアスペースはxハイト1つ分で、ファイルにあらかじめ入っています。ロックアップの最小サイズは画面で140px、印刷で24mm。それより小さいときはワードマークだけを使います。

紙面でのシンボル:紫ダークUIでのシンボル:明るい紫光の上でのシンボル:白、左上、≤ 6%

シンボルの色は、紙の上なら紫、ダークUIなら明るい紫、光の上なら白。背景が3種類あっても、ルールは同じです。置くのは左上だけで、一辺は画面の6%まで。

より細かく、しかも測れる形で

ストップ2つ ➔ 9つ

同じグラデーションのストップを2つから9つに増やしました。両端の色を替えた段階で、白文字を安全に載せられる範囲は一度狭くなりました。そこで輝度カーブを調整し、元に戻したうえで、前の世代より広くしています。

パラメータ値補間色空間oklch輝度カーブt^1.5中間彩度+0.03色相パスshort_arcカラーストップ9個

位置カラー0.0%#6400DE12.5%#5324E525.0%#3E3CE937.5%#1A51EB50.0%#0064E862.5%#0076E275.0%#0087D987.5%#0095CF100.0%#00A1C5

10年で3世代。あの点は動いていない

3世代を並べる

変わったのは色と書体、それに媒体です。六角形の位置と形は、10年間一度も動かしていません。

04

/09

THE SYSTEM

システム

今回納品したのは、ひとつのルールです。次の事業ラインが加わっても、作り直す必要はありません。

納品したのは、ひとつのルール

拡張ワードマーク

後ろにどんな名前が来ても、成り立つ組み合わせを導けます。固定が7項目、可変が1項目、禁止が4項目。組み合わせはジェネレーターが計算します。

まだ存在しない名前を入れて試すこともできます。AIでこの先どんな事業が生まれるかはまだ読めないので、ルールを先に用意しておきました。

固定7ワードマークのアウトライン(muzı の path)—— 描き直さない六角形の形、向き(pointy-top)、直角ステムに対する六角形の比率(1.20× / 0.50×)ワードマークのトラッキング +1.5%ディスクリプターの4つのパラメータ(0.70× / 0.10em / 共通ベースライン / 500)オプティカルスペーシング 490.6 ユニット紫は六角形だけに使い、サイト全体で色が出るのはそこだけ可変1スロットに入る語(studio / labs / …)—— 長さは自由。オプティカルスペーシングが自動で吸収する禁止4スロットの語を小文字にするスロットの語に色をつける(色を2回使うと、六角形が唯一のシンボルでなくなる)事業ラインごとにワードマーク、六角形、比率を変える事業ラインごとに2つ目のブランドカラーを足す

中国語だけでは使わない

ワードマークは英語が主です。中国語と日本語は2行目に小さく入れ、2行の間には余白をとります。

バイリンガルのワードマーク:英語が主、中・日は2行目

スタジオの中国語名は「木子工作室」で、字間を広げて muzi と同じ幅にそろえます。日本語名は「木子工房」。母体は「木子」とだけ書きます。

母体とスタジオ

Muzi は会社で、muzi studio はその下にある事業ラインのひとつです。母体が使うのは紙と墨だけ。紫はあの点だけで、上端に9ストップのグラデーションバーを1本引きます。スタジオはこのバーを引きません。スタジオの色は光の中にあります。

母体とスタジオ:同じ色の2つの状態

同じ色の2つの状態。左は母体のグラデーションバーで、太さはワードマークのステム幅と同じ、左右は版面の内側に収めます。右はスタジオの名刺の裏。光の上に白いシンボルをひとつ、左上に置いています。

色は光からしか取らない

表面に使うのは、紙から墨までの7段階のニュートラル1本だけです。ほかの色はすべて光からサンプリングします。紫、青、シアンの3点です。光の上に載せる文字は3種類のグレーだけ。データビジュアライゼーションの色順も、同じグラデーションから取っています。

paper#FAFAFD16.7:1mist#DFDFE313.1:1steel#4D4D508.1:1ink#1A1A1D16.7:1field#0E0E11光場の暗部gradient9 stopsoklchviolet#6400DE0%blue#0064E850%cyan#00A1C5100%text#FFFFFF · 19.27:1text-muted#9D9D9F · 7.12:1text-subtle#7A7A7D · 4.5:1

文字、コンポーネント、アイコン

文字サイズは8段階で、それ以上は増やしません。Outfit はワードマークだけに使い、本文と見出しはすべて IBM Plex です。アイコンも1点ずつ好きに描くのではなく、同じ作字ルールに沿って描いています。

display-1 · 76/1.02muzi studiodisplay-2 · 40/1.14光が片側から差し込むtitle · 24/1.32六角形が i の点に乗るlead · 21/1.58前の2世代が決めたのは色。この世代が決めるのは光。body · 17/1.75光場は1枚につき1回だけ。番号はキャプションに書く。small · 15/1.65始点は1ビットも動かさず、終点は導出した値。caption · 13/1.6SEED 4471 · 光は右上から · 色相 231°label · 11.5/1.9PAPER · FIELD · 1/1

プロジェクトを始めるプロジェクトを始めるプロジェクトを始めるプロジェクトを始めるプロジェクトを始めるdefaulthoverfocus-visibleactivedisabled会社名Muzi StudioEmailmuzi@形式が不完全ですブランドアイデンティティWebSEED 4471231°色相中央値FIELD · 1/189.8%暗部の割合

brandwebcontentappvideosocialdesignadsrevenuebrandwebcontentappvideosocialdesignadsrevenue

arrow-rightarrow-leftarrow-uparrow-downchevron-rightchevron-downcloseaddminuscheckcopydownloadexternallinkmenusearchmailplaypausealertinfo

05

/09

ALIVE

生きたアイデンティティ

今回の光場は、どの1枚も一度しか使いません。番号はキャプションに記してあります。ルールは変えずに、つくる1枚ごとに違うものが出てきます。

モチーフはひとつだけ

育っていくものは、見分けがつかなくなるのがいちばん困ります。だから半分はあえて固定しました。あの点、文字、カラーパレット、アイコン、コンポーネントの状態です。残りの半分は光に任せています。

光場は画面、空間、表紙、グッズに。紙の質感は、最後まで読んでもらうものに。どの制作物も、どちらか一方にだけ属します。

生きたアイデンティティのモチーフ:光・暗部・粒子・一面に広がるグラデーション・60°

光、暗部、粒子、一面に広がるグラデーション、60°。

見送ったもの

見送りの記録:候補から外した8つの方向

候補から外した8つの方向。上段:六角形を中央に置いた案2つ、角を落とした名刺、文字の中に光を入れる案。下段:黒地に大きな文字、巨大な章番号、縦組み、分数を主役にする案。

シンボルは添え物なので、六角形を真ん中に置いた案はすべて外しました。

大きな文字は画像に焼き込みません。文字は選択できて、言語も切り替えられる必要があるからです。文字の中に光を入れる案、黒地に大きな文字、分数を主役にする案は、この理由で外しました。

角を落とした名刺は「物の質感」の方向、縦組みと巨大な章番号は「エディトリアル」の方向でした。どちらの方向も、最終的には選んでいません。

どの1枚も、使うのは一度だけ

v10:1枚を全面に

画面の外から、グラデーションの光が一面に差し込みます。暗いところには何もなく、粒子は手で触れられそうなほど。形がないので、どう切り取っても途切れません。

v10 ②v10 ③v10 ④

v10 ⑤v10 ⑥v10 ⑦

同じルールから生まれた6枚です。制作物ごとに1枚を割り当てて台帳に記録し、同じ1枚を二度は出しません。

光のつくり方

シードひとつで、光がどの辺から入るか、どれだけ覆うか、紫寄りか青寄りか、どれだけ早く消えるかが決まります。同じシードからはいつも同じ1枚ができ、シードを変えれば別の1枚になります。

01シード1枚ごとに番号があり、同じシードからはいつも同じ1枚が再現される02サンプリング光が入る辺、覆う範囲、消え方、粒子の粗さモデル段階のサンプル03モデル固定のスタイル指定+今回の変化分04契約12の軸で測り、明らかに外れたものを先に止める目視段階のサンプル05目視形がおかしくないか、人が見たものだけをホワイトリストへ06台帳1枚使うたびに記録し、二度と使わない

生成したら、まず測る

色相と暗部の割合はこのブランドの署名なので、許容範囲を狭くしています。光の位置や大きさは広め。範囲から外れたものは、そのまま引き直します。

色相中央値202 – 252署名暗部比率0.668 – 0.933署名色相幅46 – 66署名彩度中央値0.414 – 0.762自由粒子エネルギー0.0003 – 0.0006自由明部スパン0.312 – 0.767自由エッジエネルギー0.0011 – 0.0028自由最大輝度0.160 – 0.426自由明部重心 x0.320 – 0.849自由明部ブロック数1.000 – 2.000自由平均輝度0.033 – 0.095自由明部重心 y0.163 – 0.818自由

それから、人がもう一度見る

契約では「何かの形に見える」ことまでは測れません。光の筋、光の球、画像の中に勝手に出てきた文字は、どれも人が見て止めました。見て通したものだけがホワイトリストに入り、いまは45枚あります。

26 枚契約の測定に使ったサンプル0.111いちばん近いペアの構図距離1.387ペア間距離の中央値

外した光:光の筋光の筋外した光:光の球光の球外した光:オーロラと波オーロラと波外した光:画像に文字が出る画像に文字が出る

灯りはひとつ

灯りはひとつ:光は右上、文字は左下の暗がりに灯りはひとつ:同じルールで、光を差し替える

文字は光の反対側に置きます。本文は光から離れるほど暗くします。どの1枚にも隅に番号があります。シード、光の方向、色相、1/1。

同じ光、2つのバージョン

同じ光・制作物用同じ光・Web用

左は制作物用、右はWebサイト用です。右は全体を暗く落として光を暗がりに沈めているので、明るいところの色がむしろ濃く見えます。muzi.tw の背景は、すべて右の版を使っています。

3つのレーンを同時に走らせる

レーン・線と質感:ひと筋の光が表面に落ちるレーン・具象:構造物で、仕組みを見せるレーン・光場:物はなく、光だけ

分け方の基準は被写体です。ひとつは質感を、ひとつは構造を撮り、もうひとつは光だけを撮ります。3つとも同じルールを使い、それぞれ別のものを扱っています。

06

/09

IN USE

場所を変えて置く

同じルールで、8つの場面。どの背景にも、一度しか使わない光を1枚ずつ使っています。

ブランドツール一式:名刺の表・便箋・封筒

平面のデザインはプログラムで組み、ピクセル単位でベクターの元データから書き出しています。シーンはモデルが生成した無地の写真です。あのシンボルを、モデルは一度も描いていません。

デジタル:ノートPCに映るmuzi.twのトップページ

画面に映っているのは muzi.tw のトップページです。

スマートフォンの3ページ:サービス・実績・私たちについてプレゼン資料:会議室のスクリーンに映る表紙

左:スマートフォンの3ページ(サービス、実績、私たちについて)。右:会議室のスクリーンに映るプレゼン資料の表紙。

グラフィック:壁に並べた3連ポスターグラフィック:地下通路の3連電飾看板

ポスターと電飾看板も、それぞれ自分の光を1枚ずつ使っています。

イベントに必要なもの

大型イベント:ブースのバックパネル

ブースのバックパネルとロールアップバナーにも、一度しか使わない光をそれぞれ1枚。ブースは提案用のカンプで、Muzi はいま物理的な拠点を持っていません。

グッズ

グッズは情報を伝える必要がないので、すべて光場にしています。1点ごとに一度しか使わない光を1枚割り当て、刷られているのはその1枚の1/1です。

グッズ:トートバッグ・ノート・ステッカーの平置きグッズ:スカーフグッズ:アクリルブロック

トートバッグ、ノート、ステッカー。スカーフ。アクリルブロック。

グッズ:デスクマットグッズ:コースター3枚セットグッズ:ポストカード3枚セット

デスクマット。コースター3枚セット。ポストカード3枚セット。

グッズ:メタルブックマークグッズ:額装ジークレー

メタルブックマーク。額装ジークレー、限定1枚。

07

/09

MOTION

動かす

動くのは光だけ。マークと文字は動きません。

ブランドのオープニング

オープニング。黒い画面の縁から光が浮かび、画面を横切って広がります。左上にシンボル、続いてワードマークが現れます。あの点が動くのはこの一度だけ。回転も、ループも、点滅もしません。

ゆっくり流れる光場セクションのトランジション

左:ゆっくり動く光場。ここでは1周7秒に縮めていますが、ルールでは18〜30秒で、ループのつなぎ目が見えないこと。右:セクションの間は一度墨まで落とし、それから次の1枚を明るくします。

トランジションの4つの速度

段階時間用途即時0ms状態の切り替え:チェック、フォーカス速い120msボタン、タグ標準240msパネル、ドロワー遅い400msページ遷移、あの点の着地使わない> 600ms人が待ち始める

08

/09

AFTER HANDOFF

納品したあと

ガイドラインに加えて、毎日ひとりでに動くチェックも納品しました。

違反を止める3つのチェック

01アイデンティティverify_muzi_identity.py41のアセット9つの不変要素フォント依存なし合格02レイアウトverify_muzi_case.py8段階の文字サイズ左端は1本セクション見出しは1種類9幕30節合格03レンダリングverify_case_render.py画像が本当に読み込まれるつぶれていない横にはみ出さない版面に空白の帯がないコントラストが足りているキャプションが外れていない合格

2つ目のチェックは、このページでも実際に走りました。止めたのは「ページが勝手に9段階目の文字サイズをつくっていた」件です。この種の誤りは、見た目には「この行、少し大きいかな」くらいにしか見えません。

33のブロック、1つの契約

ワードマーク、幾何、色、光、文字サイズ、余白、状態、レイアウト、モーション、仕上げ。すべて1つの JSON に書いてあります。ページもジェネレーターも、これを読みます。

muzi-tokens.json33ブロックtypeface / metricsフォントファミリーとステム幅、xハイト、キャップハイトwordmark / mark / lockupドットなしのi、六角形の比率、オプティカルスペーシングcolor / gradient / neutrals唯一のカラーイベント、9つのストップ、7段階のニュートラルlight / web_grade光から抽出した色、Web版の濁りbilingual / parent中国語・日本語の2行目、母体のグラデーションバーmotion4つの速度、動くのは光のみtype / space / layout8段階の文字サイズ、9段階の余白、版面extension固定7項目、可変1項目、禁止4項目craft目に見える6つの手法

ガイドラインの1ページ:起源

左:ガイドライン81ページ。HTML と PDF は同じソースから出力。右:tokens の一部。

"mark": {
  "shape": "hexagon", "orientation": "pointy-top",
  "corner_radius_ratio": 0.0,
  "tittle": { "flat_width_over_stem": 1.2,
              "gap_above_x_height_over_stem": 0.5 }
},
"gradient": { "from": "#6400DE", "to": "#00A1C5", "stops": 9 }

09

/09

THE OUTCOME

納品物と結果

納品したもの

ワードマークとシンボル41のアセット:横型、小サイズ、白抜き、単色、中国語・日本語バイリンガル、母体muziデザイントークン33ブロックを1つのJSONに。ページもジェネレーターもこれを読みます拡張ルールとジェネレーター固定7項目、可変1項目、禁止4項目。どんなサフィックスでも、成り立つ組み合わせを導けます9ストップのグラデーションと表面のカラーパレットニュートラルは7段階の1本だけで、ほかの色はすべて光からサンプリング。白文字を載せられる範囲は計算上61%までアイコンの作成ルール線幅、端点、角、グリッドをすべてルール化。いまの11点は第1弾で、この先何点増やしても同じルールで描けますmuzi.tw サイト全体全ページが同じトークンを読み、ワードマークとアイコンは計算で出しています

成果このルールはいま実際に動いています。muzi.tw の全ページが同じトークンを読み、ワードマーク、カラーパレット、アイコンはジェネレーターが計算して出しています。フォルダから古いファイルを持ってくることはありません。これからの課題Venture と Institute は、まだ名前だけです。ルールの上では受け止められますが、この2つで何に対してお金をいただき、誰の役に立つのかは、まだ答えが出ていません。

自分たちがブランドデザインのスタジオなので、自分のブランドをどう組み立てるかが、かえって難題になったんです。

Credits

Design & BuildMuzi Studio 木子工房クライアント自社プロジェクト年2016–2026ソリューションブランドアイデンティティ(戦略・アイデンティティ・デザインシステム)納品物ワードマークとシンボル・デザイントークン・拡張ルールとジェネレーター・グラデーションとカラーパレット・サービスアイコン

同じ方法を御社の案件に使うと、どうなるでしょう。

まずは30分、無料でお話ししましょう。

  • 次の実績LifeOS ブランド設計