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

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つの漢字は、それ自体が数を数える仕組みになっています。

森木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つあります。iの点の位置、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

iの点の幅はステムの1.2倍で、xハイトのラインからステムの半分の距離にあります。ウェイトを変えると、それに合わせて自動的に変化します。

クリアスペース:xハイト×1(ファイルに内包)最小サイズ:スクリーン 140px・印刷 24mm

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

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

シンボルは、紙の上では紫、ダークUIでは明るい紫、光の上では白。背景は3種類でも、ルールは1つです。置くのは左上だけ、一辺は画面の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

システム

今回納品したのは、1つのルールです。次の事業ラインが加わっても、作り直さずに済むように。

納品したのは「ルール」

拡張ワードマーク

どんなサフィックスを付けても、成り立つ組み合わせが導き出せます。固定7項目、可変1項目、禁止4項目。それを算出するジェネレーターも用意しています。

まだ存在しない名前で試してみてください。AIがどのような事業を切り拓くかはまだわかりませんが、ルールはあらかじめそれらを受け止める準備をしておく必要があります。

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

中国語を単独で使わない

ワードマークは英語を主体とします。中国語と日本語は2行目に小さな文字で配置し、行間には一定の余白を設けます。

バイリンガルワードマーク:英語を主体とし、中・日は2行目に

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

母体とスタジオ

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

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

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

色は光からのみ生まれる

表面にあるのは、紙から墨までの7段階のニュートラルだけです。それ以外の色はすべて光からサンプリングします。紫、青、シアンの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。アイコンがあるだけなら珍しくありません。アイコンの作り方まで定めてこそ、デザインシステムです。

display-1 · 76/1.02muzi studiodisplay-2 · 40/1.14光が片側から降り注ぐtitle · 24/1.32六角形が i の点に立つlead · 21/1.58前の2世代が決めたのは色。この世代が決めるのは光。body · 17/1.75各光場は一度だけ使用し、番号はキャプションに記載。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

生きたアイデンティティデザイン

アイデンティティは、ファイル一式にもなれば、育っていくものにもなります。今回目指したのは後者です。ルールは固定し、生まれるものは毎回違う。

モチーフはひとつだけ

育っていくものにとって一番怖いのは、見分けがつかなくなることです。だから半分はあえて固定しました。あの点、文字、カラーパレット、アイコン、コンポーネントの状態。残りの半分を光に委ねています。

光場(ライトフィールド)は画面、空間、表紙、グッズに。紙の質感は、最後まで読ませるものに。すべての制作物はこのどちらか一方にのみ属します。

生きたアイデンティティデザインのモチーフ:光・暗部・粒子・一面に降り注ぐグラデーション・60°

光、暗部、粒子、一面に降り注ぐグラデーション、60°。

見送ったもの

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

候補のうち見送られた8つの方向性。上段:中央配置の六角形2種、角を落とした名刺、文字の中を光で埋める。下段:黒背景に大きな文字、巨大な章番号、縦書き、分数をメインにする。

シンボルはあくまでアクセントであり、主役ではありません。そのため、中央配置の六角形はすべて却下しました。

広い面積を占める文字は画像に埋め込みません。文字は選択でき、言語を切り替えられる必要があるからです。そのため、文字の中を光で埋める案、黒背景に大きな文字、分数をメインにする案はすべて見送りました。

角を落とした名刺は「モノの質感」を強調する方向性、縦書きや巨大な章番号は「エディトリアルデザイン」の方向性でしたが、どちらの方向性も採用しませんでした。

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

v10:1枚を全面に

画面の外から一面のグラデーション光が降り注ぎ、暗い部分は余白となり、粒子の質感が伝わります。具体的な形がないため、どうトリミングしても途切れることがありません。

v10 ②v10 ③v10 ④

v10 ⑤v10 ⑥v10 ⑦

同じルールから生成された6枚の画像。制作物ごとに1枚を割り当て、台帳で管理しているため、同じ画像が2回使われることはありません。

光の生成プロセス

1つのシード値が、光がどの辺から入り、どの程度の面積を覆い、紫寄りか青寄りか、そしてどのくらいの速さでフェードアウトするかを決定します。同じシード値からは常に同じ画像が生成され、シード値を変えれば別の画像になります。

01シード値各画像には固有の番号があり、同じシード値からは常に同じ画像が再構築されます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。

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

同じ光・制作物版同じ光・Webサイト版

左は制作物用、右はWebサイト用です。右は全体を暗く落とし、光を闇に沈めているため、明るい部分の色がかえって鮮やかに見えます。muzi.twの背景はすべて右のバージョンです。

3つのレーンを並行して

レーン・線と質感:表面に落ちる一筋の光レーン・具象:構造物、物事の仕組みを語るレーン・光場:物体はなく、光だけ

分けているのは被写体です。1つは質感を、1つは構造を、もう1つは光だけを撮ります。3つは同じルールを共有しながら、それぞれ別の問いに答えています。どれかがどれかに取って代わることはありません。

06

/09

IN USE

異なる場所へ展開する

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

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

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

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

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

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

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

グラフィック:壁に貼られた3連ポスターグラフィック:地下道の3連電飾看板

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

イベントに必要なもの

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

ブースのバックパネルとロールアップバナーには、それぞれ一度しか使わない光を1枚ずつ使います。ブースの画像は提案用のモックアップで、Muziは現在、実拠点を持っていません。

グッズ

グッズはすべて光場で統一しています。情報を載せるものではないからです。アイテムごとに一度しか使わない光を1枚ずつ割り当て、その1枚の1/1を印刷しています。

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

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

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

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

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

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

07

/09

MOTION

モーション

動くのは光だけ。シンボルと文字は元の位置にとどまります。

ブランドのオープニング

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

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

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

トランジションの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点は第一弾で、今後いくつ増やしても同じルールから生まれます。muzi.tw サイト全体全ページが同じトークンを読み込み、ワードマークとアイコンはすべて計算で生成しています。

成果このルールは現在稼働中です。muzi.twの全ページが同じトークンを読み込んでおり、ワードマーク、カラーパレット、アイコンはすべてジェネレーターが計算したもので、フォルダ内のファイルではありません。今後の課題VentureとInstituteはまだ名前だけです。ルール上は対応できますが、この2つの事業でどのような料金をいただき、誰にサービスを提供するのかは、まだ答えが出ていません。

自らがブランドデザインスタジオであるからこそ、自分たちのブランドをどう構築するかがかえって難題でした。

Credits

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

同じ手法を、御社の案件に当てはめると⁠?

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

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