デザイン・Web制作

25 個のツール

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

🔥 人気ランキング TOP5(直近30日)

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

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

5 users / 7 PV

HEIC/HEIF → JPEG/PNG 変換 (iPhone写真をブラウザで)

iPhone・iPad で撮影したHEIC/HEIF写真をブラウザ内でJPEGまたはPNGに変換。アップロード不要、サーバー送信なしで個人情報を保護。複数ファイル一括変換とZIPダウンロードに対応。完全無料・回数制限なし。

2 users / 5 PV

アスペクト比計算ツール

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

2 users / 4 PV

DPI計算ツール (印刷サイズ⇔ピクセル変換)

ピクセル数とDPIから印刷サイズを計算、または印刷サイズからピクセル数を逆算。DPI判定モードで画像の印刷品質を評価。A3〜名刺まで11種の用紙プリセット、画像アップロードで自動取得対応。

2 users / 3 PV

画像アスペクト比取得/変更ツール

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

1 users / 2 PV

すべてのツール

CSS ジェネレーター(9)

border-radius / box-shadow / clip-path / animation 等

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

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

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

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

SVG → CSS background 変換ツール

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

CSS Gridジェネレーター

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

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値エディタでコーナー別微調整、幅高さでプレビュー確認可能。

SVG Wave Generator (波形セクション区切り)

Webサイトのヒーロー下やフッター上に使える波形SVGをインタラクティブに生成。振幅・周波数・位相・2色グラデーション・左右反転に対応。12種プリセットとSVG/PNG/CSSダウンロード。

cubic-bezier エディタ (CSS イージング)

CSS cubic-bezier()イージング関数をドラッグ操作でビジュアル編集。29種のプリセット（ease, easeInOut, easeOutBack等）、アニメーションプレビュー、CSSコードコピー対応。

画像加工・変換(6)

リサイズ / 圧縮 / 形式変換 / 透かし / HEIC など

画像圧縮ツール

JPEG・PNG・WebP・AVIFをブラウザまたはサーバーで圧縮。ブラウザ圧縮は完全プライバシー保護、サーバー最適化はSharp（mozjpeg）で高品質圧縮。品質調整・リサイズ・EXIF除去対応。

画像フォーマット変換

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

SVG 最適化ツール (サイズ削減・メタデータ除去)

SVG ファイルを最適化してファイルサイズを削減。SVGO v4 ベースで、Inkscape メタデータ除去・数値精度調整・基本形状の path 変換・不要な名前空間除去に対応。Before/After 比較と視覚プレビューで結果を確認。

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

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

画像リサイズツール (SNSプリセット付き)

画像をピクセル指定・パーセント・SNSプリセットでリサイズ。Instagram・X・YouTube・Facebook等の推奨サイズにワンクリック変換。拡大にも対応。ブラウザ内処理で安全。

画像ウォーターマーク追加ツール

テキストまたはロゴ画像のウォーターマークを写真に合成。9ポジション＋タイル繰り返し、フォント・色・透明度・回転を自由に調整。ブラウザ内完結で安全。

カラー・タイポ(5)

色変換 / パレット / WCAG / フォントサイズ / ファビコン

カラーコード変換ツール

HEX・RGB・HSL・HSV・CMYKの相互変換。カラーピッカー、WCAGコントラスト比チェック、配色パレット生成機能付き。Webデザイン・印刷の色指定に。

配色ジェネレーター

ベースカラーから調和する配色を自動生成。補色・類似色・トライアド・テトラドなど8種の配色理論に対応。CSS・Tailwind形式でエクスポート。

WCAGコントラストチェッカー

テキスト色×背景色のコントラスト比をリアルタイム判定。WCAG 2.1のAA/AAA基準を可視化し、不合格時は最も近い合格色を自動提案。

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

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

favicon ジェネレーター

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