UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio

UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール(ローカルも可)を紹介します。

たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。

UIデザイン用にフォントやスペースやコンポーネントの比例スケールを簡単に作成できるツール -Proportio

Proportio
Proportio -GitHub

Proportioの特徴

Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。

パラメトリックデザイン(変数を基準としてサイズを決める形状作成方法)を採用しているので、体系的なデザインをより素早く簡単にします。

ここで紹介してるのはオンライン版ですが、Create React Appで作成されており、ローカル環境にインストールすることもできます。MITライセンスで、商用プロジェクトでも無料で利用できます。

サイトのキャプチャ

Proportio

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

top of page

©2024 coliss