2018秋の無料相談会
2018秋の無料相談会
2018.08.29

比率を考えたデザインを。比率を計算してくれる無料サービスまとめ

ミライ

こんにちは。デザイナーのミライです。仙台出身。ジャスの意味がわかるやつは大体友達です。

比率の計算、面倒なときがありますよね……。ぼくも算数も数学も苦手なので毎日頭抱えてます……。でも計算しておけば、見栄えの担保、説得力がつく、設計構築がスムーズに、などさまざまなメリットがあります。この世のすべては数式で表せるらしいです。頭が狂いそうです。

計算するのが嫌すぎて、比率計算を簡単にしてくれるサービスをまとめたので、見てみてください。

01. 画像などに使える比率計算ツール

Ratio Calculator

Ratio Calculator

「16:9」「3:2」「4:3」「黄金比」を計算してくれます。 ベースの数値を入力すればすぐに結果を反映してくれます。

すでにほかのツールよりも多くの種類をカバーしていますが、もう少し幅広い種類に対応してほしいなというのと、EnterKeyを押すと入力したものが消えてしまうのが難点。

アスペクト比計算ツール @Ocadweb

アスペクト比計算ツール

Ocadwebさんのページで展開しているツールです。

比率ごとの説明があって親切です。Ratio Calculatorと比べると、「2:1」「白銀比」が追加されています。

大きく違うのが、画像をアップロードでき、Widthベースですがその場でイメージの確認ができる点です。どれくらいトリミングが必要なのかも見れるので便利です。

画面解像度取得・アスペクト比算出 @instant tools

画面解像度取得・アスペクト比算出

instant toolsさんのページで展開しているツールです。

単純に、現状の比率が何対何なのかを算出してくれるツールです。メインは、機種ごとのディスプレイ情報を算出するためのものらしいです。

instant toolsさんではこのほかにも、比率計算機(たぶん一番メジャー)、拡大・縮小計算機(拡大縮小後の数値が一瞬でわかる)、黄金比・白銀比・青銅比計算機(貴金属比計算に特化)といったツールも公開されています。基本の比率計算とか、貴金属比の計算に便利そうです。

Get Ratio

Get Ratio

紹介した中で一番多くの比率を算出してくれます。

数値ごとのURLを出してくれるみたいなので、URL入力時点で数値を入れれば、最速で結果を見ることができます。

逆比も算出してくれるので、使い方によっては一番重宝しそうです。

02. レイアウトに使えるツール

比率とは違ったツールになりますが、レイアウトに使える非常に便利なツールまとめです。

Grid Designer

Grid Designer

カラム数、コンテンツ幅、要素間マージン、デザイン幅(コンテンツ幅 – マージン)を入力するだけで、「カラム要素の均等な数値」を算出してくれます。 マージンを決めで入力しなくてはいけないですが、便利そうです。

gridulator

gridulator

こちらはもーりーさんに教えていただいたのですが、ベース幅とそれを割りたいカラム数を入力するだけで、「カラム要素の均等な数値」と、「要素間のマージン」を算出してくれます。

PNGで書き出しもできるので、デザインに当てはめて確認しながら調整することもできます。

03. フォントサイズの設計に使えるツール

type-scale

type-scale

ベース(本文)のフォントサイズと、比率の種類を設定するだけで、適用されたサンプルテキストを出してくれます。単位はemです。

カスタムが豊富で、「任意の比率」、「表示テキスト」、「フォント(GoogleFonts内)」、「フォントのウェイト」を調整できます。

画面右部にチラ見せされている部分は、青の矢印ボタンを押すと全部分表示でき、実際に適用した際のイメージを確認できます。こちらも「More Option」から、背景色と文字色を変更できます。

おわりに

サイズ、行間などフォントに関わる比率すべてを計算してくれるサービスが欲しいですね。そのうち自分で作ろうと企んでます。

すべてのものに比率を適用すればいいというものではないので、今回多かった貴金属比などをベースに、綺麗に見せられる自分の勝ちパターンの比率を見つけていくのもありだと思います。

みなさんが1分でも早く帰れる日が増えますように。

んでは、また記事書くので見にきてけらいん。 お粗末様でした。