タッチターゲットサイズ

design/design-touch-target-sizes

iOS、Material、WCAG、小アイコン向けのタッチターゲット寸法を5行の固定表で確認できます。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

タッチターゲットサイズでは、iOS、Material、WCAG、小アイコン向けのタッチターゲット寸法を5行の固定表で確認できます。
関連する観点としてタッチターゲットサイズ、touch target sizes、CSS を確認し、結果をコピーして別の作業に使えます。

項目	内容
iOS 最小	44 × 44 pt
iOS 推奨	48 × 48 pt
Material	48 × 48 dp
WCAG 2.5.5	44 × 44 CSS px
小アイコン最小	24 × 24 + 余白

使い方

iOSアプリ風のUIでは、44×44ptと48×48ptの行を確認します。
Material系のモバイルUIでは、48×48dpの行を基準にします。
WCAG行は2.5.5の44×44 CSS pxとして読み、2.5.8の24px基準とは分けて扱います。
視覚的に小さいアイコンでも、小アイコン最小24×24+余白の行を見て押下領域を広げます。

入力例・出力例

INPUT

iOS 最小

OUTPUT

44 × 44 pt

iOS向けの最小タップ領域として表示されます。

INPUT

Material

OUTPUT

48 × 48 dp

Material Design文脈の行です。

INPUT

小アイコン最小

OUTPUT

24 × 24 + 余白

見た目の小ささと実際の余白を分ける行です。

よくある利用シーン

アイコンボタンの見た目は24pxでも、実際のタップ領域を広げる必要があるとき。
iOS、Material、Webアクセシビリティ基準を同じレビュー資料で比較したいとき。
ボタンや入力欄の高さとは別に、指で押せる最小領域を確認したいとき。
モバイルUIの密度を詰める前に、隣接ターゲットとの余白を検討したいとき。

結果確認のポイント

生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
タッチターゲットサイズ、touch target sizes、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

タッチターゲットサイズの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

FAQ

よくある質問

iOS向けのタップ領域はどの行を見ればよいですか？

iOS 最小の44 × 44 ptと、余裕を持たせる iOS 推奨の48 × 48 ptを確認します。このページはCSSを生成するのではなく、タッチターゲット寸法の参照表として使います。

Material Designでは何dpを基準にしますか？

Material の行に48 × 48 dpを掲載しています。Android系UIやMaterial準拠のボタン、リスト項目、アイコンボタンの押下領域を確認するための基準値です。

小さいアイコンは24×24のままでよいですか？

表では小アイコン最小を24 × 24 + 余白としています。見た目のアイコンが24px程度でも、周囲にpaddingや透明なクリック領域を足して44ptや48dp相当の押しやすさを確保します。

関連ツール

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。四隅を連動または個別に動かし、1値または4値のCSSを生成する。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。

Material Elevation

Material Elevationの代表レベルを、単層box-shadow値の固定表で確認できます。

accent-colorが効く要素

CSS accent-colorが反映されるフォーム部品4種を、HTML要素名と用途で確認できます。

CSS角度単位

CSSで使うdeg・grad・rad・turnの角度単位と、1周あたりの基準値を一覧表示します。

animation-direction

CSS animation-directionのnormal・reverse・alternate・alternate-reverseを用途付きで確認できます。

animation-fill-mode

CSS animation-fill-modeの4値を、アニメーション前後のスタイル保持ルールとして確認できます。

CSSアニメーション生成

CSSアニメーションのキーフレームを視覚的に作成・プレビュー。イージング関数の選択、コードのコピーまでワンストップ。

読み込み中...

このツールでできること

タッチターゲットサイズでは、iOS、Material、WCAG、小アイコン向けのタッチターゲット寸法を5行の固定表で確認できます。

関連する観点としてタッチターゲットサイズ、touch target sizes、CSS を確認し、結果をコピーして別の作業に使えます。

項目

内容

iOS 最小

44 × 44 pt

iOS 推奨

48 × 48 pt

Material

48 × 48 dp

WCAG 2.5.5

44 × 44 CSS px

小アイコン最小

24 × 24 + 余白

使い方

iOSアプリ風のUIでは、44×44ptと48×48ptの行を確認します。

Material系のモバイルUIでは、48×48dpの行を基準にします。

WCAG行は2.5.5の44×44 CSS pxとして読み、2.5.8の24px基準とは分けて扱います。

視覚的に小さいアイコンでも、小アイコン最小24×24+余白の行を見て押下領域を広げます。

よくある利用シーン

アイコンボタンの見た目は24pxでも、実際のタップ領域を広げる必要があるとき。

iOS、Material、Webアクセシビリティ基準を同じレビュー資料で比較したいとき。

ボタンや入力欄の高さとは別に、指で押せる最小領域を確認したいとき。

モバイルUIの密度を詰める前に、隣接ターゲットとの余白を検討したいとき。

結果確認のポイント

生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。

タッチターゲットサイズ、touch target sizes、CSSの観点で、入力内容と出力内容がずれていないか見直してください。

コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

データの扱い / プライバシー

タッチターゲットサイズの主要な処理はブラウザ内で実行されます。

入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。

本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

iOS向けのタップ領域はどの行を見ればよいですか？

Material Designでは何dpを基準にしますか？

Material の行に48 × 48 dpを掲載しています。Android系UIやMaterial準拠のボタン、リスト項目、アイコンボタンの押下領域を確認するための基準値です。

小さいアイコンは24×24のままでよいですか？