黄金比計算ツールとは？

黄金比や白銀比などの比率を選び、長辺・短辺・全体のどれかを入力すると、残りの寸法と分割の割合を計算できるツールです。長方形を正方形で分割した図と、全体に対する長辺・短辺の割合を見ながら、レイアウトや画像サイズの検討に使えます。

比率・寸法・CSSのaspect-ratioはコピーできます。

使い方

1. 比率を選びます。
2. 長辺・短辺・全体のいずれかを入力します。入力した値に合わせて、残りが計算されます。
3. 縦横を入れ替えたいときは「縦横を入れ替え」を使います。長辺・短辺の値は変わらず、幅・高さの対応と図の向きが反転します。
4. 比率と寸法、CSSのaspect-ratioをコピーします。

全体を使った分割

全体は幅と高さを足した長さです。全体を入力すると、選択した比率で長辺と短辺に分割した値が求まります。たとえば黄金比で全体を1440にすると、長辺は約890.2、短辺は約549.8になります。

分割図

選択した比率の長方形を正方形で分割した図を表示します。黄金比では、正方形を切り出すたびに残りが同じ比率になり、螺旋が連続します。ほかの比率では、長方形がどのように分割されるかを確認できます。

主な設定項目

縦横を入れ替え

幅と高さを入れ替え、縦長・横長を反転します。長辺・短辺の値は変わりません。現在の向きは結果表示で確認できます。入力中は現在の向きが保たれます。

よく使う長辺

よく使う長辺の値を選ぶと、その値を長辺として寸法が更新されます。

活用シーン

• カードやバナーの比率を決める前に、縦横のバランスを確認したいとき
• 画像やキャンバスの長辺を決めて、もう片方の寸法を出したいとき
• ヘッダーやセクションを黄金比で分割したいとき
• CSSのaspect-ratioに入れる値を決めたいとき

使うときの注意点

• 入力欄の長辺・短辺は向きに関わらず、長い方・短い方を指します。幅・高さとの対応は結果表示で確認できます
• 長辺は1〜100000の範囲で扱います。短辺や全体の入力で長辺が100000を超える場合は、長辺が100000になるように値が調整されます
• プレビューは比率確認用で、実ピクセルの大きさを再現するものではありません
• 任意の縦横比を調べたい場合は、アスペクト比計算ツールを使うと便利です