💻 コーディング支援

HTML・CSS・JSON・テキスト差分比較・画像変換など、コーディング作業の手間を省くツール集です。関連するツールをクラスターごとにまとめているので、目的に合うグループから探してみてください。

📝 構造化データ・JSON

JSON整形・構文チェック、JSON-LD生成など、APIレスポンスや構造化データの確認・作成を補助します。

  • JSON整形・バリデーター JSONを見やすく整形、不要な空白を削除して圧縮、構文エラーの位置を確認できます。APIレスポンスやJSON-LDの貼り付け前チェックに便利です。
  • JSON-LD（構造化データ）生成 パンくずリスト・記事・HowToなど、構造化データ用のJSON-LDタグをフォーム入力から生成できます。検索エンジン向けのマークアップ作成に便利です。

🎨 HTML / CSS 支援

HTMLの特殊文字変換、CSS生成・整形、カラーコード変換など、コーディング作業の細かな手間を減らすツール群です。

  • HTMLエンティティ変換 < や & などのHTML特殊文字をエンティティに変換、または元の文字へ戻せます。HTMLコードを記事内でそのまま表示したいときに便利です。
  • カラーコード相互変換（HEX / RGB / RGBA / CMYK） 16進数(HEX)、RGB、RGBA（透過）、CMYKのカラーコードをリアルタイムに相互変換。スライダーでの透過色作成にも対応しています。
  • HTML → CSS セレクタ一括生成 HTMLコードを貼り付けるだけで、中に含まれるclassやidを自動抽出し、空のCSS/SCSSブロックを一発で生成します。
  • CSS プロパティソート・整形 バラバラに書かれたCSSプロパティを「レイアウト順」や「アルファベット順」に自動で並び替え、美しいコードに整形します。
  • CSS box-shadowジェネレーター ふんわりとした今風の影（ニューモーフィズム風）から、パキッとしたカード影まで、スライダーで直感的に作れます。
  • CSS メディアクエリ（@media）生成 スマホ・タブレット・PCのブレークポイントを指定して、レスポンシブ用の@media構文を一気に作ります。

🖼️ 画像・ファイル変換（高速化）

次世代画像フォーマットへの変換や、Mac固有ファイル（HEIC）のJPG化など、ブラウザ上で完結する画像一括変換ツール群です。

  • JPG・PNG → WebP 一括変換 複数の重い画像ファイルを、画質を保ったまま軽量なWebP形式にブラウザ上で一瞬で変換します。
  • WebP → JPG・PNG 一括変換 「保存した画像がWebPで開けない…」という時、Photoshop等で扱える汎用的なJPG・PNG形式に戻します。
  • AVIF → JPG・PNG 一括変換 ブラウザ非対応の環境でも扱えるよう、次世代フォーマットのAVIF画像を汎用形式（JPG/PNG）に変換します。
  • PNG → ICO 一括変換 favicon（ファビコン）やWindowsのアイコン用に、透過PNG画像を.ico形式にサクッと変換します。
  • HEIC → JPG 一括変換 iPhoneから送られてきた写真（HEIC形式）を、WebやPCで扱えるJPG形式にブラウザ上で変換します。
  • HEIC → PNG 一括変換 透過情報を維持したまま、iPhoneの画像（HEIC形式）をPNG形式に変換・抽出します。

🛠️ 補助生成・変換

テキスト差分比較、URL変換、ダミー素材、HTML変換、OGP生成など、制作作業を周辺から支援するツール群です。手作業で面倒な確認・変換作業をすばやく補えます。