アスペクト比の基本と実務活用ガイド：計算方法・PAR/DARの違い・CSS・動画制作への応用まで
エバープレイ編集部アスペクト比とは何か — 基本概念
アスペクト比（アスペクトひ、aspect ratio）とは、画像や映像、画面、センサーなどの「横幅と縦幅の比率」を示す値です。通常は「横:縦」のかたちで表記され（例：16:9、4:3、3:2）、縦横の絶対的なピクセル数ではなく、形状（縦長・横長・正方形など）を表します。アスペクト比は表示・撮影・編集・デザインの全領域で重要な概念であり、比率を保って縮尺するか、切り抜くかによって見え方が大きく変わります。
表記と計算方法
アスペクト比は通常「A:B」で示されます。ピクセルで表される幅Wと高さHが与えられたとき、アスペクト比はW:H を最小公約数で割って簡略化した比です。計算手順は次の通りです。
- 幅 W、縦 H の最大公約数（GCD）を求める。
- W を GCD で割り、H を GCD で割ると、簡略化された比 A:B が得られる。
例：1920×1080 の場合、GCD(1920,1080)=120 → 1920/120=16、1080/120=9 → 16:9。
また、ある幅に対してアスペクト比を保った高さを求める式は単純です。比率が A:B のとき、幅 w に対する高さ h は次のとおり：
h = w × (B / A)
逆に高さから幅を求める場合は w = h × (A / B) です。
ピクセルアスペクト比（PAR）とディスプレイアスペクト比（DAR）の違い
注意すべき点として「ピクセルが正方形かどうか」です。現代の多くのディスプレイやデジタル画像は「スクエアピクセル（正方形ピクセル）」を前提にしていますが、過去のSD映像など一部フォーマットではピクセル自体が長方形（非正方形）でした。
- 表示アスペクト比（Display Aspect Ratio, DAR）: 実際に表示される横:縦の比。
- ピクセルアスペクト比（Pixel Aspect Ratio, PAR）: 1ピクセルの横幅:縦幅の比。
- ストレージ（フレーム）サイズ（例えば720×480など）を用いると、DAR = (幅 / 高さ) × PAR という関係になります。
つまり、保存されているピクセル数だけを見て「この画像は4:3だ」と安直に判断すると、非正方形ピクセルのために実際の表示比率とずれることがあります。近年のHD/4Kではスクエアピクセルが標準なのでこの問題は少なくなりました。
代表的なアスペクト比と用途
- 1:1 — 正方形（SNSのアイコンやインスタグラムの一部表示）
- 3:2 — 35mmフィルム由来の写真（多くのデジタル一眼レフカメラのセンサー）
- 4:3 — 昔のテレビ、タブレットや古いデジタルカメラの比率
- 16:9 — HDTV、YouTube、一般的なモニターやスマホの横向き動画の標準
- 21:9（およびシネマの2.35:1〜2.39:1 等） — シネマスコープやウルトラワイドモニター
- 9:16 — スマートフォン縦向き動画（ショート動画、ストーリーズ等）
用途に応じて最適なアスペクト比が異なり、配信先（テレビ、映画館、SNS、ウェブ）に合わせて素材を変換するのが一般的です。
リサイズ、トリミング、フィットの考え方
元のアスペクト比を維持してサイズを変更する場合、"fit"（収める）と"fill"（埋める）の2つの挙動を使い分けます。
- contain / fit：全体を収める。結果として余白（レターボックス・ピラーボックス）が発生することがある。
- cover / fill：領域を埋めるためにはみ出した部分を切る（クロップ）場合がある。
ウェブでは CSS の object-fit や background-size、あるいは JavaScript での計算でこれらを実現します。画像をただ単に幅に合わせて縮小してしまうと縦横比が崩れるため、必ず比率を考慮して計算する必要があります（先に示した式を使用）。
ウェブとCSSにおけるアスペクト比制御
近年のブラウザでは CSS の aspect-ratio プロパティがサポートされ、要素の比率を簡単に固定できます。例：
<div class="video"></div>
.video { aspect-ratio: 16 / 9; width: 100%; }また、画像や動画要素に対しては object-fit: cover; や object-fit: contain; を使うことで、アスペクト比を保ちながら要素内での表示方法を決められます。レスポンシブデザインでは、親要素の幅に合わせて高さを自動計算するために aspect-ratio が非常に有用です。
映画・動画制作での注意点
映画や放送ではアスペクト比は作品の演出的選択でもあります。シネマスコープのワイドな横長比はワイドショットや横方向の運動感を強調します。逆に縦長（スマホ向け）は人物のクローズアップや縦方向の動きに適します。配信プラットフォームごとに推奨する比率が異なるため、編集の段階で切り替えやクロッピングの計画を立てておく必要があります。
UI/UX・デザインでの活用
プロダクトやUI設計においてもアスペクト比は重要です。サムネイル・カード・メディアの統一感は見た目に直結します。カードの比率を統一するとグリッドの整列が美しくなり、視覚的ノイズを減らせます。レスポンシブ時は縦横比を固定しておくと、異なる画面幅でのレイアウト崩れを防げます。
実務でのチェックポイント（まとめ）
- 配布先（ウェブ、SNS、テレビ、シネマ）に合わせたアスペクト比で素材を用意する。
- 縮小・拡大するときは必ずアスペクト比を維持する計算を行う（幅×縦比/横比）。
- 古い映像フォーマットは非正方形ピクセルの可能性があるため、変換時にDARとPARを確認する。
- ウェブでは CSS の aspect-ratio、object-fit、background-size を活用する。
- クロップやレターボックスの有無は表現（情報）を損なうことがあるため、重要な被写体が切れないようにプレビューで確認する。
参考文献
- MDN Web Docs: aspect-ratio（日本語）
- MDN Web Docs: object-fit（日本語）
- Wikipedia: Aspect ratio (image)
- Wikipedia: Pixel aspect ratio
- Wikipedia: Letterboxing (filmmaking)
- CSS-Tricks: Aspect Ratio Boxes
投稿者プロフィール
