Webデザインで使う数値をすぐに算出!マージンやフォントサイズのバリエーションを導き出すオンラインツール

レイアウトのベースになるグリッドのサイズ、パネルやカードやボタンなどのサイズ、要素間に与えるスペースの段階ごとのサイズ、見出しや本文などテキストの階層ごとの文字サイズなど、Webデザインを設計する際に必要となる数値をサイズを最小のユニットから導き出すオンラインツールを紹介します。

デザインする時にも、HTML+CSSで実装する時にもこういった値ははっきり決めておいて、すぐに確認できるようにしておくといいですね。

サイトのキャプチャ

modulator

modulatorの使い方は、簡単です。
左サイドバーに基本となる値を指定すると、自動的にすべてに反映されます。

サイトのキャプチャ

基本のユニットに「8px」を指定

「Grid」と「Type Scale」で基本値を指定し、あとは倍数を指定すれば完了です。

サイトのキャプチャ

基本のユニットに「10px」を指定

定義したサイズがどのように反映されるか、さまざまなUIコンポーネントで確認できます。

サイトのキャプチャ

8pxのユニットでUIコンポーネントを確認

例えば、「フォームのアイテムごとのスペース」と「フォームのラベルと入力欄のスペース」は、それぞれサイズが異なります。スペースによるグルーピングが行われていると、デザインもすっきりします。

サイトのキャプチャ

8pxのユニットでUIコンポーネントを確認

カードやリスト、アイコンとテキストなど、よく使用されるUIコンポーネントが揃っています。

サイトのキャプチャ

8pxのユニットでUIコンポーネントを確認

modulatorの作者は、css2sassなどもリリースされています。

サイトのキャプチャ

css2sass

top of page

©2017 coliss