Webサイトやブログ運営、YouTube サムネ作成、動画編集で
必ず意識するのが アスペクト比(縦横比) です。
WordPress の画像比率
YouTube サムネイル
TikTok/Instagram リールの縦動画
画像のリサイズ時の比率維持
解像度の計算方法
この記事では、
ツールなしで理解できる “アスペクト比の仕組み・計算方法・おすすめ設定” をまとめます。
アスペクト比の基本(計算式つき)
アスペクト比とは 横 : 縦 の比率 のこと。
例:
16:9(YouTube動画)
4:3(古いテレビ・一部カメラ)
9:16(スマホ縦動画)
比率→解像度の求め方(式)
縦 = 横 × 9 ÷ 16
→ 縦 = 1280 × 9 ÷ 16 = 720
YouTube サムネなら
1280 × 720(16:9) が王道です。
ブログ運営でよく使うアスペクト比(用途別)
WordPress や Web サイトでは
画像のアスペクト比を統一すると ページデザインが安定 します。
① アイキャッチ(OG画像・SNSシェア)
推奨:1200 × 630(1.91:1)
理由
Twitter(X)、Facebook、LINE の規定比率
画像が切れにくい
Google Discover にも適合
② ブログ記事内の横長画像
推奨:16:9 または 3:2
スマホでも横幅がぴったり
写真・図解にも合う
③ 商品画像・サムネ
推奨:1:1(正方形)
サムネイルとして扱われても整う
ECサイト・ブログ共通で使いやすい
YouTube・動画編集向けの比率
動画関連で必ず覚えておくべき比率はこちら。
① YouTube 通常動画(横画面)
16:9(代表 1920×1080)
最も標準
PC・TV・スマホ横持ちですべて表示最適化
② YouTube ショート、TikTok、リール
9:16(全画面縦動画)
代表解像度:1080×1920
スマホ視聴に最適
若年層の視聴が増える
③ Instagram フィード(四角が安定)
1:1(正方形)
サムネにしても崩れない
アイキャッチも整う
比率の用途一覧(必要な分だけ簡潔に)
| 比率 | 用途 | 解像度例 |
|---|---|---|
| 16:9 | YouTube動画 / ブログ横長 | 1920×1080 / 1280×720 |
| 9:16 | YouTubeショート / TikTok | 1080×1920 |
| 1:1 | Instagram / サムネ | 1080×1080 |
| 3:2 | 写真・ブログ | 1200×800 |
| 1.91:1 | OG画像(SNSシェア) | 1200×630 |
アスペクト比を維持したままリサイズする方法
リサイズ時の基本は 比率を一定にすること。
横を基準に縦を計算する
縦 = 横 ×(比率の縦 ÷ 比率の横)
例:
16:9 で横1500にしたい → 縦 = 1500×9÷16 = 843
縦を基準に横を計算する
横 = 縦 ×(比率の横 ÷ 比率の縦)
例:
9:16 の縦1800 → 横 = 1800×9÷16 = 1012
ブログ運営で起こる“アスペクト比の崩れ”原因
① WordPress が自動生成サムネを切り取る
→ アイキャッチの比率が合っていない
② スマホで上下が切れる
→ 9:16 動画を横向きページに埋め込んだ場合
③ 解像度が大きすぎる/小さすぎる
→ 画像がぼやける/読み込みが遅くなる
画像比率を統一するメリット
ページデザインが安定
SNSシェア時に画像が切れない
サムネイルの自動生成が正確
画像サイズが軽くなる(SEO改善)
Web運営者にとっては「必須知識」です。
補足リンク(関連記事)
まとめ
アスペクト比は「横 : 縦」の比率
ブログ運営と動画編集で推奨比率は異なる
SNSシェアは1200×630(1.91:1)が最適
YouTube動画は16:9、ショートは9:16
比率維持は「横か縦に合わせて計算」する
画像の比率が揃うとサイトが整いSEOも向上する
画像の比率さえ理解すれば、
Web全体のデザイン管理が劇的に楽になります。

