無料オンラインデザインツール

グラデーション・カラーコントラスト・レイアウト・SVG・提詞・アイロンビーズ図案など、デザイナーとフロントエンドのための定番ツール。登録不要ですぐ使えます。

linear / radial グラデーションの CSS を視覚的に生成

WCAG の式で文字と背景のコントラスト比を計算、AA / AAA 判定

Flexbox / Grid を視覚的に設定し、デモと CSS を即時生成

path d に移動 / 拡大縮小 / 回転を適用し、SVG を即時出力

SVG ソースの検証・プレビュー・最適化とサイズ統計

全画面で等速スクロールする提詞機。鏡像と速度調整に対応

写真をアイロンビーズ図案に変換。Artkal / MARD / Perler のカラーコードに対応

このデザインツールが選ばれる理由

グラデーション計算・コントラスト判定・SVG 解析・提詞スクロールはすべてブラウザ内で実行。デザインデータは送信されません。

パラメータと結果が双方向に連動。ストップやレイアウト、変換値を変えるとプレビューとコードが即座に更新され、そのままコピーできます。

コントラストは WCAG の相対輝度式に準拠。グラデーションとレイアウトは標準 CSS、SVG は厳密な XML 検証済みで、貼り付けるだけで使えます。

これらのデザインツールは無料ですか？

はい。すべてのツールが永久無料で、登録不要・利用回数制限もありません。サイトは広告で運営されています。

デザインや台本はアップロードされますか？

いいえ。グラデーション生成・コントラスト計算・SVG 解析・提詞スクロールはすべてブラウザ内の JavaScript で実行され、サーバーには送信されません。

生成された CSS / SVG はそのまま使えますか？

はい。グラデーションとレイアウトは有効な CSS 宣言、SVG は名前空間を保ったまま XML 検証済みです。スタイルシート・インラインスタイル・アイコンファイルにそのまま貼り付けられます。

デザインツールはすべてブラウザ内で動作します。