デザイントークンとは?UIの一貫性と再利用性を支える設計の基本を解説
UIを整えるとき、多くのチームは最初に色や余白、文字サイズ、角丸、影といった見た目の値を決めます。ところが、画面数や部品数が増えてくると、最初は揃っていたはずの値が少しずつずれ始め、気づけば似ているが微妙に違う色、ほとんど同じだが少しだけ異なる余白、どの画面で使うべきか分かりにくい角丸や影が増えていきます。こうした状態になると、見た目の一貫性が下がるだけでなく、修正のたびに影響範囲が読みにくくなり、デザインと実装の両方で判断コストが上がりやすくなります。
この問題に対して重要になるのが、デザイントークンという考え方です。デザイントークンは、単に値をまとめるための仕組みではなく、UIで使う見た目のルールを再利用しやすい形へ整理するための土台です。色や余白のような値を意味のある単位として管理することで、画面が増えても判断を揃えやすくなり、デザインシステムやコンポーネント設計ともつながりやすくなります。この記事では、デザイントークンの基本から、なぜ必要になるのか、何をトークン化するのか、導入時に何を意識するとよいのかまでを順番に整理していきます。
EN
JP
KR