Webデザインで使う数値をすぐに算出！マージンやフォントサイズのバリエーションを導き出すオンラインツール
Post on:2017年9月15日
sponsors
レイアウトのベースになるグリッドのサイズ、パネルやカードやボタンなどのサイズ、要素間に与えるスペースの段階ごとのサイズ、見出しや本文などテキストの階層ごとの文字サイズなど、Webデザインを設計する際に必要となる数値をサイズを最小のユニットから導き出すオンラインツールを紹介します。
デザインする時にも、HTML+CSSで実装する時にもこういった値ははっきり決めておいて、すぐに確認できるようにしておくといいですね。
modulatorの使い方は、簡単です。
左サイドバーに基本となる値を指定すると、自動的にすべてに反映されます。
基本のユニットに「8px」を指定
「Grid」と「Type Scale」で基本値を指定し、あとは倍数を指定すれば完了です。
基本のユニットに「10px」を指定
定義したサイズがどのように反映されるか、さまざまなUIコンポーネントで確認できます。
8pxのユニットでUIコンポーネントを確認
例えば、「フォームのアイテムごとのスペース」と「フォームのラベルと入力欄のスペース」は、それぞれサイズが異なります。スペースによるグルーピングが行われていると、デザインもすっきりします。
8pxのユニットでUIコンポーネントを確認
カードやリスト、アイコンとテキストなど、よく使用されるUIコンポーネントが揃っています。
8pxのユニットでUIコンポーネントを確認
modulatorの作者は、css2sassなどもリリースされています。
sponsors
