こんにちは！デザインとコードの境界線を溶かし、エンジニアとデザイナーが同じ言語で会話できるようにする――これこそが、モダンなプロダクト開発の醍醐味です。
今日は、Sketchの「Shared Styles（共有スタイル）」を軸に据え、Web、iOS、Androidといったマルチプラットフォームへデザインを完璧に同期させる「デザイントークン」の設計手法についてお話しします。
「マルチプラットフォーム対応で色がバラバラになる」「デザインの変更がエンジニアに伝わるのが遅い」といった現場の悲鳴を、今日で終わりにしましょう。これをマスターすれば、毎日のスタイル調整の苦しみから解放され、プロダクトの体験の質を劇的に引き上げることができますよ。
—
1. そもそも「Shared Styles」と「デザイントークン」って何をするもの？
初心者のうちは、「色やフォントをコンポーネントごとにポチポチ設定していけばいいや」と思いがちです。しかし、Webとモバイルアプリを同時に作るような現場では、このやり方はすぐに破綻します。
- Sketchの Shared Styles（共有スタイル）:
デザインファイル内で、色やシャドウ、タイポグラフィなどのスタイルルールを「名前をつけて一元管理」する機能です。これを使うと、元のスタイルを変更したときに、それを適用しているすべてのレイアウトが一瞬でアップデートされます。
- デザイントークン（Design Tokens）:
UIの視覚的属性（カラー、スペーシング、フォントサイズなど）を、特定のツール（SketchやFigmaなど）に依存しない「JSONなどの言語 agnostic（非依存）なデータ」として定義したものです。
Sketchの中だけで完結していたスタイルを「デザントークン」として抽出し、`Style Dictionary` などのツールを使ってCSSやSwift（iOS）、Kotlin（Android）のコードへと自動変換する。このパイプラインを構築するのが、今回のゴールです。
—
2. 準備：Sketchのインストールと基本セットアップ
まずは道具を揃えましょう。Sketchがまだインストールされていない場合は、公式ホームページからトライアル版をダウンロードしてください。
最初の重要なステップ：命名規則（Nomenclature）のルール化
マルチプラットフォーム展開において最も重要なのは、「名前のつけ方」です。適当に `Red` や `Blue` と名付けると、後で地獄を見ます。デザイントークンとしてコードに落とし込むことを前提に、次のような階層構造（Token Taxonomy）をSketchのShared Stylesの名前空間に採用します。
- `category / subcategory / property / variant`
- 例：`color / brand / primary / default`
- 例：`typography / body / medium / regular`
Sketchの「Create Shared Style」を使うときは、このスラッシュ（`/`）区切りの命名規則を徹底してください。これだけで、後続のプログラム処理の難易度が劇的に下がります。
—
3. HelloWorld的実践：Shared Stylesを作り、トークンとして書き出す
百聞は一見にしかず。実際にSketchでShared Stylesを作成し、それを外部のコードへ流し込むまでの最小限のフロー（HelloWorld）を体験してみましょう。
Step 1: SketchでShared Stylesを作成する
1. 長方形（Rectangle）ツールで適当な正方形を描きます。
2. 塗り（Fill）の色を `#0066FF` に設定します。
3. インスペクターパネルの塗りの横にあるドロップダウンから 「Create New Shared Style」 を選択します。
4. 名前を `color/brand/primary` と入力して保存します。
これで、あなたのSketchファイル内に「プログラムから参照可能なスタイル」が定義されました。
Step 2: SketchのスタイルをJSON（デザイントークン）に変換する
Sketchのファイル（`.sketch`）は、内部的にはJSONの塊と画像ファイルのZipアーカイブです。しかし、直接それを解析するのは大変なので、コミュニティ製のツールやプラグイン（例：Design Tokens Sketch Plugin や Kalei など）を活用するか、JSONを直接手動で定義して同期の土台を作ります。
今回は、デザイントークンの標準的なJSONフォーマットの例を見てみましょう。これが、コードに変換される「源泉」になります。
`tokens.json`（デザイントークンの実体）
{
“color”: {
“brand”: {
“primary”: {
“value”: “#0066FF”,
“type”: “color”,
“comment”: “メインのブランドカラー。Web, iOS, Android共通で使用する。”
}
}
},
“spacing”: {
“base”: {
“value”: “8px”,
“type”: “dimension”,
“comment”: “8ptグリッドシステムに基づいたベーススペーシング”
}
}
}
このJSONファイルが、デザインとコードを繋ぐ「共通言語」になります。
—
4. Style Dictionaryでマルチプラットフォームのコードへ変換する
ここからがエンジニアリングの真骨頂です。Amazonがオープンソースで公開している `Style Dictionary` というツールを使うと、たった一つの `tokens.json` から、Web用のCSS、iOS用のSwift、Android用のKotlin（XML）を自動生成できます。
最小限のStyle Dictionary設定
プロジェクトディレクトリに `config.json` を作成し、以下のように記述します。
`config.json`
{
“source”: [“tokens.json”],
“platforms”: {
“css”: {
“transformGroup”: “css”,
“buildPath”: “build/css/”,
“files”: [{
“destination”: “_variables.css”,
“format”: “css/variables”
}]
},
“ios”: {
“transformGroup”: “ios”,
“buildPath”: “build/ios/”,
“files”: [{
“destination”: “StyleGuide.swift”,
“format”: “ios/swift.struct”
}]
},
“android”: {
“transformGroup”: “android”,
“buildPath”: “build/android/”,
“files”: [{
“destination”: “colors.xml”,
“format”: “android/resources”
}]
}
}
}
この設定ファイルを読み込んでビルドコマンドを実行すると…驚くことに、Sketchで定義した（あるいはトークン化した）カラー値が、それぞれのプラットフォームに最適化されたコードとして出力されます。
出力されるCSSの一例 (`build/css/_variables.css`)
/
- 非常に重要：このファイルは自動生成されています。直接編集しないでください。
/
:root {
–color-brand-primary: #0066FF; / メインのブランドカラー。Web, iOS, Android共通で使用する。 /
–spacing-base: 8px; / 8ptグリッドシステムに基づいたベーススペーシング /
}
これで、デザイナーがSketchの Shared Styles で `#0066FF` を `#0052CC` に変更し、トークンを再出力（CI/CDパイプラインに組み込むことも可能です）するだけで、WebのCSS変数が自動的に更新される仕組みが完成しました！
—
5. 現場で役立つプロの知見：運用を破綻させないためのコツ
最後に、現場でこの仕組みを導入する際につまづきやすいポイントと、それを回避する知見をシェアします。
1. 「デザインの自由度」と「システムの厳格さ」のトレードオフを理解する
すべての色をトークン化しようとすると、デザイナーの創造性が死にます。まずは「ブランドカラー」「テキストカラー」「基本のスペーシング」といった、プロダクト全体の基盤となるグローバルトークンと、コンポーネント固有のローカルスタイルを明確に切り分けましょう。
2. Gitによるバージョニング管理を徹底する
デザイントークンのJSONファイルは、必ずGitなどのバージョン管理システムでコードと一緒に管理してください。「誰がいつ、どのトークンを書き換えたか」がコードレビューの対象になるため、デザイナーとエンジニアの間の「言った・言わない」のトラブルが劇的に減ります。
—
まとめ
SketchのShared Stylesの適切な命名規則から始まり、デザイントークンとしての抽出、そしてStyle Dictionaryを用いたマルチプラットフォームへのコード自動生成までの流れを解説しました。
最初は設定の多さに圧倒されるかもしれませんが、一度このパイプラインが動き出したときの感動はひとしおです。デザインの変更が数秒でプロダクト全体に反映される快感を、ぜひあなたのチームでも体験してみてください。毎日の作業が劇的に、そして圧倒的に楽しくなりますよ！