🎨 デザインツール
カラーコード変換、CSS生成、グラデーション作成など、Webデザインに役立つオンラインツール集。
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換。プレビュー付きで色を確認。
アスペクト比計算
画面の幅と高さからアスペクト比を計算。動画・画像サイズに。
HTMLカラー名一覧
CSS/HTMLカラー名とコードを検索。127色対応。
CSSグラデーション生成
グラデーションCSSコードを視覚的に生成。
CSSボックスシャドウ生成
box-shadowをスライダーで視覚的に生成。
ランダムカラー生成
ランダムな色をHEX/RGB/HSLで生成。
カラーパレット生成
ベースカラーから配色パレットを自動生成。
フォントプレビュー
テキストを様々なフォントで比較プレビュー。
OGP画像サイズ一覧
SNS別のOGP推奨画像サイズを一覧表示。
ファビコンプレビュー
テキストや絵文字からファビコンをプレビュー。
コントラスト比チェック
WCAG基準で色のアクセシビリティを確認。
ピクセル⇔cm変換
DPI指定でpx/cm/mm/inchを相互変換。
CSSアニメーション生成
CSSアニメーションを視覚的に生成。
CSS Flexbox
Flexboxレイアウトを視覚的に確認。
CSS Grid
Gridレイアウトを視覚的に確認。
色覚シミュレーション
色覚異常での色の見え方を確認。
プレースホルダー画像
ダミー画像URLを指定サイズで生成。
グラデーション文字
グラデーション文字のCSSを生成。
border-radius生成
角丸CSSを視覚的に生成。
アスペクト比一覧
よく使われる画面比率と解像度の一覧。
カラーピッカー
HSLスライダーで直感的に色を選択。
アスペクト比リサイズ計算
目標比率に合わせたサイズを計算。
ファビコン生成
テキストや絵文字からファビコンを作成。色・形状カスタマイズ対応。
box-shadow生成
CSSのbox-shadowをスライダーで視覚的に作成。複数シャドウ対応。
Flexboxジェネレーター
Flexboxのプロパティを視覚的に設定しCSSコードを自動生成。
タイポグラフィスケール
ベースサイズと比率からフォントサイズスケールを自動生成。
CSSグラデーション生成
方向・色数を選んでCSSグラデーションコードを生成。プレビュー付き。
ピクセル定規
画面上のピクセル距離を計測。Webデザインのサイズ確認に。
フォント組み合わせ
見出しと本文のフォントの組み合わせをプレビュー。Google Fonts対応。
SVG最適化
SVGコードの不要な属性を削除して最適化。ファイルサイズを削減。
CSSボタン生成
色・角丸・影・ホバーを調整してCSSボタンコードを生成。プレビュー付き。
テキストシャドウ生成
CSSのtext-shadowをスライダーで視覚的に作成。コードをコピー。
ボタンCSS生成（高機能）
Webボタンのデザインをビジュアルにカスタマイズ。CSSコードを即生成。
色混合ツール
2つの色を混合して中間色を生成。混合比率も調整可能。
色の透明度変換
HEX・RGBカラーにアルファ値（透明度）を適用。rgba/hexa形式で出力。
カラーホイール
色相環から補色・類似色・トライアドなどの配色パターンを生成。
CSSフィルター生成
blur・brightness・contrast等のCSSフィルターをプレビュー付きで設定。
DPI計算
解像度・画面サイズからDPI(PPI)を計算。ディスプレイの精細さを確認。
フォントサイズ変換
px・pt・em・rem・%のフォントサイズを相互変換。
グラスモーフィズムCSS
すりガラス風デザインのCSSを生成。透明度・ぼかし・色を調整。
ニューモーフィズムCSS
ニューモーフィズムデザインのCSSを生成。凹凸・影・色を調整。
画面解像度一覧
主要なディスプレイ・デバイスの画面解像度を一覧表示。レスポンシブ設計に。
スクロールバーCSS
カスタムスクロールバーのCSSを生成。幅・色・角丸を設定。
SVGプレビュー
SVGコードを貼り付けてリアルタイムでプレビュー表示。サイズ確認にも。
CSSクリップパス生成
CSS clip-pathをビジュアルに編集。多角形・円・楕円に対応。
CSSアニメーション生成
キーフレームアニメーションをGUIで作成。
CSSグリッド生成
CSS Gridレイアウトをビジュアルに設計・コード生成。
Flexboxビルダー
Flexboxレイアウトをビジュアルに設計。各プロパティの効果をプレビュー。
border-radius生成
四隅のborder-radiusを個別に設定。プレビュー付き。
テキストシャドウ生成
text-shadowのCSS値をビジュアルに調整・生成。
バックドロップフィルター生成
backdrop-filterのCSS値を設定。ぼかし・明度等を調整。
カラーパレット生成
ベースカラーから調和のとれた配色パレットを自動生成。
コントラスト比チェック
2色のコントラスト比をWCAG基準で判定。アクセシビリティ確認に。
画像からパレット抽出
画像の主要カラーを自動抽出してパレット化。
CSS Transform生成
translate・rotate・scale・skewをプレビュー付きで設定。
レスポンシブフォント計算
clamp()を使ったレスポンシブフォントサイズを計算。
Tailwind CSS変換
通常のCSSをTailwindのクラス名に変換。
SVGパスエディター
SVGのpath要素を視覚的に編集。
アイコン検索
人気のオープンソースアイコンをキーワード検索。SVG/CSSコードをコピー。