デザインに役立つ簡単に黄金比などを作るツール

1.Webデザイン「黄金比」計算ツール

Webデザイン「黄金比」計算ツール
https://zapanet.info/blog/item/1298

「黄金比」計算ツールは、一カ所だけでも任意の数値を入れれば残りの幅を自動計算し黄金比を割り出してくれるツールです。入力が一カ所だけでもいい、というのが最大の特徴です。

2.Metallic Ratio

Metallic Ratio
https://voidism.net/metallicratio/

シンプルなフラットデザインで見た目も美しい計算ツールです。Result部分の数値を変更することが出来、自動で黄金比はもちろん、白銀比を含むいくつかの比率で計算してくれます。

3.CSS-黄金比・白銀比ジェネレーター | WEB道

黄金比・白銀比ジェネレーター | WEB道
http://web-dou.com/tool/css_gen_ratio_silver.php

定番の黄金比に加え、白銀比（2タイプ）、青銅比の計算ができるツールです。

4.レイアウトの小技

レイアウトの小技
http://viskowaza.web.fc2.com/layout/ratio/divide/index.html

四角の枠にカーソルを合わせると、分割していってくれる計算ツールです。あらゆるレイアウト決めを簡単にしてくれます。

5.Less Framework 4

Less Framework 4
http://lessframework.com/

黄金比を取り入れたレスポンシブデザインのCSSフレームワークです。これがあれば手っ取り早く黄金比にデザインすることができます。

6.Golden Grid System

Golden Grid System
https://goldengridsystem.com/

Less Frameworkと同じ作者が作ったフレームワークで、こちらも黄金比に対応したバランスの良いレイアウトとなっています。

デザインに黄金比を取り入れよう

実際にプロが全てのデザイン作業を細かく計算して行っているかというと、必ずしもそうとは言えません。しかし、美しい比率を勉強し理解していればレイアウトのセンスが身に付くはずです。今までなんとなくレイアウトしてきていた、という方はこれを機会に比率にも考慮しながらデザインに取り組んでみてはいかがでしょうか。