デジタル庁デザインシステム：Typographyトークンのレスポンシブ対応設定
项目地址: https://gitcode.com/GitHub_Trending/de/design-system-example-components はじめに
デジタル庁デザインシステムは、日本の行政サービス向けに開発された包括的なデザインシステムです。その中核をなすTypography（タイポグラフィ）トークンは、複数のデバイスや画面サイズで一貫した読みやすいテキスト表示を実現するために設計されています。
この記事では、デジタル庁デザインシステムのTypographyトークン体系と、レスポンシブデザインにおける効果的な活用方法について詳しく解説します。
Typographyトークン体系の概要
デジタル庁デザインシステムのTypographyトークンは、5つの主要なカテゴリに分類されます：
| カテゴリ | 用途 | 特徴 |
|---|---|---|
| Display (Dsp) | 見出し・タイトル | 大サイズ、インパクト重視 |
| Standard (Std) | 本文・標準テキスト | バランスの取れた読みやすさ |
| Dense (Dns) | 高密度表示 | コンパクトなスペース向け |
| Oneline (Oln) | 単一行表示 | 行間を最小化 |
| Mono (Mono) | コード・等幅 | 等幅フォント、技術文書向け |
トークン命名規則
各トークンは以下の命名規則に従います：
text-{カテゴリ}-{サイズ}{ウェイト}-{行高}
例：text-std-28B-150
std: Standardカテゴリ28: 28pxサイズB: Boldウェイト150: 150%行高
レスポンシブ対応の実装アプローチ
1. Tailwind CSSプラグインの活用
デジタル庁デザインシステムは、@digital-go-jp/tailwind-theme-pluginを活用してレスポンシブなTypographyトークンを提供しています。
// tailwind.config.js
export default {
content: ['./src/**/*.{ts,tsx}'],
theme: {
extend: {},
},
plugins: [require('@digital-go-jp/tailwind-theme-plugin')],
};
2. ブレークポイントに応じたトークン選択
3. 実装例：レスポンシブTypographyコンポーネント
import React from 'react';
interface ResponsiveTextProps {
mobile?: string;
tablet?: string;
desktop?: string;
children: React.ReactNode;
}
export const ResponsiveText: React.FC<ResponsiveTextProps> = ({
mobile = 'text-std-16N-170',
tablet = 'text-std-18N-160',
desktop = 'text-std-20N-150',
children
}) => {
return (
<p className={`
${mobile}
md:${tablet}
lg:${desktop}
`}>
{children}
</p>
);
};
// 使用例
const ExampleComponent = () => (
<ResponsiveText
mobile="text-dns-14N-130"
tablet="text-std-16N-170"
desktop="text-std-18N-160"
>
レスポンシブなテキスト表示
</ResponsiveText>
);
カテゴリ別レスポンシブ設定ガイド
Display (Dsp) カテゴリ
// 大見出しのレスポンシブ設定
const ResponsiveHeading = () => (
<h1 className="
text-dsp-48B-140
md:text-dsp-57B-140
lg:text-dsp-64B-140
">
ページタイトル
</h1>
);
Standard (Std) カテゴリ
| デバイス | 推奨トークン | サイズ | 行高 |
|---|---|---|---|
| モバイル | text-std-16N-170 | 16px | 170% |
| タブレット | text-std-18N-160 | 18px | 160% |
| デスクトップ | text-std-20N-150 | 20px | 150% |
Dense (Dns) カテゴリ
高密度表示向けのコンパクトな設定：
const CompactText = () => (
<p className="
text-dns-14N-130
md:text-dns-16N-130
lg:text-dns-17N-130
">
高密度レイアウト向けテキスト
</p>
);
ベストプラクティス
1. 段階的なサイズ変更
2. 行高の最適化
画面サイズに応じて行高を調整：
const OptimizedText = () => (
<div className="
text-std-16N-175 // モバイル: 高行高で読みやすく
md:text-std-18N-170 // タブレット: 中行高
lg:text-std-20N-160 // デスクトップ: 標準行高
">
最適化された行高設定
</div>
);
3. ウェイトの調整
デバイスによってフォントウェイトを微調整：
const WeightAdjustedText = () => (
<p className="
text-std-16N-170 // モバイル: Normal
md:text-std-18B-160 // タブレット: Bold
lg:text-std-20B-150 // デスクトップ: Bold
">
ウェイト調整テキスト
</p>
);
実装チェックリスト
レスポンシブTypography実装時の確認事項：
- モバイルファーストのアプローチを採用
- 各ブレークポイントで適切なサイズを選択
- 行高をデバイスに応じて最適化
- コントラスト比を確認（WCAG AA以上）
- タッチターゲットサイズを考慮（モバイル）
- パフォーマンス影響を測定
トラブルシューティング
常見問題と解決策
| 問題 | 原因 | 解決方法 |
|---|---|---|
| テキストが小さすぎる | モバイル設定の見落とし | ベースサイズを16px以上に |
| 行間が詰まりすぎる | 行高設定不足 | 行高を150%以上に設定 |
| フォントが重い | ウェイト過多 | 必要な場合のみBold使用 |
まとめ
デジタル庁デザインシステムのTypographyトークンは、レスポンシブデザインにおいて強力な基盤を提供します。適切なトークン選択と段階的なサイズ調整により、あらゆるデバイスで最適な読みやすさを実現できます。
キーポイント：
- 5つのカテゴリを用途に応じて使い分け
- モバイルファーストのアプローチで設計
- 行高とサイズのバランスを最適化
- アクセシビリティ基準を満たす設定
これらのベストプラクティスを実践することで、ユーザーエクスペリエンスを向上させ、一貫性のある美しいタイポグラフィを実現できます。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
