Category

デザインの無料Webツール

27 個のデザイン関連ツールを無料公開中。

カラーパレット・タイポグラフィスケール・モックアップ・OGP・アイコンなど、UIデザインとプロトタイピングを助ける無料ツールをまとめています。デザインとコードの橋渡しをブラウザ内で完結できます。

広告

ASCII Art Generator

テキストをASCIIアートに変換 — 6フォント・コメントラッパー対応

開発者向けテキストデザイン

使ってみる →

Aspect Ratio Calculator

幅・高さからアスペクト比を即算出。逆算・プリセット対応

デザインユーティリティ開発者向け

使ってみる →

Border Radius Generator

4コーナー個別・楕円半径に対応したCSS border-radius ジェネレーター

CSSデザイン開発者向け

使ってみる →

Box Shadow Generator

CSS box-shadow をスライダーで即作成。複数レイヤー対応

デザインCSS開発者向け

使ってみる →

Color Blindness Simulator

HEXカラーを5種の色覚特性でシミュレーション・WCAG判定

カラーアクセシビリティデザイン

使ってみる →

Color Deck

カラースウォッチ保存 & 形式変換

カラーデザイン開発者向け

使ってみる →

Color Format Converter

HEX / RGB / HSL / CMYK を瞬時に相互変換

カラーCSSデザイン

使ってみる →

Color Palette Generator

ベースカラーから5種のカラーハーモニーを即生成

カラーデザイン開発者向け

使ってみる →

Color Shade Generator

ベースカラーから Tints / Shades / Tones を自動生成・CSS変数/Tailwind出力

カラーデザインCSS

使ってみる →

Color Token Generator

カラーパレットを CSS変数 / Tailwind / Sass / Style Dictionary で一括出力

カラーデザイン開発者向け

使ってみる →

CSS Box Model Visualizer

margin / padding / border を色分けビジュアルで確認しながら CSS 生成

CSSデザイン開発者向け

使ってみる →

CSS Clip-Path Generator

ビジュアルエディターで clip-path CSS を生成

CSSデザインジェネレーター

使ってみる →

CSS color-mix() Previewer

ブラウザ標準 color-mix() で2色の混合結果をリアルタイムプレビュー

CSSWeb開発デザイン

使ってみる →

CSS Filter Generator

9種類のフィルターをスライダーで調整して CSS を即生成

CSSデザイン開発者向け

使ってみる →

CSS Mask Generator

mask-image グラデーションでコンテンツをフェードアウト・最大3レイヤー対応

CSSデザイン開発者向け

使ってみる →

CSS Pattern Generator

横・縦・斜めストライプ / グリッド / ドット / チェッカーをCSSで生成

CSSデザイン開発者向け

使ってみる →

CSS Scroll Snap Generator

scroll-snap-type / align / padding をGUIで設定・リアルタイムプレビュー

CSSデザイン開発者向け

使ってみる →

CSS Text Shadow Generator

text-shadow をスライダーで生成・最大5レイヤー・プリセット4種

CSSデザイン開発者向け

使ってみる →

CSS Transform Explorer

translate / rotate / scale / skew を 2D/3D スライダーで即調整

CSSデザイン開発者向け

使ってみる →

Font Inspector

システムフォント一覧・インストール確認・プレビュー比較・CSS font-familyスタック生成

CSSデザイン開発者向け

使ってみる →

Gradient Editor

グラデーションエディタ

カラーデザインCSS

使ってみる →

Image Color Extractor

画像から主要カラーパレットを自動抽出

デザイン画像カラー

使ってみる →

Pixel Art Palette

パレットを組んでピクセルアートを描き、PNG で書き出す

ゲーム開発デザイン画像

使ってみる →

Placeholder Image Generator

サイズ・色・テキスト指定でプレースホルダー画像を即生成

画像デザインWeb開発

使ってみる →

SVG Path Visualizer

SVGパスコマンドをステップ実行・座標をビジュアル確認

SVGデザイン開発者向け

使ってみる →

SVG Viewer

SVGコードをリアルタイムプレビュー・PNG書き出し

デザイン開発者向けSVG

使ってみる →

Typography Scale Generator

Modular Scale からタイポグラフィ階層を自動計算・CSS変数で出力

CSSデザインタイポグラフィ

使ってみる →

他のカテゴリ

開発者向け CSS 画像テキストカラーゲーム開発 AI すべてのツール →