アスペクト比計算 — リサイズ時に比率維持

比率と片方の寸法を入力すると、もう一方が自動で計算されます。動画・写真トリミング・レスポンシブWebレイアウトに。

比率 W比率 H幅高さ

仕組み

アスペクト比は幅と高さの比率です。「16:9」は高さ9に対して幅16を意味します。同じ比率は任意のサイズで成立 — 1920×1080も800×450もどちらも16:9。リサイズ時に比率を維持すると画像の引き延ばし・潰れを防げ、レスポンシブデザインの基礎になります。

整数（16:9）でも小数（1.78:1）でも比率指定可能。任意の幅・高さを入力できます。どのフィールドを編集しても他が自動更新されます。10進数表記（幅÷高さ）はCSS calc()や動画編集ツールで使えます。

16:9 — 現代のHDTV・PCモニタ・YouTube・2009年以降のほぼすべての映画。今日の作業の大半のデフォルト。

9:16 — Instagram Stories・TikTok・YouTube Shorts用の縦動画。スマホ前提コンテンツでは16:9の表裏。

1:1 — 正方形。2021年までのInstagramフィードのデフォルト。アルバムジャケット、プロフィール写真。

4:3 — HD以前の古いTV・PCモニタ。クラシック調のコンテンツでまだ使われます。

3:2 — 一眼レフのデフォルト。35mmフィルム。大判プリント。

21:9 — シネマスコープ・ウルトラワイド。アナモルフィック撮影の映画。一部のPCモニタやLG TV。

現代のCSSには aspect-ratio: 16/9; があり、比率を指定してブラウザに幅から高さ（またはその逆）を計算させます。古いpadding-bottomハックを回避でき、レスポンシブな埋め込みや画像プレースホルダーでレイアウトシフト防止に必須。

Cumulative Layout Shift（CLS）は Core Web Vitals の指標。埋め込み動画・寸法なし画像・広告すべてがCLSを引き起こしうるので、明示的な width/height（ブラウザがアスペクト比を計算する）またはCSS aspect-ratio で対応してください。

›16:9と1.78:1の違いは?

同じ比率の別表記。16/9 = 1.778。コロン表記はTV・Webの慣例、小数表記は映画の慣例。

›CSSでアスペクト比を維持するには?

aspect-ratio プロパティを使います: img { aspect-ratio: 16/9; width: 100%; height: auto; }。画像はコンテナ幅いっぱいに広がり、高さが比率を保つよう調整されます。

›4:3 TVで動画の見え方が変?

現代の動画はほぼ16:9。4:3ディスプレイでは「レターボックス（黒帯上下）」「ピラーボックス」「引き延ばし」のいずれかになります。TVの設定で挙動を制御。

›整数以外の比率も使える?

可能です — 1.5 や 2.39 と入力。小数として扱われ、簡略化表示は整数比率の時のみ表示されます。

›「ピクセルアスペクト比」とは?

別概念で、個々のピクセルの形状を指します。現代のディスプレイは正方形ピクセル（1:1）。一部の旧SDビデオフォーマットは非正方形ピクセルを使用（NTSCワイドの1.0667など）。本ツールは表示アスペクト比を扱い、ピクセルアスペクト比は対象外。

›「シネマティック」な見た目は?

21:9（より正確には2.39:1または2.40:1） — HDTVより広い。現代のブロックバスター映画で一般的。配信サービスもこの比率で提供することが多い。

›なぜ Reel/TikTok は 9:16?

スマホは縦持ちが基本だからです。9:16 はスマホ画面全体をコンテンツで埋めますが、16:9 は縦持ち端末で上下に黒帯が出ます。

›入力データはサーバーに送信されますか?

いいえ。計算はブラウザ内で完結します。