無料ウェブ制作ツール集
WPDeanの変換・作成ツールを日本語で利用できます。CSSやHTMLの作成、色の形式変換、単位の換算など、目的に合うツールを選んでください。
アクセシブルな配色パレット作成
このアクセシブルな配色パレット生成ツールは、1つの基本色から5色のパレットを作成します。各色の背景に白または黒の文字を重ねたとき、WCAGのコントラスト基準を満たすかどうかを確認できます。色とパレットの種類を選び、判定バッジを確認してください。
CSS clip-pathジェネレーター
ポイントを動かして、コードをコピー。このCSS clip-path生成ツールは、ポリゴンを視覚的に編集できるエディターです。プレビュー上のハンドルを動かすと、その下に表示されるclip-pathの値がリアルタイムで更新されます。値はパーセントで出力されるため、適用する要素の大きさに合わせて形状も拡大・縮小されます。
cmからpxへ変換
このCM→PX変換ツールは、指定したDPIに基づいてセンチメートルをピクセルにすぐ変換します。デザイナーや開発者は、印刷用と画面用の単位を頻繁に使い分けます。このツールなら、その切り替えをスムーズに行えます。
CMYKからRGBへ変換
このCMYK→RGB変換ツールは、CMYKの各成分であるシアン、マゼンタ、イエロー、ブラックのパーセント値を、標準の変換式でRGB値とHEX値に変換します。デジタルデザインの制作に利用できます。
色の名前を調べる
この色名検索ツールは、画像に含まれる色の名前を調べます。画像を読み込み、任意のピクセルにカーソルを合わせると、最も近い名前付きの色と、その16進カラーコード、RGB値がパネルに表示されます。画像がブラウザの外に送信されることはありません。
CSS border-radiusジェネレーター
CSS border-radius生成ツールは、ブラウザで使える無料のツールです。コードを1行も書かずに、角丸の値を視覚的に調整し、プレビューで確認できます。
CSS box-shadowジェネレーター
このCSS box-shadow生成ツールは、ブラウザで使える無料のツールです。コードを1行も書かずに、要素のボックスシャドウを視覚的に作成して書き出せます。
CSS clamp()計算ツール
このCSS clamp計算ツールは、画面サイズに応じて滑らかに変化するレスポンシブなclamp()の値を正確に計算します。値を推測して設定する必要はありません。
CSSすりガラス効果ジェネレーター
このCSSグラスモーフィズム生成ツールは、4つのスライダーですりガラス風の効果を作り、対応するCSSを出力します。プレビューでは、同じ設定をカードとモーダルに適用して確認できます。背景に浮かぶ図形があるため、ぼかしの効果も見て取れます。
CSSグラデーション背景ジェネレーター
CSSグラデーション背景は、CSSの標準関数を使ってプログラムで生成する画像です。外部の画像ファイルを用意する必要はありません。
CSSキーフレームアニメーション作成
CSSキーフレームアニメーションを視覚的に作成できる生成ツールです。コードを1行も書かずに、実際のサイトで使える@keyframesのCSSを作成し、プレビューで確認して書き出せます。
CSSローディングアニメーション作成
このCSSローディングアニメーション生成ツールは、読み込み中の表示に使うCSSを作成します。キーフレームを手作業で書く必要はありません。ローダーを選び、3つの設定を調整して結果をコピーしてください。どのローダーもCSSだけで動作し、JavaScript、画像、外部ライブラリへの依存はありません。
CSS text-shadowジェネレーター
このCSSテキストシャドウ生成ツールでは、コードを1行も書かずに、文字の影の効果をブラウザ上でデザインして書き出せます。
グリッチ文字ジェネレーター
このグリッチテキスト生成ツールは、1行のテキストをCSSによるグリッチアニメーションに変換し、再現に必要なHTMLとCSSを出力します。処理はすべてブラウザ内で完結し、データはアップロードされません。
HEXからRGBへ変換
HEX→RGB変換ツールで、16進カラーコードをRGB値にすぐ変換できます。デザイナーや開発者に向けた、見やすく使いやすいモダンなツールです。
HSLからRGBへ変換
このHSL→RGB変換ツールは、HSLの色を複数の形式にすぐ変換します。精密なスライダーまたは数値入力で、色相、彩度、明度、アルファ値を調整してください。表示された結果をクリックするとコピーできます。
HTMLフォームジェネレーター
このHTMLフォーム生成ツールでは、コードを1行も書かずに、実際のサイトで使えるHTMLフォームを作成して書き出せます。フォームを視覚的にデザインし、リアルタイムのプレビューで確認しながら、整ったマークアップを数秒でコピーできます。
HTMLテーブルジェネレーター
HTMLテーブル生成ツールは、ブラウザで利用できるツールです。コードを1行も書かずに、実際のサイトで使えるHTMLテーブルを作成できます。
HTMLからテキストへ変換
HTMLコードを、整った読みやすいテキストに変換します。この軽量なHTML→テキスト変換ツールは、ブラウザ標準のHTMLパーサーでマークアップを解析し、タグを取り除いて中のテキストを返します。
MarkdownからHTMLへ変換
このMarkdown→HTML変換ツールは、入力中のMarkdownを、整ったすぐに使えるHTMLに変換します。小さなMarkdownパーサーがブラウザ内で動作するため、データがサーバーに送信されることはありません。
ptからcmへ変換
このPT・CM変換ツールは、ブラウザ上で素早く動作し、組版で使うポイントをセンチメートルに、またはその逆に変換できます。
pxからcmへ変換
このPX・CM変換ツールは、ブラウザ上で素早く動作し、ピクセルをセンチメートルに、またはその逆に変換できます。
pxからインチへ変換
このPX→インチ変換ツールは、任意のDPI設定に基づいて、ピクセル値を実際のインチ寸法にすぐ変換します。
pxからptへ変換
このPX・PT変換ツールは、画面用と印刷用の制作に向けて、ピクセルとポイントをすぐに相互変換できる軽量なブラウザツールです。
RGBからHEXへ変換
シンプルなRGB→HEX変換ツールです。RGB値を16進数形式にすぐ変換できます。
RGBからCMYKへ変換
RGB→CMYK変換ツールで、デジタル用の色形式（RGB）と印刷用の色形式（CMYK）をすぐに相互変換できます。
RGBからHSLへ変換
このRGB→HSL変換ツールは、RGB（赤、緑、青）の値をHSL（色相、彩度、明度）とHEXにすぐ変換します。デザイナーや開発者をはじめ、色の仕組みを扱うすべての方に向けたツールです。
SVG波形ジェネレーター
このSVGウェーブ生成ツールは、ヒーローセクション、セクションの区切り、カード向けに、複数の波を重ねた背景を作成し、SVGコードを出力します。各レイヤーは独立したパスで、スライダーで調整できます。デザインソフトは不要で、データがブラウザの外に送信されることもありません。
WordからHTMLへ変換
Wordから貼り付けて、整ったHTMLをコピー。このWord→HTML変換ツールは、クリップボードの内容を利用します。Microsoft Word、Google Docs、その他のリッチテキストエディターから書式付きのテキストを左側のパネルに貼り付けると、入力に合わせて右側のパネルに対応するHTMLが表示されます。