ForHosting KIT · 検証・チェック

タッチターゲットの最小サイズを確認

タッチターゲットサイズチェッカーは、ボタン、リンク、アイコンコントロールなどの操作要素について、描画された幅と高さを指定の最小値と比較します。初期値は、モバイル設計で広く使われる目安である 44 × 44 ポイントです。別の基準値や単位も指定できます。各寸法の合否、全体の判定、修正に必要な正確な不足量を確認できます。

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

無料で実行 API仕様を見る

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

見えているアイコンではなく操作領域を測定します

タッチ操作のアクセシビリティで重要なのは、タップに反応する領域です。小さなアイコンでも、十分な余白を持つボタン内に配置されている場合があります。そのため、図柄だけを測ると、実際には使いやすいコントロールを誤って不合格と判断してしまいます。逆に、アイコンが大きく見えても、クリック可能な要素の領域が小さいこともあります。描画後の操作要素を調べ、その要素自体の幅と高さを入力してください。4 つのサイズ値にはすべて同じ単位を使用します。初期設定はポイント単位の 44 × 44 ですが、ポイント、ピクセル、密度非依存ピクセル、ミリメートルを自動変換しません。これらの換算は設計や実行環境に依存するためです。結果には単位も記録されるので、レポートの意味を明確に保てます。幅と高さには正の有限数が必要です。ゼロ、負数、未入力、文字列、非有限数は、誤解を招く判定を返さずエラーにします。手作業のレビュー、デザインシステムの検査、再現可能な自動テストに利用できます。

寸法ごとの判定と不足量を読み取ります

タッチターゲットが合格するのは、幅と高さの両方がそれぞれの最小値以上の場合だけです。結果では width_passes と height_passes を分けて表示します。横に広くても高さが不足するコントロールは、総面積が大きく見えても改善が必要だからです。meets_minimum が真になるのは、両方のフラグが真の場合に限られます。不合格の寸法については、選択した単位で追加すべき量を不足値として正確に示します。合格した寸法の不足値はゼロです。たとえば、最小値 44 × 44 ポイントに対して 40 × 52 ポイントのターゲットは、全体では不合格です。高さは合格、幅は不合格となり、width_shortfall は 4 です。最小値と等しい場合は合格なので、44 × 44 は初期基準をちょうど満たします。面積が同じ長方形を正方形と同等には扱わず、各寸法を別々に比較します。非常に細い、または低い領域は、面積が大きくてもタップしにくいためです。丸め処理は行わず、小数の測定値や独自の最小値は入力時の精度を維持します。

採用している基準に合う最小値を選びます

デザインシステムやアクセシビリティ基準によって、推奨されるターゲットサイズは異なります。また、似た単位でも自動的に置き換えられるとは限りません。確認対象の規則が 44 × 44 ポイントなら、初期値をそのまま使用してください。製品で別の基準を定めている場合は、測定した要素と同じ単位で minimum_width と minimum_height を明示します。たとえば、48 × 48 の密度非依存ピクセルを基準とするチームは、両方の最小値を 48 に設定して dp を選べます。Web 監査では px を選び、採用した基準が求める CSS ピクセル値を入力できます。このツールが行うのは幾何学的な比較です。1 つの初期値だけですべてのアクセシビリティ規格への準拠を証明するものではありません。間隔に関する例外、ターゲットの重なり、ズーム時の動作、代替ジェスチャー、周辺コントロールのサイズも評価しません。これらはレイアウトと操作の別途確認が必要です。より広い評価工程の中で、焦点を絞った再現可能な検査としてお使いください。ネットワーク、時刻、乱数、端末情報を使用しないため、同じ入力からブラウザーと API で常に同じ結果が得られます。

活用例

モバイルデザイン仕様を確認する

ボタンやアイコンコントロールの設計寸法を、製品のデザインシステムが採用するタッチ最小値と比較できます。

アクセシビリティ監査を整理する

測定した要素寸法を幅と高さ別の所見に変換し、修正チケットに正確な不足量を記載できます。

デザインシステムの部品をテストする

公開前に、小型、標準、大型の各バリエーションを再現可能な自動検査にかけられます。

よくある質問

初期設定ではどの最小値を使用しますか？

44 × 44 ポイントです。別の基準を使う場合は、minimum_width、minimum_height、unit を設定してください。

片方の寸法だけが十分でも合格しますか？

いいえ。幅と高さを別々に確認し、両方が合格した場合にのみ meets_minimum が真になります。

ポイント、ピクセル、dp、ミリメートルを変換しますか？

いいえ。要素寸法と最小値には同じ単位を使用してください。環境に依存する換算は行いません。

アイコンとクリック可能領域のどちらを測りますか？

見えるアイコンやラベルだけでなく、クリック可能な余白を含む操作領域全体を測定してください。

合格すればアクセシビリティ準拠が保証されますか？

いいえ。指定寸法と指定最小値だけを比較します。間隔、例外、ジェスチャーなどは個別の確認が必要です。

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

API は 1 リクエストあたり $0.002 からです。ブラウザー版では同じ再現可能な計算を端末内で実行します。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/verify/touch-target-size-check

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

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

curl -X POST https://api.kit.forhosting.com/verify/touch-target-size-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"width":48,"height":48}'

const res = await fetch("https://api.kit.forhosting.com/verify/touch-target-size-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "width": 48,
    "height": 48
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/verify/touch-target-size-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "width": 48,
    "height": 48
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/verify/touch-target-size-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"width":48,"height":48}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"width":48,"height":48}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/verify/touch-target-size-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "width": 48,
  "height": 48
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "verify.touch_target_size_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の完全なドキュメントを見る →