すべての処理はブラウザ内で実行されます — ファイルや入力はサーバへ送信されません。
プリセット(16:9・4:3・21:9・1:1・3:2・9:16)を選ぶか、カスタムの `W:H` を入力してアスペクト比を設定し、幅または高さのいずれかを入力すると、もう一方が即座に計算されます。出力パネルには両方のピクセル値、簡約された比率(例: `1920:1080` を GCD で割って `16:9`)、スタイルシートにそのまま貼れる CSS `aspect-ratio` 宣言が表示されます。
ヒーロー画像、埋め込み動画、レスポンシブ iframe、カードサムネイルなどのサイズを決めるときに使ってください。CSS の `aspect-ratio` プロパティ(Chrome 88 以降・Firefox 89 以降・Safari 15 以降、2026 年時点でブラウザ対応率約 95%)は比率を強制する現代的な方法で、幅を指定すれば高さがビューポートサイズに関係なく自動で追従します。レガシーな padding-bottom トリック(16:9 に対する `padding-bottom: 56.25%`)は古いブラウザ向けに今も安全ですが、ビルドターゲットが許す環境では置き換えるべきです。
ratio: 16:9 width: 1200
width: 1200 height: 675 CSS: aspect-ratio: 16 / 9;
1200×675 の画像は、標準的なワイドスクリーン動画比率で 1200 幅のコンテンツカラムにぴったり収まります。CSS で `width: 100%; aspect-ratio: 16 / 9;` を組み合わせれば、レスポンシブにスケールしても比率は保たれます。Retina 用には 2 倍(2400×1350)で書き出し、ブラウザに縮小させてください。
ratio: 9:16 height: 1920
width: 1080 height: 1920 CSS: aspect-ratio: 9 / 16;
1080×1920 は縦型ショート動画のネイティブ解像度です。Instagram Reels・TikTok・YouTube Shorts はこのサイズでエンコードされます。CSS の `aspect-ratio: 9 / 16`(順序は幅 → 高さ、動画フレームと同じ)は、ウェブ上の埋め込みプレビューを同じ比率に制約します。モバイルファーストの製品ページでは、プロモーション動画用に 9:16 セクションを設ける例が増えています。
width: 2560 height: 1080
ratio (raw): 2560:1080 ratio (simplified): 64:27 (GCD(2560, 1080) = 40)
2560×1080 のウルトラワイドモニタは `64:27` であり、マーケティングが丸めて呼ぶ正確な `21:9` ではありません(21:9 は厳密には `2520:1080`)。簡約のステップでは両辺を最大公約数で割ります。マーケティングのアスペクト比は便利な略称ですが、デザイナーは特定のディスプレイ向けのレイアウト時には正確なピクセル寸法を保ってください。
サポートされている環境では `aspect-ratio` を使ってください(Chrome 88 以降・Firefox 89 以降・Safari 15 以降 — 2021 年初頭に出揃い、2026 年時点でグローバル対応率約 95%)。1 行の宣言で、`max-content` を含む任意の幅で動き、上のコンテンツが変わっても正しくリフローします。padding-bottom トリックはポリフィルで、コンテナに `padding-bottom: 56.25%`(16:9 用)を当て、子を絶対配置で埋めます。2021 年より前のブラウザを対象にする場合だけ使ってください。現代のウェブスタックの多くではもう不要です。
**16:9** — HD / 4K 動画、ノート PC とテレビの大半、YouTube の既定、2008 年頃以降のデスクトップ事実上の標準。**9:16** — 縦型モバイル動画(TikTok・Reels・Shorts)。**4:3** — 旧型テレビ、iPad、古いモニタ。設定を変えなければ Lightroom の書き出しでも依然として既定です。**3:2** — 35mm フィルム、伝統的な一眼レフ、Surface 機種。**21:9 / 64:27** — ウルトラワイドモニタ、シネマフィルム。**1:1** — Instagram の正方形(2018 年以降は減少)、プロフィール写真。**3:4 / 4:5** — Instagram のポートレート、モバイル編集系写真で人気。
映画やシネマでは、後ろの数字を 1 に固定した小数表記が使われます。幅が分子になるため 16 ÷ 9 ≈ 1.778 となり、`1.778:1` です。ウェブや動画ツールでは整数表記の `16:9` を使います。比率としては同じです。映画はさらに `2.39:1`(現代のアナモルフィック「スコープ」)や `1.85:1`(「フラット」)を使いますが、これらに対応する綺麗な整数ペアはありません。映画は歴史的に投影アパーチャがピクセル格子を前提に設計されていなかったため、小数表記が使われてきました。
現代の構文 — 宣言 1 行: ```css iframe { width: 100%; aspect-ratio: 16 / 9; } ``` 2021 年より前のブラウザ向けのレガシー構文: ```css .video-wrap { position: relative; padding-bottom: 56.25%; } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; } ``` 56.25% は `9 / 16 × 100` です。YouTube や Vimeo の一部の埋め込みではプレイヤーを固定するクエリパラメータ `?aspect=16:9` も受け付けますが、CSS の方法が普遍解です。
Google 検索はリッチリザルト向けに少なくとも 1200px 幅の横向き画像を好み、可視性のためには 16:9 に近いアスペクト比が望まれます。Open Graph(`og:image`)の推奨は 1200×630(約 1.91:1)で、16:9 よりやや狭く、Facebook / LinkedIn / Twitter のカードプレビューに合わせて選ばれました。Schema.org の `ImageObject` は `width` と `height` を受け付けるため、クローラが適切なサムネイルを選べます。正方形(1:1)はほとんどのプラットフォームで切り取られるため伝達性が最も悪く、縦長(9:16)はモバイル限定でデスクトップのカルーセルでは除外されます。
よくある原因は 2 つです。**ピラーボックス**(左右の黒帯)は 4:3 のコンテンツを 16:9 フレームに入れたときに、**レターボックス**(上下の黒帯)は逆のときに発生します。プレイヤーは元の比率を保ち、顔の引き伸ばしを避けるために残りを黒で埋めます。対処は、目的の比率でソースを書き出し直す(クロップやパン&スキャン)か、エッジの切り落としが許される場合はコンテナを `object-fit: cover` にすることです。**埋め込みの `<video>` の既定値** は親要素の `aspect-ratio` に関係なくソース動画のネイティブ比率を保ち、親が内側の動画に合わせて縮みます。
アスペクト比は長方形の幅と高さの比です — `W:H` という 1 つの数(または小数 `W/H`)で、サイズを指定せずに形だけを表します。1920×1080 と 3840×2160 はどちらも 16:9 で、面積は 4 倍違いますが *形* は同じです。簡約のステップは GCD で割るだけです。両辺を最大公約数で割って最小の整数ペアにします(1920 ÷ 120 = 16、1080 ÷ 120 = 9)。
比率の選択は美学より **デバイスの標準化** に駆動されます。映画産業は 1950 年代にテレビ(当時 4:3、のちに 16:9)への対抗として 1.85:1 と 2.39:1 を標準化しました。コンピュータモニタは 2000 年代初頭に 4:3 から 16:10 へ、2008 年頃にテレビメーカーの生産ライン統合とともに 16:9 に移行しました。モバイル写真でサイクルがリセットされました。TikTok の 9:16 の成功は、2018〜2020 年頃に Instagram や YouTube に縦型優先の製品サーフェスを追加させました。新たな支配的比率は、CSS のプリセット、Lightroom のエクスポート選択肢、iframe のサイズ指定慣例として 1〜2 年で取り込まれます。
レスポンシブ設計を形作る隣接概念が 3 つあります。**CSS `aspect-ratio`**(Web Spec、2021 年リリース)は padding-bottom トリックを置き換え、レスポンシブメディアを単純化します — 幅を指定すれば高さが追従します。**コンテナクエリ**(`@container`、2022〜2023 年リリース)は単一コンポーネントが親要素の幅に適応できるようにし、同じカードを広いグリッドでは 16:9、サイドバーでは 4:5 にメディアクエリなしで切り替えられます。**`object-fit`** はコンテナのアスペクト比とコンテンツが一致しない場合の挙動を制御します — `cover` は埋め尽くしてクロップ、`contain` はレターボックスで収め、`fill` は歪ませて当てはめます。`aspect-ratio` + `object-fit: cover` の組み合わせがレスポンシブサムネイルの現代的な既定です。
線形・放射状の CSS グラデーションをビジュアルで作成。カラーストップをドラッグし角度を調整、background CSS をそのままコピー。
HEX / RGB / HSL の相互変換とライブプレビュー。
2 つの色のコントラスト比を WCAG 基準でチェック。通常テキスト・大きいテキスト・UI 部品ごとに AA / AAA の合否を即時表示。
任意の画像から BlurHash プレースホルダー文字列を生成。~30 バイトの短い文字列がぼかし画像として表示され、Next.js のローディング、Unsplash 風フィード、SSR に最適。
aspect-ratio: 16 / 9;