ブロガーやデザイナー必見！簡単に写真の縦横比が計算できるツールを作ってみた。

2018年6月1日 Web, webサービス, Web制作メモ, デザイン

今回、画像サイズを調整する際に例えば、16:9や3:2、4:3、黄金比などのアスペクト比の計算が大変だったので計算ツールを作ってみました。まだまだ改良予定ですが、α版としてリリースしました。

使い方は簡単で指定した写真サイズを入力するだけで、ピクセルで計算してくれたり、今持っている画像を各比率でシュミレーションができるようになってたりします。

是非使ってみてください。

それでは「ツールの使い方の紹介」と「アスペクト比について」を紹介していきたいと思います。

アスペクト比計算ツールの使い方

縦・横のピクセル数を入力してアスペクト比を計算する
 指定した画像のイメージをプレビューで現在のpx数を見てサイズを指定する場合

アスペクト比とは

16:9とは
3:2とは
 4:3とは
 2:1とは
黄金比（Golden Ratio）とは
白銀比（Silver Ratio）/大和比とは
その他のアスペクト比

アスペクト比計算ツールの使い方

aspectratiotool1

アスペクト比計算ツール（16:9/4:3/3:2/2:1/黄金比）

縦・横のピクセル数を入力してアスペクト比を計算する

サイズ欄に指定するpxの数値を入力します。（①）指定すると入力した数値を「width（横幅）」もしくは「height（高さ）」をとして設定し計算することができます。（②）

入力した場合の表示

aspectratiotool3_1

指定した画像のイメージをプレビューで現在のpx数を見てサイズを指定する場合

aspectratiotool4

aspectratiotool5

イメージサイズを修正する前に現在のpx数や各アスペクト比にはめ込んだプレビューを見てサイズをしていることもできます。「ファイルの選択」からプレビューしたい画像を選択する（③）と、「ファイル名（④）」「現在のpx数（⑤）」や「各アスペクト比のプレビュー」を見ることができます。（※ファイルを選択しても当サイトで画像を保存されることはございませんのでご安心してご利用いただけます。）

イメージをアップしたプレビュー

aspectratiotool

※イメージは1:1の画像を使用しています。

アスペクト比計算ツールの使い方（動画）

アスペクト比とは

アスペクト比とは、写真や映像の縦と横の比率を表したものです。

下記によく利用するアスペクト比とそのアスペクト比を使った事例のものを紹介します。

Web上の文中にアクセントとして表示する場合は「16:9」、写真がメイン、もしくは大きくアピールしたい場合は「3:2」もしくは「4:3」がいいでしょう。

16:9とは

16:9は、デジタルテレビのハイビジョン映像で採用されている縦横比でワイドビジョンとも言われています。地デジでも用いられています。以前までYoutubeは4:3でしたが、現在は16:9のアスペクト比になっています。ニコニコ動画では4:3、16:9が標準になっています。

16:９の推奨されている最適な動画サイズ

1280 x 720
1024 x 576
768 x 432
512 x 288
256 x 144

3:2とは

写真などのフィルムカメラで使われる伝統的な縦横比で、35mm判フィルムカメラの画面サイズ、レンズ交換式のデジタル一眼レフのアスペクト比は「3:2」。デジタルコンパクトカメラの多くは「4:3」が多い。SurfacePro3はのスクリーンサイズは3:2。

4:3（1.33:1）とは

PCのディスプレイやアナログテレビの標準でテレビ放送の標準とされた縦横比。エジソンが採用した横縦比でサイレント映画はこの比率を使用していた。かつては映画のサイズだった。映画館でもよく見られるIMAX映画でもこのアスペクト比が使われている。（スタンダード・サイズ）。1932年に映画芸術科学アカデミーによって1.375:1（4.135:3）が定められ、アメリカではアカデミー比（Academy ratio）と言われている。ipadのスクリーンサイズはこの4：3。