【ロゴガイドライン作成に】ロゴの最小サイズ検証、ブラウザだけで動く無料ツールを作りました

最終更新日:2026年6月17日

つくったロゴの視認性確認のため、最小使用サイズの検証ツールをつくりました。

特徴はこちらです。

  • ロゴ画像をアップロードするだけで使える
  • px検証(画面)とmm検証(PDF書き出し)の2モード
  • 画像はサーバーに送信されません(ブラウザ上のみで完結)
  • 無料・インストール不要

使ってみようと思った方はこちらからどうぞ。

ロゴ最小サイズ検証ツール

なぜつくったのか?

ロゴを制作したあとは、最小使用サイズの検証を行っています。とくにガイドラインを用意する場合は入念に行います。

これまでは、Illustratorでサイズ違いをたくさん作って並べたものを比べたり、1サイズずつ確認したりしていたのですが、地味に面倒だなと思っていました。

また、最近Claudeを使いだして、これならツールの開発もサクサクできると思い、仕事の実用ツールをつくってみようと思い立ちつくったのが、この「ロゴ最小サイズ検証ツール」です。

仕様を考えプロンプトで伝えたら、ものの数分で出来上がりました。

それを使ってみて気づいた点を伝え、数回のラリーで出来上がりました。(賞味2時間くらい)

まだまだ、ブラッシュアップしていけそうですが、一旦実用としては行けるのではと思い、公開することにしました。

機能・使い方

検証したいロゴ画像を用意します。画像は、PNG/JPG/SVGに対応しています。

このとき、ロゴの周りに余計な余白はいれないように注意しましょう。

 

準備ができたらアップロード。

 

基準の軸を幅/高さ、どちらにするか決めます。

 

検証モード(画面表示用、印刷表示用)を決めます。

px検証は、画面表示。mm検証は、A4 PDFが書き出されますので、印刷して実寸確認してください。

また、pxやmmの範囲を設定できます。わからないときには、まず一度書き出してみてから調整してもよいと思います。

 

書き出されたものを確認して、最小サイズを決めましょう。

画面表示の場合

 

PDF書き出しの場合

 

ロゴガイドラインについての参考:ロゴガイドラインについて

 

技術的なこと

ブラウザ上で簡単に使えるツールとしています。アップロードした画像は、サーバーに送信されることはありません。

  • PHPなしの純粋なHTML/JS
  • Canvasで画像処理
  • jsPDFでPDF生成

雑感

はじめは、px検証の画面表示しかできないかなと思っていたのですが、PDF生成もできるとのことで、2モードにしてみました。

ザザーっとロゴが並ぶのは、見ていて結構気分がいいです(笑)

ロゴ最小サイズ検証ツール

 

もし、このような機能があればというのがあれば、ご連絡ください。

お問い合わせフォームへ