POST TITLEWEBサイトのモックアップの組み上げに活用できる、アスペクト比の計算とダミー画像URLが自動で生成されるWEBツール

WEB制作者（フロントエンド）であれば、結構使う頻度が多いであろうアスペクト比の計算と、併せて自動でダミー画像の設置ができるimgタグの自動生成ができるWEBツール「アスペクト比率計算&ダミー画像imgタグ自動生成ツール」を作りました。

アスペクト比率計算&ダミー画像imgタグ自動生成ツールとは

黄金比や白銀比、16:9などのアスペクト比に対して、比率を変えずにリサイズされた横と縦の数値を自動で弾き出します。

そして、その数値を元にダミー画像のURLが反映されたimgタグを自動で生成し、WEBページのモックアップの組み立て時などでコピー＆ペーストですぐに挿入できるように
しました。

ダミー画像サービスは、Placehold.jpとLorem Picsumの2つを自動で生成します。
用途や好みによって好きな方のダミー画像サービスを使っていただけれたらと思います。

アスペクト比の自動計算ができる種類は、

の6種類にしました。

白銀比の比率は、1:1.414の比率で、英語では「Silver Ratio」と呼ばれます。

白銀比は貴金属比の一つで「大和比」とも呼ばれており、日本人にはとても馴染みがあるアスペクト比です。法隆寺やスカイツリーの設計でも白銀比が使われており、さらには私たちがよく見えにするA4サイズとかB5サイズとかの紙のサイズも全て比率は白銀比です。

また、ドラえもんやキティーちゃん、アンパンマンの顔なども白銀比を用いられていることも有名です。

黄金比の比率は、1:1.618で、英語では「Golden Ratio」と呼ばれます。

古代ギリシア以来「神の比」とも呼ばれ、安定的で美しい比率とされる貴金属比の一つです。貴金属比の中では、一番有名なアスペクト比です。

古代ギリシア時代にアクロポリスの上に建設された「パルテノン神殿」はこの黄金比で作られたことは有名です。

OGPとは、「Open Graph Protocol」の頭文字を取った略称で、SNSでシェアされた際にページのタイトルや画像などを表示させる仕組みのことです。

WEBサイトやその個別ページで、このOGPを正しく設定をすると、FacebookやTwitterなどのSNS上でシェアしたときに、意図した通りに表示させることができます。

この時の、OGP画像の最適なサイズは、横1200px、縦630pxとされており、アスペクト比にすると「1:1.91」となります。

ダミー画像サービスは、Pla c ehold.jpとLorem Picsumの2つのURLが自動で差し込まれるようにしました。

ぜひご活用ください。