サイズスケール

サイズスケールについて

Startify-UIでは、デザイントークンの一環として、文字サイズや余白、要素幅などのサイズを共通のスケールで管理しています。こうすることで、調和の取れた規則性のあるデザインやコーディングの運用コストを下げることが期待できます。

スケールは絶対値指定と相対値指定の2種類を提供しており、ウェブサイトやアプリケーションのデザインや仕様要件にあわせて柔軟に対応することができます。

スケール上で扱っているサイズは、それぞれCSS変数として参照したり、ユーティリティクラスとして提供されていますので、簡単にサイズを設定することができます。

絶対値指定のサイズ

絶対値指定は、16px（1rem）を基準にしたスケールです。すべてのサイズは、この基準値の倍数や約数として定義されます。この方法により、サイズの整合性が保たれ、デザイン全体がバランス良く見えるようになります。たとえば、8px、16px、24px、32px、64pxなどのサイズが含まれます。絶対値指定でのサイズスケールでは直感的にサイズを選択でき、デザインの一貫性を保ちながらUIを実装することが可能です。

絶対値指定のサイズスケールの単位は6s（2px）から10l（192px）まで18段階あります。これらのサイズはそれぞれCSS変数で定義され、その一部は文字サイズやマージン、パディングなど対応するユーティリティクラスも提供されており、簡単にサイズスケールを利用することができます。

相対値指定のサイズ

相対値指定は親要素やコンテンツのサイズを基準に12分割システムをベースにしたスケールです。各サイズは、この分割の約数として定義され、1/12、1/6、1/4、1/3、1/2などの割合が使われます。この方法により、画面サイズに応じて要素の幅を柔軟に調整することができ、異なる要素間でのバランスが取りやすく、レスポンシブデザインにも適しています。異なるデバイス間で一貫したユーザー体験を提供します。

相対値指定のサイズスケールの単位は12分割に対応した分数値など17種類あります。主にマルチカラムレイアウトを構成する時に便利で、レスポンシブに対応する柔軟なレイアウトが可能です。12分割システムを基準としたサイズのほか、コンテンツに対応するサイズも定義されています。これらのサイズはそれぞれCSS変数で定義され、コンテンツのカラム幅に対応するユーティリティクラスも提供されており、簡単にサイズスケールを利用することができます。