Web制作の作業ツールは、「何を入れて何が返ってくるか」と「入れたデータがどこへ行くか」の2点で選べば、ほぼ迷いません。CodeQuest.workが公開している16のツールは、レイアウト・コード比較・デザインと配色・構造チェック・画像加工の5系統に分かれ、それぞれ入力の形と出力の形が違います。
ツールのまとめ記事は数が多いほど親切に見えますが、実際に困るのは「16個あることは分かった、で、いま開くべきなのはどれか」という一点です。さらに厄介なのは、コピーしたコードや書き出した画像が本番に置いて問題ないかどうかを、自分では判定できないまま公開してしまうことです。
そこでこの記事は、紹介ではなく判定の記事として作り直しました。前半で16ツールを1枚の判定表にまとめて「いま開くべき1つ」を決め、後半で生成物が本番で通用するかを確かめる合否ラインと、外れたときの切り分けまで扱います。
なお、本記事に書いた機能・対応形式・出力内容は、すべて2026年8月1日に各ツールを実際に開いて確認した内容です。ツールは随時更新するため、細部は各ツールのページで最新の表示をご確認ください。ボタンの発光やガラス質感、3Dカルーセルといった装飾・アニメーション系のジェネレーターは本記事の対象外で、▶ CSS装飾・アニメーションの無料ジェネレーターまとめ に分けてあります。
どれを使うかを決める16ツール判定表
ツール選びで迷うのは、たいてい「用途」という粗い軸で並べられているからです。同じ「画像加工」でも、透過PNGが欲しいのかファイルサイズを落としたいのかで開くツールは変わります。そこで、判定に本当に効く4つの軸だけで16ツールを並べました。
判定に使う4つの軸
- 入力：何を渡せば動くか（数値操作／貼り付け／画像／URL）
- 出力：何が返ってくるか（コード／画像／診断結果）
- データの行き先：入れたものが自分のブラウザから出るかどうか
- 向かない条件：この状況なら別のツールへ、という「使わない合図」
3番目の「データの行き先」は、業務データを扱うときに真っ先に確認すべき項目です。16ツールのうち14ツールはブラウザ内だけで処理が完結し、入力した画像もコードもサーバーへ送られません（フォントペアリングのみ、書体データをGoogle FontsのCDNから読み込みます）。残る2つ、URLを入力するタイプだけが例外です。詳しくは表のあとで説明します。
16ツールの判定表
| ツール | 入力 | 出力 | データの行き先 | 向かない条件（使わない合図） |
|---|---|---|---|---|
| CSS Grid Generator | 列数・行数・gap・幅高さの数値操作 | HTML＋CSS（768px以下で1カラムに畳むメディアクエリ付き） | ブラウザ内のみ | 横並び1方向だけを整えたい → Flexへ |
| CSS Flex Generator | コンテナの値＋各アイテムの order / flex / align-self | Generated CSS（コピー可） | ブラウザ内のみ | 行と列を同時に組みたい → Gridへ |
| CodeDiff Checker | 2つのテキストを貼り付け | 左右2画面の行単位＋語単位ハイライト、全角スペース検出 | ブラウザ内のみ | 空白差分を無視したい／1画面のインライン表示で見たい（切替なし） |
| CSSセレクタ一覧 | 44種から選ぶ／自分のセレクタを入力 | デモ内のハイライト＋ヒット数＋サンプルCSS | ブラウザ内のみ | 自分のページのDOMに対して試したい → ブラウザのDevToolsへ |
| 見出しデザイン プレビューア | 見出しテキストとタグ（h2 / h3 / h4） | style付きHTML、またはインラインstyle版 | ブラウザ内のみ | サイト全体の見出しを一括で変えたい（テーマCSS側の仕事） |
| フォントペアリング プレビューア | Google Fonts 20書体から見出し・本文を選択 | CSS＋読み込み用のlinkタグ | 書体はGoogle FontsのCDNから読み込む | 社内フォント・購入した有料フォントの検証 |
| 色の辞書 | 色名・読み・系統で検索 | HEX / RGB＋名前の由来と意味 | ブラウザ内のみ | 文字色と背景色のコントラスト比を判定したい |
| 画像カラーピッカー | 画像＋抽出する色数 | CSS / Tailwind / SCSS 形式のパレット | ブラウザ内のみ | ブランドカラーの厳密一致（k-meansの近似値が返る） |
| グラデーションジェネレーター | 273プリセットから選ぶ／白紙から作る | CSS・Tailwindのコード、透過PNG | ブラウザ内のみ | 写真のような多階調表現（グラデーションの合成ではない） |
| Direbase（ディレベース） | 診断したいURL | 100点満点のスコア＋指摘＋改善コード | サーバー側から対象URLをクロールする | 非公開URL・社外秘ページ・ローカル環境（外部から到達できない） |
| HTML Outline Checker | HTMLを貼り付け（URL欄はない） | 見出しの階層ツリー＋警告一覧 | ブラウザ内のみ | URLを入れて診断したい → Direbaseへ |
| OGPプレビューツール | URL取得、または手入力でメタタグを作成 | 7サービスぶんのカード表示＋メタタグ | URL取得時は外部APIへURLを送信する | 非公開URL・社外秘ページ（手入力モードなら送信は発生しない） |
| AI背景透過・切り抜き | JPG / PNG / WebP / AVIF（複数可） | PNG（透過）／WebP（透過）／JPG（白背景） | ブラウザ内のみ | 髪の毛や煙のような境界が曖昧な被写体の精密切り抜き |
| 画像圧縮・WebP変換 | JPG / PNG / WebP / AVIF / SVG（複数可） | 同5形式への相互変換・圧縮・リサイズ | ブラウザ内のみ | 撮影日時や位置情報を残したい（EXIFは変換時に自動で消える） |
| クリッカブルエリアジェネレーター | 画像＋矩形・円形のドラッグ描画 | CSS方式（%配置・レスポンシブ）／HTML Map方式 | ブラウザ内のみ | 多角形の領域が必要（rect / circle の2種のみ） |
| グレースケール変換ツール | 画像＋グレースケール強度のスライダー | PNGのみ | ブラウザ内のみ | JPEGで書き出したい／CMYKのモノクロ入稿データが必要 |
URLを入力する2つだけは扱いが違う
画像の加工・圧縮、コードの比較、CSSの生成は、いずれもブラウザ上で処理が完結し、アップロードしたデータがサーバーへ送られることはありません。一方でURLを受け取るツールは、その性質上どうしても外部との通信が発生します。
- OGPプレビューツール：URL確認モードで対象ページのメタタグを取り出すため、外部の取得APIへURLを渡します。手入力の「OGP作成」モードだけを使えばこの通信は発生しません。
- Direbase（ディレベース）：診断サーバーが対象URLへ実際にアクセスしてページを取得します。外部から到達できないローカル環境や、Basic認証がかかったページは診断できません。
この2つには、公開前の非公開URLや社外秘ページを入力しないでください。ステージング環境の見出し構造を確認したいだけなら、URLを渡さずにHTMLを貼り付けるHTML Outline Checkerのほうが安全です。
レイアウトを組む
CSS GridとFlexboxは、プロパティの組み合わせが多く、コードだけで完成形をイメージしづらい領域です。値を動かしながら結果を見て、確定したところでコードを持ち出す、という順番のほうが速く終わります。
1. CSS Grid Generator
URL：codequest.work/generator/grid/
列数・行数・gap・コンテナの幅と高さ（px / % / vw / vh / em / rem から単位を選択）を設定し、セルをドラッグで結合してHTMLとCSSを生成します。特徴は、出力されるCSSに「768px以下では1カラムに畳む」メディアクエリが最初から含まれる点です。デスクトップの見た目を作った時点で、スマホでの最低限の破綻回避が入っています。
ホーリーグレイル・12カラム・カードギャラリー・ダッシュボードなどの定番レイアウトは、ツール本体ではなくプリセット一覧ページにまとまっています。ゼロから組む前に、近い形が既にあるかを見ておくと早いです。
詳しい使い方は「CSS Gridジェネレーター｜視覚的に組んでHTML/CSSを自動生成」で解説しています。
2. CSS Flex Generator
URL：codequest.work/generator/flex/
画面が「Flex Container」と「Flex Items」の2タブに分かれているのがこのツールの要点です。Containerタブでdisplay・flex-direction・justify-content・align-items・flex-wrap・gapを決め、Itemsタブに切り替えるとボックスごとに order / flex / align-self を個別に設定できます。ボックスはAdd Box・Remove Boxで増減できるため、実際の要素数に合わせて確認できます。
プリセットはCenter（横中央）・Space Between・Column Stack・Card Grid・Sidebar Layout・Footer Stickyの6種類です。「サイドバーだけ幅を固定して本文を伸ばしたい」のような定番は、プリセットを読み込んでからItemsタブでflexの値を触るのが最短です。
詳しい使い方は「CSS Flexbox 使い方ガイド＆ジェネレーター」で解説しています。
コードを見比べる・セレクタを確かめる
「動かないコードの、どこが手本と違うのか」を突き止める作業を支えるツールです。どちらもエディタを開かずブラウザだけで完結します。
3. CodeDiff Checker
URL：codequest.work/generator/diff-checker/
入力欄が「sample code（元のコード）」と「my code（自分のコード）」に分かれており、左右2画面で差分を並べます。行単位で色分けしたうえで、変更行はさらに語単位・文字単位まで絞り込んで表示するため、「1文字だけ違う」タイプの不具合が目で追えます。
実務でいちばん効くのは全角スペースの検出です。全角スペースは通常のエディタでは半角と見分けがつかず、CSSやJavaScriptが理由不明で壊れる原因になります。このツールは全角スペースを専用のマーカーに置き換えて表示するため、その場で位置が分かります。
一方で、表示は左右2画面に固定されており、インライン表示への切り替えや、空白・改行の差分を無視するオプションはありません（2026年8月1日時点）。インデント変更だけを除いた比較をしたい場合は、エディタやGitのdiffを使ってください。
詳しい使い方は「コード比較・差分チェックが無料でできるdiffツール」で解説しています。
4. CSSセレクタ一覧（ライブ辞典）
URL：codequest.work/generator/css-selector/
タグ・クラス・ID・属性・擬似クラス・擬似要素・フォーム状態まで44種のセレクタを一覧から選ぶと、デモHTMLの該当要素がその場でハイライトされ、ヒット数とサンプルCSSが表示されます。「この書き方は何にあたるのか」を思い出すための辞典として使う想定です。
下部には「カスタムセレクタを試す」欄があり、自分で書いたセレクタをデモHTMLに対して実行してヒット数を確かめられます。li:nth-of-type(2n) のように数え方で迷う書き方は、頭の中で数えるより実行したほうが確実です。
体系立てて覚え直したい場合は ▶ CSSセレクタの完全ガイド を、他サイトの練習環境も含めて比較したい場合は「CSSセレクター練習サイト・ジェネレーター｜無料で手を動かして覚える」をご覧ください。
見た目を決める（デザイン・配色）
見出しの装飾、書体の組み合わせ、配色の決定を扱う5ツールです。いずれも最終的にコピーできるコードが出るため、検討と実装が同じ画面でつながります。トンマナ設計そのものの考え方は ▶ Webデザインガイド にまとめています。
5. 見出しデザイン プレビューア
URL：codequest.work/generator/heading-design-previewer/
見出しテキストとタグ（h2 / h3 / h4）を指定すると、すべてのデザイン案が同じ文言で一斉に描画されます。マーカー風・下線グラデーション・リボン・ストライプ背景・角かっこ囲みといった静的な装飾と、ホバー下線スライド・タイピングカーソル・枠線ドローといったCSSアニメーションの2系統が並びます。
コピー形式は「HTML+CSS（推奨）」と「インラインスタイル」の2種です。WordPressのカスタムHTMLブロックへ1箇所だけ貼るならインライン、同じ見出しを何度も使うならHTML+CSSを選び、CSS部分はテーマ側へ移してください。::before や @keyframes を使うデザインはインライン版が用意されておらず、HTML+CSSのみになります。
開発背景は「Claude Codeでブログ見出しデザインツールを作ってみた」で紹介しています。
6. フォントペアリング プレビューア
URL：codequest.work/generator/font-pairing-previewer/
見出しフォントと本文フォントをGoogle Fontsの20書体（Noto Sans JP・Zen Old Mincho・BIZ UDPGothic などの和文と、Inter・Playfair Display などの欧文）から選び、ブログ記事風のレイアウトでプレビューします。見出しサイズ・本文サイズ・行間・プレビュー背景（白／アイボリー／ダーク）まで動かせるため、単体の書体見本より本番に近い判断ができます。
「格調モダン」「和風エレガント」「ビジネス」など8つのおすすめペアリングが用意されており、迷ったらここから始められます。出力はCSSと読み込み用のlinkタグの2つで、linkタグを貼り忘れると本番で書体が反映されません。書体データはGoogle FontsのCDNから配信されるため、この点だけは自分のサーバー内で完結しません。
詳しい使い方は「フォントペアリング プレビューア｜見出し×本文の組み合わせをプレビュー」で解説しています。
7. 色の辞書
URL：codequest.work/generator/color-dictionary/
日本の伝統色とCSSの名前付き色をあわせて約390色を収録し、色名・読み・カラーコードに加えて名前の由来と色の意味まで引ける辞典です。「伝統色だけ」「CSS名だけ」の絞り込みと、赤・橙・黄・緑・青・紫・桃・茶・白黒灰の系統別フィルタが使えます。
色を「なんとなく好きだから」ではなく「この色名にはこういう背景があるから」と説明できるようになるのが実務上の価値です。提案書で配色理由を1行書き添えるだけで、レビューの通りやすさが変わります。
詳しい使い方は「色の辞書の使い方｜日本の伝統色とCSS名前付き色を由来から引けるツール」で解説しています。
8. 画像カラーピッカー
URL：codequest.work/generator/image-color-picker/
画像やスクリーンショットをアップロードし、抽出する色数を指定すると、k-means法で主要色を分析してパレットを作ります。出力はCSS変数・Tailwind・SCSS の3形式から選べるため、使っているスタックにそのまま持ち込めます。作ったパレットはブラウザ内に保存しておけます。
返るのはクラスタリングによる代表色なので、ロゴのブランドカラーを厳密に取り出す用途には向きません。ブランドカラーが決まっている場合は、規定のHEXを正としてこのツールは補色や背景色の候補出しに使うのが適切です。
詳しい使い方は「画像・写真からWEBデザイン用カラーパレットを自動生成」で解説しています。
9. グラデーションジェネレーター
URL：codequest.work/generator/gradient-generator/
日本の伝統色をベースにした273件のプリセットが並び、カードをクリックするとモーダルで角度やカラーストップを調整できます。線形・放射・扇形（linear / radial / conic）に対応し、白紙から作ることも可能です。
出力はCSSとTailwindのコードに加えて、背景用と文字用をワンクリックで切り替えられるのが特徴です。文字グラデーション用のコードも、そのまま使える透過PNGも書き出せるため、CSSが使えない場所（メール本文や外部サービスのバナー枠）にも持ち出せます。色の辞書とも連携しています。
詳しい使い方は「CSSグラデーションジェネレーターの使い方｜linear/radial/conic対応・伝統色プリセット内蔵」で解説しています。
公開前に構造を点検する
公開ボタンを押す前に、見出し階層・メタタグ・シェア時の見え方を確認する3ツールです。この3つは役割が重ならないよう、URLを渡すもの／HTMLを貼るもの／SNSの見え方だけを見るものに分かれています。SEOの考え方そのものは ▶ SEOガイド にまとめています。
10. Direbase（ディレベース）
URLを入力すると、構造化データ（40点満点）・基本SEO（30点満点）・コンテンツ（20点満点）・技術的SEO（10点満点）の4カテゴリ45項目以上を診断し、100点満点のスコアを返します。指摘だけで終わらず改善コードを生成するため、「何が悪いかは分かったが直し方が分からない」で止まりません。ドメインパワーの推定、競合キーワード調査、サイト全体の一括診断も同じ画面から使えます。
利用条件だけは本記事の他15ツールと異なります。登録不要で使えるのは累計3回まで、無料登録すると毎月3回となり、それ以上の回数や機能は有料プランです（2026年8月1日時点）。登録するとダッシュボードで履歴とスコア推移が残せるため、直したあとの変化を追えます。
単体の使い方は「SEOスコアを無料でチェック｜構造化データ診断・改善コード生成・競合KW分析まで完結」で、他社のSEOツールとの役割の違いは ▶ SEOチェックツール比較 で扱っています。
11. HTML Outline Checker
URL：codequest.work/generator/html-outline-checker/
このツールはURLを入力する欄がありません。エディタ欄にHTMLを貼り付けて「検証する」を押す方式です。公開前の原稿や、まだ外部から見えないステージング環境のHTMLをそのまま検証できるのが、URL方式にはできない利点です。
実際に <h1> が2つあり h2 の次に h4 が来るHTMLを貼ると、「h1 が 2 個あります」「見出しレベルの飛び級 (h2 → h4)」に加えて、DOCTYPE・html lang・meta charset・viewport・title の欠落まで指摘が返ります。見出しだけでなく、head内の基本要素の抜けも同時に拾える構成です。
この2つが警告として妥当な根拠は、MDNの見出し要素のドキュメントにあります。「見出しレベルを飛ばさないでください。常に h1 から始め、次に h2、以下も同様にしてください」「1つのページに複数の h1 要素を使用しない」と明記されています（出典：MDN Web Docs「h1–h6: HTML の見出し要素」）。
詳しい使い方は「SEOに効くHTMLアウトライン設計ツール｜見出しタグを自動検証」で解説しています。
12. OGPプレビューツール
URL：codequest.work/generator/ogp-preview/
プレビューできるのはX・Facebook・LINE・はてなブックマーク・LinkedIn・Pinterest・note の7つで、タブで切り替えます。「URL確認」モードで既存ページのメタタグを読み込むか、「OGP作成」モードでゼロから組むかを選べます。
チェック結果欄には、og:title / og:description / og:image / og:url の未設定が個別に表示されます。出力されるメタタグには twitter:card（summary_large_image）まで含まれるため、コピーすればX向けの指定も同時に入ります。
ひとつだけ注意点があります。URL確認モードは対象ページのHTMLを取得するために外部の取得API（allorigins / microlink）へURLを渡します。公開前のURLや社外秘のページには使わず、その場合は手入力の「OGP作成」モードを使ってください。
詳しい使い方は「OGPプレビューツール｜SNSでのシェア表示をリアルタイムで確認する方法」で解説しています。
画像を仕上げる
切り抜き・軽量化・リンク領域の設定・モノクロ化の4ツールです。いずれもアップロードした画像はブラウザ内で処理され、サーバーへ送信されません。クライアント支給の写真や、公開前のバナーを扱うときはこの4つで完結します。
13. AI背景透過・切り抜き
URL：codequest.work/generator/bg-remover/
AIが被写体を自動検出して背景を削除します。入力はJPG・PNG・WebP・AVIFで複数枚をまとめて処理でき、出力はPNG（透過）・WebP（透過）・JPG（白背景）の3形式から選べます。EC商品画像のように「透過も白背景も両方欲しい」ケースで、同じ切り抜き結果から2種類を書き出せます。
この種のサービスでは「無料は月◯枚まで」という制限が一般的ですが、こちらは登録不要・回数制限なしです。処理はすべて手元のブラウザで走るため、サーバー費用が枚数に比例しない構造になっています。
詳しい使い方は「AIで背景透過・被写体の切り抜きがブラウザで完結する無料ツール｜使い方ガイド」で解説しています。
14. 画像圧縮・WebP変換
URL：codequest.work/generator/image-compressor/
対応形式はJPG・PNG・WebP・AVIF・SVGの5つで、圧縮だけでなく相互変換もできます。品質スライダー（既定75）で圧縮率を調整し、PNGは品質に応じて色数を自動調整します。リサイズは自由サイズのほか、OGP画像1200×630やX投稿1600×900などのテンプレートから選べます。
見落としやすいのがEXIF情報の自動除去です。スマホで撮った写真には位置情報が入っていることがあり、そのまま公開すると撮影場所が特定できてしまいます。このツールは変換時にEXIFを自動で落とすため、逆に「撮影日時を残したい」用途には向きません。
どの形式に変換するか迷う場合、MDNの画像ファイル形式ガイドが判断材料になります。AVIFは同等画質でWebPよりさらに圧縮率が高く、WebPはJPEG・PNG・GIFの置き換えとして幅広く使えると整理されています（出典：MDN Web Docs「ウェブで使用する画像ファイル形式」）。古い環境を切り捨てられない案件では、AVIFを第一候補にしつつWebPを併記する構成が無難です。
詳しい使い方は「画像圧縮・WebP変換・切り抜きがブラウザで完結する無料ツール｜使い方ガイド」で、他サービスも含めた比較は ▶ 画像圧縮ツールの比較 で扱っています。
15. クリッカブルエリアジェネレーター
URL：codequest.work/generator/clickable-area/
1枚の画像の中に複数のリンク領域を作るツールです。描ける形状は矩形（rect）と円形（circle）の2種類で、多角形（poly）には対応していません。地図の県境のような複雑な形をリンクにしたい場合は、SVGで領域を切るなど別の方法が必要です。HTMLの仕様上は <area> の shape に poly を指定できますが（参考：MDN Web Docs「area 要素」）、本ツールの出力には含まれません。
出力形式は2つあり、ここが選択のポイントです。「CSS（レスポンシブ）」は position: absolute とパーセント指定で領域を配置するため、画像が縮んでもクリック位置が追従します。もう一方の「HTML Map」方式は従来の <map> / <area> でピクセル座標が固定になるため、画像を可変幅で表示するサイトではズレます。スマホ対応が必要ならCSS方式を選んでください。
詳しい使い方は「クリッカブルエリアジェネレーター｜画像マップをコード不要で作れるツール」で解説しています。
16. グレースケール変換ツール
URL：codequest.work/generator/grayscale/
画像をドラッグ＆ドロップし、グレースケール強度のスライダーで色の抜き具合を決めます。完全なモノクロだけでなく、彩度を少し残した中間の状態も作れるため、実績写真を主張しすぎない見た目に落とすといった調整に使えます。
ダウンロード形式はPNGのみです。JPEGで書き出したい場合は、このツールでPNGを作ってから画像圧縮・WebP変換ツールでJPGへ変換する2段構えになります。写真をモノクロにするとPNGはファイルサイズが膨らみやすいため、Webに載せるならこの2段目はほぼ必須です。
詳しい使い方は「グレースケール変換ツール｜画像を簡単にモノクロ加工」で解説しています。
生成物が本番で通用するかを確かめる
ツールが出したコードや画像は、プレビュー画面では常に正しく見えます。問題が出るのは本番環境に置いたあとです。ここでは「これを満たしていれば公開してよい」という合否ラインと、その確かめ方を1手で終わる形にまとめました。
受け入れ検査と合否ライン
| 作ったもの | 合否ライン | 確かめ方（1手で終わる） |
|---|---|---|
| Grid / Flex の生成コード | 幅375pxで横スクロールが発生しない | DevToolsのデバイスツールバーで幅を375pxにし、コンソールで document.scrollingElement.scrollWidth <= document.scrollingElement.clientWidth を実行して true になるか |
| 圧縮した画像 | ファーストビュー最大の画像が200KB以下で、等倍表示で劣化が判別できない | 書き出したファイルのサイズを確認し、元画像と並べて100%表示で見比べる |
| 背景透過・グレースケール画像 | 白背景と濃色背景のどちらに置いても輪郭にフチが残らない | 透過PNGを白（#ffffff）と濃色（#111111）の2つの背景に重ねて等倍で確認 |
| 見出し構造（HTML） | h1が1つ・レベル飛びの警告が0件 | 公開前のHTMLをHTML Outline Checkerに貼って「検証する」を押す |
| OGP設定 | 公開後、Xの投稿欄にURLを貼るとカードが表示される | 投稿はせず、投稿欄にURLを貼ってプレビューが出るところまで確認する |
| クリッカブルエリア | ウィンドウ幅を半分にしても全エリアが正しく反応する | ブラウザ幅を50%にして、各領域を順にクリックする |
| Direbaseの指摘対応 | 再診断でスコアが上がり、直した指摘が消えている | 同じURLでもう一度診断し、前回の指摘一覧と突き合わせる |
2行目の「200KB」は目安であって規格ではありません。判断の基準になるのはLargest Contentful Paint（LCP）を2.5秒以下に収めることで、Googleはこの値を「ユーザーの75パーセンタイルで測る」よう推奨しています（出典：web.dev「Largest Contentful Paint (LCP)」）。回線条件によって許容サイズは変わるため、まず200KBを目安に落とし、実測が2.5秒を超えるなら追加で削る、という順番が現実的です。
Core Web Vitalsの実測値そのものは、Direbaseの診断結果にも含まれます。画像を差し替えたあとで同じURLを診断し直せば、圧縮の効果がスコアの変化として確認できます。ブラウザだけで検証を回す環境づくりについては ▶ ブラウザだけで完結するコーディング環境 も参考になります。
検査に落ちたときの切り分け
合否ラインを外したとき、生成したコードそのものを疑い始めると時間を失います。原因はたいてい生成物ではなく、それを置いた側の条件にあります。症状ごとに「最初に見る場所」を決めておけば、1回の確認で分岐できます。
症状から原因へ1手でたどる表
| 症状 | 最初に見る場所 | 分岐 |
|---|---|---|
| 375pxで横スクロールが出る | 生成CSSではなく、その中に入れた子要素の固定幅（画像・table・pre） | 子要素に max-width:100% があるか → 無ければ付ける／あってもズレるなら gap と padding の合計が幅を超えていないか |
| 圧縮後の画像がぼやける | 品質値ではなく、表示サイズに対するピクセル数 | 実際の表示幅の2倍未満なら解像度不足 → リサイズを止める／2倍以上あるなら品質を上げる |
| 透過画像のフチに色が残る | 切り抜き結果ではなく元画像の背景 | 元が単色背景なら切り抜き直す／写真背景なら境界がぼけている箇所なので手作業の修正が要る |
| Outline Checkerが飛び級を警告する | 記事本文ではなくテーマのテンプレート | サイドバーやフッターのh3が混ざっていないか → 混ざっていれば本文だけを貼って再検証 |
| Xでカードが出ない | og:image に指定したURL | 相対パスや http:// になっていないか → https の絶対URLへ直す／直しても出ないならXのキャッシュ更新待ち |
| クリック領域がずれる | コピーした出力形式 | HTML Map方式ならCSS方式へ切り替える／CSS方式でズレるならラッパーの幅が固定されていないか |
| Direbaseのスコアが上がらない | 診断したURLそのもの | canonicalやリダイレクト先が別URLになっていないか → 別URLなら着地先を診断する |
ここに挙げた分岐は、いずれも1回の確認で次の行動が決まる粒度にしてあります。分岐した先でさらに詰まる場合は、そのツールの使い方ガイド側に個別の対処をまとめてあります。
なお、サイト全体の構成そのものを見直す段階に入ったら ▶ ディレクトリマップの作り方 が起点になります。制作作業そのものを速くしたい場合は ショートカットキー チートシート、調べものの記録には AI調べメモ も公開しています。
よくある質問（FAQ）
Q. ツールの利用に会員登録は必要ですか？
generator配下の15ツールは登録不要・回数制限なしで使えます。唯一Direbase（ディレベース）だけは条件があり、登録不要で使えるのは累計3回まで、無料登録すると毎月3回、それ以上の回数や機能は有料プランとなります（2026年8月1日時点）。
Q. アップロードした画像やコードはサーバーに送信されますか？
画像の加工・圧縮・グレースケール変換、コードの比較、CSSの生成は、いずれもブラウザ上で処理が完結し、アップロードしたデータが外部へ送信されることはありません。一方でOGPプレビューのURL確認モードは対象ページの情報を取得するために外部サービス（allorigins / microlink）へURLを送信し、Direbaseはサーバー側から対象URLをクロールします。入力したURLが外部へ渡るため、この2つは非公開ページや社外秘のURLには使わないでください。
Q. スマートフォンでも使えますか？
色の辞書・グラデーションジェネレーター・画像加工系はスマートフォンでも問題なく動きます。一方でCSS Grid GeneratorやCSS Flex Generator、クリッカブルエリアジェネレーターはドラッグ操作と広い作業領域を前提にしているため、PC環境での利用を推奨します。
Q. 生成したコードは商用サイトでそのまま使えますか？
はい、生成されたHTML・CSSは商用サイトを含めてそのまま利用できます。ただしプロジェクトの既存CSSとクラス名が衝突する場合があるため、貼り付けたあとに固有のクラス名へ置き換えることをおすすめします。アップロードした画像自体の著作権については、ご自身でご確認ください。
Q. ボタンの発光やアニメーションのジェネレーターはありますか？
本記事とは別に用意しています。ネオンボタン・リキッドグラス・3Dカルーセルなど、サイトの見た目を装飾・演出するジェネレーターは「CSS装飾・アニメーションの無料ジェネレーターまとめ」に分けてまとめてあります。本記事で扱っているのは、レイアウト・コード比較・配色・構造チェック・画像加工といった実務作業側のツールです。
Q. ツールに不具合や要望がある場合はどうすればよいですか？
X（旧Twitter）の@CodeQuest_workアカウントへDMまたはメンションでお知らせください。不具合報告・機能リクエストは随時対応しています。