デザインシステム向けSVG Viewerワークフロー
デザインシステムの品質は一貫性で決まります。わずかなアイコンのズレや不正なviewBoxでも、プロダクト全体に小さな不具合が連鎖します。SVG Viewer は、デザインから実装へ渡す前の共有チェックポイントとして有効です。
ここでは、アイコンライブラリ運用で再現性の高い実践フローを紹介します。
1) 受け取り時に基本を確認する
最適化や変換の前に、まずSVG Viewerで次を確認します。
- viewBoxと寸法: 想定アートボードと一致しているか
- 余白と配置: グリッド上で整列しているか、端に接していないか
- 線幅: 特にアウトラインアイコンで太さが揃っているか
これらはマークアップを見るより、ビューア上での目視確認が速く確実です。
2) アートボードを正規化する
見た目に違和感がある場合は、先にアートボードを整えます。ここが揃うと一括書き出しやコンポーネント化が安定します。
実施例:
- システムグリッド（例: 24x24 / 20x20）にスナップ
- 正しいviewBoxで再書き出し
- SVG Viewerで基準アセットと再比較
3) 意図を持ってクリーンアップと最適化
最適化は容量削減だけでなく、出力の予測可能性を上げる工程です。不要な要素を削除します。
- メタデータやエディタ固有属性
- 未使用グループや空ノード
- CSS衝突を招く重複ID
クリーンアップ後に SVG Optimizer を実行し、再びViewerで崩れがないか確認します。
4) 命名規則を固定する
ファイル名規則は開発体験に直結します。途中で揺れないよう最初に決めます。
icon-alert-filled.svgicon-alert-outline.svglogo-acme-primary.svg
一貫した命名は、ファイル名とコンポーネント名の対応を明確にし、実装ミスを減らします。
5) ライブラリ向けに書き出す
視覚チェックを通過したら用途別に出力します。
- 生SVG: インライン利用向け
- PNG: ドキュメントやデザイン連携向け
- Reactコンポーネント: SVG to React で生成
書き出し設定を明文化し、チーム全員で同じ結果が出る状態を保ちます。
6) マージ前にクイックレビュー
最終レビューで、更新アセットを既存アセットと並べて比較します。
- 視覚的スケール
- 配置整合
- 重さの見え方
違和感があればマージ前に修正します。
最後に
SVG Viewerワークフローの目的は工程を増やすことではなく、予期せぬ不具合を減らすことです。短い目視確認、統一されたアートボード、再現可能な書き出し手順があれば、デザインシステムは成長しても安定します。
「Figmaでは正しいのに本番で崩れる」を防ぐために、このフローを標準化してください。
Next Steps
- SVG Viewer で受け取り検証を行う
- 書き出し前に SVG Optimizer でクリーンアップを統一する
- SVG to React でコンポーネント向け出力を作る