DevTools Hub 🛠️

開発者・クリエイター向けの無料Webツール集。インストール不要・ログイン不要・完全無料。

→ https://devtools-hub.vercel.app/

---

ツール一覧（70本）

CSS系

ツール	機能
Box Shadow Generator	box-shadow をスライダーで生成・複数レイヤー対応
CSS Text Shadow Generator	text-shadow を最大5レイヤーで生成・グロー/ネオン/プリセット付き
CSS Filter Generator	9種フィルターをスライダー調整してコード生成
CSS Animation Builder	@keyframes をGUIで組み立て・リアルタイムプレビュー
CSS Grid Generator	columns/rows/gap/areas をGUI操作でCSS Grid生成
CSS Flexbox Generator	全flexプロパティ＋アイテム個別設定・プレビュー付き
CSS Transform Explorer	translate/rotate/scale/skew・3Dモード対応
CSS Clip-Path Generator	polygon/circle/ellipse をビジュアル操作で生成・8種プリセット
CSS Mask Generator	6方向 mask-image グラデーション・3レイヤー対応
CSS Pattern Generator	ストライプ/グリッド/ドット/チェッカーを純CSSで生成
CSS Specificity Calculator	セレクターの詳細度を (a,b,c) で計算・8本比較
CSS Variable Inspector	--変数名を抽出してカラーピッカー/スライダーで編集
CSS Stacking Inspector	z-index とスタッキングコンテキストをツリー表示
Bezier Curve Editor	cubic-bezier を4制御点でドラッグ編集・プリセット付き

カラー系

ツール	機能
Color Deck	HEX/RGB/HSL/HSV/RGBA float 変換＋パレット保存
Gradient Deck	linear/radial/conic グラデーションエディタ
Color Palette Generator	ベースカラーから5種のカラーハーモニーを自動生成
Color Shade Generator	Tints/Shades/Tones・CSS変数/Tailwind形式で出力
Color Contrast Checker	WCAG 2.1 コントラスト比チェック・AA/AAA 判定
Color Blindness Simulator	5種の色覚シミュレーション・WCAG コントラスト比判定
Color Token Generator	カラーパレットを CSS変数 / Tailwind / SCSS / JSON トークンで一括出力

JSON・データ変換系

ツール	機能
JSON Studio	JSON フォーマット・バリデート・ソート・Minify
JSON to TypeScript	JSON → TypeScript interface 自動生成
JSON Path Tester	JSONPath 式のリアルタイムテスト
YAML / JSON / TOML Converter	3形式のリアルタイム相互変換
HTML to JSX	HTML → React/JSX 変換（class→className など）
Markdown Table Generator	GUI でMarkdownテーブルを作成・CSVインポート対応
JSON Schema Validator	JSON と JSON Schema を並べてリアルタイムバリデーション
cURL to Code	cURL コマンドを fetch / axios / Python requests / wget に自動変換

テキスト・文字列系

ツール	機能
Regex Studio	正規表現リアルタイムテスター・マッチハイライト
Diff Viewer	2テキストの差分を Unified/Split 表示
Text Case Converter	camelCase/snake_case など8形式を相互変換
Lorem Ipsum Generator	段落・単語・文字数でダミーテキスト生成
Character Counter	文字・単語・バイト数・読了時間・原稿用紙換算
String Inspector	Unicode コードポイント・UTF-8バイト数・文字種を可視化
Text Layout Checker	フォントサイズ・行間・文字間隔をスライダーでプレビュー

エンコード・変換系

ツール	機能
Base64 Studio	Base64 エンコード/デコード（テキスト・画像対応）
URL Encoder/Decoder	URLパーセントエンコード/デコード・クエリパラメータパース
HTML Entity Encoder	HTML特殊文字のエンティティ変換/復元
Number Base Converter	2進/8進/10進/16進 相互変換＋ビットビューア
Timestamp Converter	Unix タイムスタンプ ↔ 日時変換・タイムゾーン対応
CSS Unit Converter	px/rem/em/vw/vh/pt/cm/mm の相互変換
Aspect Ratio Calculator	幅・高さからアスペクト比を算出・逆算
Typography Scale Generator	Modular Scale を計算・CSS変数/px/rem で出力

セキュリティ・認証系

ツール	機能
JWT Decoder	JWT のヘッダー/ペイロード/署名デコード・有効期限表示
Hash Studio	MD5/SHA-1/SHA-256/SHA-512 ハッシュ生成・検証
Password Generator	文字種・長さ指定でパスワード生成・強度メーター付き

画像・グラフィック系

ツール	機能
WebP Studio	PNG/JPG → WebP/AVIF 一括変換
アイコン一括リサイズ	16〜512px の各サイズに一括リサイズ・ZIP 出力
SVG Viewer	SVGリアルタイムプレビュー・PNG書き出し
Image Color Extractor	画像から主要カラーパレット抽出・CSV/JSON 出力
Pixel Art Palette	ブラウザでピクセルアート描画・PNG書き出し
MockupBuilder	アプリストア用スクリーンショット生成

その他の開発ツール

ツール	機能
QR コード	テキスト/URL → QRコード生成・PNG/SVG ダウンロード
UUID ジェネレーター	UUID v4/v1/v7 生成・一括出力
CRON 式ビルダー	cron をビジュアル組み立て・日本語解説付き
Keyboard Event Tester	KeyboardEvent プロパティをリアルタイム表示
Markdown Preview	Markdownリアルタイムプレビュー・目次自動生成
OG Tag Preview	OGPメタタグ取得・Twitter Card/Facebook/Slack プレビュー
Meta Tag Generator	基本/OGP/Twitter Card の meta タグ生成
HTTP Status Reference	HTTPステータスコードを番号/キーワードで検索
Color Format Converter	HEX/RGB/HSL/CMYK 相互変換
Border Radius Generator	px/% で border-radius 生成・shorthand/longhand 出力
Sheet Studio	スプライトシートのパック & スライス
AI Prompt Manager

---

技術スタック

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Hosting: Vercel

ライセンス

MIT