デザイン・Web制作

29 個のツール

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

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

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

画像のピクセル数とPPIから印刷サイズを計算、または印刷サイズから必要ピクセル数を逆算。縦横の実効PPIを個別判定し、JPEG・PNG・WebP・AVIF画像から寸法をブラウザ内で取得できます。

147 users / 181 PV

アスペクト比計算ツール

1〜1,000,000pxの整数の幅と高さからアスペクト比を計算。10種のプリセット、比率を保つリサイズ計算、解像度例、プレビュー付き。

38 users / 42 PV

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

静止画の縦横比・表示寸法・画素数を確認し、1:1や16:9などの比率で位置を調整して切り抜き。画像はブラウザ内で処理します。

27 users / 31 PV

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

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

19 users / 23 PV

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

1MBまでのスクリプト・外部参照を含まないSVGをブラウザ内で検査・最適化。SVGO v4でメタデータやコメントを整理し、ID・title・desc・style/class・要素構造を保持する安全優先設定、見た目・コード比較、コピー、ダウンロードに対応。

14 users / 17 PV

すべてのツール

CSS ジェネレーター(12)

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

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

線形・放射・円錐の3種を2〜12色で作成。角度・位置を調整し、CSSと位置を保持するTailwind arbitrary valueをコピー。12種のプリセット付き。

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

CSSのbox-shadowを最大8層までGUIで作成。inset、Tailwind CSS v4・ニューモーフィズムなど13種のプリセット、CSS・任意値クラスのコピーに対応。

SVG → CSS background 変換ツール

1MBまでの静的SVGをCSS background-image用data URLへ可逆変換。URI・Base64、サイズ比較、縦横比を保つ64〜1024px PNG出力に対応。

CSS Gridジェネレーター

最大12行×12列のCSS Gridをビジュアルに定義。アイテム配置・背景色と5種のプリセットに対応し、CSS・HTML・Tailwindコードを生成・コピーできます。

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

CSS @keyframesアニメ32種をカテゴリ別に選択し、再生時間・遅延・イージング・繰り返しを調整。ホバーとキーボード操作、動き軽減に対応したCSS・HTML例を生成。

CSS clip-path 形状集

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

CSS transform 効果集

CSS transformの重複しない実用プリセット29種。2D・3D・hover/focus・active・アイソメトリック・遠近感を選び、パラメータと操作状態をCSSへ反映。必要な親perspectiveも生成。

border-radius 形状集（squircle近似対応）

border-radiusで作る重複しない形状プリセット33種。基本角丸・非対称・squircle近似・有機的なblob・方向性シェイプを収録。同一単位の8値を0〜100%または0〜9999pxで調整し、サイズ別に確認できます。

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

CSS cubic-bezier()をマウス・タッチ・数値入力で編集。29種のプリセット、アニメーションプレビュー、CSSコードコピーに対応。

CSS clamp() ジェネレーター

最小値・最大値・画面幅から、レスポンシブな font-size / gap / padding などの clamp() CSS を生成するツール。px / rem 出力、Tailwind arbitrary value、プレビューに対応。

CSS filter ジェネレーター

8種類の CSS filter を適用順どおりに調整し、検証済みローカル画像でプレビューしながら副作用を抑えたCSSを生成するツール。

SVG パターン背景ジェネレーター

ドット、グリッド、斜線、チェッカーの繰り返し背景を、同じ設定から SVG / data URI / CSS background として生成。色・不透明度・8〜96pxのタイルサイズを調整可能。

画像加工・変換(7)

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

画像圧縮ツール

JPEG・PNG・WebP・AVIFの静止画をブラウザまたはサーバーで圧縮。端末内処理とSharp処理を比較でき、品質調整・縮小・メタデータ除去に対応。

画像フォーマット変換

8形式の画像をJPEG・PNG・WebP・AVIF・TIFF・GIFへ変換。最大20件・入力合計200MBの順次変換、品質調整、個別・ZIPダウンロードに対応。アニメーションと複数ページは先頭のみ。

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

静止画のJPEG・PNG・WebPから主要色をブラウザ内で抽出。Median CutとRGB再割り当て、CIE76完全連結マージを使い、抽出色数の上限を3〜12色から指定できます。HEX/RGB/HSLと標本内面積比を表示し、HEX・CSS変数をコピー。

画像リサイズツール (SNSテンプレート付き)

静止画のJPEG・PNG・WebPをブラウザ内でリサイズ。ピクセル・倍率・SNSテンプレート、中央トリミング・余白、実形式確認に対応。

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

テキストまたはロゴ画像のウォーターマークを写真に合成。9位置・タイル配置、透明度・回転を調整し、ブラウザ表示と同じ向き・寸法のPNG（50MBまで）で保存。元メタデータは保持せず、アニメーションは1フレームを静止画にします。画像はNanTooの処理サーバーへ送信しません。

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

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

プレースホルダー画像生成ツール

OGP・SNS・広告用の仮画像をブラウザ内で生成。16〜4,000px、配色・文字・ガイド・1〜3倍、実形式を確認したPNG/SVG/WebP保存に対応。

カラー・タイポ(5)

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

カラーコード変換ツール

HEX・RGB・HSL・HSV・CMYKを相互変換。編集値を保持した連続入力、WCAG 2.2コントラスト比、黒白推奨色、配色パレットに対応。

配色ジェネレーター

ベースカラーから補色・類似色・トライアド・スクエアなど8種の配色を生成。明度展開とCSS・Tailwind v4/v3・HEX形式のコピーに対応。

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

前景色と背景色のコントラスト比をWCAG 2.2のAA/AAA基準で判定。1色または両色を調整した合格候補も提案。

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

ルート・親要素・ビューポートの基準を分けたpx・rem・em・pt・vw・%変換。タイプスケール、Tailwind v3/v4、CSS clamp()式を生成。

favicon ジェネレーター

JPEG・PNG・WebP・SVGから16〜512pxのPNG、ICO、Apple Touch Iconを生成。中央切り抜き、ZIP、HTMLタグとmanifestのicons設定例に対応。