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