logo

[ウェブサービスレビュー]黄金比などをオンラインで簡単に算出できる「Metallic Ratio」

  • このエントリーをはてなブックマークに追加
kishin Design
内容:「Metallic Ratio」は、オンラインで黄金比などを簡単に算出できるサービスだ。デザインにおいて目安に用いられる黄金比や白銀比といった比率を、クリック操作だけで算出し、ビジュアルでわかりやすく表示してくれることが特徴だ。

 「Metallic Ratio」は、オンラインで黄金比などを簡単に算出できるサービスだ。デザインにおいて目安に用いられる黄金比や白銀比といった比率を、クリック操作だけで算出し、ビジュアルでわかりやすく表示してくれることが特徴だ。

 本サービスはトップページのみの1ページで構成されている。上段には黄金比や白銀比などの比率、中段には結果を表示するための図形が描かれており、例えば上段で白銀比(Silver Ratio)をクリックすると、中段で100だった値が141に切り替わり、図形が横に伸びる。黄金比(Golden Ratio)をクリックすると値が161に切り替わり、図形がさらに横に伸びる。このように、数字だけではなくビジュアルでわかりやすく表示されるのが本サービスの大きな特徴だ。

 また「Switch Input Position」をクリックすると、これまで縦幅が基準だったのが、横幅が基準になるよう値が再計算される。具体的には、例えば黄金比であれば「縦100対横161.8」だったのが、クリックすることで「縦61.805対横100」に切り替わる。これにより、縦横どちらが基準でも、比率の具体的な値がすぐにわかる仕組みになっている。小数点以下の桁数も0~最大3ケタまで指定が可能だ。

  • 「Metallic Ratio」トップページ。インターフェースは英語だが、サイトそのものは国産だ

  • 上段の比率で白銀比(Silver Ratio)をクリックすると、中段の図形の横幅が100から141に切り替わる。あわせて図形が横に伸びるので変化が分かりやすい

  • 「Switch Input Position」をクリックすると、これまで縦幅が基準だったのが、横幅が基準となるよう値が変化する

 さらにこれら比率を縦横比だけではなく、左右に並べた分割比も表示できるので、例えばウェブページで左列の幅を決めたり、横長のバナーで区切り位置を決めるといった場合にも重宝する。タテヨコの比率が8種類であるのに対して、この分割比は6種類とやや数は減るが、実用性は十分だ。

 サイトはCSSとJavaScriptで作られており、動作も軽快。もともと作者が自分で使うために制作したものを一般公開したとあって、使い勝手や信頼性も高そうだ。デザイナーはブックマークしておいて損はないサイトといえそうだ。

  • 小数点以下の桁数も調節可能だ

  • 縦横比ではなく、分割比に切り替えて表示することもできる

  • 計算した比率は画面の下段に一時保存することもできるので、ひとまず結果を残して別の計算をしたい場合に便利だ

-PR-企画特集