幅 (Width)
入替
高さ (Height)
固定
計算されたアスペクト比
16 : 9
aspect-ratio: 16 / 9;
主要プラットフォームの推奨サイズ
| 用途 | サイズ | 比率 |
|---|---|---|
| YouTube | 1920×1080 | 16:9 |
| 1080×1350 | 4:5 | |
| Stories | 1080×1920 | 9:16 |
| LINEスタンプ | 320×270 | 約1.18:1 |
このツールは、画像の幅と高さを入力するだけで瞬時にアスペクト比（縦横比）を計算し、プレビュー表示とCSSコードの生成を行うWeb便利ツールです。
このツールでできること
- アスペクト比の自動計算： 任意のピクセル値を入力すると、最小整数比（例：16:9）を算出します。
- 比率を維持したサイズ変更： 「固定」ボタン（鍵アイコン）を押すと、比率を保ったまま片方の数値を変更して、最適なサイズを探せます。
- リアルタイムプレビュー： 入力した比率が視覚的にどの程度の形状になるか、グレーのエリアで即座に確認可能です。
- CSSコード生成： モダンなWeb制作で必須となる
aspect-ratioプロパティのコードを生成し、ワンクリックでコピーできます。 - 主要プリセット選択： 16:9や黄金比など、よく使われる比率を一瞬でセットできます。
このツールで取得する情報の基礎知識
- アスペクト比とは： 矩形（四角形）における「横幅」と「高さ」の比率のことです。動画では16:9、写真では3:2などが一般的です。
- aspect-ratio（CSS属性）： 従来のWeb制作では padding-top などを用いた複雑な手法で比率を維持していましたが、現在は
aspect-ratio: 16 / 9;のように記述するだけで、レスポンシブ対応の比率固定が可能です。 - 黄金比と白銀比： * 黄金比（1:1.618）： 最も美しく調和がとれるとされる比率。ロゴデザインやレイアウトに多用されます。
- 白銀比（1:1.414）： 日本人が美しいと感じやすいとされる比率。A4サイズなどの紙の規格や、キャラクターデザインに用いられます。
このツールが役立つときはどんなとき？
- バナー制作時： 指定された枠に収めるための最適なピクセル数を計算したいとき。
- 動画編集・サムネイル作成： YouTube（16:9）やInstagram（4:5、9:16）に最適なサイズを確認したいとき。
- Webコーディング： 画像の遅延読み込み（Lazy Load）によるレイアウトシフトを防ぐため、CSSの比率指定が必要なとき。
- UI/UXデザイン： スマートフォンの画面サイズに合わせて、要素の比率を美しく保ちたいとき。
アスペクト比計算のコツと注意点
計算された数値が端数になる場合、デジタルデバイスでは1ピクセル未満の表示ができないため、小数点以下を四捨五入して整数で扱うのが一般的です。本ツールでは、比率を固定した状態で数値を入力すると、自動的に計算された近似値が表示されるため、デザインの破綻を防ぐことができます。
