Web Creator Toolkit
Web制作に役立つ
ジェネレーター集
CSS、画像、配色、レイアウトなど、制作時に使える便利なツールをまとめています。
CSSグラデーションジェネレーター
背景やボタンに使えるCSSグラデーションを作成するためのツールです。
テキストグラデーション
文字にグラデーションをかけるCSSコードを作成できます。
CTAボタンジェネレーター
文言やグラデーション、枠線、角丸を調整してCTAボタンのHTMLとCSSを作成できます。
見出し装飾ジェネレーター
見出しの左右ライン・下線・左ボーダー・背景付き・マーカー・リボン風などを調整して、HTMLとCSSをコピーできるジェネレーターです。
ボーダージェネレーター
枠線、角丸、影などの見た目を確認しながらCSSを作るためのツールです。
box-shadow ジェネレーター
影の位置・ぼかし・広がり・色を調整しながら、box-shadow のCSSコードを作成できます。
CSSフィルタージェネレーター
画像や要素に適用するCSS filterの値を調整するためのツールです。
Backdrop Filterジェネレーター
背景のぼかしや明るさを調整しながら、backdrop-filter のCSSを作成できます。
CSS Clamp Function Generator
最小値・最大値・画面幅を指定して、レスポンシブに変化する clamp() のCSS値を生成できます。
rem / px 変換ツール
px と rem を相互変換し、基準フォントサイズも変更できます。
Aspect Ratio 計算ツール
幅・高さ・比率から aspect-ratio や必要なサイズを計算できます。
HEX / RGB / HSL 変換ツール
HEX、RGB、HSL のカラーコードを相互変換できます。
コントラストチェックツール
文字色と背景色のコントラスト比を確認し、読みやすい配色かチェックできます。
カラーパレット生成ツール
ベースカラーから、相性のよい配色パレットを生成できます。
rgba 透明度ジェネレーター
色と透明度を調整して、rgba() や hsla() のCSSコードを生成できます。
ストライプ背景ジェネレーター
斜線や縞模様の背景をCSSで生成するためのツールです。
CSS水玉背景ジェネレーター
CSSだけで水玉模様の背景を作れるジェネレーターです。縦一列・レンガ型の並びを選び、色やサイズ、間隔を調整できます。
サンプル画像ジェネレーター
カンプや教材に使えるダミー画像を、サイズ・色・テキストを指定して作成できます。
No Imageジェネレーター
サイトや記事で使える仮画像、No Image画像を作成するためのツールです。
WebP変換ツール
JPGやPNG画像をWebP形式に変換できます。
画像リサイズツール
画像の横幅・高さを指定して、リサイズ画像を作成できます。
フェードインアニメーションジェネレーター
ふわっと表示されるCSSアニメーションを選んで、CSSコードを作成できます。
ローディングアニメーションジェネレーター
CSSだけで作れるローディングアニメーションのHTMLとCSSを作成できます。
テキストアニメーションジェネレーター
見出しやテキストに使えるCSSアニメーションを調整しながら作成できます。
カードhoverアニメーションジェネレーター
カードUIに使えるhoverアニメーションを選んで、CSSコードを作成できます。
アニメーションサンプル集
CSSアニメーションの動きを一覧で確認できるサンプル集です。
CSS hover アニメーションサンプル集
リンクやボタン、カードに使える hover アニメーションを一覧で確認できます。
ナビゲーション hover アニメーション
リンクやメニューに使える hover アニメーションを作成できます。
ボタン hover アニメーション
CTAやリンクボタンに使える hover アニメーションを作成できます。
ふわふわ背景アニメーション
丸・四角・ひし形などの装飾がふわふわ動く背景を作れるCSSジェネレーターです。色・数・透明度・速度・形を調整してHTMLとCSSをコピーできます。
ふきだしジェネレーター
テキスト、余白、角丸、しっぽの位置を調整しながら、HTMLとCSSを作成できます。
矢印ジェネレーター
CSSだけで作れる矢印の向き・サイズ・色を調整しながら、HTMLとCSSを作成できます。
clip-path 三角形ジェネレーター
clip-pathを使って、向き・サイズ・色を調整しながらCSS三角形を作成できます。
ボックスデザイン／囲み枠ジェネレーター
メモ・注意・ポイントなどに使える囲み枠デザインを調整しながら、HTMLとCSSを作成できます。
CSS Grid Generator
列数・行数・gap を調整しながら、CSS Grid のコードを作成できます。
Flexbox Generator
justify-content や align-items などを選びながら、Flexbox のCSSを作成できます。
QRコードジェネレーター
URLやテキストを入力して、QRコード画像を作成できます。
ランダムパスワードジェネレーター
文字数や使用する文字種を選んで、ランダムなパスワードを簡単に生成できます。
meta / OGPタグ生成ツール
title、description、OGP画像などを入力して、head内に設置するmetaタグを作成できます。
構造化データ JSON-LD 生成ツール
サイトや記事、ツールページ用の構造化データを入力フォームから作成できます。