#WEB制作 38ツール
Web制作の現場で頻出する作業を支援するツール集。
「WEB制作」タグについて
HTML/CSS/JavaScript/サーバ設定など、Web制作の現場で頻出する作業を支援するツール集です。CSSグラデーション・Flexbox・Grid・box-shadow・border-radiusのビジュアルジェネレータ、.htaccessやrobots.txt・sitemap.xmlの自動生成、HTMLエスケープ、CSS/JSのMinify、OGP情報の生成・取得など、コーダー・フロントエンドエンジニア・Webデザイナーの作業時間を大幅短縮するツールを集約しています。
ツール一覧 (38件)
Faviconジェネレータ👑
画像から各サイズのfavicon一式を生成。
カラーコード変換
HEX/RGB/HSL/CMYK相互変換とWebセーフカラー表示。
CSSグラデーション
線形/放射状グラデーションを視覚的に生成。
ボックスシャドウ
box-shadow CSS の視覚的生成。複数影対応。
ボーダーラジアス
border-radiusの4隅個別指定対応エディタ。
CSSボタンデザイン集👑
70種類以上のCSSボタンデザインからクリックで選択しプレビューしながら作成。シンプル/グラデ/影付き/3D/アウトライン/アニメ/アイコン付/シャイン/ニューモ/グラスモーフィズム等。色・テキストをライブ編集してHTML/CSS・Tailwind・Bootstrap・Material 3の4形式で即コピー。
見出しCSSデザイン集👑
h1〜h6見出しの装飾デザイン60種以上をクリック選択+ライブプレビュー。シンプル/おしゃれ/ビジネス/カジュアル。色・テキストカスタマイズしてHTML/CSS・Tailwind・Bootstrap対応コードを即コピー。
ランディングページ ビルダー (LP組み立て)👑
Tailwind CSS / Bootstrap 5 に対応した、ブロック組み合わせ式のランディングページビルダー。日本のLP定番セクション (お悩み訴求・3ステップ・他社比較・期間限定キャンペーン・メディア掲載・巨大数字) を含む25種類のブロックを選んで並べ替え、リアルタイムプレビューで確認し、完成したHTMLを即コピー。叩き台・モック・MVP・本番LP全てに対応。
フォームデザイン集👑
ログイン/問合せ/ニュースレター/検索など20種類以上のフォームデザインからクリック1つで選択。シンプル/モダン/グラスモーフィズム/ニューモ等を完全ブラウザ内でプレビュー、HTML/CSSコードを即コピー。
カードデザイン集👑
プロフィール/商品/ブログ/価格表/通知など20種類以上のカードデザインから選択。シンプル/モダン/グラデ/影付き/グラスモーフィズム等。HTML/CSSコードを即コピー。
CSSアニメーション生成 (keyframes)👑
フェードイン/スライドイン/バウンス/回転/拡大縮小/シェイクなど30種類以上のCSS @keyframes アニメーションをライブプレビュー&コード即コピー。継続時間・遅延・イージング調整可。
スクロール連動アニメ (AOS)
AOS (Animate On Scroll) ライブラリ向けのHTML属性を生成。スクロールで要素が出現するアニメ20種類以上をプレビューしながら設定可能。
GSAP コードジェネレータ
GSAP (GreenSock) で人気の演出パターン (フェード・スライド・スタガー・モーフ等) のJavaScriptコードを生成。プレビュー&コピーで即実装。
Animate.css コードジェネレータ👑
Animate.css ライブラリ向けのHTMLクラスを生成。フェード・スライド・バウンス・フリップ等の定番アニメーション40種類以上をプレビューしながら設定。継続時間・遅延・繰り返し回数も調整可能。
Hover.css コードジェネレータ
Hover.css ライブラリ向けのHTMLクラスを生成。マウスホバー時のエフェクト40種類以上 (拡大・回転・影・カラー変化・ボーダー演出等) をプレビューしながら選択可能。
Motion One コードジェネレータ
2025年トレンドの軽量モダンアニメーションライブラリ Motion One のJavaScriptコードを生成。Spring物理演算・ステージング・パスアニメ等を実装サンプル付きで提供。
Flexboxジェネレータ
Flexboxプロパティの視覚的生成。
Gridジェネレータ
CSS Gridレイアウトの視覚的生成。
Meta/OGPタグ生成
SEO/OGP/Twitterカード一括生成。
robots.txt生成
クローラ制御ファイルの生成。
.htaccess生成
リダイレクト/Basic認証/IP制限等のテンプレ生成。
sitemap.xml生成
URL入力からsitemap.xmlを生成。
CSS/JS minify
CSS/JavaScriptの圧縮・最小化。
OGP情報取得
任意URLからOpen Graph Protocol/Twitterカード/Meta情報を取得しプレビュー表示。SNSシェア時の見え方確認に。
メールアドレス難読化
メールアドレスをHTML実体参照/JavaScript分割/CSS逆順表示等の方式で難読化。スパムボット収集対策に。
HTMLテーブル生成
行数・列数・ヘッダー有無・スタイルを指定してHTML/CSSのテーブルコードを生成。コピー&ペーストで即利用可能。
Webフォントプレビュー
Google Fonts日本語フォント12種を即時プレビュー。テキスト入力で見本を確認しCSS埋め込みコードを取得。
LiteCanvas (Bootstrap簡易ビルダー)👑
Bootstrap 5専用の簡易ビジュアルビルダー。Hero/Cards/Form/Pricing/Footer等のセクションをクリック追加・順序入替・編集して完全HTMLコード生成。インストール不要。
Bootstrap グリッド
Bootstrap 5の12カラムグリッドを視覚的に設計。レスポンシブブレークポイント (xs/sm/md/lg/xl/xxl) 対応HTMLコード生成。
Bootstrap ボタン
btn-primary/secondary/success等の色・サイズ・outline・disabled状態を視覚調整。HTMLコード即時生成。
Bootstrap カード
画像・ヘッダー・本文・フッター・ボタンを組合せたcardコンポーネントを視覚生成。プレビュー付き。
Bootstrap アラート/バッジ
alert-success/warning/danger等のアラート、各色のバッジ (badge) コンポーネントを生成。
Bootstrap CDN生成
Bootstrap 4/5、Bootstrap Icons、Popper.js等のCDN <link>/<script>タグをバージョン選択で即時生成。
Bootstrap フォーム
input/select/textarea/checkbox/radioを組合せたフォームをドラッグ感覚で組立。バリデーション対応コード生成。
Bootstrap クラス辞書
マージン/パディング/Flexbox/Display等のユーティリティクラスを検索・絞り込み。Bootstrap 5対応。
WCAGコントラスト
前景色/背景色のコントラスト比をWCAG 2.1基準で判定。AA/AAA達成判定、可読性プレビュー、提案色付き。
Tailwindカラーパレット生成👑
ブランドカラー1色から50〜950の11階調パレットを自動生成。@theme/config/CSS変数/JSON出力対応。
CSS単位変換
px/rem/em/%/vw/vh/pt等のCSS単位を相互変換。base font size指定、複数値一括変換、コピー可。