「らしさ」をコード化する──デザイントークンとブランドの関係

— 01 —トークン設計の実務

デザイントークンは、色・書体・余白・角丸・影といったデザインの最小単位に、意味のある名前をつけて再利用する仕組みだ。まず生の値をプリミティブとして定義し、その上に用途を示すセマンティックな層を重ねる。たとえば青の色コードそのものではなく、「主要色」「背景」「注意」といった役割で呼べるようにする。

階層化の勘所は、余白やサイズを飛び飛びの数値ではなく段階で持つことだ。4や8を基準にした刻みで組むと、画面ごとに微妙にずれた余白が生まれにくくなる。命名も、見た目ではなく役割で決める。「薄い灰色」ではなく「境界線の色」とすれば、後で色を変えても名前が意味を保つ。

実装面では、Figmaの変数で定義したトークンを、コード側の変数と対応させる連携が鍵になる。デザインと実装が同じ名前を共有できると、片方の変更がもう片方に伝わりやすくなる。ここまで整えて、ようやくトークンは運用の土台として機能し始める。

トークンの命名で半日溶ける、あるある。でもあの半日は無駄じゃなくて、実はブランドの何が決まっていないかを炙り出す時間だったりする。

— 02 —形骸化する分かれ目──値の辞書か、判断の辞書か

トークンが形骸化するかどうかの分かれ目は、それが値の辞書で止まるか、判断の辞書になるかにある。色コードと余白の一覧を作っただけでは、どの場面でどれを使うかが人任せになり、結局は各自の感覚でばらつく。名前がついた値の山は、辞書のようで辞書として引けない。

判断の辞書になっているトークンは、「この状況ではこれを使う」という使い分けまで含んでいる。主要な行動を促すボタンには主要色、補助的な操作には控えめな色、と役割と選択が結びついている。だから初めて触る人でも、名前を見れば意図が読み取れる。

つまりトークンの価値は、値の数ではなく、迷いを減らす度合いで測られる。作るときに「なぜこの値をこの名前にしたか」を一言添えられるか。その理由がブランドの意図とつながっているかが、生きた辞書と死んだ一覧の差になる。

— 03 —ブランドから逆算する──トークンはVIの実装形

デザイントークンは、突き詰めればVI（ビジュアルアイデンティティ）をコードに落とした姿だ。だから「主要色が決まらない」という詰まりは、技術の問題ではなくブランドの問題であることが多い。何色にするか決まらないのは、そのブランドがどんな人格で、誰に対してどうありたいかが未定だからだ。

ここでガイドラインとトークンの対応表を作ると、両者の関係が見える。ガイドラインが「誠実で落ち着いた印象」と言葉で定めているなら、トークンはそれを彩度や余白の値として具体化する。言葉の規定と数値の規定が一対一で紐づくと、値の根拠が説明可能になる。

この逆算ができていないと、02で言う「判断の辞書」も作れない。何を主要色と呼ぶかの判断基準は、ブランドコアからしか降りてこないからだ。トークンの設計に詰まったら、値を眺めるより、その上にあるVIとコアの言語化に立ち返るのが近道になる。

— 04 —AIとの分業と、経営にどう効くか

AIコーディングが当たり前になるほど、デザイントークンはAIが読めるブランド仕様という意味を帯びる。人が使う辞書であると同時に、生成を担うAIに「このブランドではこう振る舞う」と伝える構造化された指示書になる。トークンが整っているほど、AIの出力がブランドから外れにくくなる。

経営に効くのは、多媒体展開のコスト圧縮だ。サイト、資料、アプリと媒体が増えても、同じトークンを共有していれば、色や余白の判断を毎回ゼロからやり直さずに済む。一度整えた「らしさ」を、媒体をまたいで安く再利用できる。これがトークン投資の見返りになる。

その前提となる言葉の規定づくりはブランドガイドラインの作り方を、トークンとデザインシステムの関係はデザインシステムとはを、AIに読ませる設計資料の全体像はAIが読めるブランド設計を合わせて確認してほしい。