デザインシステムを「崩壊」から守る。Sketchにおけるタイポグラフィ管理の極意
こんにちは。UI/UXの現場で数々のプロジェクトを見てきましたが、中規模以上の開発で最も「負債」になりやすいのが、実は「フォントスタイルの混沌」です。
「なぜか余白が微妙にズレる」「修正したはずのスタイルが反映されない」。そんな経験はありませんか？ それは、あなたが悪いのではなく、タイポグラフィの設計図が「宣言」されていないからです。
今日は、Sketchの「Text Styles」を単なる書式設定としてではなく、「堅牢なシステム」として運用するための階層構造と設計思想を伝授します。これをマスターすれば、あなたのデザインデータは「使い捨ての絵」から「保守可能なプロダクト」へと進化します。
—
1. なぜ「Text Styles」の設計が重要なのか？
SketchのText Stylesは、単にフォントやサイズを記憶する機能ではありません。「デザインの語彙（ボキャブラリー）」を定義するものです。
もしスタイルに一貫性がなければ、開発者はCSSを書くたびに「これ、さっきのフォントサイズと0.5px違うけど、どっちが正解？」と迷うことになります。この「迷い」を排除することこそ、UIデザイナーの最大のミッションです。
—
2. 【最重要】階層を制するネスト命名規則
SketchのText Stylesは、名前の中に `/` (スラッシュ) を入れることで、自動的にグループ化（ネスト）されます。ここを適当に命名すると即座に崩壊します。以下の階層構造をテンプレートにしてください。
推奨命名スキーム：`タイプ / 用途 / 役割 / 状態`
- タイプ: `System` (基本), `Brand` (ロゴ等)
- 用途: `Heading` (見出し), `Body` (本文), `Caption` (注釈)
- 役割: `H1`, `H2`, `Body-Large`, `Body-Small`
- 状態: `Default`, `Primary`, `Secondary`, `Disabled`
例: `System / Heading / H1 / Default`
この構造にすることで、Sketchのテキスト選択メニューがフォルダ形式で整理され、直感的にスタイルを切り替えられるようになります。
—
3. レスポンシブ対応のスマートフォント設定（Fixed vs Auto）
ここが初心者が一番躓くポイントです。レスポンシブなデザインシステムを作るには、「テキストの挙動」を強制的に制御する必要があります。
1. Fixed Width (固定幅): 折り返しが発生する本文やカード内のテキストに。
2. Auto Width (自動幅): ボタンのラベルや見出しなど、中身に合わせて伸縮させたいものに。
プロの鉄則：
Text Stylesを作成する際は、必ず「どの方向に伸びるか」を意識してください。例えば、「ボタンラベル」のスタイルを「Fixed Width」で作ってしまうと、テキストが長くなった時に意図せず改行され、ボタンのデザインが崩れます。
—
4. 実践：最強の「HelloWorld」的セットアップ
まずは、たった3つのスタイルから始めてみましょう。これがあなたのデザインシステムの「核」になります。
1. ベース設定: 16px / Regular / 行間 24px (行間を文字サイズの1.5倍に設定するのが黄金比の第一歩です)
2. スタイル登録:
- テキストを選択し、右サイドバーの「Appearance」セクションにある「No Text Style」のドロップダウンから「Create New Text Style」を選択。
- 名前を `System / Body / Default / Regular` と入力。
3. 検証:
- 別のテキストを作成し、今作ったスタイルを適用してみる。
- 「Edit」ボタンからフォントサイズを変更し、すべてのテキストが一斉に追従することを確認する。
これだけで、修正コストが1/100になります。
—
5. 現場で震えるほど役立つ「設計のコツ」
最後に、ベテランエンジニアとしての個人的なアドバイスを贈ります。
- 行間（Line Height）を固定値で定義せよ:
Sketchの行間設定は「Auto」ではなく、必ず「固定値（例: 24px）」を指定してください。Autoにすると、フォントファミリーを変えた瞬間にレイアウトがガタガタに崩れます。システム構築において「予測不能な挙動」は悪です。
- 色はスタイルに含めない（カラーシンボルとの分離）:
スタイル名に `Blue` や `Red` を入れないでください。色は「Color Styles」として別途管理しましょう。`System / Body / Default` というスタイルを作り、色はシンボルやカラープリセットで制御する。これが「ダークモード対応」を一瞬で終わらせるための唯一の道です。
—
まとめ：あなたのデザインが「製品」に変わる瞬間
最初は面倒に感じるかもしれません。「ただ文字を打つだけなのに、なぜこんなにルールが必要なのか」と。
しかし、その少しの厳格さが、数ヶ月後のあなた自身を救います。ルールがあるからこそ、自由なレイアウトに挑戦できる。それがプロの道具の使い方です。
まずはこの命名規則と、行間の固定から始めてみてください。あなたのデザインがより強固で、美しいものになることを確信しています。何か詰まったら、いつでも戻ってきてくださいね。応援しています！