アスペクト比計算機

アスペクト比を理解する

アスペクト比は画像や動画の幅と高さの比率的な関係を表し、コロンで区切られた2つの数字で記述されます。16:9は幅16ピクセルに対して高さが9ピクセルあることを意味します。アスペクト比は無次元 — 1920×1080と1280×720は同じ比率を持つため、どちらも16:9です。

一般的な比率とその用途

• 16:9 (1.78:1) — ワイドスクリーン動画の世界標準：YouTube・Netflix・Vimeo・Twitch・テレビ放送・デスクトップモニター・ノートPCの画面。
• 4:3 (1.33:1) — 旧来のテレビとモニターの標準。プレゼンテーション・一部のiPadアプリ・標準解像度動画に今でも使われています。
• 1:1 — 正方形フォーマット。Instagramフィード・プロフィール写真・アルバムアート。視覚的なインパクトが強く、幅と高さが等しい。
• 9:16 (0.56:1) — TikTok・Instagram Reels/Stories・YouTube Shorts向けの縦型動画。「モバイルフルスクリーン」フォーマット。
• 4:5 (0.8:1) — Instagramの縦長フィード投稿。正方形より縦に長く、完全に縦にせずより多くのコンテンツを見せられる。
• 21:9 (2.33:1) — シネマティック・ウルトラワイド。映画（2.39:1スコープフォーマット）やウルトラワイドモニターで使用。
• 3:2 (1.5:1) — 従来の35mmフィルム写真と多くのデジタルカメラ。標準的なプリント写真の比率。

リサイズ時にアスペクト比を維持する方法

比率を保ちながら画像をスケールするには、両方の寸法に同じスケール係数を掛けます。新しい幅に対して比率を保った高さを求めるには：新しい高さ = (新しい幅 / 元の幅) × 元の高さ。

例：1920×1080を幅1280ピクセルの版にスケールする：1080 × (1280 / 1920) = 1080 × 0.667 = 720ピクセル。結果の1280×720は16:9の比率を維持しています。

CSS aspect-ratio プロパティ

CSSのaspect-ratioプロパティ（2021年以降のすべての最新ブラウザでサポート）を使うと、両方の寸法を知らなくてもその要素の意図した比率を宣言できます。コンテナにaspect-ratio: 16 / 9を設定してwidthだけ与えると、ブラウザが正しい高さを自動的に計算します。これは古いpadding-percentageハック技術を置き換えるものです。

よくある質問

• アスペクト比とは何ですか？
  アスペクト比は画像や動画の幅と高さの比率的な関係を表し、2つの数字（例：16:9）で表されます。16:9の比率は、高さ9単位に対して幅が16単位であることを意味します。
• YouTubeのスタンダード動画アスペクト比は？
  YouTubeの標準比率は16:9です。推奨解像度：1920×1080（Full HD）。サムネイルは最小1280×720、推奨1920×1080。
• Instagramはどのアスペクト比を使用していますか？
  Instagramは1:1（正方形、1080×1080）、4:5（縦長フィード、1080×1350）、9:16（ストーリーズ/リール、1080×1920）をサポートしています。
• リサイズ時にアスペクト比を維持するには？
  新しい高さ = (新しい幅 / 元の幅) × 元の高さ。CSSの場合は aspect-ratio: 16 / 9 を設定して一方の寸法だけ与えると、ブラウザがもう一方を自動計算します。
• 16:9は何ピクセルですか？
  一般的な16:9の解像度：1280×720（HD）、1920×1080（Full HD）、2560×1440（QHD）、3840×2160（4K UHD）、7680×4320（8K UHD）。幅÷高さ＝1.778となる寸法はすべて16:9です。
• CSS aspect-ratioプロパティは何をしますか？
  CSS aspect-ratioプロパティは要素の希望する比率を宣言します。aspect-ratio: 16 / 9 と幅だけを設定すると、ブラウザが高さを自動的に計算します。2021年以降のすべての最新ブラウザでサポートされています。