ForHosting KIT · 画像の編集・解析

ロゴの最小余白を計算

ロゴのクリアスペースは、近接する文字、画像、罫線、ページ端からロゴを守るための領域です。この計算ツールは、「ロゴの周囲に x ハイトの 1.5 倍を確保する」といったブランド規定を、正確な最小距離へ変換します。表示時のロゴの高さ、基準要素の実測高、指定倍率をご入力ください。選択した単位のまま各辺に必要な余白を算出し、上下に余白を加えた保護領域全体の高さも表示します。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

ロゴと基準要素を同じ縮尺で測定します

まず、実際のデザインで使用する寸法にロゴを設定してください。その状態でロゴ全体の高さを測り、アートワークを個別に拡大・縮小せず、ブランドガイドで指定された要素の高さを測定します。基準には、小文字 x の高さ、英大文字の高さ、シンボルの直径、または図形内の別の特徴が用いられます。2 つの値には必ず同じ単位をお使いください。画面用途ではピクセルが便利です。印刷用途でミリメートルやポイントを使う場合は、汎用単位を選択できます。このツールは縮尺の不一致を隠さないよう、単位変換を行わず、選択された単位をそのまま保持します。たとえばロゴが 120 ピクセル、x ハイトが 24 ピクセルなら、その値を直接入力します。可能な限り元のベクターデータまたは鮮明な書き出し画像を測定してください。ぼやけたプレビュー、引き伸ばされた画面画像、透明な余白を含むファイルでは、見えているロゴを正しく測れない場合があります。

クリアスペースの倍率を正しく適用します

倍率は、基準要素の高さ何個分をロゴの周囲に空けるかを示します。1x なら基準高 1 個分、1.5x なら基準高の 1.5 倍、2x なら 2 倍です。数値だけをご入力ください。ツールが実測した基準高に掛け合わせ、1 辺あたりの最小余白を返します。ブランド規定に辺ごとの指定がない限り、通常は上、下、左、右のすべてに同じ距離を適用します。保護領域の高さは、ロゴの高さに上側と下側の余白をそれぞれ 1 回ずつ加えた値です。バナー、カード、ナビゲーションバーに十分な高さがあるかを確認する際に役立ちます。基準要素がロゴ高に占める割合も診断値として表示されます。これにより、異なる縮尺で測った可能性を発見できます。ブランドガイドが別の計算方法を明記している場合は、必ずその規定を優先してください。

レイアウトと制作指示に結果を反映します

算出した最小余白は、任意の見た目上の余白ではなく、侵入禁止領域として扱ってください。文字、イラスト、写真、罫線、トリミング境界、操作部品をこの範囲に入れてはいけません。デザインツールでは、計算距離だけ四辺から離したガイド、または非表示の枠を作成します。レスポンシブなレイアウトでロゴの表示寸法が変わる場合は、基準要素がアートワーク全体と自動的に比例する場合を除き、寸法ごとに再計算してください。CSS では padding や margin の参考値にできますが、親コンテナー固有の間隔やブラウザーによる小数ピクセルも考慮します。小数を扱える環境では計算値を保持してください。整数ピクセルしか使えない場合は、切り下げると最低値を下回るため、切り上げます。ロゴ高、基準高、倍率、単位、結果を制作指示に記録すると、確認担当者が判断を再現できます。API による自動確認は 1 回 $0.002 で、個別のレイアウト確認にはブラウザー版をご利用いただけます。

活用例

Web サイトのヘッダー間隔を決める

ナビゲーションやヘッダーの寸法を決める前に、x ハイトの規定を正確なピクセル余白へ変換します。

印刷用データを準備する

共通の印刷単位で侵入禁止領域を求め、文字や断裁線をその外側に配置します。

デザインテンプレートを監査する

プレゼンテーション、SNS、文書で異なる大きさのロゴに再現可能な余白値を作成します。

よくある質問

ロゴのクリアスペースとは何ですか？

ほかの要素がロゴに近づきすぎたり重なったりしないよう、周囲に必ず確保する最小の空白領域です。

どの要素を基準にすればよいですか？

ブランドガイドで指定された x ハイト、大文字の高さ、シンボルの一部などをご使用ください。

余白はすべての辺に適用しますか？

計算値は 1 辺の最小値です。非対称の指定がない限り、四辺すべてに適用してください。

ピクセル以外の単位も使えますか？

はい。汎用単位を選び、すべての測定値を同じ単位で入力してください。単位変換は行いません。

小数ピクセルは丸めるべきですか？

対応していれば小数のままお使いください。整数が必要な場合は、最小値を守るため切り上げます。

API の料金はいくらですか？

API は 1 回 $0.002 です。個別の確認はブラウザーでも実行していただけます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/image/logo-clear-space-calc

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/image/logo-clear-space-calc \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"logo_height":120,"reference_element_height":24,"clear_space_multiple":1.5}'

const res = await fetch("https://api.kit.forhosting.com/image/logo-clear-space-calc", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "logo_height": 120,
    "reference_element_height": 24,
    "clear_space_multiple": 1.5
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/logo-clear-space-calc",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "logo_height": 120,
    "reference_element_height": 24,
    "clear_space_multiple": 1.5
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/logo-clear-space-calc", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"logo_height":120,"reference_element_height":24,"clear_space_multiple":1.5}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"logo_height":120,"reference_element_height":24,"clear_space_multiple":1.5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/logo-clear-space-calc", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "logo_height": 120,
  "reference_element_height": 24,
  "clear_space_multiple": 1.5
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.logo_clear_space_calc",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`max_mb`	15
`max_megapixels`	12

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →