黄金比計算ツールとは？

黄金比や白銀比などの比率プリセットを使って、幅と高さのバランスを確認できるツールです。幅または高さのどちらかを入力すると、もう一方の寸法が自動で計算され、プレビューで矩形の印象も見比べられます。カード、バナー、表紙、画像サイズなど、縦横比の候補を決めたい場面で使いやすい構成です。

黄金比計算ツールの使い方

比率プリセットを選ぶ

最初に、黄金比・白銀比・白金比・ダブルスクエア・正方形から使いたい比率を選びます。各プリセットには小さな図形サムネイルが付いているため、数値だけでなく形の差でも比べやすくなっています。

向きを決めて幅または高さを入力する

次に、横長か縦長かを選びます。そのうえで、幅または高さのどちらかを編集すると、もう一方の寸法が比率に合わせて自動で更新されます。横長のバナーやヒーロー画像なら幅から、表紙やポスターのような縦長レイアウトなら高さから確認すると流れが自然です。

入力欄の下には、320、480、720、1000、1440 の共通サイズボタンもあり、よくある幅や高さをすばやく試せます。結果エリアでは幅・高さと CSS の aspect-ratio を確認できます。

黄金比 / 横長 / 幅 1000
→ 幅 1000、高さ 618

主な機能

比率プリセットのサムネイル表示

黄金比と白銀比は数値だけだと近く見えることがありますが、サムネイルで並べると縦横の差がつかみやすくなります。候補をざっと絞りたいときに役立ちます。

縦横プレビュー

選択した比率に合わせて、プレビュー内の図形サイズが変わります。横長と縦長を切り替えながら、どのくらい細長く見えるかをその場で確認できます。プレビューは比率比較のための表示なので、実ピクセルの大きさをそのまま再現するものではありません。

寸法計算と CSS 比率の確認

計算結果では、幅・高さに加えて、CSS の aspect-ratio で使いやすい表記も表示します。計算式もあわせて出るので、どちらの辺を基準にしたかを確認しながら数値を決められます。

活用シーン

• カードやバナーの比率を決める前に、見た目のバランスを比較したいとき
• 黄金比と白銀比のどちらがレイアウトに合うかを見たいとき
• ポスター、表紙、サムネイルなどで縦長・横長の印象差を確認したいとき
• CSS の aspect-ratio に入れる値を決めたいとき

使うときのポイント

• 入力は整数ベースで扱えるため、カード幅や画像サイズのラフ検討に向いています
• 同じ比率でも横長と縦長では印象がかなり変わるため、向きを切り替えて見比べるのがおすすめです
• プレビューは比率確認用なので、実装時は結果欄の数値と aspect-ratio を基準にすると整理しやすくなります
• すでに具体的な縦横比が決まっている画像や動画の確認には、別のアスペクト比計算ツールのほうが向いています