アスペクト比の基礎知識 — 動画・画像・UIデザインへの応用
アスペクト比は幅と高さの比率で、16:9・4:3・1:1など特定の比率が動画・デバイス・ソーシャルメディアによって規格化されています。設計段階でアスペクト比を把握することで、後からリサイズしても崩れないレイアウトが作れます。
主なアスペクト比と用途
16:9（1.78:1）はHD動画・PC画面・YouTube・Twitterの動画標準です。9:16は縦型動画（TikTok・Instagram Reels・YouTube Shorts）に使われます。4:3は古いTV・タブレット向け、1:1は正方形でInstagram投稿・アイコンに、21:9はシネマスコープ映画・ウルトラワイドモニターに対応します。
逆算モードの活用
「横幅1920pxで16:9にしたときの高さは？」という計算は逆算モードで一瞬で解決します。比率（16:9）と一辺（1920）を入力するともう一辺（1080）が即時計算されます。Webデザインのレスポンシブ対応でビューポート幅から要素の高さを計算するときにも便利です。
CSS aspect-ratioプロパティ
CSSではaspect-ratio: 16 / 9 と指定することで要素の縦横比を維持できます。widthだけ指定しておけばheightは自動計算されます。動画のラッパー要素・サムネイル画像・カードコンポーネントに設定することで、様々な画面サイズでも比率が崩れないレイアウトを実現できます。
ソーシャルメディアの推奨アスペクト比
Twitter（X）のOGP画像は1.91:1（1200×630px）、Instagram Feed投稿は1:1・4:5・1.91:1、Facebook OGPは1.91:1が推奨されます。Aspect Ratio Calculatorでこれらの比率をプリセットから選ぶか、カスタム比率を入力して必要なサイズを算出できます。