UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
Post on:2023年6月13日
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