デザインツール

テキストや URL からブラウザ内で QR コードを生成できます。サイズや色を調整し、イベント導線、ランディングページ、ポスター、印刷物向けに画像として書き出せます。入力内容はこのページ内だけで処理され、アップロードされません。

アップロードした画像、画像 URL、またはカメラ映像から、ブラウザ内でローカルに QR コードを読み取れます。スクリーンショット上の QR コード確認、外部画像のリンク先確認、現地でのスキャン確認に便利です。

HEX、RGB、HSL、HWB、CMYK、CSS 変数のあいだで色をブラウザ内変換できます。カラーピッカーとランダムカラー補助も備え、デザインの引き継ぎ、スタイルシート作業、ブランドカラー整合に役立ちます。

offset、blur、spread、color、opacity、inset を視覚的に調整し、カード、ボタン、オーバーレイ向けの box-shadow CSS をライブ生成できます。

前景色と背景色のコントラスト比を WCAG 2.0 基準で計算し、通常文字と大きな文字に対する AA/AAA 判定を確認できます。アクセシブルな配色設計やフロントエンドの可読性確認に役立ちます。

linear、radial、conic の CSS グラデーションを視覚的に作成できます。角度や stop 位置を調整し、複数 stop を追加して、背景、ボタン、ブランド遷移向けの CSS をコピーできます。

px、rem、em、pt、vw、vh、% の相互変換を行えます。root font size、親要素 font size、viewport size を設定し、レスポンシブ対応やデザインから実装への引き継ぎに活用できます。

モノクローム、類似色、補色、トライアド、完全ランダムなどのルールで配色を生成できます。個別 swatch をロックし、残りだけ再生成して UI 検討やブランド派生色づくりに使えます。

blur、opacity、background color、border opacity を視覚的に調整し、-webkit prefix 付きの frosted-glass CSS を生成できます。カード、ナビバー、モーダルのレイヤー表現に便利です。

値をドラッグまたは直接入力して、8 点制御の不規則な CSS border-radius（fancy border radius）を可視化し、そのままコード生成できます。

最小・最大 viewport 幅と目標サイズ範囲から、font size、spacing、そのほか length を viewport に応じて伸縮させる clamp() 式を計算できます。

英字と数字を、CLI バナー、MOTD、プレーンテキスト README タイトル向けのターミナル表示しやすい ASCII Art に変換できます。結果はそのままコピー可能です。

SVG を URI encoding または Base64 で CSS background-image: url(...) 文字列へインライン化できます。小さなアイコンを別 asset file にせず CSS 内に保持したいときに便利です。

長い path d="M10 20 L... Z" 文字列や完全な path tag を貼り付けて、グリッド上で可視化しつつ、length と command 数を確認できます。アイコン崩れのデバッグに便利です。

blur、grayscale、contrast などの CSS filter 関数をライブプレビュー付きで組み合わせられます。スライダー操作だけで filter: blur(2px) grayscale(100%); のような stack を作成し、そのままコピーできます。

カード向けの斜めコーナーリボン CSS を視覚的に生成できます。テキスト、色、offset、width、font size を調整し、sale、sold-out などのステータスバッジを作れます。

各 RGB channel を 255 から引いて色を反転します。元色と反転色を比較し、サンプルレイヤーをプレビューしながら、ダークテーマ検討向けの CSS 変数スニペットを出力できます。

柔らかいパステル調やモランディ風の配色をブラウザ内で生成できます。色数やスタイルを選び、残したい swatch をロックして、チャート、背景、やさしい UI テーマ向けに HEX 一覧や CSS 変数として書き出せます。

色覚特性を再現する matrix をサンプル画面に適用し、protanopia、deuteranopia、tritanopia、achromatopsia で UI の色がどう見えるかを確認できます。リリース前にコントラストやステータス色の問題を洗い出すのに役立ちます。

Canvas を使って画像をブラウザ内でローカルにリサイズ・再エンコードできます。最大サイズ、quality、出力形式を設定し、結果をダウンロードできます。元ファイルはブラウザ外へアップロードされません。

flex-direction、justify-content、align-items、wrap、gap をライブプレビュー付きで調整できます。box の追加・削除で折り返しや余白を確認し、生成された CSS と HTML scaffold をそのままプロジェクトへ持ち込めます。

列数、行数、gap を設定し、基本的な display:grid レイアウトを生成できます。track 構造をプレビューし、簡易テンプレートを試しながら、管理画面レイアウトやカードグリッド向けの CSS / HTML をコピーできます。

代表的な CSS cursor keyword を一覧し、hover で見た目を確認し、検索やカテゴリで絞り込みながら cursor 宣言をコピーできます。resize、drag、disabled 状態向けカーソル選定に便利です。

Tailwind CSS の配色スケール（50〜950 を含む）を 1 画面で確認できます。名前、スケール、HEX で検索し、utility class 名や生の HEX 値を CSS プロジェクト向けにコピーできます。

