UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
Post on:2023年6月13日
sponsors
UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。
たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。
Proportioの特徴
Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。
パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザインをより素早く簡単にします。
ここで紹介してるのはオンライン版ですが、Create React Appで作成されており、ローカル環境にインストールすることもできます。MITライセンスで、商用プロジェクトでも無料で利用できます。
Proportioを使用して、下記を作成できます。
- テキストのスケール
- アイコンのスケール
- テキストとアイコンの組み合わせ
- スペースのスケール
- 角丸のスケール
- シャドウのスケール
- コンポーネントのスケール
- コンポーネントのパディング
Proportioの使い方
Proportioの使い方は、簡単です。
基本となるスケールが用意されており、そこから選択してスケールを作成するか、オリジナルの比率で作成することもできます。
「Typography」はGoogle Fontsをサポートしており、日本語フォントもサポートされていました。
Proportio: Typography
作成したスケールは、エクスポートできます。右上「Export」をクリックするとCSS形式でダウンロードできます。
Proportio: Typography
続いて、「Shape」シェイプではスペース・角丸・奥行き（シャドウ）のスケールを作成できます。
Proportio: Shape
スケールには基本となる値（Minor Third: 1.2, Major Third: 1.25など）が用意されており、最小サイズを決めれば自動的にそのスケールで作成されます。
Proportio: Shape
たとえば、黄金比（Golden Ratio: 1.618）を適用すると、こんな感じです。白銀比（Augmented fourth: 1.414）なども用意されています。
Proportio: Shape
「Components」ではコンポーネントのサイズ、アイコンやテキストを配置したときのスペースなどを作成できます。
Proportio: Components
「Containers」ではコンテナ内のパディングを作成でき、角丸やシャドウも反映されます。
Proportio: Containers
sponsors
