ForHosting KIT · 開発者向けツール

ブランドカラーの使用比率を確認

ブランドパレットには、承認済みの色を並べるだけでなく、実際の画面で適切なバランスを保つことも必要です。このツールは、ピクセル面積として測定した各色の使用量を百分率に換算し、ガイドラインで定めた配分と比較します。ピクセルまたは共通の面積単位で使用量を入力し、60、30、10のような目標値と許容差を指定してください。各色の合否、目標からの正確な差、デザイン全体が基準を満たすかどうかをご確認いただけます。

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

無料で実行 API仕様を見る

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

ピクセルの使用面積を有効なパレット監査に変換します

承認された色をすべて使用していても、配分が不適切であればブランドらしく見えない場合があります。アクセントカラーの面積が大きすぎると主色より目立ち、中性色が多すぎるとキャンペーン全体が弱く見えます。まず、デザイン全体または明確に定めた範囲について、ピクセル面積を測定してください。ブランドカラーごとに1行を追加し、すべての行で同じ単位を使用します。ピクセル数が便利ですが、平方ポイント、抽出したセル数など、共通の面積単位であれば同じ百分率になります。本ツールは値を合計し、各色を正の合計値で割るため、画像寸法や測定尺度は比率に影響しません。Primary Blue、Background Cream、#F05A28のように、確認担当者が理解できる役割名やコードを付けてください。対象となる面積はすべて含めます。大きな背景を除外したり、関係のない色をまとめたりすると、計算が正しくても別のデザインを表す結果になります。透明部分や写真は、ブランド規定で対象とされる場合に限って含めてください。

目標を設定し、パーセントポイントの差を読み取ります

一覧にある各色へ目標百分率を入力してください。目標値は測定対象となるブランドカラー領域全体の配分を表すため、合計を100にする必要があります。代表的な階層は、主色60パーセント、副色30パーセント、アクセント10パーセントですが、本ツールはこの規則に固定されていません。2色から20色までの完全な配分に対応します。表示される差は相対的な増減率ではなく、パーセントポイントです。実際の使用率が14パーセントで目標が10の場合、差はプラス4ポイントです。実際が27.5パーセントで目標が30の場合は、マイナス2.5ポイントになります。プラスは使用過多、マイナスは使用不足を示します。許容差によって合格範囲を決めます。許容差が2なら、マイナス2からプラス2までが合格です。各行を個別に判定し、すべての色が合格した場合のみ、ガイドライン全体を満たしたと判定します。

デザインレビューと品質管理に結果を活用します

数値は目視確認を置き換えるものではなく、判断を支える客観的な資料としてお使いください。まず全体の合否を確認し、次に各色の差を調べて、最も効果的な修正箇所を判断します。アクセントが目標を超えている場合、その色を減らすか、集計対象の別領域を増やすことでバランスを戻せます。すべての百分率は同じ合計値を共有するため、互いに連動します。別の担当者が判断を再現できるよう、使用面積、目標配分、許容差、結果をデザインの版と一緒に保存してください。自動品質管理では、APIの応答を使って不合格の素材を明示し、説明なく却下せずデザイナーへ差し戻せます。同じキャンペーンでは同一の測定方法を用いてください。アンチエイリアス、色の類似判定しきい値、グラデーション、切り抜きにより、入力前のピクセル数が変わるためです。計算は決定論的で、画像自体は解析せず、ご提供いただいた面積値だけを評価します。

活用例

60-30-10構成を確認します

完成したレイアウトで、主色、副色、アクセントカラーが合意済みの許容範囲に収まるか確認できます。

キャンペーンの一貫性を監査します

バナー、SNS画像、ランディングページのパレット比率を、再現可能な同一基準で比較できます。

デザイン品質の判定工程を追加します

ブランドカラーが許容されたパーセントポイントを超えて目標から外れた書き出し素材を検出できます。

よくある質問

使用面積にはどの単位を使えばよいですか？

すべての色で同じ単位を使用する限り、ピクセルなどの0以上の面積単位をご利用いただけます。結果は比率だけで決まります。

目標百分率の合計は100にする必要がありますか？

はい。目標値は測定したブランドカラー領域全体の配分を表すため、合計を100にする必要があります。

許容差とは何ですか？

各色に許される絶対差の上限をパーセントポイントで指定したものです。全色が合格した場合に全体の基準を満たします。

画像から色を抽出できますか？

いいえ。事前に取得した使用面積を評価するツールであり、画像のアップロード、解析、分類は行いません。

すべての使用面積が0の場合はどうなりますか？

正の合計がなければ百分率を計算できないため、無効な入力としてエラーを返します。

APIリクエストの料金はいくらですか？

APIリクエスト1回につき$0.002です。ブラウザー版では同じ決定論的な計算を端末内で実行できます。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/date/brand-color-usage-ratio-check

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

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

curl -X POST https://api.kit.forhosting.com/date/brand-color-usage-ratio-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"colors":[{"color":"Primary blue","coverage":60000,"target_percentage":60},{"color":"Secondary gray","coverage":30000,"target_percentage":30},{"color":"Accent orange","coverage":10000,"target_percentage":10}]}'

const res = await fetch("https://api.kit.forhosting.com/date/brand-color-usage-ratio-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "colors": [
      {
        "color": "Primary blue",
        "coverage": 60000,
        "target_percentage": 60
      },
      {
        "color": "Secondary gray",
        "coverage": 30000,
        "target_percentage": 30
      },
      {
        "color": "Accent orange",
        "coverage": 10000,
        "target_percentage": 10
      }
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/date/brand-color-usage-ratio-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "colors": [
        {
            "color": "Primary blue",
            "coverage": 60000,
            "target_percentage": 60
        },
        {
            "color": "Secondary gray",
            "coverage": 30000,
            "target_percentage": 30
        },
        {
            "color": "Accent orange",
            "coverage": 10000,
            "target_percentage": 10
        }
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/date/brand-color-usage-ratio-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"colors":[{"color":"Primary blue","coverage":60000,"target_percentage":60},{"color":"Secondary gray","coverage":30000,"target_percentage":30},{"color":"Accent orange","coverage":10000,"target_percentage":10}]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"colors":[{"color":"Primary blue","coverage":60000,"target_percentage":60},{"color":"Secondary gray","coverage":30000,"target_percentage":30},{"color":"Accent orange","coverage":10000,"target_percentage":10}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/date/brand-color-usage-ratio-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "colors": [
    {
      "color": "Primary blue",
      "coverage": 60000,
      "target_percentage": 60
    },
    {
      "color": "Secondary gray",
      "coverage": 30000,
      "target_percentage": 30
    },
    {
      "color": "Accent orange",
      "coverage": 10000,
      "target_percentage": 10
    }
  ]
}

レスポンス例

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

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

料金

1リクエストあたり$0.002

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

エラー

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

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