CSS 宣言を貼り付けると、可能な範囲で Tailwind utility class へ変換します。一般的な layout、spacing、color ルールは標準 class に変換し、対応しない値は arbitrary-value 構文へフォールバックします。

HTML スニペットをブラウザ内で React JSX に変換できます。class / for を className / htmlFor に置き換え、void tag を閉じ、inline style を可能な範囲で object 形式へ寄せます。変換処理はローカルで完結します。

ドキュメント、commit message、changelog でよく使う emoji を検索してコピーできます。keyword や category で絞り込み、status、progress、warning 系の記号を素早く見つけられます。

空白、通貨、数式、組版記号でよく使う HTML entity と numeric character reference を確認できます。名前付き形式と数値形式をコピーし、安全な source markup に使えます。

hash bit 長と sample size から、少なくとも 1 回 collision が起きる確率を誕生日のパラドックス近似で見積もります。短い ID や切り詰めた checksum の検討に便利で、計算はブラウザ内で完結します。

W3C / CSS の named color とその値を一覧できます。keyword や family で絞り込み、標準 color name や HEX をコピーして素の CSS 実装に使えます。

SVG markup を貼り付けると fill / stroke の色を抽出して編集可能な palette として表示し、変更内容をライブプレビューしながら更新後の SVG をコピーできます。icon の recolor や簡単な vector tint 調整向けです。

基準色を 1 つ選び、complementary、analogous、triadic、tetradic、split-complementary、monochromatic などのルールで配色を生成できます。UI 上で見え方を確認し、brand や component 向けの CSS variable として書き出せます。

width、height、padding、border、margin を調整し、live な box-model 図で確認できます。content-box と border-box の占有範囲を比較し、一致する CSS をそのままコピーできます。

ページ上に horizontal または vertical の pixel ruler を描画できます。長さや tick 間隔を調整し、window size と device pixel ratio を見ながら layout や mockup 上の CSS pixel を確認できます。

現在の window width がどの CSS framework breakpoint に当たるかをリアルタイムで確認できます。Tailwind CSS、Bootstrap、Material UI の preset と custom list を使い、responsive debugging に役立てられます。

色を入力すると、最も近い CSS named color 候補をブラウザ内で距離順に表示します。name と hex を一緒に確認できるため、keyword に寄せたいときや標準 color name を学ぶときに便利です。

2 枚の画像をブラウザ内で pixel 単位に比較できます。異なる pixel は赤で強調され、件数と割合も表示されるため、UI regression screenshot、デザイン差分確認、before / after review に便利です。画像はローカルのまま処理されます。

複数の前景色 / 背景色ペアをまとめて WCAG contrast 判定できます。AA / AAA レベルと text preview を同時に確認でき、design system 監査、brand color 一括確認、accessibility review に向いています。

四隅の control color を重ねた radial gradient と blur で、mesh 風のやわらかい background を生成し、CSS をコピーできます。landing page、brand visual、多色実験向けです。

color、opacity、blur、outline を調整し、backdrop-filter を使った frosted glass card の CSS を preview しながら生成できます。半透明 panel や nav layer の調整向けで、処理はすべてブラウザ内です。

background color、distance、blur から neumorphic な inset / outset shadow CSS を生成できます。button、card、light 系 soft UI control の raised / pressed 表現確認に向いています。

4 つの cubic-bezier control point を視覚的に編集し、easing curve を preview しながら transition / animation 用 timing function をコピーできます。button motion や page transition の調整に便利です。

columns、gap、item count から Tailwind Grid class を生成し、live preview で確認できます。card grid、prototype layout、column 数の素早い実験に向いています。

preset と簡単な control から CSS clip-path の shape を生成し、live preview で確認できます。angled card、badge、画像 crop、装飾 layout に便利です。

font file をブラウザ内で Base64 化し、そのまま埋め込める @font-face snippet を生成します。demo、email template、一時的に font を inline した single-file page などに便利で、file はローカルのままです。

画像内の dominant color をブラウザで抽出し、コピー可能な HEX palette を生成します。画像はアップロードされず、poster の色抽出、brand reference 収集、主要色の素早い分析に向いています。

向き・サイズ・色を選ぶだけで、border を使った純粋な CSS 三角形を生成。ライブプレビューとコピー可能なコード付き。

dots、stripes、checkers、grids などの pure CSS background pattern を生成できます。色とサイズを調整し、装飾 background、placeholder texture、見た目の試作向け CSS をコピーできます。

SVG comment、editor metadata、余分な whitespace をブラウザ内でローカル除去し、より短い markup へ整えます。icon 圧縮、書き出し後の cleanup、inline SVG の準備に便利です。これは軽量 cleaner であり、完全な SVGO plugin pipeline ではありません。

width、height、background、label text、font size から軽量な SVG placeholder を生成できます。prototype の image slot、list skeleton、loading placeholder に使いやすく、準備できたら SVG markup をそのままコピーできます。