アスペクト比計算の使い方
このページの用事は、片方の辺からもう片方のピクセルを出すことです。画像ファイルの読み込みや切り抜きはせず、入力した数値の計算と枠プレビューだけを行います。
🖼️ アスペクト比とは？「写真立て」で考えるイメージ
難しいIT用語のように聞こえますが、アスペクト比とは、いわば「写真立ての枠のカタチ」です。
高解像度の画像でも、表示する枠と比率が違えば、主役がトリミングで切れたり、無理に合わせて縦横が伸びたりします。画像や動画を作る前に、公開先に合う比率を確認しておくと、作り直しを減らせます。
🧪 このツールを作った理由
ゲーム開発の立ち絵やYouTubeサムネイルを調整するとき、「横幅は決まったけれど、高さはいくつにすればよいのか」と迷い、電卓で計算し直すことが何度もありました。比率を保ったまま必要なサイズをすぐ確認できるように、このツールを作りました。
比率と片方のサイズを入力すると、もう片方を自動計算します。縦横の入れ替えや、Monitor / Phone / Cinema の装飾枠プレビューも同じ画面で確認できます。
入力した比率や解像度の計算はブラウザ内で行い、入力値をKatakataLabのサーバーへ送信しません。ページ表示のためにフォントなどの外部リソースを読み込む場合があります。
📘 あわせて読みたい実践ガイド
YouTube・SNS・資料作成の例をもとに、使用先に合う比率の選び方をまとめています。
🧪 実際の入力で確認した結果
確認日: 2026年7月22日（Windows版Chrome）
- 入力: 比率16:9、横幅1,200px。
- 結果: 高さ675px（1,200 ÷ 16 × 9）と表示され、プレビューも16:9へ更新されることを確認しました。
- 確認範囲: 比率計算と画面プレビューまでです。SNS側の自動トリミングや媒体ごとの安全域は変わるため、公開先でも最終確認してください。
📝 使う前に決めておくこと
先に「どこへ出す画像か」を決めておくと、比率選びで迷いにくくなります。YouTubeの横長、ショート動画の縦長、資料用の4:3では、同じ画像でも安全に見える余白が変わります。
複数サイズへ使い回す予定がある場合は、主役を中央寄せにしてから計算すると、あとでトリミングされても崩れにくいです。
🚀 機能ハイライト
- 自動相互計算: 初期状態は「比率固定 ON」です。比率を入れると、幅から高さ（またはその逆）のピクセルを計算します。固定中はサイズを変えても比は変わりません。
- 比率の逆算: 「入力サイズから比率を逆算」を押すか「比率固定」を OFF にすると、いまの幅と高さから比を出し直します。定番比率に近い場合は目安も出ます。
- 定番比率に対応: 16:9、4:3、1:1、9:16、4:5、黄金比の近似値をプリセットから選べます。
- 枠プレビュー: 計算した比率を Monitor / Phone / Cinema の装飾枠で見比べられます。掲載先そのものではありません。
💡 便利なTIPS
入力欄をクリックすると数値が全選択されるので、連続して計算する際にストレスなく入力できます。
よく使われるアスペクト比まとめ
16:9（ワイド）
YouTubeの通常動画やワイド画面向けの映像などで、よく使われる比率です。
- FHD (Full HD): 1920 x 1080
- HD: 1280 x 720
- 4K: 3840 x 2160
4:3（スタンダード）
アナログテレビや、iPadなどのタブレット端末でよく見られる比率です。少しレトロな雰囲気を出したい時や、スライド資料(PowerPoint)の旧標準サイズとしても使われます。
1:1（スクエア）
Instagramのフィード投稿やアイコン画像などで使われる正方形の比率です。掲載先によって表示やトリミングは変わるため、公開画面でも確認してください。
9:16（縦長動画）
YouTubeショート、TikTok、Instagramリールなどの「スマホ全画面動画」に使われる比率です。16:9を縦にした形です。
- FHD縦: 1080 x 1920
4:5（縦長）
一部のSNS投稿や、縦長動画の一部画面で使われる比率です。公開先の指定を確認してから使ってください。
- よくある出発点: 1080 x 1350
黄金比（約1:1.618）
黄金比はデザインで参照される比率のひとつです。見た目の良し悪しが自動的に決まるものではないため、用途や内容に合わせて判断してください。
実際によくある計算例
- YouTubeサムネを半分サイズで書き出す: 1280 x 720
- 1080px 幅の縦動画を作る: 9:16 なら 1080 x 1920
- 1600px幅の4:3資料を作る: 1600 x 1200
よくあるミス
サイズだけ大きくしても、比率が違えば表示時にトリミングや余白は発生します。複数媒体へ転用するなら、主役を中央寄せで作り、安全域を広めに取るのが基本です。
📖 操作説明：幅・高さ・比欄の動き
幅を変えると高さが出る
比率が入っている状態で幅（Width）を入れると、高さ（Height）を自動計算します。高さを先に入れると、幅がそれに合わせて出ます。プリセットを押すと比が入り、いまの幅を基準にもう片方のピクセルを出し直します。
初期状態ではサイズを入れても比は固定
「比率固定 ON」のあいだは、幅や高さを変えても比欄はいま選んでいる比率のままです。黄金比など小数の比も、固定中は整数比に化けません。ピクセルは整数に丸めます。「比率固定 OFF」にすると、幅と高さから比を追従して出し直します。
「入力サイズから比率を逆算」ボタンの意味
いま入っている幅と高さから、最大公約数で比を出し直し、比率固定を OFF にします。サイズ入力のあと、比へ明示的に戻したいときに使います。画像ファイルを読み込んで比を検出する機能ではありません。
Monitor / Phone / Cinema は装飾枠
プレビューの Monitor・Phone・Cinema は、計算した比率をモニター風・スマホ風・シネマ風の枠に入れて見るための装飾です。YouTubeや実際の掲載先そのものではなく、書き出しや投稿は行いません。