デザイン・Web制作

18 個のツール

WebデザインやフロントエンドCSS実装で使う、カラー・レイアウト・画像関連のツールを集めました。CSS コードをその場で生成できるため、デザインカンプからコーディングまでシームレスに進められます。

すべてのツール

CSSグラデーション生成ツール

線形・放射・円錐の3種グラデーションをGUIで作成。色数・角度・位置を自由に調整し、CSSコードをワンクリックコピー。12種のプリセット付き。

フォントサイズ計算ツール

px・rem・em・pt・vw・%の相互変換。タイポグラフィスケール自動生成とCSS clamp()による流体タイポグラフィ計算にも対応。

ボックスシャドウ生成ツール

CSSのbox-shadowをGUIで作成。多重シャドウ・inset対応。Material Design・Neumorphismなど13種のプリセット付き。CSSコードをワンクリックコピー。

アスペクト比計算ツール

幅と高さからアスペクト比を自動計算。16:9・4:3など10種のプリセット、リサイズ計算、よく使う解像度一覧、ビジュアルプレビュー付き。

画像アスペクト比取得

画像をアップロードするだけで縦横比・解像度・画素数を即時取得。ドラッグ＆ドロップ対応。SNS投稿・印刷・Web制作の画像サイズ確認に。

画像フォーマット変換

JPEG・PNG・WebP・AVIF・BMP・TIFF・GIF・SVGの8形式を相互変換。最大20ファイル一括変換＆ZIPダウンロード対応。ロスレス変換・品質調整も可能。

SVG → CSS background 変換ツール

SVGコードをCSS background-imageで使えるdata:URIに変換。URIエンコード・Base64を選択可能。コピペですぐにCSSに組み込めます。

favicon ジェネレーター

画像をアップロードするだけで16x16〜512x512の各サイズPNGとICOファイルを一括生成。Apple Touch Icon・PWA対応。HTMLタグとwebmanifestも出力。

画像カラー抽出（パレット生成）

画像をアップロードすると主要な色を自動抽出。Median Cutアルゴリズム＋CIELAB色差による類似色マージで、実用的なカラーパレットを生成。HEX/RGB/HSL値と面積比を表示。CSS変数としてコピー可能。

CSS Gridジェネレーター

CSS Gridレイアウトをビジュアルに定義してコードを自動生成。行列のサイズ・単位指定、アイテムの配置調整、5種のプリセットレイアウト対応。CSS・HTML・Tailwindコードをワンクリックコピー。

CSSアニメーション集（@keyframes）

コピペで使えるCSS @keyframesアニメ32種。fadeIn・bounce・pulse・shake・spin・tadaなど定番を全網羅。カテゴリ別（注目・登場・退場・ループ・ホバー・特殊）に整理。再生時間・イージング調整可。

CSS clip-path 形状集

CSS clip-pathで使える形状プリセット38種。六角形・星・矢印・吹き出し・ハート・葉・リボン・チケットなど、polygon()コードをコピペで即利用。パラメータ調整可能な形状も含む。

CSS transform 効果集

CSS transformの実用プリセット31種。2D（回転・反転・ズーム）、3D（rotateX/Y/Z）、ホバー効果、アイソメトリック、遠近感まで網羅。parent側のperspective設定も自動生成。

border-radius 形状集（squircle対応）

border-radiusで作れる形状プリセット33種。基本角丸・非対称・squircle（iOS風）・有機的なblob・方向性シェイプまで対応。8値エディタでコーナー別微調整、幅高さでプレビュー確認可能。