アスペクト比計算機

アスペクト比とは

アスペクト比は画像、ビデオ、スクリーンの幅と高さの比例関係であり、width:heightの形式で表現されます。コンテンツの形状を定義します。例えば、16:9は横長の長方形で、1:1は完全な正方形です。アスペクト比は、メディア制作、レスポンシブWebデザイン、UIレイアウトにおいて、異なるデバイスやプラットフォーム間でコンテンツが不要なトリミングやストレッチなく正しく表示されるようにするための基本要素です。

一般的なアスペクト比

16:9はHDおよび4Kビデオ、YouTube、ほとんどの最新モニターの標準です。4:3は昔のテレビ放送と初期のコンピュータモニターのデフォルトでした。1:1はInstagramなどのソーシャルメディアプラットフォームで正方形投稿に広く使われています。21:9（ウルトラワイド）はシネマティックコンテンツとウルトラワイドゲーミングモニターで人気があります。3:2は35mmフィルムとDSLRカメラの写真の古典的な比率です。9:16はTikTok、Reels、Storiesで使用される縦向きフォーマットです。

CSSのアスペクト比

最新のCSSは任意の要素に好みのアスペクト比を設定するaspect-ratioプロパティを提供します（例：aspect-ratio: 16 / 9）。これにより、長年使用されていた古いpadding-topパーセンテージハックが不要になります。object-fit（cover、contain、fill）と組み合わせることで、元の比率を保ちながら画像やビデオがコンテナをどのように埋めるかを完全に制御できます。aspect-ratioプロパティはすべての最新ブラウザでサポートされています。

アスペクト比のヒント

• JavaScriptなしでレスポンシブコンテナにCSSのaspect-ratioプロパティを使用する
• アスペクト比を対象プラットフォームに合わせる（YouTubeは16:9、TikTokは9:16、Instagramは1:1）
• aspect-ratioとobject-fit: coverを組み合わせてレターボックス化を回避する
• 画像をリサイズする際は比率をロックして歪みを防ぐ
• Open Graphとソーシャルシェアプレビューには2:1または1.91:1を使用する
• 複数のブレークポイントでレイアウトをテストして、すべての画面サイズで比率が保たれていることを確認する