アスペクト比計算
幅×高さや比率から約分した比率とCSS aspect-ratioを計算します。解像度の貼り付けや比率ロックにも対応。入力はブラウザ内だけで完結します。
比率を求める・比率を保って寸法を出す手順
幅・高さを入力するか、例チップを選びます。「解像度を貼り付け」欄に 1920×1080 のような表記を貼ると幅・高さが自動入力されます。比率ロックをオンにすると、その時点の比率を覚え、片方の値を変えたとき他方が同じ比率で再計算されます。結果は約分した比率・CSSの aspect-ratio 一行・小数（幅÷高さ）の3つが同時に出ます。「CSSをコピー」は aspect-ratio: 16 / 9 のようにプロパティ名込みでコピーします。
具体例
- 1920×1080 → 16:9 /
aspect-ratio: 16 / 9 - 1080×1080 → 1:1 /
aspect-ratio: 1 / 1 - 1024×768 → 4:3 /
aspect-ratio: 4 / 3 - 1080×1920 → 9:16（縦動画・ストーリー向け）
- 比率ロック ON で幅 1280 に変更 → 高さ 720（16:9を維持）
よく使う比率と、その代表的な寸法
比率だけ分かっても寸法は決まらないので、「この比率でよく使われる整数の解像度」を控えておくと作業が速くなります。小数はいずれも幅÷高さで、このツールの「小数（W÷H）」欄と同じ値です。
| 比率 | 小数 | 代表的な寸法 | 主な使いどころ |
|---|---|---|---|
| 16:9 | 1.7778 | 1920×1080 / 1280×720 / 3840×2160 | 横向きの動画、テレビ・PCの画面、スライド（ワイド） |
| 9:16 | 0.5625 | 1080×1920 / 720×1280 | 縦向きの動画、スマホ全画面 |
| 1:1 | 1.0000 | 1080×1080 / 512×512 | 正方形の投稿画像、アイコン |
| 4:5 | 0.8000 | 1080×1350 | 縦長の投稿画像（画面占有率を上げたいとき） |
| 4:3 | 1.3333 | 1024×768 / 2048×1536 | 古い規格の画面、タブレット、コンパクトカメラ |
| 3:2 | 1.5000 | 6000×4000 / 1620×1080 | 一眼カメラの写真、L判プリントに近い比率 |
| 40:21 | 1.9048 | 1200×630 | OGP／SNSカードのサムネイル（1200×630は40:21に約分される） |
| 21:9 | 2.3333 | 2560×1080 / 3440×1440 | ウルトラワイドのディスプレイ、映画的な画面 |
各サービスの推奨サイズは変わることがあるため、投稿先が決まっている場合はその公式の案内で寸法を確認し、このツールでは比率が合っているかと比率を保った別サイズの確認に使うのが確実です。
比率ロックで「1000:563」のような比率が出る理由
ロック中は、変更していない側の寸法を整数へ四捨五入して埋めます。そのため割り切れない幅を入れると、約分できない比率が表示されます。たとえば16:9をロックした状態で幅を1000にすると、高さは1000÷1.7778＝562.5が四捨五入されて563になり、比率は1000:563、小数は1.7762とわずかにずれます。
これを避けるには、比率の幅の値の倍数を選ぶのが簡単です。16:9なら幅を16の倍数にすると高さも整数になります。
| 幅（16の倍数） | 320 | 480 | 640 | 800 | 960 | 1280 | 1600 | 1920 |
|---|---|---|---|---|---|---|---|---|
| 16:9の高さ | 180 | 270 | 360 | 450 | 540 | 720 | 900 | 1080 |
なお、ロックが覚えるのはチェックを入れた瞬間（または例チップ・解像度貼り付けで寸法を入れた瞬間）の比率です。ロック中に表示された比率が丸めでずれても、内部で覚えている比率は変わりません。別の比率で固定したいときは、いったんチェックを外して寸法を入れ直し、もう一度チェックを入れてください。チェックの状態はこの端末のブラウザ内に記憶されます。
「解像度を貼り付け」欄が受け付ける書き方
- 区切り記号は
×・x・X・*のいずれか。1920×1080、1920x1080、2560 × 1440（前後の空白あり）はすべて通ります。 - 整数だけが対象です。
1920.5×1080のような小数や、単位付きの1920px×1080pxは解析しません。 16:9のようなコロン区切りの比率表記は受け付けません。この場合は幅の欄に16、高さの欄に9を直接入力するか、例チップを使ってください。- 反映されるのは、値を貼り付けたときと、入力後にフォーカスを外したときです。書式が合わないと何も起こらず、幅・高さは前の値のまま残ります。
また、幅または高さを空にしたときは計算をやり直さないため、3つの結果欄には直前の値が残ったままになります。表示が入力と噛み合わないと感じたら、両方の欄に数値が入っているか確認してください。
比率と画質は別の指標
16:9などのアスペクト比は形だけを表し、解像度や画質を保証しません。1920×1080と1280×720は同じ16:9でもピクセル数が異なります。また、画像を別比率の枠へ入れると、余白を出すか一部を切り抜く必要があります。
出力先の推奨解像度を先に確認し、比率ロックで整数の幅・高さへ調整してください。画像を実際に切り抜く場合は画像トリミング、印刷サイズはDPI・印刷サイズ計算で確認できます。
約分と端数
整数の幅と高さは最大公約数で割って比率を出します。2560×1440なら両方を160で割って16:9です。比率ロック中に片方から他方を求めた結果が小数になる場合、画面上のピクセル寸法は整数へ丸められます。CSSのaspect-ratioは枠の形を保ちますが、実画像をその枠へどう収めるかはobject-fitなど別の指定で決まります。